:root {
    --accent: 239, 186, 77;
    --danger: 192, 57, 43;


    --bs-primary: var(--accent);
}

[theme=light] {
    --layout: 255, 255, 255;
    --bg: 244, 247, 248;
    --bg2: 238, 242, 245;
    --color: 44, 62, 80;
    --color-muted: 63, 90, 117;
}

:root,
[theme=dark] {
    --layout: 30, 32, 35;
    --bg: 24, 25, 28;
    --bg2: 20, 20, 23;
    --color: 225, 225, 225;
    --color-muted: 120, 130, 140;
}

/* Utilities */
.bg-layout {
    background: rgb(var(--layout));
}

.bg-bg {
    background: rgb(var(--bg));
}

.bg-bg-alt {
    background: rgb(var(--bg2));
}

.bg-contrast {
    background: rgba(var(--bg2), .45);
}

.bg-contrast-invert {
    background: rgba(var(--color), .25);
}

.color-color {
    color: rgb(var(--color));
}

.color-muted {
    color: rgb(var(--color-muted));
}

.color-accent {
    color: rgb(var(--accent));
}

.fw-medium {
    font-weight: 500;
}

.container.container-small {
    max-width: 768px;
}

.flip-image {
    transform: scaleX(-1);
}

/* Overrides */
.form-control, .form-select {
    color: rgb(var(--color));
    background-color: rgb(var(--bg2));
    border-color: rgb(var(--layout));
    border-width: 2px;
}

.form-control:focus, .form-select:focus {
    color: rgb(var(--color));
    background-color: rgb(var(--bg));
    border-color: rgb(var(--accent));
    box-shadow: 0 10px 20px -10px rgb(var(--accent), .5);
}

.table {
    border-color: transparent;
    margin-bottom: 0;

    color: rgb(var(--color));
    --bs-table-striped-color: rgba(var(--color), .7);
}

.page-item.disabled .page-link {
    background-color: rgb(var(--bg));
    border-color: rgb(var(--layout));
    color: rgb(var(--color-muted));
}

.page-item .page-link {
    background-color: rgb(var(--bg2));
    border-color: rgb(var(--layout));
    color: rgb(var(--color));
}

.btn-primary,
.page-item.active .page-link {
    background-color: rgba(var(--accent), .75);
    border-color: rgba(var(--accent), .75);
    color: rgb(var(--color));
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: rgba(var(--accent), .9);
    border-color: rgba(var(--accent), .9);
}

.btn-primary:focus {
    box-shadow: 0 10px 20px -10px rgb(var(--accent), .5);
}

.bg-primary {
    background-color: rgba(var(--accent), .8) !important;
}
.bg-secondary {
    background-color: rgba(var(--bg2), 1) !important;
}
.bg-danger {
    background-color: rgba(var(--danger), 1) !important;
}

.dropdown-menu {
    background-color: rgb(var(--bg2));
}

.dropdown-item {
    color: rgb(var(--color));
}

.dropdown-item:hover {
    background-color: rgb(var(--layout));
    color: rgb(var(--accent));
}

/* Start */
html,
body {
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;

    background: rgb(var(--layout));
    color: rgb(var(--color));
    font-family: 'Roboto', sans-serif;
}

.custom-spacing {
    letter-spacing: .1rem;
}

/* Navbar Modifications */
.navbar {
    background-color: rgba(var(--bg2), 0.8);
}

.navbar-nav .nav-link {
    color: rgb(var(--color));
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: transparent;
    color: rgb(var(--color));
    border-bottom: 2px solid rgb(var(--accent));
}

.nav-pills .nav-link {
    border-radius: 0;
    padding: 1rem 1.5rem;
    color: rgb(var(--color));
}

.page-navigation .sub-navigation {
    border-top: 2px solid rgb(var(--bg));
    background-color: rgba(var(--bg2), 0.6);
}

/* Header */
.page-header-wrapper {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.page-header-container {
    background: linear-gradient(0deg, rgb(var(--layout)) 0%, rgba(var(--layout), .2) 100%);
}

.search-box::placeholder {
    text-transform: uppercase;
}

.search-box {
    background: rgba(var(--bg2), .8);
    color: rgb(var(--color-muted));
    border: 0;
    text-transform: none;
}

.search-box:focus {
    background: rgba(var(--bg2), 1);
    color: rgb(var(--color));
    border: 0;
    box-shadow: 0 -2px 0 0 rgb(var(--accent)) inset;
}

.search-suggestions {
    left: 0;
    right: 0;
}

.search-suggestions .search-suggestion {
    background: rgba(var(--bg2), .8)
}

.search-suggestions .search-suggestion:hover {
    background: rgba(var(--accent), .8);
}

/* Tables */
.table-player-head {
    width: 3rem;
}

.table-trophy {
    --ggs: 1.5;
}

.table.pad-rows tr td:first-child,
.table.pad-rows tr th:first-child {
    padding-left: 2rem;
}
.table.pad-rows tr td:last-child,
.table.pad-rows tr th:last-child {
    padding-right: 2rem;
}

/* Stat Cards */
.stat-card {
    padding: 1rem;
    border-radius: .25rem;
    background: rgba(var(--bg), .8);
    border: 2px solid rgba(var(--bg2), .4);
    box-shadow: 0 10px 20px -10px rgb(var(--accent), .1);
}

.stat-card .stat-card-title {
    font-size: 1.25rem;
}

.stat-card .stat-card-value {
    font-size: 1.75rem;
    font-weight: bold;
}

/* Player Profiles */
.player-profile-head {
    max-width: 12rem;
}

/* Arenas */
.fight-player-head {
    width: auto;
    height: 40px;
}

.arena-image {
    background-size: cover;
    background-position: center;
}

/* Fights */
.player-inventory {
    image-rendering: pixelated;
}

.player-inventory-row {
    display: flex;
}

.player-inventory-slot {
    position: relative;

    padding: 4px;

    min-width: 40px;
    min-height: 40px;

    margin-right: .5rem;
    margin-bottom: .5rem;

    background: rgb(var(--bg2));
}

.player-inventory-slot img {
    width: 100%;
    height: 100%;
}

.player-inventory-slot.enchanted {
    background: radial-gradient(mediumpurple, rebeccapurple 40%, rgb(var(--bg2)) 100%);
}

.player-inventory-slot:hover .item-tooltip {
    display: block;
}

.player-inventory-slot .item-tooltip {
    display: none;

    background-color: rgba(16,0,16,0.94);
    padding: .5rem;

    position: absolute;
    top: 0;
    right: 0;

    z-index: 999;
    transform: translateX(100%);

    pointer-events: none;
    white-space: nowrap;
}

.player-inventory-slot .item-tooltip::before {
    content: "";
    position: absolute;
    top: 0.125em;
    right: -0.125em;
    bottom: 0.125em;
    left: -0.125em;
    border: 0.125em solid rgba(16, 0, 16, 0.94);
}

.player-inventory-slot .item-tooltip::after {
    content: "";
    position: absolute;
    top: 0.125em;
    right: 0;
    bottom: 0.125em;
    left: 0;
    border: 0.125em solid #2D0A63;
    border-image: -webkit-linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1;
    border-image: linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1;
}

.player-inventory-slot .slot-amount {
    position: absolute;
    bottom: 4px;
    right: 6px;

    user-select: none;

    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.stat-bar {
    image-rendering: pixelated;
}

.stat-bar .stat {
    height: 24px;
}

.player-inventory.reversed .player-inventory-slot {
    margin-right: 0;
    margin-left: .5rem;
}

.player-inventory.reversed .player-inventory-slot .item-tooltip {
    right: initial;
    transform: translateX(-100%);
}

.flex-basis-0 {
    flex-basis: 0;
}

/* Icons from css.gg */
.ggs-1 {
    --ggs: .5;
}
.ggs-2 {
    --ggs: .75;
}
.ggs-3 {
    --ggs: 1;
}
.ggs-4{
    --ggs: 1.25;
}
.ggs-5 {
    --ggs: 1.5;
}

.gg-copy {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 14px;
    height: 18px;
    border: 2px solid;
    margin-left: -5px;
    margin-top: -4px
}

.gg-copy::after,
.gg-copy::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}

.gg-copy::before {
    background:
        linear-gradient(to left,
            currentColor 5px, transparent 0) no-repeat right top/5px 2px,
        linear-gradient(to left,
            currentColor 5px, transparent 0) no-repeat left bottom/ 2px 5px;
    box-shadow: inset -4px -4px 0 -2px;
    bottom: -6px;
    right: -6px;
    width: 14px;
    height: 18px
}

.gg-copy::after {
    width: 6px;
    height: 2px;
    background: currentColor;
    left: 2px;
    top: 2px;
    box-shadow: 0 4px 0, 0 8px 0
}

.gg-trophy {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 10px;
    height: 12px;
    border: 2px solid;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px
}

.gg-trophy::after,
.gg-trophy::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}

.gg-trophy::before {
    box-shadow: inset 0 0 0 2px, 0 2px 0 0;
    bottom: -4px;
    width: 6px;
    height: 4px;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    left: 0
}

.gg-trophy::after {
    width: 16px;
    height: 6px;
    border-left: 2px solid;
    border-right: 2px solid;
    left: -5px;
    top: 0
}

.gg-stopwatch {
    background:
        linear-gradient(to left,
        currentColor 7px,transparent 0)
        no-repeat 6px 2px/2px 6px;
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px
}
.gg-stopwatch::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 4px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    right: -4px;
    top: -3px
}

.gg-calendar-dates {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 18px;
    height: 18px;
    border: 2px solid;
    border-radius: 3px
}
.gg-calendar-dates::after,
.gg-calendar-dates::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    height: 2px;
    left: 2px
}
.gg-calendar-dates::before {
    background: currentColor;
    width: 2px;
    box-shadow:
        4px 0 0,8px 0 0,0 4px 0,
        4px 4px 0,8px 4px 0;
    top: 6px
}
.gg-calendar-dates::after {
    width: 10px;
    top: -4px;
    box-shadow: 0 6px 0 0
}

.gg-pin {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: rotate(45deg) scale(var(--ggs,1));
    width: 18px;
    height: 18px;
    border-radius: 100% 100% 0 100%;
    border: 2px solid;
    margin-top: -4px
}
.gg-pin::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid;
    top: 3px;
    left: 3px;
    border-radius: 40px
}

.gg-box {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 20px;
    border: 2px solid;
    border-radius: 3px
}

.gg-box::after,
.gg-box::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    height: 2px;
    background: currentColor
}

.gg-box::before {
    left: 6px;
    width: 6px;
    top: 8px
}

.gg-box::after {
    width: 22px;
    left: -2px;
    top: 4px
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; }
.hamburger:hover {
    opacity: 0.7; }
.hamburger:not(.collapsed):hover {
    opacity: 0.7; }
.hamburger:not(.collapsed) .hamburger-inner,
.hamburger:not(.collapsed) .hamburger-inner::before,
.hamburger:not(.collapsed) .hamburger-inner::after {
    background-color: rgb(var(--color-muted)); }

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; }

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: rgb(var(--color-muted));
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
.hamburger-inner::before {
    top: -10px; }
.hamburger-inner::after {
    bottom: -10px; }


.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0s 0.13s linear; }
.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring:not(.collapsed) .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent !important; }
.hamburger--spring:not(.collapsed) .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring:not(.collapsed) .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }