.crashPage{
  position:relative;
  min-height:100vh;
  padding-top:78px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(108,92,255,.10), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(136,110,255,.09), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(92,70,255,.07), transparent 35%),
    linear-gradient(180deg, #020306 0%, #05060c 100%);
}

.crashGlow{
  position:absolute;
  width:560px;
  height:560px;
  border-radius:999px;
  filter:blur(140px);
  opacity:.14;
  pointer-events:none;
}

.crashGlow--left{
  left:-250px;
  top:110px;
  background:radial-gradient(circle, rgba(112,98,255,.95) 0%, rgba(112,98,255,0) 70%);
}

.crashGlow--right{
  right:-240px;
  top:120px;
  background:radial-gradient(circle, rgba(142,118,255,.92) 0%, rgba(142,118,255,0) 70%);
}

.crashLayout{
  position:relative;
  z-index:2;
  width:min(1580px, calc(100% - 18px));
  min-height:calc(100vh - 94px);
  margin:0 auto;
  padding:16px 0 18px;
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:16px;
}

.crashSidebar,
.crashMain{
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(9,10,16,.97), rgba(5,6,10,.985));
  box-shadow:
    0 18px 60px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(255,255,255,.012);
  backdrop-filter:blur(14px);
}

.crashSidebar{
  border-radius:22px;
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
}

.crashMain{
  border-radius:24px;
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  position:relative;
}

.crashMain::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(116,100,255,.07), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 12%);
}

.crashBox{
  position:relative;
  z-index:1;
  margin-top:0;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.crashBox + .crashBox{
  margin-top:12px;
}

.crashBox__head,
.crashControlHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.crashLabel{
  color:rgba(255,255,255,.76);
  font-size:13px;
  font-weight:1000;
}

.crashBalance{
  color:rgba(255,255,255,.58);
  font-size:13px;
  font-weight:1000;
  text-align:right;
}

.crashControlBadge{
  height:28px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(121,105,255,.16), rgba(121,105,255,.08));
  border:1px solid rgba(140,124,255,.20);
  color:#fff;
  font-size:12px;
  font-weight:1000;
}

.crashBetInputWrap,
.crashCashoutWrap{
  position:relative;
}

.crashBetPrefix{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.34);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  pointer-events:none;
}

.crashCashoutSuffix{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.44);
  font-size:18px;
  font-weight:1000;
  pointer-events:none;
}

.crashBetInput,
.crashCashoutInput{
  width:100%;
  height:60px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(12,13,20,.99), rgba(8,9,15,.99));
  color:#fff;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 8px 24px rgba(0,0,0,.22);
}

.crashBetInput{
  padding:0 16px 0 54px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.03em;
}

.crashCashoutInput{
  padding:0 44px 0 16px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.03em;
}

.crashBetInput:focus,
.crashCashoutInput:focus{
  border-color:rgba(132,116,255,.34);
  box-shadow:
    0 0 0 4px rgba(112,96,255,.10),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.crashQuickActions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

.crashQuickBtn,
.crashActionBtn,
.crashProvablyBtn,
.pfCopyBtn,
.pfModal__close,
.pfRotateBtn,
.crashStatsBtn{
  border:0;
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, opacity .14s ease;
}

.crashQuickBtn{
  height:48px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  color:#fff;
  font-size:16px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.05);
}

.crashQuickBtn:hover,
.crashProvablyBtn:hover,
.pfCopyBtn:hover,
.pfModal__close:hover,
.pfRotateBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.crashSidebarSpacer{
  flex:1 1 auto;
  min-height:16px;
}

.crashMiniStats{
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.crashMiniStats__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  font-size:14px;
  font-weight:1000;
}

.crashMiniStats__row strong{
  font-size:17px;
}

.crashMiniStats__row + .crashMiniStats__row{
  margin-top:10px;
}

.crashMiniStats__row--muted{
  color:rgba(255,255,255,.64);
}

.crashMiniStats__row--muted strong{
  font-size:14px;
}

.crashActionBtn,
.pfRotateBtn{
  width:100%;
  height:60px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #eceef4 100%);
  color:#090d16;
  font-size:20px;
  font-weight:1000;
  box-shadow:
    0 18px 40px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -10px 18px rgba(0,0,0,.06);
}

.crashActionBtn{
  margin-top:14px;
  position:relative;
  z-index:2;
}

.crashActionBtn:hover,
.pfRotateBtn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, #ffffff 0%, #e2e6ef 100%);
  box-shadow:
    0 22px 48px rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -10px 18px rgba(0,0,0,.06);
}

.crashActionBtn:disabled,
.pfRotateBtn:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
}

.crashSidebarFoot{
  margin-top:12px;
}

.crashProvablyBtn{
  height:42px;
  padding:0 18px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(116,100,255,.18), rgba(116,100,255,.08));
  border:1px solid rgba(132,118,255,.18);
  color:#fff;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.crashProvablyBtn--mobile{
  display:none;
}

.crashHistoryBar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:34px;
  margin-bottom:8px;
}

.crashHistory{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  min-height:28px;
}

.crashHistoryItem{
  font-size:14px;
  font-weight:1000;
  color:rgba(255,255,255,.36);
}

.crashHistoryItem.is-good{
  color:#ffffff;
  text-shadow:0 0 18px rgba(255,255,255,.10);
}

.crashHistoryItem.is-bad{
  color:#a8abcf;
}

.crashStatsBtn{
  display:none !important;
}

.crashChart{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  display:block;
  min-height:0;
}

.crashYAxis{
  display:none !important;
}

.crashGraphArea{
  position:relative;
  min-height:560px;
  height:calc(100vh - 220px);
  max-height:720px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(4,5,10,.94), rgba(6,7,13,.99)),
    radial-gradient(circle at 50% 50%, rgba(122,104,255,.05), transparent 36%);
  border:1px solid rgba(255,255,255,.045);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 16px 44px rgba(0,0,0,.22);
}

.crashGraphArea::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 16%),
    linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.010) 1px, transparent 1px);
  background-size:
    auto,
    10% 100%,
    100% 20%;
  opacity:.40;
}

#crashCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.crashOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:3;
}

.crashCenterState{
  width:min(340px, calc(100% - 32px));
  text-align:center;
  transition:transform .2s ease, opacity .2s ease;
}

.crashCenterState__multiplier{
  color:#fff;
  font-size:62px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.05em;
  text-shadow:0 0 28px rgba(255,255,255,.08);
}

.crashCenterState.is-crashed .crashCenterState__multiplier{
  color:#ff5e7f;
  text-shadow:0 0 28px rgba(255,94,127,.14);
}

.crashCenterState.is-live .crashCenterState__multiplier{
  color:#ffffff;
}

.crashCenterState__sub{
  margin-top:16px;
  color:rgba(255,255,255,.80);
  font-size:16px;
  font-weight:1000;
}

.crashCenterState.is-crashed .crashCenterState__sub{
  color:#ff5e7f;
}

.crashCountdownBar{
  width:150px;
  height:4px;
  margin:16px auto 0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}

.crashCountdownBar i{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #8e7cff, #6f59ff);
  box-shadow:0 0 18px rgba(120,104,255,.35);
}

.crashBottomInfo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:18px;
  padding:18px 18px 16px;
}

.crashBottomInfo__left{
  display:none !important;
}

.crashBottomInfo__right{
  display:flex;
  align-items:center;
  gap:18px;
}

.crashZeroEdge{
  display:none !important;
}

.crashNetwork{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:14px;
  font-weight:1000;
}

.crashNetwork i{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#7df0b6;
  box-shadow:0 0 16px rgba(125,240,182,.35);
}

.crashPlayersCard{
  display:none !important;
}

.crashToast{
  position:fixed;
  left:50%;
  top:124px;
  transform:translateX(-50%) translateY(-12px);
  min-width:220px;
  max-width:min(90vw, 420px);
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(126,104,255,.98), rgba(88,70,220,.98));
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:15px;
  font-weight:1000;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.40);
  opacity:0;
  pointer-events:none;
  z-index:99998;
  transition:opacity .22s ease, transform .22s ease;
}

.crashToast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.pfModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}

.pfModal.is-open{
  display:block;
}

.pfModal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(10px);
}

.pfModal__card{
  position:relative;
  width:min(560px, calc(100% - 24px));
  max-height:calc(100vh - 28px);
  margin:14px auto;
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(125,92,255,.22);
  background:
    radial-gradient(circle at top right, rgba(120,84,255,.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(87,52,205,.16), transparent 28%),
    linear-gradient(180deg, rgba(12,10,22,.985), rgba(7,8,16,.99));
  box-shadow:
    0 32px 120px rgba(0,0,0,.72),
    0 0 0 1px rgba(125,92,255,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.pfModal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 22px 14px;
}

.pfModal__title{
  color:#fff;
  font-size:24px;
  font-weight:1000;
  letter-spacing:-.03em;
}

.pfModal__desc{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  line-height:1.55;
  font-size:14px;
  font-weight:800;
}

.pfModal__close{
  width:44px;
  height:44px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(125,92,255,.16);
  color:#fff;
  font-size:18px;
}

.pfModal__body{
  padding:0 22px 18px;
}

.pfField + .pfField{
  margin-top:14px;
}

.pfField label{
  display:block;
  margin-bottom:8px;
  color:rgba(219,208,255,.88);
  font-size:13px;
  font-weight:900;
}

.pfField__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:10px;
}

.pfInput{
  width:100%;
  height:50px;
  border-radius:15px;
  border:1px solid rgba(125,92,255,.18);
  background:linear-gradient(180deg, rgba(8,9,18,.98), rgba(12,10,24,.98));
  color:#f0edff;
  padding:0 14px;
  font-size:14px;
  font-weight:900;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 8px 24px rgba(0,0,0,.16);
}

.pfInput:focus{
  border-color:rgba(140,104,255,.42);
  box-shadow:
    0 0 0 4px rgba(116,78,255,.12),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.pfCopyBtn{
  height:50px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(36,25,66,.96), rgba(22,16,40,.96));
  border:1px solid rgba(125,92,255,.18);
  color:#ffffff;
  font-size:18px;
  box-shadow:0 8px 22px rgba(72,44,155,.12);
}

.pfDivider{
  height:1px;
  margin:18px 0 8px;
  background:linear-gradient(90deg, rgba(125,92,255,0), rgba(125,92,255,.24), rgba(125,92,255,0));
}

.pfModal__foot{
  padding:0 22px 22px;
}

.crashPage ~ .fab--left,
body .fab--left{
  bottom:18px;
}

@media (min-width: 1101px){
  body .fab--left{
    left:18px;
  }
}

@media (max-width: 1100px){
  .crashLayout{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .crashSidebar{
    order:2;
  }

  .crashMain{
    order:1;
  }

  .crashSidebarSpacer{
    flex:0 0 auto;
    min-height:0;
  }

  .crashGraphArea{
    min-height:460px;
    height:56vh;
    max-height:620px;
  }
}

@media (max-width: 760px){
  .crashLayout{
    width:min(100%, calc(100% - 12px));
    padding:10px 0 12px;
  }

  .crashCenterState__multiplier{
    font-size:42px;
  }

  .crashCenterState__sub{
    font-size:13px;
  }

  .crashToast{
    top:104px;
  }
}

@media (max-width: 680px){
  .crashPage{
    min-height:100vh;
    height:auto;
    padding-top:80px;
    padding-bottom:92px;
    overflow-x:hidden;
    overflow-y:auto;
  }

  .crashLayout{
    width:min(100%, calc(100% - 10px));
    min-height:auto;
    height:auto;
    padding:8px 0 12px;
    gap:10px;
    grid-template-columns:1fr;
    grid-template-rows:none;
    overflow:visible;
  }

  .crashMain{
    order:1;
    min-height:0;
    padding:10px 10px 12px;
    border-radius:20px;
    overflow:visible;
  }

.crashSidebar{
  order:2;
  min-height:0;
  padding:10px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:visible;
}

  .crashBox{
    padding:10px;
    border-radius:16px;
    margin-top:0 !important;
  }

  .crashMiniStats{
    margin-top:0;
    padding:10px 11px;
    border-radius:16px;
  }

  .crashActionBtn{
    margin-top:0;
    height:48px;
    border-radius:15px;
    font-size:17px;
    box-shadow:
      0 12px 28px rgba(255,255,255,.10),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -8px 14px rgba(0,0,0,.06);
  }

  .crashSidebarSpacer{
    display:none !important;
  }

  .crashSidebarFoot{
    display:flex;
    margin-top:0;
  }

  .crashProvablyBtn--mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:36px;
    padding:0 14px;
    font-size:12px;
    border-radius:12px;
    white-space:nowrap;
  }

  .crashProvablyBtn--desktop{
    display:none !important;
  }

  .crashBox__head,
  .crashControlHead{
    margin-bottom:7px;
    gap:8px;
  }

  .crashLabel,
  .crashBalance{
    font-size:11px;
  }

  .crashBetPrefix{
    left:13px;
    font-size:11px;
  }

  .crashCashoutSuffix{
    right:13px;
    font-size:16px;
  }

  .crashBetInput,
  .crashCashoutInput{
    height:46px;
    border-radius:14px;
    font-size:18px;
  }

  .crashBetInput{
    padding:0 12px 0 44px;
  }

  .crashCashoutInput{
    padding:0 38px 0 12px;
  }

  .crashQuickActions{
    gap:6px;
    margin-top:8px;
  }

  .crashQuickBtn{
    height:36px;
    border-radius:12px;
    font-size:13px;
  }

  .crashMiniStats__row{
    font-size:11px;
    gap:8px;
  }

  .crashMiniStats__row strong{
    font-size:13px;
  }

  .crashMiniStats__row--muted strong{
    font-size:11px;
  }

  .crashMiniStats__row + .crashMiniStats__row{
    margin-top:7px;
  }

  .crashHistoryBar{
    gap:8px;
    margin-bottom:6px;
  }

  .crashHistory{
    gap:8px;
  }

  .crashHistoryItem{
    font-size:11px;
  }

  .crashHistoryItem:nth-child(n+8){
    display:none;
  }

  .crashGraphArea{
    min-height:280px;
    height:280px;
    max-height:none;
    border-radius:18px;
  }

  .crashCenterState__multiplier{
    font-size:34px;
  }

  .crashCenterState__sub{
    margin-top:8px;
    font-size:12px;
  }

  .crashCountdownBar{
    width:124px;
    margin-top:12px;
  }

  .crashBottomInfo{
    padding:12px 12px 12px;
    justify-content:flex-end;
  }

  .crashBottomInfo__right{
    gap:10px;
  }

  .crashNetwork{
    font-size:12px;
  }

.crashActionBtn{
  order:-20;
}

.crashBox--top{
  order:-10;
}

.crashBox:nth-child(2){
  order:-9;
}

.crashMiniStats{
  order:-8;
}

.crashSidebarFoot{
  order:20;
}

  .crashToast{
    top:96px;
    min-width:0;
    max-width:min(92vw, 360px);
    padding:11px 14px;
    font-size:13px;
    border-radius:13px;
  }

  body .fab--left,
  body .fab--right{
    display:none !important;
  }
}

@media (max-width: 420px){
  .crashPage{
    padding-top:78px;
    padding-bottom:88px;
    min-height:100vh;
    height:auto;
  }

.crashActionBtn{
  order:-20;
}

.crashBox--top{
  order:-10;
}

.crashBox:nth-child(2){
  order:-9;
}

.crashMiniStats{
  order:-8;
}

.crashSidebarFoot{
  order:20;
}

  .crashLayout{
    width:min(100%, calc(100% - 8px));
    gap:8px;
    padding:6px 0 10px;
  }

  .crashMain{
    padding:8px 8px 10px;
    border-radius:18px;
  }

  .crashSidebar{
    padding:8px;
    gap:8px;
    border-radius:16px;
  }

  .crashBox,
  .crashMiniStats{
    padding:8px;
    border-radius:14px;
  }

  .crashLabel,
  .crashBalance{
    font-size:10px;
  }

  .crashBetPrefix{
    left:11px;
    font-size:10px;
  }

  .crashCashoutSuffix{
    right:11px;
    font-size:14px;
  }

  .crashBetInput,
  .crashCashoutInput{
    height:42px;
    border-radius:13px;
    font-size:16px;
  }

  .crashBetInput{
    padding:0 10px 0 38px;
  }

  .crashCashoutInput{
    padding:0 34px 0 10px;
  }

  .crashQuickActions{
    gap:5px;
  }

  .crashQuickBtn{
    height:32px;
    border-radius:11px;
    font-size:12px;
  }

  .crashMiniStats__row{
    font-size:10px;
  }

  .crashMiniStats__row strong{
    font-size:12px;
  }

  .crashMiniStats__row--muted strong{
    font-size:10px;
  }

  .crashActionBtn{
    height:44px;
    border-radius:14px;
    font-size:16px;
  }

  .crashHistory{
    gap:6px;
  }

  .crashHistoryItem{
    font-size:10px;
  }

  .crashHistoryItem:nth-child(n+6){
    display:none;
  }

  .crashGraphArea{
    min-height:240px;
    height:240px;
  }

  .crashCenterState__multiplier{
    font-size:30px;
  }

  .crashCenterState__sub{
    font-size:11px;
  }

  .crashCountdownBar{
    width:112px;
    height:3px;
  }

  .crashBottomInfo{
    padding:10px 10px 10px;
  }

  .crashNetwork{
    font-size:11px;
  }

  .crashToast{
    top:92px;
    font-size:12px;
    padding:10px 12px;
  }
}