/* crash: owned by its rebuild. All stage classes are cr-* so legacy .crash-* rules in games.css never apply. */
.cr-stage{--hl:84px;--ht:68px;--mf:72px;background:#081330;user-select:none}
.cr-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* top bar: recent crash points (left) + your participation (right) */
.cr-top{position:absolute;top:12px;left:14px;right:14px;display:flex;align-items:center;gap:10px;z-index:4;pointer-events:none;height:30px}
.cr-hist{flex:1;min-width:0;display:flex;gap:6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.cr-hist span{flex:none;font-size:12.5px;font-weight:800;line-height:1;padding:7px 10px;border-radius:99px;background:#0a1631d9;border:1px solid #ffffff14;font-variant-numeric:tabular-nums}
.cr-hist span.l{color:#ff8b9e}.cr-hist span.w{color:#4fe3a6}.cr-hist span.g{color:var(--gold)}
.cr-hist span:first-child{border-color:#ffffff38}
.cr-hist span.new{animation:cr-in .35s cubic-bezier(.2,.9,.3,1.1)}
.cr-hist em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--dim);padding:7px 2px}
@keyframes cr-in{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
.cr-you{flex:none;display:none;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;font-size:13.5px;font-weight:600;color:#dbe6ff;
  background:#0a1631e6;border:1px solid var(--border);white-space:nowrap}
.cr-you .ic{width:16px;height:16px}
.cr-you b{font-weight:800;color:#fff}
.cr-you.in,.cr-you.queued{display:flex}
.cr-you.in{border-color:#4a80ff88}.cr-you.in .ic{color:var(--accent-hi)}
.cr-you.queued{border-color:#ffc94a66}.cr-you.queued .ic{color:var(--gold)}

/* live multiplier: upper-left of the plot, the region the convex curve never enters */
.cr-hud{position:absolute;left:var(--hl);top:var(--ht);z-index:3;pointer-events:none;text-shadow:0 2px 14px #050b1f,0 0 2px #050b1f}
.cr-phase{height:20px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b9c8e8}
.cr-mult{font-size:var(--mf);line-height:1;height:calc(var(--mf) * 1.04);font-weight:800;letter-spacing:-.025em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-sub{margin-top:8px;height:22px;font-size:16px;font-weight:700;color:var(--muted);white-space:nowrap}
.cr-sub.live{color:var(--win)}
.cr-stage[data-phase^="flight"] .cr-mult{transition:color .3s}
.cr-stage[data-phase="flight t2"] .cr-mult{color:#bfeaff}
.cr-stage[data-phase="flight t3"] .cr-mult{color:var(--gold)}
.cr-stage[data-phase="crashed"] .cr-mult{color:var(--lose)}
.cr-stage[data-phase="crashed"] .cr-phase{color:#ff9fb0}
.cr-stage[data-phase="countdown"] .cr-hud{visibility:hidden}

/* betting countdown: its own centred panel, only during the countdown */
.cr-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);z-index:3;width:280px;padding:16px 22px 18px;text-align:center;border-radius:16px;
  background:#0a1631e0;border:1px solid #2a4b7d;box-shadow:0 18px 40px -18px #000;opacity:0;visibility:hidden;pointer-events:none}
.cr-stage[data-phase="countdown"] .cr-count{opacity:1;visibility:visible;transition:opacity .2s}
.cr-cl{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.cr-cn{font-size:52px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:2px 0 10px;font-variant-numeric:tabular-nums}
.cr-cn small{font-size:.5em;margin-left:2px;color:var(--muted)}
.cr-bar{height:6px;border-radius:99px;background:#ffffff16;overflow:hidden}
.cr-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:inherit}
.cr-cs{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* shared result pill sits in the HUD's sub-line slot, under the multiplier */
.cr-stage .outcome{left:var(--hl);top:calc(var(--ht) + 20px + var(--mf) * 1.04 + 6px);bottom:auto;transform:translateY(8px);font-size:16px;padding:8px 16px 8px 10px}
.cr-stage .outcome.on{transform:none}
.cr-stage .outcome .det{font-size:13.5px}

/* controls */
#crash-btn .sub{opacity:.75;font-weight:600;margin-left:4px}
#crash-btn.win:disabled{opacity:.92}
#crash-btn span.tnum{font-variant-numeric:tabular-nums}
.cr-ctrl .cr-key{display:inline-block;font-size:12px;font-weight:700;padding:0 6px;border-radius:4px;border:1px solid var(--border);color:var(--muted)}

@media (max-width:900px){
  .cr-stage{--hl:54px;--ht:56px;--mf:46px}
  .cr-phase{font-size:11.5px;height:17px}
  .cr-sub{font-size:14px;margin-top:5px}
  .cr-top{top:10px;left:10px;right:10px;height:28px;gap:8px}
  .cr-hist span{font-size:11.5px;padding:6px 8px}
  .cr-you{font-size:12px;height:28px;padding:0 10px}
  .cr-count{width:240px;padding:12px 16px 14px}
  .cr-cn{font-size:40px;margin-bottom:8px}
  .cr-stage .outcome{top:calc(var(--ht) + 17px + var(--mf) * 1.04 + 4px);font-size:14.5px;gap:8px;padding:6px 12px 6px 8px}
  .cr-stage .outcome .det{display:none}
}
@media (max-width:560px){
  .cr-you > span{max-width:170px;overflow:hidden;text-overflow:ellipsis}
}
.cr-you .cr-a{font-style:normal}
@media (max-width:560px){ .cr-you .cr-a{display:none} }

/* Secured win receipt and a short, quiet sweep over the card. */
.cr-receipt{position:absolute;left:var(--hl);top:calc(var(--ht) + 20px + var(--mf) * 1.04 + 6px);z-index:5;display:flex;align-items:center;gap:12px;padding:13px 20px 13px 13px;border:1px solid #54edb878;border-radius:14px;background:linear-gradient(120deg,#103d3d,#102a36 80%);box-shadow:0 10px 30px #0004,inset 0 1px #b8ffe51a;pointer-events:none;overflow:hidden}
.cr-receipt[hidden]{display:none}.cr-receipt-check{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#45e4a5;color:#062d29;box-shadow:0 0 22px #45e4a51f}.cr-receipt-check .ic{width:23px;height:23px}.cr-receipt small{display:flex;gap:16px;justify-content:space-between;color:#a4cecf;font-size:10px;letter-spacing:.09em;font-weight:800}.cr-receipt small b{color:#d2fff0}.cr-receipt strong{display:block;color:#71f6bf;font-size:27px;margin-top:3px;line-height:1.15}.cr-stage:has(.cr-receipt:not([hidden])) .outcome{visibility:hidden}
@media(max-width:900px){.cr-receipt{top:calc(var(--ht) + 17px + var(--mf) * 1.04 + 4px);padding:10px 14px 10px 10px;gap:9px}.cr-receipt strong{font-size:22px}.cr-receipt-check{width:31px;height:31px}}