@font-face {
    font-family: 'geogrotesque_trialbold';
    src: url('geogrotesquetrial-bd-webfont.woff2') format('woff2'),
         url('geogrotesquetrial-bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    --mainBackground: #FFFFFF;
    --raffleRollerBackground: #102a4a;
    --itemBackground: transparent;

    --rollerWidth: 120rem;
    --rollerHeight: 22.7rem;

    --itemSize: 19.8rem;

    --colorWidth: .5rem;
    --colorMilSpec: #000000;
    --colorRestricted: #8847ff;
    --colorClassified: #d32ee6;
    --colorCovert: #eb4b4b;
    --colorRare: gold;
	--color45Deposit: #aedaff;
}

.dropdown {
    position: absolute; /* Position it absolutely */
    top: 10px; /* Adjust as needed to position the menu on the top left */
    left: 10px; /* Adjust as needed to position the menu on the top left */
}

/* CSS for centering and animating the GiveawayWinners div */
#GiveawayWinners {
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-color: #102a4a;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000; /* Ensure it appears above other content */
    font-size: 1em;
    border: 3px solid white;
    border-radius: 5px;
    font-weight: bold;
	transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

#GiveawayWinners.fade-in {
    opacity: 1;
}

#GiveawayWinners.fade-out {
    opacity: 0;
}

/* Keyframes for fade-in and fade-out animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.dropbtn {
  background-image: url('dropdownmenu.png');
  background-repeat: no-repeat;
  background-size: 30px; /* Adjust the size of the image */
  background-position: center; /* Center the image within the button */
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
}

#RandomNumbers {
    position: absolute;
    right: 5%; /* Adjust left position as needed */
    bottom: 10px; /* Adjust top position as needed */
    width: 400px; /* Adjust width as needed */
    padding: 10px;
    font-size: 1em;
    border: 3px solid white;
    border-radius: 5px;
    color: rgb(133, 150, 173); /* Text color */
    background-color: #102a4a;
    outline: none; /* Remove default focus outline */
	text-shadow: 0 0 2px black; /* Black outline effect */
    z-index: 1000; /* Ensures it stays on top of other elements */
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show {
    display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 10px; }

body {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #fff;
    background: linear-gradient(86deg, #141E30 0%, #243B55 64%);
    font-family: 'geogrotesque_trialbold', sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 400;
}

img {
    border: 0;
    vertical-align: middle;
	
	
}

.intro {
    color: #fff;
    font-size: 3.2rem;
    line-height: 4rem;
}


.intro img {
    max-width: 8.5rem;
}

.class_45Deposit_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.text--class_45Deposit_item {
    color: var(--colorRare);
}

.item.class_45Deposit_item {
    filter: drop-shadow(0 0 10px #c8a913);
}
.item.class_45Deposit_item .rareIcon {
    filter: drop-shadow(0 0 10px #c8a913);
}

.class_40Deposit_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.text--class_30Deposit_item {
    color: var(--colorRare);
}

.item.class_30Deposit_item {
    filter: drop-shadow(0 0 10px #c8a913);
}

.class_30Deposit_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.text--class_30CoinFreeBattle_item {
    color: var(--colorRare);
}

.item.class_30CoinFreeBattle_item {
    filter: drop-shadow(0 0 10px #c8a913);
}

.class_30CoinFreeBattle_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.text--class_60CoinBattleCall_item {
    color: var(--colorRare);
}

.item.class_60CoinBattleCall_item {
    filter: drop-shadow(0 0 10px #c8a913);
}

.class_60CoinBattleCall_item {
    border-bottom: var(--colorWidth) solid var(--colorRare);
}

.item.class_25Deposit_item {
    filter: drop-shadow(0 0 10px #eb4b4b);
}

.class_25Deposit_item {
    border-bottom: var(--colorWidth) solid var(--colorCovert);
}

.text--class_25Deposit_item {
    color: var(--colorCovert);
}

.item.class_15Deposit_item {
    filter: drop-shadow(0 0 3px #d32ee6);
}

.class_15Deposit_item {
    border-bottom: var(--colorWidth) solid var(--colorClassified);
}

.text--class_15Deposit_item {
    color: var(--colorClassified);
}

.item.class_20CoinFreeBattle_item {
    filter: drop-shadow(0 0 10px #d32ee6);
}

.class_20CoinFreeBattle_item {
    border-bottom: var(--colorWidth) solid var(--colorClassified);
}

.text--class_20CoinFreeBattle_item {
    color: var(--colorClassified);
}

.item.class_40CoinBattleCall_item {
    filter: drop-shadow(0 0 10px #d32ee6);
}

.class_40CoinBattleCall_item {
    border-bottom: var(--colorWidth) solid var(--colorClassified);
}

.text--class_40CoinBattleCall_item {
    color: var(--colorClassified);
}

.item.class_10CoinFreeBattle_item {
    filter: drop-shadow(0 0 10px #8847ff);
}

.class_10CoinFreeBattle_item {
    border-bottom: var(--colorWidth) solid var(--colorRestricted);
}

.text--class_10CoinFreeBattle_item {
    color: var(--colorRestricted);
}

.item.class_20CoinBattleCall_item {
    filter: drop-shadow(0 0 10px #8847ff);
}

.class_20CoinBattleCall_item {
    border-bottom: var(--colorWidth) solid var(--colorRestricted);
}

.text--class_20CoinBattleCall_item {
    color: var(--colorRestricted);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.raffle-roller {
    position: relative;
    width: var(--rollerWidth);
    height: calc(var(--rollerHeight) - .7rem);
    background: var(--raffleRollerBackground);
    border: 1px solid var(--raffleRollerBackground);
    border-radius: 2rem;
    border-width: 0 1rem;
    overflow: hidden;
    z-index: 2;
    opacity: 0; /* Start invisible */
	animation: snakeShadow 12s linear infinite;
	filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.5)); /* Initial shadow setup */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 97%);
    /* For WebKit-based browsers */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 97%);
}

.raffle-roller::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2) 0%,  /* Start darker on the left edge */
        rgba(0, 0, 0, 0.2) 40%, /* Slightly lighter towards center */
        rgba(0, 0, 0, 0) 50%,   /* Fully transparent at the center */
        rgba(0, 0, 0, 0.2) 60%, /* Slightly lighter towards center */
        rgba(0, 0, 0, 0.2) 100% /* Darker on the right edge */
    );
    pointer-events: none;
    z-index: 9999;
}

.raffle-roller.fade-in {
    animation: fadeIn 1s forwards; /* Apply fade-in animation */
}

.raffle-roller.fade-out {
    animation: fadeOut 1s forwards; /* Apply fade-out animation */
}

.raffle-roller-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--rollerHeight);
}

.raffle-roller-holder:before {
    content: "";
    position: absolute;
    width: .5rem;
    height: 100%;
    left: 50%;
    background: #fff;
    border: unset;
    z-index: 999999;
}

.raffle-roller-container {
    display: flex;
    gap: 1rem;
    width: 50000rem;
    max-width: 50000rem;
    height: var(--rollerHeight);
    margin: 1rem;
    margin-left: 0;
    transition: all 8s cubic-bezier(.01, .01, .25, 1);
}

.generic-logo {
    position: fixed;
    text-align: center;
	width: auto;
	height: auto; /* Reduced from 40% to 30% */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Scale down to 75% of original size */
	animation: snakeShadow 12s linear infinite;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); /* Initial shadow setup */
	transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

@keyframes snakeShadow {
    0% {
        filter: drop-shadow(-5px -5px 3px rgba(0, 100, 0, 1)) drop-shadow(5px -5px 3px rgba(0, 200, 0, 1)) drop-shadow(5px 5px 3px rgba(0, 100, 0, 1)) drop-shadow(-5px 5px 3px rgba(0, 200, 0, 1));
    }
    25% {
        filter: drop-shadow(5px -5px 5px rgba(0, 200, 0, 0.8)) drop-shadow(5px 5px 5px rgba(0, 150, 0, 0.8)) drop-shadow(-5px 5px 5px rgba(0, 100, 0, 0.8)) drop-shadow(-5px -5px 5px rgba(0, 150, 0, 0.8));
    }
    50% {
        filter: drop-shadow(5px 5px 7px rgba(0, 150, 0, 0.6)) drop-shadow(-5px 5px 7px rgba(0, 100, 0, 0.6)) drop-shadow(-5px -5px 7px rgba(0, 200, 0, 0.6)) drop-shadow(5px -5px 7px rgba(0, 100, 0, 0.6));
    }
    75% {
        filter: drop-shadow(-5px 5px 10px rgba(0, 100, 0, 0.4)) drop-shadow(-5px -5px 10px rgba(0, 200, 0, 0.4)) drop-shadow(5px -5px 10px rgba(0, 150, 0, 0.4)) drop-shadow(5px 5px 10px rgba(0, 100, 0, 0.4));
    }
    100% {
        filter: drop-shadow(-5px -5px 3px rgba(0, 100, 0, 1)) drop-shadow(5px -5px 3px rgba(0, 200, 0, 1)) drop-shadow(5px 5px 3px rgba(0, 150, 0, 1)) drop-shadow(-5px 5px 3px rgba(0, 100, 0, 1));
    }
}

.generic-logo.fade-in {
    opacity: 1;
}

.generic-logo.fade-out {
    opacity: 0;
}

.item {
    width: var(--itemSize);
    height: var(--itemSize);
    border: 1px solid var(--mainBackground);
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); /* Initial shadow setup */
    background: var(--itemBackground) center center no-repeat;
    background-size: calc(100% - 1rem);
}

.winning-item {
    transform: scale(1.1);
    transition: .6s ease-in-out;
    text-align: center;
	border: 1px solid white;
	text-shadow: 0 0 2px black; /* Black outline effect */
}

#rolled {
    position: center; /* Position it relative to the viewport */
    top: 15%; /* Adjust as needed */
    z-index: 999; /* Ensure it's on top of other elements */
}


.winning-message {
    position: fixed;
    font-size: 24px; /* Adjust font size as needed */
	border: 5px;
}


.case-buttons {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px; /* Adjust font size as needed */
	text-align: left;
}

.case-buttons button {
    color: white;
	font-size: 20px;
	border: 3px solid white;
	padding: 10px 20px;
	cursor: pointer;
	background-color: rgba(1, 16, 30, 0.8);
	transition: background-color 0.3s, color 0.3s;
	margin: 20px;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    outline: unset;
    border-radius: 1rem;
    cursor: pointer;
	text-align: left;
}

.case-buttons button:hover {
    background-color: #0056b3;
}

.case-buttons button:disabled {
    color: rgba(255, 255, 255, 0.5); /* Lighter text color */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Lighter border */
    background-color: rgba(1, 16, 30, 0.5); /* Lighter background color */
    cursor: not-allowed; /* Change cursor to indicate the button is disabled */
    opacity: 0.6; /* Slightly faded appearance */
}

.inventory:empty {
    padding: unset;
}

.inventory {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 147.5rem;
    max-width: 147.5rem;
    height: auto;
    background: var(--raffleRollerBackground);
    margin: .5rem auto;
    padding: .5rem;
}