/* Hint is a direct play action, with its three charges kept inside the button. */
:root body #screen-game .board-tools { gap: 8px; }
:root body #screen-game .board-tools #hint-button {
    display: flex; flex-direction: column; justify-content: center;
    width: 112px; height: 44px; min-height: 44px; padding: 4px 8px; gap: 4px; margin: 0;
    border: 1px solid #94723b; border-radius: 7px;
    background: linear-gradient(160deg, #416f50, #234a36);
    color: #fff4d8; box-shadow: inset 0 1px 0 #d9e7ab99, 0 2px 0 #674e2a;
    font: 600 .79rem/1.1 var(--font-ui); letter-spacing: 0; text-transform: none;
    -webkit-tap-highlight-color: transparent;
    /* Keep the exhausted label legible throughout the change on touch screens. */
    transition: none !important;
}
:root body #screen-game .board-tools #hint-button:not(:disabled):hover {
    background: linear-gradient(160deg, #4c7a59, #2b553e);
}
:root body #screen-game .board-tools #hint-button:not(:disabled):active {
    box-shadow: inset 0 2px 3px #16302199, 0 1px 0 #674e2a;
}
:root body #screen-game .board-tools #hint-button:focus-visible {
    outline: 3px solid #765018; outline-offset: 3px;
}
:root body #screen-game .board-tools #hint-button:disabled {
    opacity: 1; background: #e1d7bd; color: #625b49; border-color: #9c9279;
    box-shadow: inset 0 1px 2px #77674722; cursor: default;
}
:root body #screen-game[data-tutorial='true'] .board-tools #hint-button { display: none; }
#hint-button .hint-label { text-align: center; white-space: nowrap; }
#hint-button .hint-charges { display: flex; flex: 0 0 auto; gap: 4px; }
#hint-button .hint-charge {
    display: block; width: 18px; height: 8px; border: 1px solid #a8b29a;
    border-radius: 2px; background: #1b3c2d; box-shadow: inset 0 1px 2px #10251c99;
}
#hint-button .hint-charge.is-available {
    border-color: #f6dda0;
    background: linear-gradient(145deg, #fff0bd, #d9d291 48%, #a6b67d 50%, #c4d39b);
    box-shadow: inset 0 1px 0 #fffbe4, 0 0 0 1px #1c382c44;
}
#hint-button:disabled .hint-charge:not(.is-available) { background: #c1b79f; border-color: #8e836b; box-shadow: inset 0 1px 2px #77674733; }
/* The explanation stays until its square is handled; no close-button gutter. */
:root body #screen-game #hint-guide { padding: 0 10px 10px; }