/* AnomicFlip — Crash (/crash). Shares the page shell (.cf, .cf-side, .cf-bar…) with coinflip.css and some roulette.css bits. */
.cr-game { grid-template-columns: 400px minmax(0, 1fr); }
.cr-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 22px 22px; }
/* history chips shrink/clip; the Stats + Provably Fair buttons always keep their size */
.cr-main .rl-top { min-width: 0; }
.cr-main .rl-top .cf-tbtn { flex: none; white-space: nowrap; }
.cr-opt { font-size: 14px; font-weight: 500; color: #8b8f97; }
.cr-auto-in { display: flex; height: 60px; border-radius: 8px; border: 2px solid #2a2d33; background: #111315; overflow: hidden; }
.cr-auto-in:focus-within { border-color: #3fd68f; }
.cr-auto-in input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: none; outline: none; color: #fff; font: 600 19px 'Archivo', system-ui, sans-serif; }
.cr-auto-in input::placeholder { color: #6b7078; }
.cr-auto-in button { width: 48px; border: 0; border-left: 1px solid #2a2d33; background: none; color: #8b8f97; font-size: 20px; cursor: pointer; }
.cr-auto-in button:hover { color: #fff; }
.cf-go.cash { background: #f5c84a; color: #1a1300; display: grid; place-content: center; gap: 2px; line-height: 1.1; }
.cf-go.cash:hover:not(:disabled) { background: #ffd65e; }
.cf-go.cash small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; }
.cf-go.cash small span { opacity: .8; }
.cf-go.cash .cf-coin-ic { width: 13px; height: 17px; vertical-align: 0; filter: brightness(0); opacity: .75; } /* dark icon on the yellow button */

/* history */
.cr-hist { flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; }
.cr-h { flex: none; height: 38px; padding: 0 12px; border-radius: 8px; display: grid; place-items: center; background: #24272c; color: #c9ccd1; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.cr-h.green { color: #3fd68f; } .cr-h.gold { color: #f5c84a; }
.cr-h.last { background: #2e3238; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* stage with the torn desert picture */
.cr-stage { position: relative; min-height: 600px; border-radius: 12px; overflow: hidden; background: #15181b; }
.cr-bg { position: absolute; inset: 0; pointer-events: none; }
.cr-bg i { position: absolute; display: block; }
.cr-bg .paper { inset: 6px; background: #d8d0bf; opacity: .18; clip-path: polygon(0.00% 1.09%, 2.50% 1.34%, 5.00% 2.22%, 7.50% 1.12%, 10.00% 1.22%, 12.50% 1.41%, 15.00% 0.44%, 17.50% 1.23%, 20.00% 1.51%, 22.50% 1.90%, 25.00% 0.23%, 27.50% 0.73%, 30.00% 0.22%, 32.50% 1.94%, 35.00% 1.66%, 37.50% 0.10%, 40.00% 2.36%, 42.50% 2.32%, 45.00% 1.57%, 47.50% 1.48%, 50.00% 0.38%, 52.50% 0.04%, 55.00% 1.27%, 57.50% 0.14%, 60.00% 0.46%, 62.50% 0.58%, 65.00% 0.07%, 67.50% 1.11%, 70.00% 1.06%, 72.50% 2.02%, 75.00% 1.25%, 77.50% 1.54%, 80.00% 1.20%, 82.50% 1.59%, 85.00% 1.10%, 87.50% 0.67%, 90.00% 2.39%, 92.50% 2.39%, 95.00% 2.02%, 97.50% 1.70%, 100.00% 0.76%, 99.67% 2.50%, 99.58% 5.00%, 99.90% 7.50%, 98.90% 10.00%, 99.42% 12.50%, 98.78% 15.00%, 99.44% 17.50%, 98.62% 20.00%, 98.78% 22.50%, 100.00% 25.00%, 99.70% 27.50%, 98.69% 30.00%, 99.32% 32.50%, 98.59% 35.00%, 99.43% 37.50%, 99.89% 40.00%, 99.09% 42.50%, 98.88% 45.00%, 99.61% 47.50%, 99.87% 50.00%, 99.52% 52.50%, 98.61% 55.00%, 98.91% 57.50%, 99.83% 60.00%, 99.65% 62.50%, 99.85% 65.00%, 99.91% 67.50%, 98.85% 70.00%, 99.74% 72.50%, 99.19% 75.00%, 99.36% 77.50%, 99.73% 80.00%, 98.95% 82.50%, 99.81% 85.00%, 99.07% 87.50%, 99.83% 90.00%, 99.39% 92.50%, 99.69% 95.00%, 99.61% 97.50%, 100.00% 97.67%, 97.50% 98.07%, 95.00% 99.27%, 92.50% 97.88%, 90.00% 99.49%, 87.50% 99.05%, 85.00% 97.95%, 82.50% 98.46%, 80.00% 99.76%, 77.50% 97.63%, 75.00% 99.49%, 72.50% 99.38%, 70.00% 98.15%, 67.50% 99.21%, 65.00% 99.29%, 62.50% 99.82%, 60.00% 99.78%, 57.50% 98.60%, 55.00% 99.42%, 52.50% 98.56%, 50.00% 99.11%, 47.50% 98.91%, 45.00% 97.70%, 42.50% 98.84%, 40.00% 98.62%, 37.50% 97.92%, 35.00% 99.56%, 32.50% 99.63%, 30.00% 97.82%, 27.50% 98.04%, 25.00% 99.40%, 22.50% 99.54%, 20.00% 98.23%, 17.50% 97.74%, 15.00% 99.53%, 12.50% 97.72%, 10.00% 97.88%, 7.50% 98.55%, 5.00% 98.99%, 2.50% 99.75%, 0.00% 99.91%, 1.39% 97.50%, 0.34% 95.00%, 1.01% 92.50%, 0.37% 90.00%, 1.19% 87.50%, 0.86% 85.00%, 0.42% 82.50%, 0.25% 80.00%, 1.04% 77.50%, 0.10% 75.00%, 0.33% 72.50%, 0.81% 70.00%, 1.23% 67.50%, 0.88% 65.00%, 0.40% 62.50%, 1.32% 60.00%, 0.29% 57.50%, 0.02% 55.00%, 0.39% 52.50%, 0.64% 50.00%, 0.09% 47.50%, 0.25% 45.00%, 0.53% 42.50%, 0.82% 40.00%, 0.19% 37.50%, 0.52% 35.00%, 1.28% 32.50%, 1.41% 30.00%, 0.95% 27.50%, 1.00% 25.00%, 0.84% 22.50%, 0.20% 20.00%, 0.05% 17.50%, 0.03% 15.00%, 1.31% 12.50%, 1.01% 10.00%, 1.39% 7.50%, 0.03% 5.00%, 0.92% 2.50%); }
.cr-bg .photo { inset: 12px; background: linear-gradient(180deg, rgba(10,14,22,.15), rgba(10,14,22,.55)), url('/crash-bg.webp') center / cover no-repeat; clip-path: polygon(0.00% 1.54%, 2.50% 2.34%, 5.00% 1.02%, 7.50% 3.20%, 10.00% 0.24%, 12.50% 1.75%, 15.00% 2.36%, 17.50% 2.88%, 20.00% 2.36%, 22.50% 2.25%, 25.00% 2.54%, 27.50% 2.93%, 30.00% 1.13%, 32.50% 2.19%, 35.00% 2.88%, 37.50% 2.79%, 40.00% 1.33%, 42.50% 2.53%, 45.00% 2.76%, 47.50% 1.83%, 50.00% 2.00%, 52.50% 1.22%, 55.00% 1.86%, 57.50% 1.95%, 60.00% 0.26%, 62.50% 2.05%, 65.00% 3.18%, 67.50% 2.82%, 70.00% 2.33%, 72.50% 1.24%, 75.00% 2.35%, 77.50% 1.86%, 80.00% 1.41%, 82.50% 2.68%, 85.00% 0.27%, 87.50% 2.40%, 90.00% 0.10%, 92.50% 1.92%, 95.00% 1.54%, 97.50% 0.74%, 100.00% 2.23%, 99.05% 2.50%, 98.82% 5.00%, 98.23% 7.50%, 99.51% 10.00%, 99.98% 12.50%, 99.42% 15.00%, 98.70% 17.50%, 99.61% 20.00%, 99.67% 22.50%, 98.26% 25.00%, 98.73% 27.50%, 99.15% 30.00%, 98.29% 32.50%, 99.37% 35.00%, 98.72% 37.50%, 99.62% 40.00%, 99.17% 42.50%, 98.45% 45.00%, 98.24% 47.50%, 98.31% 50.00%, 99.26% 52.50%, 98.88% 55.00%, 99.39% 57.50%, 99.74% 60.00%, 99.05% 62.50%, 98.39% 65.00%, 98.37% 67.50%, 98.63% 70.00%, 98.18% 72.50%, 99.47% 75.00%, 99.68% 77.50%, 99.13% 80.00%, 99.47% 82.50%, 99.59% 85.00%, 99.21% 87.50%, 98.80% 90.00%, 99.05% 92.50%, 99.39% 95.00%, 98.39% 97.50%, 100.00% 96.86%, 97.50% 98.55%, 95.00% 99.76%, 92.50% 99.90%, 90.00% 97.21%, 87.50% 99.87%, 85.00% 97.73%, 82.50% 98.17%, 80.00% 99.01%, 77.50% 97.47%, 75.00% 99.94%, 72.50% 99.57%, 70.00% 98.54%, 67.50% 99.92%, 65.00% 97.35%, 62.50% 99.24%, 60.00% 99.55%, 57.50% 99.85%, 55.00% 97.99%, 52.50% 98.57%, 50.00% 97.98%, 47.50% 97.90%, 45.00% 97.42%, 42.50% 96.93%, 40.00% 97.81%, 37.50% 99.36%, 35.00% 98.48%, 32.50% 99.43%, 30.00% 99.97%, 27.50% 98.49%, 25.00% 97.71%, 22.50% 99.43%, 20.00% 99.13%, 17.50% 98.89%, 15.00% 97.77%, 12.50% 98.33%, 10.00% 98.03%, 7.50% 97.58%, 5.00% 98.74%, 2.50% 97.47%, 0.00% 97.10%, 0.17% 97.50%, 1.79% 95.00%, 1.39% 92.50%, 0.25% 90.00%, 0.87% 87.50%, 1.20% 85.00%, 1.75% 82.50%, 0.72% 80.00%, 1.09% 77.50%, 1.69% 75.00%, 1.53% 72.50%, 1.81% 70.00%, 0.89% 67.50%, 1.25% 65.00%, 0.39% 62.50%, 1.39% 60.00%, 1.57% 57.50%, 1.23% 55.00%, 1.38% 52.50%, 0.41% 50.00%, 1.73% 47.50%, 1.88% 45.00%, 1.88% 42.50%, 1.03% 40.00%, 1.52% 37.50%, 0.62% 35.00%, 1.75% 32.50%, 1.64% 30.00%, 0.67% 27.50%, 0.16% 25.00%, 0.85% 22.50%, 1.06% 20.00%, 1.48% 17.50%, 0.94% 15.00%, 0.05% 12.50%, 1.55% 10.00%, 0.12% 7.50%, 1.54% 5.00%, 0.33% 2.50%); }
.cr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cr-mult { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: clamp(48px, 7vw, 96px); font-weight: 800; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; pointer-events: none; text-align: center; line-height: 1; }
.cr-mult small { display: block; font-size: .3em; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.cr-mult.crashed { color: #ff4d5e; }
.cr-wait { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; min-width: 280px; padding: 18px 24px; border-radius: 12px; background: rgba(21,24,27,.92); border: 1px solid #2e3238; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.cr-wait[hidden] { display: none; }
.cr-wait b { font-size: 21px; }
.cr-wait span { color: #a7abb2; font-size: 16px; font-variant-numeric: tabular-nums; }
.cr-wait i { display: block; width: 100%; height: 6px; border-radius: 99px; background: #2a2d33; overflow: hidden; }
.cr-wait em { display: block; height: 100%; width: 0; background: #3fbf7f; }

/* players */
.cr-players { padding: 16px 18px; border-radius: 12px; background: #1a1d20; display: grid; gap: 12px; }
.cr-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-ph h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.cr-ptotal { display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 8px; background: #111315; color: #a7abb2; font-size: 15px; }
.cr-ptotal b { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.cr-plist { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; }
.cr-p { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 8px; background: #24272c; font-size: 15px; color: #e6e8eb; font-variant-numeric: tabular-nums; animation: cf-row-in .25s ease-out; }
.cr-p button, .cr-p .hid { max-width: 140px; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-p .hid { color: #6b7078; font-style: italic; cursor: default; }
.cr-p em { font-style: normal; font-weight: 800; }
.cr-p b { display: inline-flex; align-items: center; gap: 5px; }
.cr-p .y { color: #f5c84a; } .cr-p .w { color: #3fd68f; } .cr-p .l { color: #ff5c6c; }

@media (max-width: 1100px) { .cr-game { grid-template-columns: minmax(0, 1fr); } .cr-stage { min-height: 420px; } }
@media (max-width: 600px) { .cr-main { padding: 14px 10px; } .cr-stage { min-height: 320px; } .cr-wait { min-width: 0; width: calc(100% - 32px); } }
