/* the playable sample's chooser and its two word games (W2-09). Tokens are style.css's (light and dark); logical properties throughout. */
.try-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; }
.try-tabs[hidden] { display: none; }
.try-tab { font: inherit; font-weight: 600; font-size: 17px; min-height: 44px; min-width: 44px; padding: 6px 22px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; }
.try-tab:hover { border-color: var(--lapis); }
.try-tab:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; }
.try-tab[aria-selected="true"] { background: var(--lapis); color: var(--lapis-ink); border-color: var(--lapis); }
.try-panel[hidden] { display: none; }
.try-panel > .jump-row { margin-top: 0; }
.try-lead { max-width: 40em; margin-bottom: 20px; }
.try-lead p { color: var(--muted); }
@media (max-width: 560px) { .try-tab { flex: 1 1 calc(50% - 8px); padding-inline: 12px; } }

/* the boards of S14 and S15 */
.wg-gloss { margin: 0 0 12px; }
.wg-gloss:empty, .wg-gloss[hidden] { display: none; }
.wg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; margin-top: 6px; }
.wg-route { margin: 0; color: var(--muted); font-size: 16px; text-align: center; }
.wg-route[hidden] { display: none; }
.wg-word { display: flex; gap: 8px; justify-content: center; }
.wg-tile { all: unset; box-sizing: border-box; min-width: 56px; min-height: 64px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; cursor: pointer; transition: border-color .12s, background-color .12s; }
.wg-tile:hover { border-color: var(--lapis); }
.wg-tile:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.wg-tile.sel { background: var(--lapis); border-color: var(--lapis); color: var(--lapis-ink); }
.wg-tile[aria-disabled="true"] { cursor: default; }
.wg-goal { margin: 0; color: var(--muted); font-size: 16px; }
.wg-goal-word { color: var(--brass-text); font-family: var(--display); font-size: 22px; margin-inline-start: 6px; }
.wg-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; width: 100%; max-width: 420px; }
.wg-key { all: unset; box-sizing: border-box; min-height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 600; cursor: pointer; transition: border-color .12s, background-color .12s, transform .12s; }
.wg-key:hover { border-color: var(--lapis); }
.wg-key:active { transform: scale(.96); }
.wg-key:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.wg-key[aria-disabled="true"] { opacity: .45; cursor: default; }
.wg-key[aria-disabled="true"]:hover { border-color: var(--rule); }
.wg-key.root { border-color: var(--brass); background: var(--brass-soft); }
.wg-walk { margin: 0 0 8px; font-weight: 600; }
.wg-board .say.warn { color: var(--ink); }

.wg-root { margin: 0; display: grid; justify-items: center; gap: 2px; }
.wg-root-label { font-size: 14px; color: var(--faint); }
.wg-root-letters { font-family: var(--display); font-size: 30px; letter-spacing: .12em; padding: 2px 22px; border: 1.5px solid var(--brass); border-radius: 999px; background: var(--brass-soft); color: var(--ink); }
.wg-count { margin: 0; color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.wg-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; width: 100%; }
.wg-seat { display: grid; justify-items: center; align-content: center; min-height: 64px; padding: 6px 8px; border: 1.5px dashed var(--rule); border-radius: var(--r-sm); background: var(--paper); line-height: 1.5; }
.wg-seat.on { border-style: solid; border-color: var(--brass); background: var(--brass-soft); }
.wg-seat .w { font-family: var(--display); font-weight: 700; font-size: 20px; }
.wg-seat .k { font-size: 13px; color: var(--muted); }
.wg-draft { min-height: 56px; width: 100%; max-width: 420px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1.5px solid var(--rule); background: var(--surface); font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: 0; padding: 4px 12px; }
.wg-draft.empty::before { content: ''; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--rule); }
.wg-acts { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wg-acts .btn { min-height: 44px; }
.wg-acts .btn[disabled], .wg-board .jctl .btn[disabled] { opacity: .45; cursor: default; }
.wg-board .jctl .btn { min-height: 44px; }
.wg-board .jctl .btn.link { padding-inline: 8px; }
.wg-board .after .btn { min-height: 44px; }

/* a solve: the same quiet brass glow as the Jump board, no sound, no confetti */
.board.wg-board { transition: box-shadow .4s, border-color .4s; }
.board.wg-board.solved { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft), 0 10px 24px rgba(var(--shadow), .06); }

@media (max-width: 560px) {
  .wg-tile { min-width: 50px; min-height: 60px; font-size: 28px; }
  .wg-root-letters { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .try-tab, .wg-tile, .wg-key, .board.wg-board { transition: none; }
  .wg-key:active { transform: none; }
}

/* the boards take the column's width, never their keys' widest layout (a 1fr track would otherwise grow to the keyboard's max-content on a phone) */
.try-panel .sample > * { min-width: 0; }
@media (max-width: 900px) { .try-panel .sample { grid-template-columns: minmax(0, 1fr); } }