@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body {
    height: 100%;
    margin: 0;
}
body {
    background: url(/assets/icons/bg-top.917f3ba6.png) top/100% no-repeat,
    url(/assets/icons/decor.e57ce5c2.png) top 30px center/contain no-repeat,
    url(/assets/icons/bg-bottom.4f6cbda1.png) bottom/100% no-repeat,
    #0d1018;
    color: #ffffff;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    margin: auto;
    display: flex;
            flex-direction: column;
            min-height: 100vh;
}
a:link,
a:visited {
  color: #ffffff;
  text-decoration: none;
}
img {
  vertical-align: -2px;
  border: 0px;
  margin: 0;
  padding: 0;
}
.container{
    margin: auto;
    max-width: 1200px;
    width: 100%;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    background: #000000;
    height: 65px;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
    animation: slideDown 0.6s ease-out forwards;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.header_min{
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 1px;
}
.nav_one{
    display: flex;
    align-items: center;
    gap: 20px;
}
.nav_one a{
    display: flex;
    gap: 5px;
    font-size: 18px;
    text-transform: uppercase;
}
.nav_two{
    display: flex;
    gap: 15px;
    align-items: center;
}
.nav_profile{
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #dddddd !important;
    font-weight: 600;
    text-transform: uppercase;
}
.nav_profile img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fdf332;
}
.nav_nick{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80px;
}
.nav_btn{
    display: flex;
    gap: 5px;
    background: #fdf332;
    color: #000000 !important;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 8px;
    text-transform: uppercase;
    align-items: center;
}
main{
    margin: 80px 0 10px 0;
    flex: 1 0 auto;
}
.title{
    color: #ffffff;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
}
.block{
    background: #161618;
    border: 1px solid #202126;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
    overflow: hidden;
}
.items_list{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.item{
    background: #19131d;
    border: 1px solid #202126;
    border-radius: 10px;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}
.item:hover {
    transform: translateY(-12px);
}

.item_image{
height: 150px;
position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}
.item_image img{
    background: #101012;
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: transform 0.4s ease;
}
.item:hover .item_image img {
    transform: scale(1.15) rotate(3deg);
}
.item_info{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-weight: 600;
}
.item_title{
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}
.item_price{
color: #fdf332;
}
.item_claim{
      background: #fdf332;
    color: #000000;
    padding: 8px;
    margin: 0 10px 10px 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}
.cases_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background: #161618;
    border: 1px solid #202126;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
}
.case{
flex: 0 0 calc(25% - 6px);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.case:hover {
    transform: translateY(-12px);
}
.case_image img{
    background: #101012;
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}
.case_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.case_title{
  font-size: 16px;
}
.case_price{
    color: #2ecd7e;
    font-size: 16px;
    font-weight: 600;
}
.items_list_previews{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.item_preview{
    background: linear-gradient(to bottom, #1a1a1a, #101010, #000000);
    border: 1px solid #202126;
    border-radius: 10px;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.item_preview_image img{
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}




.case-limit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #1a1a1c;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 0 auto;
}

.case-limit h1 {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    margin: auto 0  20px 0;
}

.case-limit .case-preview-image {
    background: #161618;
    width: 192px;
    height: 192px;
    object-fit: contain;
    margin-bottom: 24px;
    padding: 10px 20px;
    border-radius: 10px;
}

.button-container{
    display: flex;
    gap: 10px;
    width: 100%;
}
.button-container a {
    display: contents;
    width: 100%;
}

.button-container button {
    background: #33333d;
    color: #adadad;
    padding: 10px 20px;
    border: none;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    font-family: "Open Sans", sans-serif;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.button-container button:hover {
    transform: translateY(-12px);
}

.button-container button span {
    display: block;
    font-size: 13px;
    color: #898989;
}

.button-container button:hover {
    background: #383843;
}

.btn_active {
    background: #62a75a !important;
    color: #000000 !important;
}

.btn_active:hover {
    background: #73bd6a !important;
}


footer{
    background: #000000;
    flex-shrink: 0;
}
.footer_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #707277;
    font-size: 16px;
    padding: 0 20px;
    height: 90px;
}
.footer_in{
      display: flex;
    align-items: center;
    gap: 20px;
}
.footer_copy{
      text-transform: uppercase;
    font-weight: 600;
}
.footer_copy span{
  color: #fff136;
}





.case-preview-image {
  width: 270px;
  height: 167px;
  object-fit: contain;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.overlay.show {
  display: block;
  opacity: 1;
}
.cosmic_content {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.cosmic_content.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.reel-container {
  position: relative;
  max-width: 1200px;
  min-width: 300px;
  margin: 0 auto;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-left: 4px solid #fff136;
  border-right: 4px solid #fff136;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.reel-container.show {
  display: block;
  opacity: 1;
}
/* Стрелочка-указатель посередине */
.reel-container::before {
    content: '';
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 35px solid #fff136;
    z-index: 10;
    filter: drop-shadow(0 0 10px rgba(255, 241, 54, 0.8));
    animation: arrowPulse 1.5s ease-in-out infinite;
  }
  
  @keyframes arrowPulse {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      filter: drop-shadow(0 0 10px rgba(255, 241, 54, 0.8));
    }
    50% {
      transform: translate(-50%, -50%) scale(1.1);
      filter: drop-shadow(0 0 15px rgba(255, 241, 54, 1));
    }
  }
.reel-items {
  display: flex;
  transition: transform 5s cubic-bezier(0.15, 0.95, 0.25, 1);
  gap: 20px;
}
.item-card {
  padding: 10px;
  border-bottom: 3px solid;
  min-width: 210px;
  position: relative;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}
.item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://forcedrop.vip/public/img/roulette/skin-bg-in-case.svg');
  background-size: 120px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: 0;
  transform: translate(0%, -8%);
}
.item-card > * {
  position: relative;
  z-index: 1;
  text-align: center;
}
.item-card.winner {
  border: 3px solid #fff136 !important;
  transform: scale(1.1);
}
.item-image img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.item-card:hover .item-image img {
  transform: translateY(-5px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.item-title {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.case-view {
  text-align: center;
  margin: 20px auto;
  background: url(/_next/static/media/decor-case.11242405.png) no-repeat center;
  background-size: contain;
  padding: 10px 0;
}
.open-case {
  display: none;
}
.open-case.show {
  display: block;
}
.btn_case {
  background: url(/_next/static/media/button-start.e161a054.png) 50%/295px no-repeat;
  width: 300px;
  height: 50px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
}
.item-card.color-0 {
  background: linear-gradient(to bottom, #ff6b6b, #b71c1c, #4a0000);
  border: 1px solid #ff4d4d;
  border-bottom: 3px solid #ff4d4d;
}
.item-card.color-1 {
  background: linear-gradient(to bottom, #4caf50, #2e7d32, #1b3e1e);
  border: 1px solid #43a047;
  border-bottom: 3px solid #43a047;
}
.item-card.color-2 {
  background: linear-gradient(to bottom, #42a5f5, #1565c0, #0d3b6b);
  border: 1px solid #2196f3;
  border-bottom: 3px solid #2196f3;
}
.item-card.color-3 {
  background: linear-gradient(to bottom, #ffca28, #ff8f00, #8e4e00);
  border: 1px solid #ffb300;
  border-bottom: 3px solid #ffb300;
}
.item-card.color-4 {
  background: linear-gradient(to bottom, #ab47bc, #6a1b9a, #3b0d54);
  border: 1px solid #9c27b0;
  border-bottom: 3px solid #9c27b0;
}
.item-card.color-5 {
  background: linear-gradient(to bottom, #26c6da, #007a8c, #00464f);
  border: 1px solid #00acc1;
  border-bottom: 3px solid #00acc1;
}
.item-card.color-6 {
  background: linear-gradient(to bottom, #ff7043, #d84315, #7f250c);
  border: 1px solid #f4511e;
  border-bottom: 3px solid #f4511e;
}
.item-card.color-7 {
  background: linear-gradient(to bottom, #78909c, #455a64, #263238);
  border: 1px solid #607d8b;
  border-bottom: 3px solid #607d8b;
}
.item-card.color-8 {
  background: linear-gradient(to bottom, #d4e157, #9e9d24, #5c5b14);
  border: 1px solid #c0ca33;
  border-bottom: 3px solid #c0ca33;
}
.item-card.color-9 {
  background: linear-gradient(to bottom, #f06292, #c2185b, #6d0f34);
  border: 1px solid #ec407a;
  border-bottom: 3px solid #ec407a;
}
.case-info {
  display: none !important;
  justify-content: center;
  margin-bottom: 20px;
}
.case-info.show {
  display: flex;
}
.case-info div {
  background: #252529;
  color: #cfcfcf;
  padding: 10px;
  width: 300px;
  border: 1px solid #353539;
  border-radius: 10px;
  text-align: center;
}









.refill-page-form {
    background: #161618;
    border-radius: 10px;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #202126;
    box-shadow: 0 4px 10px -1px rgb(0 0 0 / 57%);
        }

        .refill-page-form:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .refill-page-method {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #383a61;
    border-radius: 12px;
    margin-bottom: 1.5rem;
        }

        .refill-page-method__label {
            font-size: 0.9rem;
            color: #fff;
            font-weight: 500;
        }

        .refill-page-method__value {
            font-size: 1.1rem;
            font-weight: 600;
            color: #c3c3c3;
        }

        .refill-page-method__img img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .refill-page-method__img img:hover {
            transform: scale(1.1);
        }

        .refill-page-form__alert {
            background: #fef2f2;
            border-left: 4px solid #ef4444;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            animation: fadeIn 0.3s ease;
            display: none;
        }

        .refill-page-form__alert.show {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .alert__content {
            font-size: 0.9rem;
            color: #b91c1c;
        }

        .refill-page-form__field {
            margin-bottom: 1.5rem;
        }

        .refill-page-form__label {
            font-size: 0.9rem;
            color: #e3e3e3;
            margin-bottom: 0.5rem;
            display: block;
        }

        .refill-page-form__input input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #232323;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #000000;
    color: white;
        }

        .refill-page-form__input input:focus {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
            outline: none;
        }

        .refill-page-form__sum {
            margin-bottom: 1.5rem;
        }

        .refill-page-form__sum-label {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
        }

        .refill-page-form__sum-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #10b981;
        }

        .refill-page-form__checkbox {
            margin-bottom: 1.5rem;
        }

        .checkbox {
            display: flex;
            align-items: center;
        }

        .checkbox__square {
            width: 20px;
            height: 20px;
            border: 2px solid #e2e8f0;
            border-radius: 4px;
            margin-right: 0.5rem;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            position: relative;
            flex-shrink: 0;
            display: block;
        }

        .checkbox input {
            display: none;
        }

        .checkbox input:checked + label .checkbox__square {
            background-color: #10b981;
            border-color: #10b981;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: 16px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .checkbox__text {
            font-size: 0.9rem;
            color: #a2a3af;
        }

        .checkbox__text a {
            color: #10b981;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .checkbox__text a:hover {
            color: #059669;
        }

        .refill-page-form__btn button {
            width: 100%;
            padding: 0.75rem;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .refill-page-form__btn button:disabled {
            background: #252525;
            cursor: not-allowed;
        }

        .refill-page-form__btn button:not(:disabled):hover {
            background: #059669;
            transform: translateY(-2px);
        }

        .refill-page-form__info {
    font-size: 0.85rem;
    color: #b8bbc1;
    text-align: center;
    padding: 20px;
        }
        .alert {
    border-radius: 6px;
    color: #f55858;
    font-size: 14px;
    line-height: 145%;
    font-weight: 300;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    background-color: rgb(245 88 88 / 10%);
    margin-bottom: 10px;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(18 20 26 / 54%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000;
        }

        .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #17181a, #1d1f27);
    border-radius: 10px;
    max-width: 550px;
    width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1001;
    box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .modal-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            text-transform: uppercase;
            color: #ffffff;
            text-shadow: 0 0 5px rgba(88, 101, 242, 0.5);
        }

        .modal-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #ffffff;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .modal-close:hover {
            color: #ff5555;
            transform: rotate(90deg);
        }

        .modal-content {
            padding: 24px;
            text-align: center;
            font-size: 18px;
            color: #e5e7eb;
            line-height: 1.6;
        }

        .modal-content a {
            display: inline-block;
            margin-top: 24px;
        }

        .top-up-button {
            background: linear-gradient(to right, #22c55e, #059669);
            color: #ffffff;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            font-size: 16px;
        }

        .top-up-button:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }

        .top-up-button svg {
            transition: transform 0.3s ease;
        }

        .top-up-button:hover svg {
            transform: scale(1.1);
        }