@media(max-width:768px){
  :root{--item-w:118px;--item-h:148px}
  .cases-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:10px}
  .case-header{flex-direction:column;text-align:center;gap:14px}
  .case-header img{width:150px;height:150px}
  header{padding:8px 12px;gap:6px}
  .roulette-item img{height:88px}
  .roulette-gold img{width:70px;height:70px}

  .result-panel.active{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow-y:auto;
    padding:10px;
  }

  .inspect-card{
    width:min(94vw,680px);
    grid-template-columns:1fr;
    min-height:auto;
    padding:14px;
    top:46%;
  }
  .inspect-card.mobile-inspect-card,
  .inspect-card.mobile-enter{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:min(94vw,480px);
    max-height:58vh;
    min-height:auto;
    overflow-y:auto;
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
    margin:auto 0;
    animation:none;
  }
  .inspect-card.mobile-enter{
    animation:mobileCardIn .35s ease forwards;
  }
  .inspect-card.mobile-inspect-card .inspect-media,
  .inspect-card.mobile-enter .inspect-media{
    min-height:180px;
  }
  .inspect-card.mobile-inspect-card .inspect-media img,
  .inspect-card.mobile-enter .inspect-media img{
    max-height:180px;
  }
  .inspect-card.mobile-inspect-card .inspect-title,
  .inspect-card.mobile-enter .inspect-title{
    font-size:1.15rem;
  }
  .inspect-card.mobile-inspect-card .inspect-grid,
  .inspect-card.mobile-enter .inspect-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .inspect-card.mobile-inspect-card .inspect-grid div,
  .inspect-card.mobile-enter .inspect-grid div{
    padding:8px 10px;
  }
  .inspect-card.mobile-inspect-card .inspect-logo,
  .inspect-card.mobile-enter .inspect-logo{
    display:none;
  }
  .inspect-card.mobile-inspect-card:hover::before,
  .inspect-card.mobile-enter:hover::before{
    opacity:0;
  }
  .inspect-card.mobile-inspect-card,
  .inspect-card.mobile-enter{
    user-select:none;
    -webkit-user-select:none;
  }

  .result-btns{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:min(94vw,480px);
    margin:12px auto 20px;
    flex-direction:column;
    gap:10px;
    padding:0;
  }
  .result-btns .result-btn{
    width:100%;
    min-height:48px;
    font-size:1rem;
    padding:14px;
    border-radius:10px;
    justify-content:center;
  }
  .result-steam-wrap{
    width:100%;
    flex-direction:column;
    gap:8px;
  }
  .result-steam-wrap .inspect-steam-btn,
  .result-steam-wrap .inspect-cs2-btn{
    width:100%;
    min-height:48px;
    font-size:1rem;
    padding:14px;
    border-radius:10px;
    justify-content:center;
  }

  .result-panel.closing .inspect-card,
  .result-panel.closing .inspect-card.mobile-inspect-card,
  .result-panel.closing .inspect-card.mobile-enter{
    animation:mobileCardOut .3s ease forwards;
  }
  .result-panel.closing .result-btns{
    animation:none;
    opacity:0;
    transition:opacity .25s ease;
  }

  .inspect-media{min-height:210px}
  .inspect-media img{max-height:220px}
  .inspect-grid{grid-template-columns:1fr 1fr}
  .content-item{width:95px}
  .content-item img{height:60px}
}

@keyframes mobileCardIn{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}
@keyframes mobileCardOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.95)}
}