@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        color: rgb(211, 211, 211);
        font-family: "Segoe UI", sans-serif;
    }

    input {
        @apply text-zinc-900;
    }

    h1 {
        @apply text-4xl;
    }

    h2 {
        @apply text-3xl;
    }

    h3 {
        @apply text-2xl;
    }

    ul {
        list-style: square;
        @apply ml-4;
    }

    table {
        @apply border-collapse;
    }

    a[target="_blank"] {
        @apply text-orange-500 hover:text-orange-400 hover:underline;
    }

    .cardboard {
        color: #ad8762;
    }

    .wood {
        color: #966F33;
    }

    .bronze {
        color: #CD7F32;
    }

    .silver {
        color: #C0C0C0;
    }

    .gold {
        color: #FFD700;
    }

    .platinum {
        color: #2ecc71;
    }

    .diamond {
        color: #b9f2ff;
    }

    .legendary {
        color: transparent;
        background-image: linear-gradient(#c14790, #8c92bd);
        background-clip: text;
    }

    .the-one {
        color: transparent;
        background-image: linear-gradient(#ff0070, #f98c8c);
        background-clip: text;
    }

    .mono {
        @apply bg-zinc-700;
        font-family: monospace;
    }

    .emoji {
        display: inline;
        width: calc(0.8em * calc(100 / 72));
        margin-top: -0.2em;
        object-fit: contain;
    }

    .tooltip {
        @apply absolute hidden group-hover:inline-block p-2 z-50 text-center text-white text-sm font-bold;
        left: 2.5rem;
        border: solid 0 transparent;
        border-radius: 10px;
        pointer-events: none;
        width: 6rem;
    }

    .collapser {
        margin: 0.6rem;
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #737373;
    }
    .rotated {
        transform: rotate(90deg);
    }

    .mod-btn {
        @apply inline-block text-center w-16 border-2 border-orange-600 hover:bg-zinc-700 rounded-md p-2 m-1 cursor-pointer select-none;
    }

    .mod-btn-selected {
        @apply bg-zinc-700 hover:bg-zinc-600;
    }

    .default-btn {
        @apply text-white bg-orange-600 hover:bg-orange-500 rounded-lg py-1.5 px-3;
    }

    .map-list td {
        @apply w-40 p-1.5 text-center border border-transparent border-t-zinc-700;
    }

    .pagination .page {
        @apply text-xl px-3 py-2 border-transparent border-2 text-zinc-400 hover:text-zinc-50 hover:border-b-orange-400;
    }

    .pagination .current {
        @apply text-zinc-50 border-b-orange-600;
    }
}