h2 {
    font-size: calc(1rem + 1.5vw);
    margin-bottom: 1rem;
}

h3 {
    font-size: calc(0.8rem + 1vw);
}

.dynamicflex {
    gap: 0rem 1rem;
}

.clearblock {
    padding: 2rem;
    text-wrap: auto;
}

#tokenAmount:hover {
    cursor: text;
}

#tokenAmount::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#packPickerBtn {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* From Uiverse.io by namecho */ 
.switch {
 --button-width: 3.5rem;
 --button-height: 2rem;
 --toggle-diameter: 1.5rem;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --color-grey: #cccccc;
    transition: filter 0.2s;
}

.switch:hover {
    cursor: pointer;
    filter:brightness(1.05);
    transition: filter 0.1s;
}

.slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
    background-color: var(--blue1);
}

.switch input[type="checkbox"]:checked + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

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

.switch input[type="checkbox"]:checked:active + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: radial-gradient(circle, var(--blue1) 0%, var(--blue2) 100%);
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.25rem;
    padding: 1.5rem;
    width: min(1200px, 90vw);
    max-height: 75vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 10px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.modal-overlay.open .modal {
    transform: translateY(0);
}

.modal::-webkit-scrollbar {
    width: 0.6rem;
}

.modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    margin: 0.2rem;
}

.modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
}

.modal::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

.modal h2 {
    color: white;
    text-align: center;
    margin-bottom: 0rem;
    font-size: calc(1rem + 1.5vw);
    text-shadow: 4px 4px rgb(0, 0, 0, 0.2);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--lightgray);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-family: var(--font-main);
    color: var(--gray);
}

.modal-close:hover {
    background: #bbb;
}

/* Stats row at top of modal */
.modal-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0rem 0.75rem;
}

.modal-stat {
    padding: 0.75rem 1rem;
    color: white;
    text-align: center;
}

.modal-stat .stat-label {
    font-family: var(--font-main);
    font-size: 1rem;
    opacity: 0.85;
}

.modal-stat .stat-value {
    font-family: var(--font-heading);
    font-size: calc(0.9rem + 0.5vw);
    text-shadow: 2px 2px rgba(0,0,0,0.2);
}

.modal-stat.net-positive { background: linear-gradient(135deg, #5bbe21, #3a9010); }
.modal-stat.net-negative { background: linear-gradient(135deg, #ff462b, #c42200); }

/* Blook grid */
.blook-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    justify-items: center;
}

.blook-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: background 0.2s;
}

.blook-row:hover {
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.2s;
}

.blook-row img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    transform: scale(1.2);
    transition: transform 0.2s;
}

.blook-row:hover img {
    transform: scale(1.3);
    transition: transform 0.2s;
}

.blook-info {
    flex: 1;
}

.blook-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: white;
}

.blook-sub {
    font-family: var(--font-main);
    font-size: 1;
    color: rgba(255, 255, 255, 0.75);
}

.rarity-tag {
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    color: white;
    text-shadow: none;
    white-space: nowrap;
}

.rarity-Uncommon  { background: #4bc22e; }
.rarity-Rare      { background: #0a14fa; }
.rarity-Epic      { background: #be0000; }
.rarity-Legendary { background: #ff910f; }
.rarity-Chroma    { background: #0cf; }

/* Pack picker */
.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    padding-top: 1rem;
}

.pack-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.pack-tile:hover {
    transform: scale(1.05) rotate(-2deg);
}

.pack-tile-art {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transform: rotate(10deg);
    filter: drop-shadow(4px 4px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.pack-tile-label {
    position: absolute;
    bottom: 0.4rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: white;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.pack-tile-label img {
    width: 1rem;
    height: 1rem;
}

@media only screen and (max-width: 768px) {
    .pack-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .modal-stats { grid-template-columns: 1fr 1fr; }
    .blook-grid  { grid-template-columns: 1fr; }
    .modal-stat {
        flex: 0 1 calc(50% - 0.75rem); /* 2 per row, accounting for gap */
    }
    .modal {
        max-height: 60vh
    }
}