/*
 * Wood buttons — small brown "wooden token" buttons, lit from above, with a dark rim and
 * pale glyphs. From the TFT Intro project (October 2026). Pure CSS. See wood-buttons.md.
 *
 *   <button class="wood-btn">→</button>
 *
 * Every size is in em, so a button scales with the font-size of where it sits:
 * set font-size on the button or its container to resize it.
 * Colours are custom properties; override them on .wood-btn or any ancestor.
 */

.wood-btn {
    --wood-light: #A0703F;           /* top of the gradient */
    --wood-dark: #7E5230;            /* bottom of the gradient */
    --wood-light-hover: #B07D4A;
    --wood-dark-hover: #8B5A34;
    --wood-rim: #4A2C14;             /* border and focus outline */
    --wood-text: LemonChiffon;       /* glyph colour; matches the pale surface it was designed on */

    appearance: none;
    font: inherit;
    font-size: 1em;
    line-height: 1.2;
    padding: 0.1em 0.6em;
    cursor: pointer;
    color: var(--wood-text);
    background: linear-gradient(to bottom, var(--wood-light), var(--wood-dark));
    border: max(1px, 0.07em) solid var(--wood-rim);
    border-radius: 0.35em;
    box-shadow:
        inset 0 0.06em 0 rgba(255, 235, 190, 0.35),   /* highlight along the top edge */
        0 0.08em 0.15em rgba(60, 35, 15, 0.45);        /* small drop shadow onto the surface */
    text-shadow: 0 0.05em 0 rgba(40, 20, 5, 0.6);
    transition: background 0.15s ease, transform 0.1s ease;
}

.wood-btn:hover {
    background: linear-gradient(to bottom, var(--wood-light-hover), var(--wood-dark-hover));
}

.wood-btn:active {
    transform: translateY(0.05em);
    box-shadow: inset 0 0.08em 0.15em rgba(40, 20, 5, 0.5);
}

.wood-btn:focus-visible {
    outline: max(2px, 0.08em) solid var(--wood-rim);
    outline-offset: 0.12em;
}

.wood-btn:disabled {
    cursor: default;
    opacity: 0.5;
    transform: none;
}