* {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

[data-bs-theme=tobam] {
    --bs-body-color: #DDD;
    --bs-body-bg: #181818;
    --bs-secondary-bg: #242424;
    --bs-primary: #9370DB;
    --bs-primary-rgb: 147, 112, 219;
    --bs-primary-bg: #9370DB;
    --dex-rgb: #FF9933;
    --dexterity: #FF9933;
    --str-rgb: #CC0000;
    --strength: #CC0000;
    --int-rgb: #0066CC;
    --intelligence: #0066CC;
    --vit-rgb: #90ee90;
    --vitality: #90ee90;
    --close-combat-rgb: #993300;
    --ranged-combat-rgb: #3366CC;
    --white: #fff;
    --health: #de1c06;

    --common: #AAA;
    --uncommon: #00B300;
    --rare: #5552FC;
    --heroic: #A256F8;
    --legendary: #BB0A1E;

    --warrior: #CF5300;
    --warrior-rgb: rgb(207,83,0);
    --paladin: #B8860B;
    --monk: #00CC66;
    --mage: #8000FF;
    --rogue: #4B0082;
    --technician: #0099CC;
    --ranger: #99CC66;
    --priest: #008B8B;
    --alchemist: #DC143C;

    --forest: #00A800;
    --dessert: #FFCC66;
    --snow: #FFF;
    --swamp: #336600;
    --coast: #1E90FF;
    --cave: #8b8989;
    --vulcan: #FF4500;
    --plains: #228B22;
    --city: #696969;

    --darkwood: #006400;
    --leafy-road: #556B2F;
    --poisonous-plant: #800080;
    --grass-path: #50651E;
    --dirt-path: #964B00;
    --tree-trunk: #4D7326;
    --stone-mountain: #5F5F5F;
    --moss-chest: #8A9A5B;
    --flower-bed: linear-gradient(to bottom, purple, red, blue);

    --dune-sea: #F4A460;
    --quicksand: #CCCC00;
    --limestone-road: #DCD8C7;
    --salt-path: #FFFFCC;
    --cacti-field: #24FF38;
    --mirage: #882200;
    --sandstone-cliff: #DEB887;
    --fire-crystal: radial-gradient(#ff7f00 25%, #ff0000 100%);

    --icecracks: #87CEFA;
    --gravel-road: #C0C0C0;
    --permafrost: #B0E0E6;
    --tundra-grass: #556B2E;
    --geysir: #0080FF80;
    --snow-crystal: radial-gradient(#ffffff 25%, #6390Af 100%);

    --rootcluster: #2E5732;
    --wooden-bridge: #8B7355;
    --fog: #A0A0A0;
    --marshy-bog: #8FBC8F;
    --bioluminescent-entity: #00FF00;
    --swamp-drowned-chest: #6A805C;

    --white-sand: #F0EAD6;
    --rocks: #DDDBCB;
    --coral: #FF7F50;
    --beach-path: #432228;
    --sand-with-life: #ECD9A9;
    --water-logged-chest: #0077BE;

    --stone-spikes: #333;
    --bioluminescent-path: #00FFFF;
    --cave-tunnel: #808080;
    --stalagmite: #A0522D;
    --rock-walls: #555555;
    --underground-river: #000080;
    --lightning-crystal: radial-gradient(#ffffff 25%, #00bfff 60%, #0000ff 100%);

    --lava-river: #FF960F;
    --obsidian: #2E293A;
    --obsidian-spike: #0A0612;
    --coal: #151716;
    --steel: #B0C4DE;
    --ashy-road: #708090;
    --magma-chest: #CF1020;

    --grass: #7CFC00;
    --meadows: #66CDAA;
    --pond: #ADD8E6;
    --dry-prairie: #D2B48C;
    --tire-tracks: #A52A2A;
    --concealed-bone-grave: #B97C4D;
    --hay-covered-chest: #F5DEB3;
    --earth-crystal: radial-gradient(#228B22 25%, #808000 100%);

    --clean-stone-road: #A9A9A9;
    --dosh-covered-wall: #6B8E23;
    --farmland: #F5F5DC;
    --building: #8B4513;
    --water: #87CEEB;

    --interactable: #000;

    --danger5: #900;
    --danger4: #B00;
    --danger3: #C00;
    --danger2: #E60026;
    --danger1: #F66;
    --peaceful: #ADD8E6;

    .btn-primary{
        --bs-btn-color: #DDD;
        --bs-btn-bg: var(--bs-primary-bg);
        --bs-btn-border-color: var(--bs-primary-bg);
        --bs-btn-hover-color: #FFD700;
        --bs-btn-hover-bg: var(--bs-primary-bg);
        --bs-btn-hover-border-color: var(--bs-primary-bg);
        --bs-btn-focus-shadow-rgb: 13, 110, 253;
        --bs-btn-active-color: #FFD700;
        --bs-btn-active-bg: var(--bs-primary-bg);
        --bs-btn-active-border-color: var(--bs-primary-bg);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--bs-primary-bg);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--bs-primary-bg);
    }

    .btn-outline-primary {
        --bs-btn-color: #9370DB;
        --bs-btn-border-color: #9370DB;
        --bs-btn-hover-color: #FFD700;
        --bs-btn-hover-bg: #9370DB;
        --bs-btn-hover-border-color: #9370DB;
        --bs-btn-focus-shadow-rgb: 13, 110, 253;
        --bs-btn-active-color: #FFD700;
        --bs-btn-active-bg: #9370DB;
        --bs-btn-active-border-color: #9370DB;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #9370DB;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #9370DB;
    }

    .btn-outline-secondary {
        --bs-btn-color: #FFD700;
        --bs-btn-border-color: #FFD700;
        --bs-btn-hover-color: #9370DB;
        --bs-btn-hover-bg: #FFD700;
        --bs-btn-hover-border-color: #FFD700;
        --bs-btn-focus-shadow-rgb: 13, 110, 253;
        --bs-btn-active-color: #9370DB;
        --bs-btn-active-bg: #FFD700;
        --bs-btn-active-border-color: #FFD700;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #FFD700;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #FFD700;
    }

    .border-primary {
        border-color: var(--bs-primary);
    }

    .text-primary {
        color: var(--bs-primary);
    }

    .card {
        --bs-card-border-color: var(--white);
    }

    .list-group{
        --bs-list-group-active-bg: var(--bs-primary);
    }

    .table {
        --bs-table-color: var(--white);
        --bs-table-strpied-color: var(--white);
        --bs-table-active-color: var(--white);
        --bs-table-color-state: var(--white);
        --bs-table-striped-bg: #242424;
        &:not(caption) > * > * {
            --bs-table-color-state: var(--white) !important;
        }
    }

    .bg-body-secondary{
        background-color: var(--bs-secondary-bg) !important;
    }

    svg,img {
        fill: var(--white) !important;
    }

    .woodBorder {
        border: 1px solid var(--forest);
    }

    .woodFont {
        color: var(--forest) !important;
    }

    .dessertBorder {
        border: 1px solid var(--dessert);
    }

    .dessertFont {
        color: var(--dessert) !important;
    }

    .snowBorder {
        border: 1px solid var(--snow);
    }

    .snowFont {
        color: var(--snow) !important;
    }

    .swampBorder {
        border: 1px solid var(--swamp);
    }

    .swampFont {
        color: var(--swamp) !important;
    }

    .coastBorder {
        border: 1px solid var(--coast);
    }

    .coastFont {
        color: var(--coast) !important;
    }

    .caveBorder {
        border: 1px solid var(--cave);
    }

    .caveFont {
        color: var(--cave) !important;
    }

    .vulcanBorder {
        border: 1px solid var(--vulcan);
    }

    .vulcanFont {
        color: var(--vulcan) !important;
    }

    .plainsBorder {
        border: 1px solid var(--plains);
    }

    .plainsFont {
        color: var(--plains) !important;
    }

    .cityBorder {
        border: 1px solid var(--city);
    }

    .cityFont {
        color: var(--city) !important;
    }

    .darkwoodFont {
        color: var(--darkwood);
    }

    .leafy-roadFont {
        color: var(--leafy-road);
    }

    .poisonous-plantFont {
        color: var(--poisonous-plant);
    }

    .grass-pathFont {
        color: var(--grass-path);
    }

    .dirt-pathFont {
        color: var(--dirt-path);
    }

    .tree-trunkFont {
        color: var(--tree-trunk);
    }

    .stone-mountainFont {
        color: var(--stone-mountain);
    }

    .moss-chestFont {
        color: var(--moss-chest);
    }

    .flower-bedFont {
        background: var(--flower-bed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .dune-seaFont {
        color: var(--dune-sea);
    }

    .quicksandFont {
        color: var(--quicksand);
    }

    .limestone-roadFont {
        color: var(--limestone-road);
    }

    .salt-pathFont {
        color: var(--salt-path);
    }

    .cacti-fieldFont {
        color: var(--cacti-field);
    }

    .mirageFont {
        color: var(--mirage);
    }

    .sandstone-cliffFont {
        color: var(--sandstone-cliff);
    }

    .firecrystalFont {
        background: var(--fire-crystal);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .icecracksFont {
        color: var(--icecracks);
    }

    .gravel-roadFont {
        color: var(--gravel-road);
    }

    .permafrostFont {
        color: var(--permafrost);
    }

    .tundra-grassFont {
        color: var(--tundra-grass);
    }

    .geysirFont {
        color: var(--geysir);
    }

    .snow-crystalFont {
        background: var(--snow-crystal);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .rootClusterFont {
        color: var(--rootcluster);
    }

    .wooden-bridgeFont {
        color: var(--wooden-bridge);
    }

    .fogFont {
        color: var(--fog);
    }

    .marshy-bogFont {
        color: var(--marshy-bog);
    }

    .bioluminescentEntityFont {
        color: var(--bioluminescent-entity);
    }

    .swamp-drowned-chestFont {
        color: var(--swamp-drowned-chest);
    }

    .white-sandFont {
        color: var(--white-sand);
    }

    .rocksFont {
        color: var(--rocks);
    }

    .coralFont {
        color: var(--coral);
    }

    .beach-pathFont {
        color: var(--beach-path);
    }

    .sand-with-lifeFont {
        color: var(--sand-with-life);
    }

    .water-logged-chestFont {
        color: var(--water-logged-chest);
    }

    .stone-spikesFont {
        color: var(--stone-spikes);
    }

    .bioluminescent-pathFont {
        color: var(--bioluminescent-path);
    }

    .cave-tunnelFont {
        color: var(--cave-tunnel);
    }

    .stalagmiteFont {
        color: var(--stalagmite);
    }

    .rock-wallsFont {
        color: var(--rock-walls);
    }

    .underground-riverFont {
        color: var(--underground-river);
    }

    .lightning-crystalFont {
        background: var(--lightning-crystal);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .lava-riverFont {
        color: var(--lava-river);
    }

    .obsidianFont {
        color: var(--obsidian);
    }

    .obsidian-spikeFont {
        color: var(--obsidian-spike);
    }

    .coalFont {
        color: var(--coal);
    }

    .steelFont {
        color: var(--steel);
    }

    .ashy-roadFont {
        color: var(--ashy-road);
    }

    .magma-chestFont {
        color: var(--magma-chest);
    }

    .grassFont {
        color: var(--grass);
    }

    .meadowsFont {
        color: var(--meadows);
    }

    .pondFont {
        color: var(--pond);
    }

    .dry-prairieFont {
        color: var(--dry-prairie);
    }

    .tire-tracksFont {
        color: var(--tire-tracks);
    }

    .concealed-bone-graveFont {
        color: var(--concealed-bone-grave);
    }

    .hay-covered-chestFont {
        color: var(--hay-covered-chest);
    }

    .earth-crystalFont {
        background: var(--earth-crystal);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .clean-stone-roadFont {
        color: var(--clean-stone-road);
    }

    .dosh-covered-wallFont {
        color: var(--dosh-covered-wall);
    }

    .farmlandFont {
        color: var(--farmland);
    }

    .buildingFont {
        color: var(--building);
    }

    .waterFont {
        color: var(--water);
    }

    .danger5Font {
        color: var(--danger5);
    }

    .danger4Font {
        color: var(--danger4);
    }

    .danger3Font {
        color: var(--danger3);
    }

    .danger2Font {
        color: var(--danger2);
    }

    .danger1Font {
        color: var(--danger1);
    }

    .peacefulFont {
        color: var(--peaceful);
    }

    .bg-dirt-path{
        background: var(--dirt-path);
    }

    .editorHighlighted:hover {
        filter: brightness(200%);
    }

    .text-wifey {
        color: #6F42C1;
    }

    .text-rainbow {
        background: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, purple);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        animation: rainbow_animation 2s linear infinite;
    }

    @keyframes rainbow_animation {
        0%, 100% {
            background: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, purple) 0 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        14% {
            background: linear-gradient(to bottom right, orange, yellow, green, cyan, blue, purple, red) 14% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        28% {
            background: linear-gradient(to bottom right, yellow, green, cyan, blue, purple, red, orange) 28% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        42% {
            background: linear-gradient(to bottom right, green, cyan, blue, purple, red, orange, yellow) 42% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        56% {
            background: linear-gradient(to bottom right, cyan, blue, purple, red, orange, yellow, green) 56% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        71% {
            background: linear-gradient(to bottom right, blue, purple, red, orange, yellow, green, cyan) 71% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        85% {
            background: linear-gradient(to bottom right, purple, red, orange, yellow, green, cyan, blue, cyan) 85% 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .circle {
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
    }

    .border-common {
        border-color: var(--common) !important;
    }

    .border-uncommon {
        border-color: var(--uncommon) !important;
    }

    .border-rare {
        border-color: var(--rare) !important;
    }

    .border-heroic {
        border-color: var(--heroic) !important;
    }

    .border-legendary {
        border-color: var(--legendary) !important;
    }

    .text-common {
        color: var(--common) !important;
    }

    .shadow-common{
        box-shadow: 0 0 .25rem .25rem var(--common);
    }

    .text-uncommon {
        color: var(--uncommon) !important;
    }

    .shadow-uncommon{
        box-shadow: 0 0 .25rem .25rem var(--uncommon);
    }

    .text-rare {
        color: var(--rare) !important;
    }

    .shadow-rare{
        box-shadow: 0 0 .25rem .25rem var(--rare);
    }

    .text-heroic {
        color: var(--heroic) !important;
    }

    .shadow-heroic{
        box-shadow: 0 0 .25rem .25rem var(--heroic);
    }

    .text-legendary {
        color: var(--legendary) !important;
    }

    .shadow-legendary{
        box-shadow: 0 0 .25rem .25rem var(--legendary);
    }


    .text-warrior {
        color: var(--warrior) !important;
    }

    .text-paladin {
        color: var(--paladin) !important;
    }

    .text-ranger {
        color: var(--ranger) !important;
    }

    .text-rogue {
        color: var(--rogue) !important;
    }

    .text-mage {
        color: var(--mage) !important;
    }

    .text-priest {
        color: var(--priest) !important;
    }

    .text-technician {
        color: var(--technician) !important;
    }

    .text-alchemist {
        color: var(--alchemist) !important;
    }
    .text-monk{
        color: var(--monk) !important;
    }

    .ability{
        border: 1px solid var(--class);
        &:hover{
            background: color-mix(in srgb, var(--class),transparent 80%);
        }
        &.active{
            background: var(--class);
            color: white;
        }
        &.on-cooldown{
            filter: brightness(75%);
        }
    }

    a.disabled {
        cursor: not-allowed;
    }

    .text-disabled{
        color: #AAA;
    }
    .text-neutral{
        color: #DDD;
    }

    .no-access{
        filter: brightness(70%);
        border: 1px solid #DDD;
    }

    .full-access{
        border: 1px solid #DDD;
        color: #DDD;
    }

    .partial-access{
        border: 1px solid #AAA;
        color: #DDD;
    }
}

dialog::backdrop {
     background: #080808;
     opacity: 0.1;
}

.data-transfer{
    &.active{
        border: 1px solid var(--bs-primary-bg);
    }
    &:hover{
        filter: brightness(120%);
        border: 1px solid var(--white);
    }
}