/* THE LOOK - shared by the game (style.css) and the site pages (home.css).
   Timber and gold: solid colours only, a 2px pixel unit for borders/bevels/shadows, square corners, white text with a dark brown pixel
   outline. The tokens below are the single source for all of it; style.css and home.css only say WHERE each is used. Load this first. */

:root {
    /* ---- Timber and gold ----------------------------------------------------------------------------------------------
       The HUD's look lives in these tokens. Everything below is a SOLID colour (no alpha): pixel art is drawn from a fixed palette, and
       a see-through grey over a busy game view gives muddy, unpredictable contrast. Taken from the game itself - the browns are
       the original Taking London HUD's own (#4D3423, #753E1C), the gold sits with the dirt tiles (hue ~44), and the greens are the
       grass. Text/background pairs are all at least 4.5:1 (body text on a panel is 11.5:1). */

    /* Wood: from the deepest well up to a hovered control */
    --ink: #1C1008;
    --wood-0: #22150D;
    --wood-1: #3A2616;
    --wood-2: #4D3423;
    --wood-3: #5E4129;
    --line: #6E4A2B;
    --line-dim: #2B1A0F;
    --hi: #9A6B3F;

    /* What replaced the faint white fills: rows and cards, controls, and a hovered control */
    --fill-sub: #402A19;
    --fill-ctrl: #4D3423;
    --fill-hover: #5E4129;

    /* Text, brightest to quietest. White bodies with a dark brown outline (--text-outline) - the outline does the work of keeping it
       readable, so the text itself can be as bright as it likes. Never alpha: an alpha text colour changes with whatever it sits on. */
    --text-hi: #FFFFFF;
    --text: #FFFFFF;
    --text-2: #E6DCC6;
    --text-3: #BDAE92;

    /* The outline: one pixel all the way round (hard, not blurred) and one more underneath to lift the letters off the page. It is
       darker than every wood tone, so it shows against a brown button as well as against the map. */
    --outline: #170C05;
    --text-outline: -1px 0 0 var(--outline), 1px 0 0 var(--outline), 0 -1px 0 var(--outline), 0 1px 0 var(--outline),
        -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline),
        0 2px 0 var(--outline);

    /* Gold marks what is selected, hovered or in play */
    --gold: #F2B93B;
    --gold-hi: #FFE08A;
    --gold-lo: #B07A12;
    --on-gold: #2A1708;
    --accent-wash: #62481F;
    --accent-wash-2: #7A5A1F;
    --accent-wash-3: #94701F;

    /* The gold of the Taking London lettering, sampled from the logo art itself (server_player_backdrop.png) - for the frame round it */
    --logo-gold: #DD970B;
    --logo-gold-hi: #EAB20D;
    --logo-gold-lo: #B36409;

    /* Meaning */
    --good: #8CCB5A;
    --bad: #EF6F5C;
    --bad-wash: #5A2A22;
    --good-wash: #34481F;
    --info: #6FB7D9;

    /* What a bar is for - construction, research, an army heading out, an army coming home */
    --fill-build: #3B6FB0;
    --fill-research: #7A4FA0;
    --fill-attack: #B3382B;
    --fill-return: #4B7A2A;

    /* ---- The pixel unit ----------------------------------------------------------------------------------------------
       One number for how thick a border, bevel or hard shadow is, the way TILE_SIZE is the one number for a map tile. The art is drawn
       at several screen pixels per art pixel, so a 1px hairline looks out of place next to it. Corners are square. */
    --px: 2px;
    --radius: 0px;

    /* Bevels: a lit top-left edge and a shaded bottom-right one, drawn inside the element's border. A hard (no blur) shadow under
       floating things. Pressed is the same bevel turned round. */
    --bevel-hi: #8A5F37;
    --bevel-lo: #26170E;
    --bevel-raised: inset var(--px) var(--px) 0 var(--bevel-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--bevel-lo);
    --bevel-pressed: inset var(--px) var(--px) 0 var(--bevel-lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--bevel-hi);
    --bevel-panel: inset var(--px) var(--px) 0 var(--line), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--wood-0);
    --bevel-well: inset var(--px) var(--px) 0 #120A05, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--wood-2);
    --bevel-gold: inset var(--px) var(--px) 0 var(--gold-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold-lo);
    /* Textures: tiny tiles (see public/assets/game/hud) laid over a solid colour at 2x with hard pixel edges, to take the flatness off big
       empty areas. Faint by design - they must never get in the way of the text on top. Use with background-size and image-rendering. */
    --texture-dither: url("/assets/game/hud/texture-dither.png");

    --shadow-hard: calc(var(--px) * 3) calc(var(--px) * 3) 0 rgba(0, 0, 0, 0.45);

    /* The names the rest of the stylesheet already used */
    --hud-bg: var(--wood-1);
    --hud-border: var(--ink);
    --hud-accent: var(--gold);
}

body {
    /* White letters with a dark brown pixel outline - see --text-outline. Inherited, so it only needs saying once. */
    text-shadow: var(--text-outline);
}

::selection {
    background: var(--gold);
    color: var(--on-gold);
    text-shadow: none;
}

:focus-visible {
    outline: var(--px) solid var(--gold);
    outline-offset: 0;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-3);
}

/* Tick boxes are gold, not the browser's blue */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--gold);
}

/* Dropdowns: the closed box is a sunken well like every other field (above); the list that opens is the same timber, with the hovered
   option in the usual selected-gold wash and the chosen one in solid gold. This is the browser's customisable-select mode; a browser
   without it keeps its own list, but with these colours. */
select option {
    background: var(--wood-1);
    color: var(--text-hi);
}

@supports (appearance: base-select) {
    select,
    ::picker(select) {
        appearance: base-select;
    }

    /* The open list is drawn by the browser, outside the page, so it doesn't pick up the page's font by itself */
    select,
    select option,
    ::picker(select) {
        font-family: inherit;
    }

    select {
        color: var(--text-hi);
        cursor: pointer;
    }

    select::picker-icon {
        color: var(--gold);
    }

    ::picker(select) {
        background: var(--wood-1);
        border: var(--px) solid var(--ink);
        border-radius: 0;
        box-shadow: var(--bevel-panel), var(--shadow-hard);
        padding: 0;
        margin-top: var(--px);
    }

    select option {
        padding: 6px 12px;
        border: none;
        text-shadow: var(--text-outline);
    }

    select option:hover,
    select option:focus-visible {
        background: var(--accent-wash);
    }

    select option:checked {
        background: var(--gold);
        color: var(--on-gold);
        text-shadow: none;
    }

    select option::checkmark {
        color: var(--on-gold);
    }
}

/* Scrollbars, to match */
* {
    scrollbar-color: var(--wood-3) var(--wood-0);
    scrollbar-width: auto;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
}

::-webkit-scrollbar-thumb {
    background: var(--wood-2);
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-raised);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wood-3);
}

::-webkit-scrollbar-corner {
    background: var(--wood-0);
}