/* The match table (journal 007; specs/table.md), as design/_shared/base.css draws it in the mockups. Structure only: every colour, font, radius, shadow and texture is a token. The board is drawn on the stage, above the DOM, over its slot; what must cover it (the menu, the curtain, sheets) stands above the stage (z-index 2 and up). */

/* The table in the full region: the phone's column, centred, never wider than --size-column-wide in portrait */
.table { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--size-column-wide); height: 100%; margin: 0 auto; overflow: hidden; background: var(--color-bg); }

/* The bar: the match's kind and options; a tap drops the match menu */
.table-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; flex: none; }
.table-bar__title { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.table-bar__kind { max-width: 100%; font-weight: 700; font-size: var(--font-size-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-bar__chevron { margin-left: 6px; color: var(--color-text-muted); }
.table-bar__detail { color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* The connection lost: the detail line says so, in place of the board and language */
.table-bar__detail--reconnecting { display: inline-flex; align-items: center; gap: 6px; color: var(--color-clock-low); font-weight: 600; }
.table-bar__pulse { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-clock-low); }
.table-bar--open { z-index: 3; background: var(--color-surface-raised); }

/* The match menu: dropped from under the bar over the dimmed table */
.drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 1px; background: var(--color-line); box-shadow: var(--shadow-drop); }
.drop__item { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; background: var(--color-surface-raised); font-weight: 600; text-align: left; }
.drop__item:disabled { color: var(--color-disabled-text); cursor: default; }
.drop__icon { width: 24px; text-align: center; font-size: var(--font-size-l); line-height: 1; }
.drop__item--danger { color: var(--color-danger); }

/* A player's seat: name, points, clock */
.seat { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; flex: none; min-width: 0; }
.seat__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.seat--green .seat__dot { background: var(--color-green); }
.seat--blue .seat__dot { background: var(--color-blue); }
.seat__name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat__tag { color: var(--color-text-muted); font-weight: 400; }
.seat__points { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.seat__points-unit { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; margin-left: 2px; }
.seat__clock { min-width: 64px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.seat--blue .seat__clock--running { background: var(--color-blue); color: var(--color-tile-text); }
.seat--green .seat__clock--running { background: var(--color-green); color: var(--color-text-on-colour); }
.seat .seat__clock--low { background: var(--color-clock-low); color: var(--color-text-on-colour); }

/* The board's slot: the board view draws over it and it takes the taps. It shrinks only as far as keeps the panel's minimum */
.table__board { flex: 0 1 auto; min-height: 0; margin: 4px 16px; touch-action: manipulation; }

/* The traced word, with Clear and Play */
.tray { display: flex; align-items: center; gap: 8px; height: 52px; margin: 4px 16px; padding: 0 6px; border-radius: var(--radius-control); background: var(--color-surface); flex: none; }
.tray__word { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; font-family: var(--font-board); font-size: var(--font-size-m); font-weight: 400; letter-spacing: 0.08em; }
.tray__clear { width: 36px; height: 36px; flex: none; border-radius: var(--radius-control); color: var(--color-text-muted); font-size: var(--font-size-l); }
.tray__clear:disabled { color: var(--color-disabled-text); cursor: default; }
/* Play and Wait are the same size, whatever their labels */
.tray__play, .tray__strike { min-width: 88px; height: 40px; flex: none; padding: 0 16px; border-radius: var(--radius-control); font-weight: 700; }
.tray__play { background: var(--color-blue); color: var(--color-tile-text); }
/* On one phone Play takes the mover's colour */
.tray__play--green { background: var(--color-green); color: var(--color-text-on-colour); }
.tray__play:disabled { background: var(--color-surface-raised); color: var(--color-disabled-text); cursor: default; }
.tray__play--waiting:disabled { color: var(--color-text-muted); }
/* The Letter bonus's letter in the traced word: belongs to no cell; a tap removes it */
.tray__extra { padding: 2px 4px; border-radius: var(--radius-tile); box-shadow: inset 0 0 0 2px var(--color-traced); color: var(--color-traced); font: inherit; letter-spacing: inherit; }

/* Lightning: the traced word's bar becomes the targeting bar */
.tray__prompt { flex: 1; min-width: 0; text-align: center; font-size: var(--font-size-s); font-weight: 600; }
.tray__prompt-letter { font-family: var(--font-board); color: var(--color-lightning); }
.tray__strike { background: var(--color-lightning); color: var(--color-text-on-colour); }
.tray__strike:disabled { background: var(--color-surface-raised); color: var(--color-disabled-text); cursor: default; }

/* A refusal: its reason replaces the traced word until the next tap; the word stays traced on the board */
.tray--refused { background: var(--color-note); }
.tray__reason { flex: 1; min-width: 0; font-size: var(--font-size-s); }
.tray__reason-word { font-weight: 700; letter-spacing: 0.04em; }
.tray__report { height: 40px; flex: none; padding: 0 16px; border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font-weight: 600; }
/* Reported: the button gives way to a greyed note; a failure takes the reason's place */
.tray__report--done, .tray__report--done:disabled { background: none; color: var(--color-text-muted); cursor: default; }

/* A draw offer: received, or the offerer waiting, in the traced word's bar */
.tray--offer { justify-content: center; background: var(--color-surface-raised); }
.tray__offer { font-weight: 600; text-align: center; }
.tray__offer-name--green { color: var(--color-green); }
.tray__offer-name--blue { color: var(--color-blue); }

/* The row under the tray: the bonuses, the race, or the answers to an offer */
.table .bonuses { margin: 4px 16px 8px; flex: none; min-height: 40px; }
.bonuses--2 { grid-template-columns: repeat(2, 1fr); }
.bonuses--1 { grid-template-columns: 1fr; }
.bonus__name { white-space: nowrap; }

/* The contested first turn: a race on its own short timer, outside both clocks, in the bonuses' place */
.race { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; align-content: center; height: 40px; margin: 4px 16px 8px; padding: 0 12px; border-radius: var(--radius-control); background: var(--color-surface); font-size: var(--font-size-s); flex: none; }
.race__text { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race__time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-traced); }
.race__bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--color-surface-raised); overflow: hidden; }
.race__fill { display: block; height: 100%; background: var(--color-traced); }

/* The answers to a draw offer, in the bonuses' place */
.answer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 16px 8px; flex: none; }
.answer .button { height: 40px; }
.answer--single { grid-template-columns: 1fr; }

/* The Letter bonus's alphabet, over the bonuses and the panel (in the wide layout the panel stays beside it) */
.table--letter:not(.table--wide) .panel { display: none; }
.picker { flex: 1 1 0; min-height: var(--size-panel-min); display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; margin-top: 4px; overflow-y: auto; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.picker__head { display: flex; justify-content: space-between; align-items: center; }
.picker__title { font-weight: 700; }
.picker__hint { color: var(--color-text-muted); font-size: var(--font-size-s); font-weight: 500; }
.picker__keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.picker__key { height: 34px; border-radius: var(--radius-tile); background: var(--color-tile-grey); color: var(--color-tile-text); font-family: var(--font-board); font-size: var(--font-size-s); box-shadow: var(--shadow-tile); }
.picker__key--chosen { background: var(--color-traced); color: var(--color-traced-text); }
.picker__cancel { height: 32px; padding: 0 4px; color: var(--color-text-muted); font-weight: 600; }

/* The panel under the board: words played and chat, by tabs; it takes the height the board leaves */
.panel { flex: 1 1 0; min-height: var(--size-panel-min); display: flex; flex-direction: column; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.panel__tabs { display: flex; flex: none; }
.panel__tab { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-muted); font-size: var(--font-size-s); font-weight: 600; }
.panel__tab--active { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-blue); }
.panel__tab--green.panel__tab--active { box-shadow: inset 0 -2px 0 var(--color-green); }
.panel__count { color: var(--color-text-muted); font-weight: 500; }
.panel__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-badge); color: var(--color-tile-text); font-size: var(--font-size-xs); display: inline-flex; align-items: center; justify-content: center; }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; }
/* Scrolled down the list: older words, the newest faded out above */
.panel__body--scrolled { mask-image: var(--mask-fade-top); -webkit-mask-image: var(--mask-fade-top); }
/* Chat's widget, in the panel's second tab */
.panel__body--chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 20px; }
.word { display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; font-size: var(--font-size-s); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.word__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.word--blue .word__dot { background: var(--color-blue); }
.word--green .word__dot { background: var(--color-green); }
.word__text { flex: 1; min-width: 0; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.word__reported { margin-left: 6px; color: var(--color-text-muted); font-weight: 400; }
.word__points { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Fog's curtain on one phone: covers the whole table below the bar, in the next mover's colour */
.curtain { position: absolute; inset: 48px 0 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 0 32px; text-align: center; }
.curtain--green { background: var(--texture-curtain); }
.curtain--blue { background: var(--texture-curtain-blue); }
.curtain__turn { font-size: var(--font-size-xl); font-weight: 700; }
.curtain__played { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.curtain__played-by { color: var(--color-text-muted); font-size: var(--font-size-s); }
.curtain__word { font-family: var(--font-board); font-size: var(--font-size-curtain-word); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.curtain__points { color: var(--color-traced); font-weight: 700; font-size: var(--font-size-l); }
.curtain__reveal { width: 100%; max-width: var(--size-column); height: 64px; border-radius: var(--radius-control); font-size: var(--font-size-l); font-weight: 700; }
.curtain__reveal--green { background: var(--color-green); color: var(--color-text-on-colour); }
.curtain__reveal--blue { background: var(--color-blue); color: var(--color-tile-text); }

/* The end of the match: a sheet over the lower table, the board above it */
.sheet__reason { margin: 0; text-align: center; color: var(--color-text); }
.sheet__word { font-weight: 700; letter-spacing: 0.04em; color: var(--color-traced); }
.sheet__stats { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-s); }
.sheet__score { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; padding: 12px 14px; border-radius: var(--radius-control); background: var(--color-surface); font-variant-numeric: tabular-nums; }
.table__end .button--quiet { width: 100%; }

/* A phone on its side: too short for the column; the bar stays, the match goes on behind the notice */
.sideways { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.sideways__icon { font-size: var(--font-size-xl); color: var(--color-text-muted); letter-spacing: 0.3em; }
.sideways__text { margin: 0; font-size: var(--font-size-l); font-weight: 700; text-align: center; }
.table:not(.table--sideways) > .sideways { display: none; }
.table--sideways { max-width: none; }
.table--sideways > :not(.table-bar):not(.sideways) { display: none; }

/* The table collapsed: the panel scrolled or Chat opened. The board shrinks whole into the top-left corner, the seats stand beside it; the tray and the row under it fold away until the board is tapped or the panel scrolled back to its top */
.table--collapsed { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 48px auto auto minmax(0, 1fr); grid-template-areas: "bar bar" "board top" "board bottom" "panel panel"; column-gap: 4px; }
.table--collapsed .table-bar { grid-area: bar; }
.table--collapsed .table__board { grid-area: board; width: 150px; margin: 0 0 12px 16px; }
.table--collapsed .seat { flex-wrap: wrap; align-content: center; row-gap: 6px; height: auto; padding: 0 16px 0 12px; }
.table--collapsed .seat--top { grid-area: top; align-self: start; }
.table--collapsed .seat--bottom { grid-area: bottom; align-self: end; margin-bottom: 12px; }
.table--collapsed .seat__name { flex-basis: calc(100% - 20px); }
.table--collapsed .seat__points { flex: 1; }
.table--collapsed .panel { grid-area: panel; min-height: 0; }
.table--collapsed .tray, .table--collapsed .bonuses, .table--collapsed .race, .table--collapsed .answer, .table--collapsed .picker { display: none; }

/* Wide screens, in landscape: the phone's table as a column, the panel beside it at full height; nothing collapses */
.table--wide { display: grid; max-width: none; justify-content: center; grid-template-columns: minmax(0, 520px) minmax(0, 400px); grid-template-rows: 48px 44px minmax(0, max-content) 44px auto auto 1fr; grid-template-areas: "bar panel" "top panel" "board panel" "bottom panel" "tray panel" "row panel" ". panel"; }
.table--wide .table-bar { grid-area: bar; }
.table--wide .seat--top { grid-area: top; }
.table--wide .seat--bottom { grid-area: bottom; }
.table--wide .table__board { grid-area: board; margin: 4px 30px; }
.table--wide .tray { grid-area: tray; }
.table--wide .bonuses, .table--wide .race, .table--wide .answer, .table--wide .picker { grid-area: row; }
.table--wide .picker { margin: 4px 16px 8px; border-top: 0; border-radius: var(--radius-control); }
.table--wide .panel { grid-area: panel; min-height: 0; border-top: 0; border-left: 1px solid var(--color-line); }