*,::after,::before{box-sizing:border-box}*{margin:0;padding:0}
html,body{height:100%}
html{font-size:min(4.5px + 5.5*(100vw - 375px)/1545,10px)}
body{font-family:'Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:800;background:#080c22;color:#fff;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;vertical-align:middle}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;background:radial-gradient(60% 50% at 50% 40%,#222a63 0%,#080c22 100%);height:calc(100dvh + 2px)}
.loader.is--loaded{display:none}
.loader__logo{width:100%;max-width:290px;margin-bottom:35px}
.loader__bar{position:relative;width:100%;max-width:220px;height:28px;padding:4px;border-radius:100px;background:#f00000}
.loader__bar::before{position:absolute;content:'';left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:100px;background:#fff}
.loader__line{position:relative;z-index:2;width:0;height:100%;border-radius:100px;background:linear-gradient(90deg,#29c839 0%,#6cfc69 100%);transition:width .5s ease}

/* ---------- shell ---------- */
.crash{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.6em;width:100%;max-width:83em;height:100dvh;margin:0 auto;padding:2.2em 2.4em calc(2.2em + env(safe-area-inset-bottom))}
.crash__bg{position:fixed;inset:0;z-index:0;background:#080c22 center/cover no-repeat;filter:blur(14px) brightness(.45);transform:scale(1.08)}
.crash__top{display:flex;align-items:center;justify-content:space-between;gap:2em;flex:0 0 auto}
.crash__logo{width:34em;height:auto}
.crash__mute{display:grid;place-items:center;width:10em;height:10em;border-radius:50%;background:rgba(255,255,255,.09);border:.3em solid rgba(255,255,255,.16)}
.crash__mute-ico{position:relative;width:2.6em;height:2em;background:#fff;clip-path:polygon(0 30%,32% 30%,68% 0,68% 100%,32% 70%,0 70%)}
.crash__mute-wave{position:absolute;left:3.4em;top:50%;width:1.9em;height:1.9em;margin-top:-.95em;border:.35em solid #fff;border-radius:50%;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
.crash__mute.is--muted{background:rgba(255,255,255,.05)}
.crash__mute.is--muted .crash__mute-ico{opacity:.4}
.crash__mute.is--muted .crash__mute-wave{opacity:0}
.crash__mute.is--muted::after{content:'';position:absolute;width:5em;height:.4em;background:#ff5b5b;transform:rotate(-45deg)}
.crash__mute{position:relative}

/* ---------- stage ---------- */
.crash__stage{position:relative;flex:1 1 auto;min-height:0;border-radius:3.4em;overflow:hidden;background:#0d1230 center bottom/cover no-repeat;box-shadow:inset 0 0 0 .3em rgba(255,255,255,.1),0 2em 5em rgba(0,0,0,.5)}
.crash__stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,34,.55) 0%,rgba(8,12,34,0) 30%,rgba(8,12,34,.35) 100%)}
.crash__curve{position:absolute;inset:0;width:100%;height:100%}
.crash__curve path{transition:none}
.crash__flight{position:absolute;z-index:2;left:10%;bottom:10%;transform:translate(-50%,50%) rotate(20deg);will-change:left,bottom,transform}
.crash__rocket{display:block;width:13em;height:auto;animation:rocketBob 1.1s ease-in-out infinite}
.crash__trail{position:absolute;left:50%;top:82%;width:8em;height:22em;transform:translateX(-50%);opacity:0;transition:opacity .3s ease;z-index:-1}
.crash.is--flying .crash__trail{opacity:1;animation:trailFlicker .22s steps(2) infinite}
.crash__stage.is--shaking{animation:stageShake .12s linear infinite}
.crash__flight.is--wobble .crash__rocket{animation:rocketBob 1.1s ease-in-out infinite,rocketWobble .16s linear infinite}
.crash__boom{position:absolute;z-index:2;left:50%;bottom:50%;width:26em;height:auto;transform:translate(-50%,50%) scale(.2);opacity:0;pointer-events:none}
.crash__boom.is--on{animation:boomIn .7s cubic-bezier(.2,.8,.3,1) forwards}

.crash__center{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;pointer-events:none}
.crash__multi{text-align:center;font-size:13em;line-height:1;letter-spacing:-.02em;text-shadow:0 .06em 0 rgba(0,0,0,.55),0 0 .5em rgba(120,180,255,.45);transition:color .2s ease}
.crash__multi.is--win{color:#6cfc69;text-shadow:0 .06em 0 rgba(0,0,0,.55),0 0 .6em rgba(108,252,105,.6)}
.crash__multi.is--crash{color:#ff5b5b;text-shadow:0 .06em 0 rgba(0,0,0,.55),0 0 .6em rgba(255,91,91,.6);animation:crashPop .45s ease}
.crash__status{text-align:center;font-size:3.4em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.crash__history{position:absolute;z-index:4;left:2em;right:2em;top:2em;display:flex;flex-wrap:nowrap;gap:.8em;overflow:hidden;justify-content:flex-end}
.crash__chip{flex:0 0 auto;padding:.5em 1.2em;border-radius:100px;font-size:2.6em;white-space:nowrap;background:rgba(0,0,0,.42);border:.06em solid rgba(255,255,255,.14);color:#9fb0d8}
.crash__chip.is--hot{color:#6cfc69;border-color:rgba(108,252,105,.45)}
.crash__chip.is--bust{color:#ff8080;border-color:rgba(255,128,128,.4)}
.crash__chip.is--new{animation:chipIn .35s ease}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:4em;overflow:auto;background:rgba(6,9,26,.78);backdrop-filter:blur(3px)}
.modal.is--open{display:flex;animation:modalIn .4s ease}
.modal__content{display:flex;flex-direction:column;gap:2.4em;width:100%;max-width:74em;text-align:center}
.modal__title{font-size:6em;max-width:9em;margin:0 auto;line-height:1.05;background:linear-gradient(180deg,#ffe98a 0%,#ffb01f 60%,#ff8a00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .04em 0 rgba(0,0,0,.5))}
.modal__text{font-size:4em;line-height:1.25;color:#fff;text-shadow:0 .06em .2em rgba(0,0,0,.6)}

/* ---------- panel ---------- */
.crash__panel{flex:0 0 auto;display:flex;flex-direction:column;gap:1.4em;padding:1.8em;border-radius:2.8em;background:rgba(18,23,58,.86);border:.3em solid rgba(255,255,255,.09)}
.crash__row{display:flex;align-items:center;gap:1.2em}
.crash__stat{flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1.1em 1.6em;border-radius:1.6em;background:rgba(0,0,0,.32)}
.crash__label{font-size:2.7em;letter-spacing:.1em;text-transform:uppercase;color:#8ea0cc}
.crash__value{font-size:3.4em;color:#fff}
.crash__value.is--gold{color:#ffc53d}
.crash__chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}
.crash__chipbtn{padding:1.1em .4em;border-radius:1.4em;font-size:3em;text-align:center;background:rgba(255,255,255,.08);border:.06em solid rgba(255,255,255,.12);color:#dbe4ff}
.crash__chipbtn:active{transform:translateY(.1em);background:rgba(255,255,255,.16)}
.crash__actions{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.crash__btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;padding:1.2em .8em;aspect-ratio:500/180;background:center/100% 100% no-repeat;filter:drop-shadow(0 .5em .8em rgba(0,0,0,.45))}
.crash__btn span{font-size:3em;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#3a1d00;text-shadow:0 .06em 0 rgba(255,255,255,.35)}
.crash__btn small{display:block;font-size:2.4em;line-height:1.1;color:#3a1d00;opacity:.85}
.crash__btn.is--cash span,.crash__btn.is--cash small{color:#053012}
.crash__btn:active{transform:translateY(.2em)}
.crash__btn[disabled]{filter:grayscale(.85) brightness(.6);pointer-events:none}
.crash__btn.is--pulse{animation:btnPulse .7s ease-in-out infinite}

/* ---------- CTA ---------- */
.crash__cta{display:flex;flex-direction:column;gap:1.2em;flex:0 0 auto}
.crash__bonus{display:flex;flex-direction:column;gap:.35em;padding:1.3em 1.8em;border-radius:2em;text-align:center;background:linear-gradient(180deg,rgba(255,197,61,.16) 0%,rgba(255,197,61,.06) 100%);border:.3em solid rgba(255,197,61,.35)}
.crash__bonus-title{font-size:3.2em;color:#ffd76a}
.crash__bonus-text{font-size:2.9em;color:#fff;opacity:.9}
.bottom__section-button{position:relative;display:grid;place-items:center;width:100%;min-width:50px;min-height:10.4em;padding:2.6em 2em;border-radius:2em;background:linear-gradient(180deg,#5cf07a 0%,#18a83c 100%);box-shadow:0 .6em 0 #0a5c1f,0 1.2em 2.4em rgba(24,168,60,.35)}
.bottom__section-button:active{transform:translateY(.4em);box-shadow:0 .2em 0 #0a5c1f}
.bottom__section-button-text{display:block;width:100%;font-size:3.6em;letter-spacing:.08em;text-align:center;white-space:nowrap;color:#04340f}
.bottom__section-button.pulse{animation:ctaPulse 1.4s ease-in-out infinite}
.button-loader{display:none}

/* ---------- effects ---------- */
.effects{position:fixed;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
.effects img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}

@keyframes rocketBob{0%,100%{transform:translateY(-.4em)}50%{transform:translateY(.4em)}}
@keyframes rocketWobble{0%,100%{margin-left:-.25em}50%{margin-left:.25em}}
@keyframes trailFlicker{0%{opacity:.75}100%{opacity:1}}
@keyframes stageShake{0%{transform:translate(0,0)}25%{transform:translate(.35em,-.25em)}50%{transform:translate(-.3em,.3em)}75%{transform:translate(.25em,.3em)}100%{transform:translate(0,0)}}
@keyframes boomIn{0%{opacity:0;transform:translate(-50%,50%) scale(.2)}35%{opacity:1;transform:translate(-50%,50%) scale(1.15)}100%{opacity:.85;transform:translate(-50%,50%) scale(1)}}
@keyframes crashPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes chipIn{0%{opacity:0;transform:translateY(-.6em) scale(.8)}100%{opacity:1;transform:none}}
@keyframes modalIn{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* desktop / wide: portrait play area centred, background stretches */
@media (min-aspect-ratio:3/4){
  html{font-size:min(4.5px + 5.5*(100dvh*0.4618 - 375px)/1545,10px)}
  .crash{width:calc(100dvh*0.4618);max-width:100vw;height:100dvh}
}

/* ---------- image slots (replace file, no CSS edit needed) ---------- */
.crash__bg{background-image:url(../img/bg.webp)}
.crash__stage{background-image:url(../img/bg.webp)}
.crash__btn.is--bet{background-image:url(../img/btn-bet.webp)}
.crash__btn.is--cash{background-image:url(../img/btn-cashout.webp)}

/* motion-agent overrides */
.crash__rocket, [class*=rocket]{animation-duration:0.9s !important}
#win-button-modal.pulse{animation-duration:1.25s !important}