@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:ital,wght@0,200..900;1,200..900&display=swap');

html, body {
    margin: 0;
    padding: 0;
}

:root {
    /*
    https://coolors.co/palette/f94144-f3722c-f8961e-f9844a-f9c74f-90be6d-43aa8b-4d908e-577590-277da1
    */

    font-family: "Zalando Sans SemiExpanded", sans-serif;
    --market-reserve: 15vh;
    --board-height: min(5vh, calc((100vh - var(--market-reserve)) / 9));
    --evolution-height: calc(3vh);
    --fs-xxl: clamp(12px, 2.4vmin, 24px);
    --fs-xxxl: clamp(14px, 3vmin, 28px);
    --fs-xl: clamp(11px, 2vmin, 20px);
    --fs-m: clamp(10px, 1.6vmin, 16px);
    --fs-s: clamp(9px, 1.2vmin, 14px);
    --fs-xs: clamp(8px, 1vmin, 12px);

    --highlight-color: #a66fb5;
    --text-color: black;
    --red: #F94144;
    --orange: #F9844A;
    --white: floralwhite;
    --black: black;
    --yellow: #F9C74F;
    --blue: #577590;
    --green: #90BE6D;
    --honey: #F8961E;
    --beige: beige;
    --beige-bg: linear-gradient(180deg, rgba(253, 246, 227, 0.98), rgba(241, 229, 200, 0.98));
    --hardbeige: #d4d49f;
    --grey: grey;
    --raised-shadow: 0 2px 4px rgba(0, 0, 0, 0.38), 0 0 0 0.35px rgba(0, 0, 0, 0.12), inset 0 -2px 3px rgba(255, 255, 255, 0.6), inset 0 2px 3px rgba(0, 0, 0, 0.24);
    --card-shadow: 0 3px 8px rgba(0, 0, 0, 0.42), 0 0 0 0.35px rgba(0, 0, 0, 0.12), inset 0 -2px 3px rgba(255, 255, 255, 0.5), inset 0 2px 3px rgba(0, 0, 0, 0.22);
    --card-drop-shadow: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 0.35px rgba(0, 0, 0, 0.12));
    --button-radius: 0.45vmin;
    --button-border: rgba(0, 0, 0, 0.2);
    --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 0.35px rgba(0, 0, 0, 0.18);
    --button-shadow-active: inset 0 2px 3px rgba(0, 0, 0, 0.35);
    --button-press-y: 1px;
    --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 -2px 3px rgba(255, 255, 255, 0.55);
}

.red {
    background: var(--red, red);
}

.orange {
    background: var(--orange, orange);
}

.white {
    background: var(--white, white);
}

.yellow {
    background: var(--yellow, yellow);
}

.pass,
.chat-send,
.colony-collapse-event-player-offer-submit,
.queen-trading-close,
.queen-trading-player-offer-resource,
.season-overview-close,
.lobby-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35vmin;
    min-height: 2.2vmin;
    padding: 0.35vmin 0.7vmin;
    border-radius: var(--button-radius);
    border: 1px solid var(--button-border);
    background: var(--button-bg, var(--highlight-color));
    color: var(--button-fg, var(--beige));
    box-shadow: var(--button-shadow);
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.queen-trading-player-offer-resource {
    --button-bg: var(--yellow);
    --button-fg: var(--text-color);
}

.pass:hover,
.chat-send:hover,
.colony-collapse-event-player-offer-submit:hover,
.queen-trading-close:hover,
.queen-trading-player-offer-resource:hover,
.season-overview-close:hover,
.lobby-start:hover {
    filter: brightness(1.06) saturate(1.06);
}

.pass:active,
.chat-send:active,
.colony-collapse-event-player-offer-submit:active,
.queen-trading-close:active,
.queen-trading-player-offer-resource:active,
.season-overview-close:active,
.lobby-start:active {
    transform: translateY(var(--button-press-y));
    box-shadow: var(--button-shadow-active);
}

input.dash-input,
textarea.dash-input {
    background: var(--beige-bg);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0.5vmin;
    box-shadow: var(--inset-shadow);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--fs-m);
    padding: 0.45vmin 0.6vmin;
}

input.dash-input:focus,
textarea.dash-input:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--highlight-color), transparent 65%), var(--inset-shadow);
}

.lobby input[type="checkbox"],
.lobby-game-options input[type="checkbox"] {
    appearance: none;
    width: var(--lobby-marker-size, 1.6vmin);
    height: var(--lobby-marker-size, 1.6vmin);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    background: var(--beige-bg);
    box-shadow: var(--raised-shadow);
    display: inline-grid;
    place-items: center;
    margin: 0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

.lobby input[type="checkbox"]:checked,
.lobby-game-options input[type="checkbox"]:checked {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
}

.lobby input[type="checkbox"]:checked::after,
.lobby-game-options input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 15%;
    background-color: var(--white);
    -webkit-mask-image: url("./../images/resources/worker.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("./../images/resources/worker.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.lobby input[type="checkbox"]:focus-visible,
.lobby-game-options input[type="checkbox"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--highlight-color), transparent 65%);
    outline-offset: 1px;
}