/* Shared setup-screen and board/word-list styles for boggle.html and
   boggle-static.html. See shared.css for site-wide tokens/reset that
   apply to every game on this site -- this file is Boggle-specific. */

button.option {
    font-weight: normal;
    letter-spacing: 0.03em;
}

button.option.active {
    background: var(--die-kept);
    color: var(--accent);
    font-weight: bold;
}

.setup-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.setup-row .label {
    color: var(--ink);
    font-weight: bold;
    letter-spacing: 0.05em;
    font-size: clamp(13px, 1.8vmin, 17px);
}

/* Dims a row whose choice no longer matters -- e.g. Time Limit and Visual
   Timer once Untimed is switched on -- rather than hiding it outright, so
   the previously-picked value is still visible (just inert) if Untimed is
   switched off again. */
.setup-row.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.option-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.dictionary-status {
    color: var(--ink);
    font-size: clamp(12px, 1.5vmin, 15px);
    opacity: 0.85;
    text-align: center;
}

.status-line {
    min-height: 1.2em;
    font-size: clamp(12px, 1.6vmin, 16px);
    color: var(--ink);
    text-align: center;
}

/* ---- Board area: grid + word list panel ---- */
.board-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 3vmin, 40px);
    width: 100%;
}

/* Once the word list is showing alongside the board, shrink the board so
   both sit side by side on one screen instead of the list wrapping below
   and needing the page to grow taller. wordListHeightBudget() in
   boggle-shared.js matches this width, which is what lets the list decide,
   per length, whether it needs to wrap into sub-columns. The transition is
   scoped to this rule (rather than left to shared.css's site-wide reset)
   so the board sliding over to make room for the reveal is a deliberate,
   gentle motion instead of an instant jump. */
#game.with-list .grid {
    width: min(38vw, 48vh);
    transition: width 0.8s ease !important;
}

/* ---- Dice ---- */
.grid {
    display: grid;
    gap: clamp(6px, 1.1vmin, 14px);
}

.die {
    aspect-ratio: 1 / 1;
    background: var(--die);
    border: 2px solid var(--die-border);
    border-radius: clamp(5px, 0.9vmin, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 4px 10px var(--die-shadow);
    position: relative;
}

.letter {
    font-weight: bold;
    color: var(--ink);
    line-height: 1;
    user-select: none;
}

/* "Qu" is the only letter with a descender (the tail on the Q), so unlike
   the other glyphs its ink sits visibly lower than its line box's
   baseline-centered position -- nudge it back up to match. */
.letter.descender {
    transform: translateY(-0.07em);
}

/* ---- Word list panel ---- */
.word-list-panel {
    background: var(--die);
    border: 2px solid var(--die-border);
    border-radius: 10px;
    padding: clamp(12px, 1.6vmin, 20px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Sized to its content rather than a fixed width, so a short list
       stays compact, while a long one is free to grow -- up to this cap --
       across however many columns it needs. The cap is generous (rather
       than keeping the grid+panel block small and centered with a lot of
       empty margin on either side) since a bigger, more TV-readable word
       list is worth the board and panel sitting closer to the screen
       edges. */
    width: fit-content;
    max-width: min(66vw, 1400px);
    min-width: 0;
    /* Belt-and-suspenders against the multi-col word list (see
       maxSubColumns() in boggle-shared.js) ever pushing this box's
       background past its own edge and causing horizontal scrolling. */
    overflow-x: hidden;
}

/* Below 900px, 66vw is a needlessly tight cap -- on a phone there's no
   large empty margin to preserve either side of a centered board, so the
   post-game reveal has room to be much wider before it would ever need a
   horizontal scrollbar. A wider box means more (and, per maxSubColumns()
   in boggle-shared.js, wider) sub-columns fit per word length before
   falling back to extra rows instead. */
@media (max-width: 899px) {
    .word-list-panel {
        max-width: 94vw;
    }
}

.word-list-panel .title {
    color: var(--bar);
    font-weight: bold;
    letter-spacing: 0.06em;
    font-size: clamp(15px, 2.2vmin, 20px);
    text-align: center;
}

/* One column per word length, each a flex item in a wrapping row --
   flexbox lines up every header in a row on the same top edge for free,
   and if the row runs out of width, the next line of columns gets the
   same treatment automatically. */
.word-columns {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: clamp(18px, 2vw, 30px);
    row-gap: clamp(14px, 1.8vmin, 24px);
}

.word-column {
    display: flex;
    flex-direction: column;
    min-width: 84px;
}

.word-column-header {
    color: var(--bar);
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.04em;
    font-size: clamp(13px, 1.9vmin, 18px);
    border-bottom: 1px solid var(--die-border);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.word-list {
    list-style: none;
}

.word-list li {
    color: var(--ink);
    font-size: clamp(14px, 2vmin, 19px);
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.word-list li.found {
    color: var(--accent);
    font-weight: bold;
}

/* A length with a lot of words (usually 3s and 4s) would otherwise run
   taller than the board -- once a list's natural height passes the
   budget, it switches to this side-by-side row of independent lists
   instead of growing further down. Word count per list (and how many
   lists) is decided in JS (see renderWordColumns in boggle-shared.js),
   which also caps the number of lists to however many fit the screen's
   width -- each list here just gets a fixed width so that cap actually
   holds. (An earlier version used CSS column-count on one list instead;
   that's simpler, but a multi-column box is free to add an extra column of
   its own when the content doesn't divide evenly into the given height,
   which pushed the layout past its intended width -- off the edge of the
   screen on a narrow phone.) */
.word-sublists {
    display: flex;
    gap: 16px;
}

.word-sublists .word-list {
    width: 84px;
    flex: 0 0 auto;
}