@import url(https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap);
:root { color-scheme: dark; --bg:#080b10; --card:#11151d; --line:#232b38; --green:#28A90A; --red:#ff3b5c; --muted:#8993a4; }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; min-width:320px; overflow:hidden; background:var(--bg); color:#fff; font-family:'DM Sans',sans-serif; }
button { font:inherit; cursor:pointer; } .game-shell { max-width:1440px; margin:auto; padding:20px; }
.topbar,.topbar-actions,.history-strip,.section-heading,.amount-row,.cashout-row,.player-row { display:flex; align-items:center; }
.topbar { justify-content:space-between; gap:16px; } .brand-mark { font-weight:700; letter-spacing:.12em; } .brand-mark span { color:var(--green); margin-right:8px; }
.notice { margin-top:14px; padding:12px 16px; border:1px solid #7a5f22; border-radius:10px; background:#2d2514; color:#f4cf72; cursor:pointer; font-size:13px; }
.cashout-toast { display:flex; align-items:center; gap:16px; margin-top:10px; padding:10px 10px 10px 20px; border:1px solid #3f8a2c; border-radius:30px; background:#1e4a17; color:#c9d6c5; font-size:14px; }
.cashout-toast-info { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.cashout-toast-info strong { color:#fff; font-size:17px; }
.cashout-toast-badge { display:flex; align-items:center; gap:10px; margin-left:auto; padding:8px 18px; border-radius:24px; background:#2f6b23; white-space:nowrap; }
.cashout-toast-star { color:#8fd977; opacity:.6; font-size:15px; }
.cashout-toast-win { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.cashout-toast-win small { color:#c9e8bf; font-size:11px; font-weight:700; letter-spacing:.03em; }
.cashout-toast-win strong { color:#fff; font-size:18px; }
.cashout-toast-close { flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:14px; line-height:1; }
.cashout-toast-close:hover { background:rgba(255,255,255,.2); }
@media (max-width:520px) { .cashout-toast { flex-wrap:wrap; border-radius:16px; } .cashout-toast-badge { margin-left:0; } }
.auth-panel { max-width:420px; margin:20px auto 0; padding:20px; } .auth-panel p { margin:6px 0 0; color:var(--muted); font-size:13px; } .auth-panel label { display:block; margin-top:16px; color:var(--muted); font-size:12px; } .auth-panel input { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#0b1017; color:#fff; outline:none; } .auth-panel input:focus { border-color:var(--green); } .auth-error { color:var(--red) !important; } .auth-submit { width:100%; margin-top:18px; }
.topbar-actions { gap:18px; } .balance { text-align:right; } .balance small,.round-label,.muted { color:var(--muted); font-size:11px; letter-spacing:.08em; } .balance strong { display:block; margin-top:3px; }
.button,.avatar,.stepper button { border:1px solid var(--line); border-radius:10px; color:#fff; background:#171e29; } .button { padding:11px 16px; font-weight:700; } .button-primary { background:var(--green); color:#07140e; border-color:var(--green); } .avatar { width:38px; height:38px; border-radius:50%; }
.history-strip { gap:8px; overflow-x:auto; padding:24px 0 14px; scrollbar-width:none; } .history-pill { flex:0 0 auto; padding:7px 11px; border-radius:8px; color:var(--green); background:#0d2a20; font-size:12px; font-weight:700; } .history-pill.danger { color:var(--red); background:#2d151d; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr); gap:16px; } .card { background:var(--card); border:1px solid var(--line); border-radius:16px; } .flight-card { min-height:460px; padding:20px; }
.flight-stage { position:relative; display:grid; min-height:390px; place-items:center; overflow:hidden; } .flight-svg { position:absolute; inset:8% 0 0; width:100%; height:92%; overflow:visible; } .flight-line { fill:none; stroke:#6F0816; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 8px rgba(111,8,22,.9)); } .flight-fill { fill:url(#trailFill); stroke:none; } .craft-rig { position:absolute; z-index:2; width:clamp(170px,18vw,320px); pointer-events:none; will-change:left,top,transform,opacity; }
.lightcraft { display:block; width:100%; filter:drop-shadow(0 0 14px rgba(224,0,0,.95)); mix-blend-mode:screen; }
.craft-anchor { position:absolute; left:14%; top:78%; width:1px; height:1px; }
.multiplier { position:relative; font-size:clamp(54px,8vw,100px); font-weight:700; letter-spacing:-.06em; } .multiplier span { color:var(--green); font-size:.45em; margin-left:4px; } .flight-caption { position:absolute; bottom:26px; color:var(--muted); }
.bet-grid { display:grid; gap:16px; align-content:start; } .bet-panel { padding:20px; } .section-heading { justify-content:space-between; } .section-heading h2 { margin:0; font-size:15px; } .slot-badge { color:var(--muted); font-size:11px; }
.amount-row,.cashout-row { justify-content:space-between; margin:24px 0 12px; color:var(--muted); font-size:13px; } .amount-row strong,.cashout-row strong { color:#fff; } .stepper { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .stepper button { padding:9px 4px; color:var(--muted); font-size:12px; } .stepper button:hover { border-color:var(--green); color:#fff; } .button-bet { width:100%; margin-top:16px; background:var(--green); color:#06130d; border-color:var(--green); } .button-bet:disabled { cursor:not-allowed; opacity:.45; }
.live-card { margin-top:16px; padding:20px; } .live-indicator { color:var(--green); font-size:11px; } .player-row { justify-content:space-between; border-top:1px solid var(--line); padding:13px 0; font-size:13px; } .success { color:var(--green); }
@media (max-width:760px) { .game-shell { padding:14px; } .topbar-actions .button-primary { display:none; } .game-layout { grid-template-columns:1fr; } .flight-card { min-height:360px; } .flight-stage { min-height:290px; } .player-row { gap:8px; font-size:12px; } }

/* Skyline room layout inspired by the reference composition. */
.game-shell { max-width: 2048px; height: 100vh; padding: 8px; display:flex; flex-direction:column; overflow:hidden; }
.game-header { flex:0 0 auto; height: 48px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding:0 16px; background:#121416; border:1px solid #25292e; border-radius:14px 14px 0 0; }
.brand-mark { display:flex; align-items:center; }
.brand-icon { width:24px; height:18px; margin-right:8px; color:#ff3b3b; filter:drop-shadow(0 0 6px rgba(255,59,59,.5)); }
.round-label { opacity:.5; font-size:10px; }
.header-account { justify-self:end; display:flex; align-items:center; gap:6px; color:#c5cbd3; font-size:13px; }
.balance-amount { color:var(--green); font-weight:700; }
.balance-currency { margin-left:5px; margin-right:14px; color:#9aa1ab; font-size:12px; }
.menu-button { border:0; padding:6px; display:grid; place-items:center; color:#e7e9ec; background:transparent; border-radius:8px; }
.menu-button:hover { background:#1c2028; }
.account-mode { color:#8993a4; font-size:9px; letter-spacing:.08em; margin-right:6px; }.header-action { border:1px solid #39424d; border-radius:8px; padding:6px 9px; color:#d9dee5; background:#1a2028; font-size:11px; }.header-action:hover { border-color:var(--green); }
.auth-dialog-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.72); }.auth-dialog-backdrop .auth-panel { width:min(420px,100%); max-height:calc(100vh - 40px); margin:0; overflow:auto; box-shadow:0 18px 70px rgba(0,0,0,.65); }
.drawer-backdrop { position:fixed; z-index:25; inset:0; background:rgba(0,0,0,.42); }.right-drawer { position:absolute; top:0; right:0; width:min(410px,92vw); height:100%; overflow:auto; color:#f2f3f5; background:#1b1d1f; box-shadow:-12px 0 40px rgba(0,0,0,.5); }.drawer-user { display:flex; align-items:center; gap:14px; min-height:120px; padding:18px 20px; background:#2b2d31; font-size:22px; }.drawer-avatar { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#697a92,#2d3542); font-size:28px; }.drawer-avatar-button { margin-left:auto; padding:13px 14px; border:1px solid #555860; border-radius:28px; color:#9da1aa; background:transparent; font-size:14px; }.drawer-toggle,.drawer-link { width:100%; min-height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border:0; border-bottom:2px solid #343639; color:#f1f2f4; background:transparent; text-align:left; font-size:20px; }.drawer-toggle i { width:72px; height:42px; border-radius:24px; background:#111315; position:relative; }.drawer-toggle i:after { content:''; position:absolute; top:6px; left:8px; width:30px; height:30px; border-radius:50%; background:#34373d; transition:.2s; }.drawer-toggle i.on:after { left:34px; background:#b9bbc0; }.drawer-separator { height:40px; background:#2b2d31; }.drawer-link { justify-content:flex-start; color:#f0f1f3; }.drawer-link:hover { background:#25282b; }.drawer-logout { width:calc(100% - 40px); margin:20px; padding:13px; border:1px solid #71333a; border-radius:9px; color:#ff8b91; background:#2d171a; font-size:14px; }
.demo-banner { max-width:600px; margin:10px auto 0; padding:9px 14px; border:1px solid #604b22; border-radius:9px; color:#e7c66f; background:#241e12; text-align:center; font-size:12px; }.auth-tabs { display:flex; gap:8px; margin-top:18px; }.auth-tabs button { flex:1; padding:9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#0b1017; }.auth-tabs button.active { color:#fff; border-color:var(--green); }
.account-card { position:absolute; z-index:10; top:70px; right:20px; width:min(620px,calc(100% - 40px)); padding:20px; box-shadow:0 14px 50px #000; }.account-card-head { display:flex; align-items:center; justify-content:space-between; }.account-card h2 { margin:0; font-size:18px; }.account-card h3 { margin:0 0 12px; font-size:14px; }.close-button { border:0; color:#fff; background:transparent; font-size:24px; }.account-forms { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.account-forms form,.profile-form { display:flex; flex-direction:column; gap:10px; }.account-card input { padding:11px; border:1px solid var(--line); border-radius:8px; color:#fff; background:#0b1017; }.profile-form { max-width:420px; margin-top:16px; }.account-card .button { margin-top:4px; } @media(max-width:600px){.account-forms{grid-template-columns:1fr;}.account-mode{display:none;}.header-action{font-size:10px;padding:5px;}}
.room-layout { flex:1; min-height:0; display:grid; grid-template-columns:480px minmax(0,1fr); gap:0; overflow:hidden; }
.room-main { min-width:0; height:100%; display:flex; flex-direction:column; min-height:0; }
.stage-block { display:flex; flex-direction:column; flex:1; min-height:0; border-left:1px solid #24272b; }
.bets-rail { height:100%; display:flex; flex-direction:column; min-height:0; position:relative; overflow:hidden; background:#181a1c; border-radius:0 0 0 14px; }
.rail-tabs { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:8px; background:#121416; border-radius:14px; }
.rail-tabs button { border:0; border-radius:22px; padding:10px 4px; color:#888d94; background:transparent; font-size:14px; }.rail-tabs button.active { color:#f6f7f8; background:#2c2e33; }
.rail-summary { flex:0 0 auto; padding:16px 18px 18px; border-bottom:1px solid #24272b; }
.rail-summary-top { display:flex; align-items:center; justify-content:space-between; }
.rail-summary-top strong { font-size:28px; }
.rail-summary span { display:block; padding-top:10px; color:#8a9098; font-size:13px; }
.player-stack { display:inline-flex; align-items:center; }.player-stack i { display:block; width:32px; height:32px; margin-right:-7px; border:2px solid #181a1c; border-radius:50%; background:linear-gradient(135deg,#3aa9ff,#a765ff); }
.rail-bets-count { margin-left:14px; color:#8a9098; font-size:12px; }
.rail-progress { height:4px; margin-top:14px; border-radius:2px; background:#24272b; overflow:hidden; }
.rail-progress i { display:block; height:100%; width:32%; border-radius:2px; background:linear-gradient(90deg,#1f8f0a,#28A90A); }
.rail-heading { flex:0 0 auto; display:grid; grid-template-columns:1.4fr .9fr .6fr .9fr; gap:6px; padding:14px 18px; color:#80868e; font-size:12px; border-bottom:1px solid #24272b; }
.rail-list { flex:1; min-height:0; overflow-y:auto; }
.bet-row { display:grid; grid-template-columns:1.4fr .9fr .6fr .9fr; gap:6px; align-items:center; padding:12px 18px; font-size:13px; color:#d7dade; border-bottom:1px solid #1f2226; }
.bet-row.is-win { background:rgba(40,169,10,.12); }
.bet-player { display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bet-avatar { display:block; width:26px; height:26px; flex:0 0 auto; border-radius:50%; }
.bet-mult { font-weight:700; }
.rail-empty { padding:80px 20px; text-align:center; color:#555b63; font-size:13px; }
.rail-footer { flex:0 0 auto; display:flex; justify-content:space-between; padding:10px 18px; color:#9aa0a7; font-size:11px; border-top:1px solid #24272b; }
.rail-footer span { color:#777d85; }
.history-strip { min-width:0; min-height:76px; margin:0; padding:8px 34px; background:#16181c; border-radius:0; }.history-pill { flex:0 0 auto; background:transparent; font-size:14px; font-weight:700; letter-spacing:.01em; }.history-blue { color:#3aa9ff; }.history-purple { color:#a765ff; }.history-pink { color:#ed45c2; }.history-gold { color:#ffc24b; }.history-empty { color:#69717c; font-size:12px; }.more-button { margin-left:auto; border:0; border-radius:50%; padding:7px 11px; color:#b7bbc1; background:#303338; }
.flight-card { position:relative; min-height:0; height:auto; padding:0; border-radius:0 0 14px 0; background:#050607; flex:1; display:flex; }
.flight-stage { min-height:140px; flex:1; background:repeating-conic-gradient(from -90deg at 0% 100%,rgba(255,255,255,.06) 0deg 3deg,transparent 3deg 9deg),radial-gradient(ellipse at 62% 38%,rgba(122,62,175,.55),transparent 55%),radial-gradient(ellipse at 12% 92%,rgba(20,55,85,.35),transparent 60%),#050607; }
.flight-svg { inset:5% 4% 0 0; }.multiplier { font-size:clamp(60px,9vw,132px); text-shadow:0 0 22px rgba(255,255,255,.2); }.multiplier span { color:#fff; font-size:.42em; margin-left:3px; opacity:.92; }.flight-caption { bottom:24px; font-size:13px; }
.multiplier.crashed,.multiplier.crashed span { color:#ff3b3b; text-shadow:0 0 22px rgba(255,59,59,.45); }
.crash-heading { position:absolute; top:10%; left:50%; transform:translateX(-50%); width:100%; text-align:center; font-size:clamp(22px,3.4vw,40px); font-weight:800; letter-spacing:.03em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55); z-index:3; }
.viewers-badge { position:absolute; right:16px; bottom:14px; display:flex; }.viewers-badge i { display:block; width:22px; height:22px; margin-right:-8px; border:2px solid #050607; border-radius:50%; background:linear-gradient(135deg,#ed45c2,#a765ff); opacity:.85; }
.bet-grid { position:relative; flex:0 0 auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.bet-panel { display:grid; grid-template-columns:1fr 1.5fr; grid-template-rows:auto auto 1fr; gap:8px 16px; padding:16px 22px; border-radius:16px; border:1px solid rgba(255,255,255,.09); }
.auto-cashout-row { grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:space-between; padding:0 2px; color:var(--muted); font-size:12px; }
.auto-cashout-stepper { display:flex; align-items:center; gap:8px; font-weight:700; color:#fff; }
.auto-cashout-stepper button { border:0; background:transparent; color:#c9cdd3; font-size:15px; line-height:1; padding:2px 4px; }
.auto-cashout-stepper button:hover { color:#fff; }
.auto-cashout-stepper button:disabled { opacity:.4; cursor:not-allowed; }
.stake-stepper { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:12px; background:#1c1f24; }
.stake-stepper button { border:0; background:transparent; color:#c9cdd3; font-size:20px; line-height:1; padding:2px 6px; }
.stake-stepper button:hover { color:#fff; }
.stake-stepper button:disabled { opacity:.4; cursor:not-allowed; }
.stake-value { font-size:24px; font-weight:700; }
.quick-amounts { grid-column:1; grid-row:3; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.quick-amounts button { border:0; border-radius:9px; padding:9px 4px; color:#c9cdd3; background:#20232a; font-size:13px; font-weight:700; }
.quick-amounts button:hover { color:#fff; background:#282c34; }
.quick-amounts button:disabled { opacity:.4; cursor:not-allowed; }
.button-bet { grid-column:2; grid-row:1 / span 3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%; min-height:90px; margin:0; background:var(--green); color:#fff; border:2px solid #7bdb56; box-shadow:0 0 16px rgba(40,169,10,.4); }
.button-bet .bet-label { font-size:22px; font-weight:400; }
.button-bet .bet-amount-value { font-size:15px; font-weight:700; }
.button-bet .bet-amount-currency { font-size:12px; font-weight:400; color:rgba(255,255,255,.75); }
.button-bet:disabled { cursor:not-allowed; opacity:.45; }
.button-cashout { background:#e2a01a; border-color:#ffcf5c; box-shadow:0 0 16px rgba(226,160,26,.45); color:#241a00; }
.button-cashout .bet-amount-currency { color:rgba(36,26,0,.7); }
.button-queued { background:#c0392b; border-color:#ff6b5c; box-shadow:0 0 16px rgba(192,57,43,.4); color:#fff; }
.button-queued .bet-amount-currency { color:rgba(255,255,255,.8); font-size:12px; }
.button-lost { background:#ff3b3b; border-color:#ff6b5c; box-shadow:0 0 16px rgba(255,59,59,.4); }
.button-lost .bet-amount-currency { color:rgba(255,255,255,.75); }
.panel-remove { position:absolute; top:-15px; right:10px; width:30px; height:30px; border:1px solid #2c2f35; border-radius:10px; color:#c9cdd3; background:#20232a; font-size:16px; line-height:1; }
@media (max-width:900px) {
    body { overflow:auto; }
    .game-shell { height:auto; min-height:100vh; overflow:visible; }
    .room-layout { flex:none; display:flex; flex-direction:column; overflow:visible; }
    .room-main { order:1; height:auto; }
    .stage-block { border-left:0; flex:none; }
    .flight-stage { min-height:320px; }
    .bets-rail { order:2; height:440px; display:flex; border-radius:0 0 14px 14px; }
    .game-header { grid-template-columns:1fr auto; }
    .game-header > .round-label { display:none; }
    .bet-grid { grid-template-columns:1fr; }
    .button-bet .bet-label { font-size:18px; }
}
@media (max-width:520px) { .game-shell { padding:0; }.game-header { border-radius:0; }.balance-currency,.round-label { display:none; }.flight-stage { min-height:280px; }.bets-rail { border-radius:0; }.bet-panel { grid-template-columns:1fr 1fr; padding:14px; }.button-bet .bet-label { font-size:16px; } }