#canvas-container {
    background-color: #2d3748;
}

.light-background-enabled #canvas-container {
    background-color: #ead8ad;
}

.guide-hex.guide-plain,
.guide-terrain-swatch.guide-plain {
    background-image: url("../assets/terrain/simple-plain-sample.png");
}

.guide-hex.guide-water,
.guide-terrain-swatch.guide-water {
    background-image: url("../assets/terrain/handdrawn-water-v4.png");
}

.guide-hex.guide-forest,
.guide-terrain-swatch.guide-forest {
    background-image: url("../assets/terrain/handdrawn-forest-v4.png");
}

.guide-hex.guide-ice,
.guide-terrain-swatch.guide-ice {
    background-image: url("../assets/terrain/handdrawn-ice-v2.png");
}

.guide-hex.guide-mountain,
.guide-terrain-swatch.guide-mountain {
    background-image: url("../assets/terrain/simple-hills-sample-v3.png");
}

.guide-hex.guide-plain,
.guide-hex.guide-water,
.guide-hex.guide-forest,
.guide-hex.guide-ice,
.guide-hex.guide-mountain,
.guide-terrain-swatch.guide-plain,
.guide-terrain-swatch.guide-water,
.guide-terrain-swatch.guide-forest,
.guide-terrain-swatch.guide-ice,
.guide-terrain-swatch.guide-mountain {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#turn-order-bar .turn-avatar.terrain-turn-avatar {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0 !important;
    background:
        radial-gradient(circle at 32% 26%, rgba(246, 249, 252, 0.86) 0%, rgba(167, 178, 191, 0.82) 17%, rgba(63, 72, 86, 0.9) 45%, rgba(18, 24, 35, 0.96) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(238, 242, 247, 0.46),
        inset 0 0 0 3px rgba(8, 13, 22, 0.72),
        0 2px 4px rgba(0, 0, 0, 0.32);
}

#turn-order-bar .turn-avatar.terrain-turn-avatar::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, var(--piece-panel-light) 0%, var(--piece-panel-mid) 48%, var(--piece-panel-dark) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        inset 0 -7px 10px rgba(2, 6, 23, 0.34),
        inset 0 5px 9px rgba(255, 255, 255, 0.1);
}

#turn-order-bar .turn-avatar.terrain-turn-avatar::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 1;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 58% 78%, var(--piece-accent-dark) 0%, rgba(0, 0, 0, 0) 45%),
        radial-gradient(circle at 30% 26%, var(--piece-accent-glow) 0%, rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

#turn-order-bar .turn-avatar.terrain-turn-avatar .terrain-turn-avatar-icon {
    position: relative;
    z-index: 2;
    width: 68%;
    height: 68%;
    margin: 0;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.58))
        contrast(1.16)
        saturate(1.12);
}

#turn-order-bar .turn-avatar.terrain-turn-avatar.current {
    box-shadow:
        inset 0 0 0 1px rgba(255, 251, 235, 0.58),
        inset 0 0 0 3px rgba(8, 13, 22, 0.74),
        0 0 0 2px rgba(251, 191, 36, 0.72),
        0 0 10px rgba(251, 191, 36, 0.42);
}

.light-background-enabled #turn-order-bar .turn-avatar.terrain-turn-avatar.current {
    box-shadow:
        inset 0 0 0 1px rgba(238, 242, 247, 0.58),
        inset 0 0 0 3px rgba(8, 13, 22, 0.74),
        0 0 0 2px rgba(124, 58, 237, 0.72),
        0 0 10px rgba(76, 29, 149, 0.34);
}

#active-player-info .terrain-panel-avatar,
#inspected-player-info .terrain-panel-avatar,
#ss-character-panel .terrain-panel-avatar {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex: 0 0 2.5rem;
    border: 0 !important;
    background:
        radial-gradient(circle at 32% 26%, rgba(246, 249, 252, 0.86) 0%, rgba(167, 178, 191, 0.82) 17%, rgba(63, 72, 86, 0.9) 45%, rgba(18, 24, 35, 0.96) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(238, 242, 247, 0.46),
        inset 0 0 0 3px rgba(8, 13, 22, 0.72),
        0 2px 4px rgba(0, 0, 0, 0.32);
}

#active-player-info .terrain-panel-avatar::before,
#inspected-player-info .terrain-panel-avatar::before,
#ss-character-panel .terrain-panel-avatar::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, var(--piece-panel-light) 0%, var(--piece-panel-mid) 48%, var(--piece-panel-dark) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        inset 0 -7px 10px rgba(2, 6, 23, 0.34),
        inset 0 5px 9px rgba(255, 255, 255, 0.1);
}

#active-player-info .terrain-panel-avatar::after,
#inspected-player-info .terrain-panel-avatar::after,
#ss-character-panel .terrain-panel-avatar::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 1;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 58% 78%, var(--piece-accent-dark) 0%, rgba(0, 0, 0, 0) 45%),
        radial-gradient(circle at 30% 26%, var(--piece-accent-glow) 0%, rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

#active-player-info .terrain-panel-avatar .terrain-panel-avatar-icon,
#inspected-player-info .terrain-panel-avatar .terrain-panel-avatar-icon,
#ss-character-panel .terrain-panel-avatar .terrain-panel-avatar-icon {
    position: relative;
    z-index: 2;
    width: 68%;
    height: 68%;
    margin: 0;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.58))
        contrast(1.16)
        saturate(1.12);
}

@media (max-width: 640px) {
    #turn-order-bar .turn-avatar.terrain-turn-avatar::before,
    #turn-order-bar .turn-avatar.terrain-turn-avatar::after,
    #active-player-info .terrain-panel-avatar::before,
    #active-player-info .terrain-panel-avatar::after,
    #inspected-player-info .terrain-panel-avatar::before,
    #inspected-player-info .terrain-panel-avatar::after,
    #ss-character-panel .terrain-panel-avatar::before,
    #ss-character-panel .terrain-panel-avatar::after {
        inset: 3px;
    }

    #turn-order-bar .turn-avatar.terrain-turn-avatar .terrain-turn-avatar-icon,
    #active-player-info .terrain-panel-avatar .terrain-panel-avatar-icon,
    #inspected-player-info .terrain-panel-avatar .terrain-panel-avatar-icon,
    #ss-character-panel .terrain-panel-avatar .terrain-panel-avatar-icon {
        filter:
            contrast(1.14)
            saturate(1.1);
    }
}