@font-face {
    font-family: 'pixelFont';
    src: url('m6x11plus.ttf') format('truetype');
}

body {
    font-family: 'pixelFont';
    background-color: rgba(42, 56, 57);
    color: #FFFFFF;
    font-style: normal;
    text-shadow: 0.1rem 0.1rem 0px #000000;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
  }

h1 {
    text-shadow: 0.2rem 0.2rem 0px #000000;
}

#stats {
    font-size: 20px;
}

.progress-container {
    max-width: 350px;
}

.progress {
    border-color: #3f9574 !important;
    background-color: #2A3839;
    border-radius: 0;
}

.progress-bar {
    background-color: #f29101;
}

.button-pixelated {
    background-color: #2A3839;
    font-style: normal;
    font-size: 20px;
    text-shadow: 0.12rem 0.12rem 0px #000000;
    font-family: 'pixelFont';
    color: #FFFFFF;
    padding: .2rem 1rem;
    /*box-shadow: 0px 4px 0px 0px green;*/
}

.button-pixelated:hover, .button-pixelated:active {
    background-color: #3f9574;
    color: white;
}

.btn-check:checked+.btn {
    background-color: #f29101;
}
.btn-check:hover+.btn {
    background-color: #3f9574;
    color: white;
}

.sticky-top.sticky-active {
    background-color: rgba(42, 56, 57);
    border: 0 solid #3f9574;
    border-bottom-width: 0.4rem;
}

.sticky-top.sticky-active > .row {
    margin-bottom: 0 !important;
    padding-top: .5rem !important;
    transition: margin-bottom 0.2s, padding-top 0.2s;
}

.sticky-top.sticky-active .title-row {
    display: none;
}

@media (min-width: 576px) {
    .sticky-top.sticky-active .title-row {
        display: flex;
    }
}


.sticky-top {
    transition: background-color 0.2s;
}

.sticky-top > .row {
    transition: margin-bottom 0.2s, padding-top 0.2s;
}

.filter-group {
    margin-bottom: -.5rem !important;
}

.card {
    border-color: #3f9574;
    border-width: .2rem;
    background-color: rgba(42, 56, 57);
    cursor: pointer;
    transition: background-color 0.2s;
    overflow: visible;
    position: relative;
}

.card-body {
    overflow: visible;
}

.card-img-bottom {
    transition: transform 0.2s ease;
    display: block;
    width: 100%;
    height: auto;
}

.card:hover {
    background-color: #3f9574;
    transition: background-color 0.2s;
    clip-path: none;
    border-color: black;
}

.card:hover::after {
    content: none;
}

.card:hover img {
    transform: scale(1.1) rotate(2deg);
    transition: transform 0.2s;
    z-index: 1;
    -webkit-filter: drop-shadow(11px 10px 20px #000);
    filter: drop-shadow(11px 10px 20px #000);
}



.card input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    color: white;
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-size: 20px;
    cursor: pointer;
}

.custom-checkbox::before {
    position: absolute;
    top: 5px;
    left: 0px;
    content: "";

    width: 2px;
    height: 2px;
    color: #fff;
    box-shadow: 2px 2px, 4px 2px, 6px 2px, 8px 2px, 10px 2px, 12px 2px, 14px 2px, 16px 2px, 2px 4px, 16px 4px, 2px 6px, 16px 6px, 2px 8px, 16px 8px, 2px 10px, 16px 10px, 2px 12px, 16px 12px, 2px 14px, 16px 14px, 2px 16px, 4px 16px, 6px 16px, 8px 16px, 10px 16px, 12px 16px, 14px 16px, 16px 16px;
}

input[type="checkbox"]:checked + .custom-checkbox::before {
    width: 2px;
    height: 2px;
    box-shadow: 2px 2px, 4px 2px, 6px 2px, 8px 2px, 10px 2px, 12px 2px, 14px 2px, 18px 2px #fff, 20px 2px #fff, 2px 4px, 16px 4px #fff, 18px 4px #fff, 20px 4px #fff, 2px 6px #fff, 14px 6px #fff, 16px 6px #fff, 2px 8px #fff, 4px 8px #fff, 12px 8px #fff, 14px 8px #fff, 2px 10px, 4px 10px #fff, 6px 10px #fff, 10px 10px #fff, 12px 10px #fff, 16px 10px, 2px 12px, 6px 12px #fff, 8px 12px #fff, 10px 12px #fff, 16px 12px, 2px 14px, 8px 14px #fff, 16px 14px, 2px 16px, 4px 16px, 6px 16px, 8px 16px, 10px 16px, 12px 16px, 14px 16px, 16px 16px;
    color: #fff;
}

.form-check {
    padding-left: .5rem;
}

.card-body {
    padding: 0;
}

/* Joker Tooltip Styles */
.joker-tooltip {
    position: absolute;
    z-index: 1000;
    background-color: rgb(52, 62, 63);
    border: 2px solid #333333;
    border-radius: 8px;
    padding: 8px;
    max-width: 300px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.joker-tooltip.show {
    opacity: 1;
}

.tooltip-title {
    color: white;
    font-size: 24px;
    margin-bottom: 6px;
    text-shadow: 0.1rem 0.1rem 0px #000000;
    text-align: center;
}

.tooltip-rarity {
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-top: 6px;
    text-align: center;
    padding: 4px 12px;
    border-radius: 6px;
    text-shadow: 0.1rem 0.1rem 0px #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid rgba(255,255,255,0.3);
}

.tooltip-rarity.rarity-1 {
    background-color: #009dff; /* Common - Blue */
}

.tooltip-rarity.rarity-2 {
    background-color: #4BC292; /* Uncommon - Green */
}

.tooltip-rarity.rarity-3 {
    background-color: #fe5f55; /* Rare - Red */
}

.tooltip-rarity.rarity-4 {
    background-color: #b26cbb; /* Legendary - Purple */
}

.tooltip-description {
    background-color: white;
    color: black;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    text-shadow: none;
    text-align: center;
    min-width: 200px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Balatro Joker Description Styles - Tooltip specific only */

/* Base color classes */
.c-red { color: #FE5F55; }
.c-blue { color: #009DFF; }
.c-green { color: #4BC292; }
.c-purple { color: #8867A5; }
.c-orange { color: #FDA200; }
.c-yellow { color: #ffd43b; }
.c-white { color: #ffffff; }
.c-black { color: #000000; }
.c-grey { color: #868e96; }
.c-gray { color: #868e96; }
.c-gold { color: #EAC058; }

/* Semantic color classes */
.c-money { color: #F3B958; }
.c-chips { color: #009DFF; }
.c-mult { color: #FE5F55; }
.c-attention { color: #FF9A00; }
.c-inactive { color: #888888AA; }
.c-dark-edition { color: #000000; }
.c-legendary { color: #B26CBB; }
.c-spectral { color: #4584FA; }
.c-voucher { color: #CB724C; }
.c-enhancement { color: #8389DD; }
.c-joker { color: #ffd43b; }
.c-tarot { color: #A782D1; }
.c-planet { color: #13AFCE; }
.c-playing-card { color: #ffffff; }
.c-important { color: #ff6b6b; }
.c-edition { color: #FFFFFF; }

/* Additional UI colors */
.c-booster { color: #646EB7; }
.c-eternal { color: #C75985; }
.c-perishable { color: #4F5DA1; }
.c-rental { color: #B18F43; }
.c-joker-grey { color: #BFC7D5; }
.c-pale-green { color: #56A887; }

/* Suit colors */
.c-hearts { color: #FE5F55; }
.c-diamonds { color: #FE5F55; }
.c-clubs { color: #424E54; }
.c-spades { color: #374649; }

/* Special formatting classes */
.x-mult {
    font-weight: bold;
    font-size: 1.1em;
    color: #ff6b6b;
}

.variable {
    color: #4f90ec;
    font-weight: bold;
}