/* Игровой экран: единственный источник размеров стола, вопроса, руки и отправки. */
/* Карты и рука: единые размеры и состояния для стола, игрока и ведущего. */
.hand-area { margin-top: 16px; padding-bottom: 8px; min-width: 0; }
.hand-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hand-heading h2 { font-size: 18px; line-height: 1.25; }
.hand-heading h2 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.hand-heading > span { color: var(--muted); font-size: 12px; text-align: right; }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.answer-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 8px; min-width: 0; min-height: 84px;
  padding: 10px 12px; text-align: left; color: #171b20; background: #f0f1e9;
  border: 1px solid #bbc3b2; border-radius: 10px; box-shadow: 0 2px 0 #8e9982;
  opacity: 1; transition: border-color .12s, background .12s;
}
.answer-card strong { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hand .answer-card strong { padding-right: 22px; }
.answer-card > small { font-size: 11px; font-weight: 400; }
.answer-card:hover:not(:disabled):not([aria-disabled="true"]) { border-color: #748d27; background: #fff; }
.answer-card.selected { border-color: #688313; background: #e9f0d1; box-shadow: inset 0 0 0 1px #688313, 0 2px 0 #688313; transform: none; }
.answer-card.card-sent { border-color: #768f32; background: #e6edce; }
.answer-card:disabled, .answer-card[aria-disabled="true"] { cursor: default; opacity: 1; }
.answer-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.selection-number { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; color: #596052; }
.selection-number svg { width: 14px; height: 14px; }
.selected .selection-number { color: #10150a; background: #bfdc62; }
.answer-card .card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; color: #515a49; font-size: 10px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.card-origin { min-width: 0; overflow-wrap: anywhere; }
.card-position { white-space: nowrap; }
.answer-card .card-pack-name { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: 400; color: #65705d; opacity: 1; }
.answer-card .card-audio-icon { flex: none; width: 16px; height: 16px; margin: 0; color: #515a49; }
.table-answer { height: 100%; }
@container game (max-width:900px) {
  .hand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container game (max-width:650px) {
  .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:760px) {
  .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hand-area { margin-top: 12px; }
  .hand-heading { align-items: flex-start; gap: 8px; }
  .hand-heading > span { max-width: 50%; }
  .answer-card { min-height: 72px; padding: 8px 9px; gap: 6px; border-radius: 9px; }
  .answer-card strong { font-size: 16px; line-height: 1.25; }
  .answer-card .card-footer { font-size: 10px; }
}

/* Единый поток вопрос → стол → рука: высота определяется содержимым, прокручивается страница. */
.game { container: game / inline-size; min-width: 0; }
body.game-focus .layout { max-width: 1600px; gap: 18px; padding-top: 16px; }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.game-heading h1 { min-width: 0; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.game-heading .actions { flex: none; flex-wrap: nowrap; gap: 4px; margin: 0; }
.game-heading .icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 8px; }
.game-status { margin-bottom: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.phase-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 8px 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.status-judge { min-width: 0; overflow-wrap: anywhere; }
.status-judge b { color: var(--ink); }
.status-phase { color: var(--ink); }
#timer { margin-left: auto; flex: none; font-size: 17px; line-height: 1.3; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.time-track { height: 3px; background: var(--line); overflow: hidden; }
#time-fill { height: 100%; background: var(--green); transform-origin: left center; }
.game-people { display: none; }
.game-table { display: contents; }
/* Стол растёт по содержимому без внутренней прокрутки; резерв на ПК вычисляет JS. */
.table-content { min-width: 0; margin-top: 12px; }
.table-content:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.table-heading h2 { font-size: 18px; line-height: 1.3; }
.table-heading > span { color: var(--muted); font-size: 11px; }
.table-instruction { font-size: 12px; color: var(--muted); margin: 6px 0 10px; line-height: 1.4; }
.submissions { --table-card-min-width: 160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--table-card-min-width), 100%), 1fr)); gap: 10px; }
.live-submissions { margin-top: 8px; }
.submission { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; overflow-wrap: anywhere; }
.submission.winning { padding: 8px; border: 1px solid var(--accent); background: var(--accent-soft); }
.answer-bundle { display: grid; gap: 8px; flex: 1; }
.submission > button { margin: 6px 0 0; width: 100%; min-height: 44px; }
.submission footer { color: var(--ink); padding: 6px 0; margin: 0; border: 0; }
.room-roster { min-width: 0; margin-bottom: 12px; }
.roster-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.room-roster h2 { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.room-roster h2 small { font-size: 11px; margin-left: 6px; font-weight: 400; }
.roster-list { display: flex; flex-wrap: wrap; gap: 6px; }
.room-player { display: flex; align-items: center; gap: 6px; min-width: 112px; max-width: 220px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.room-player.is-self { border-color: #728831; background: var(--accent-soft); }
.room-player .identity { min-width: 0; flex: 1; gap: 6px; }
.room-player .identity-avatar { width: 22px; height: 22px; font-size: 9px; }
.room-player .identity-name { font-size: 12px; overflow-wrap: anywhere; }
.room-player .identity-name small { display: none; }
.room-player > b { flex: none; font-variant-numeric: tabular-nums; }
.room-player > span > .ui-icon { width: 14px; height: 14px; color: var(--violet); }

/* Вопрос: полный текст, тихие метаданные и отдельный переход к ответам. */
.question-card { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); }
.question-tools { display: flex; gap: 0; flex: none; }
.question-tools .icon-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 7px; background: transparent; border: 0; color: var(--muted); }
.question-tools .icon-button:hover { background: var(--paper-raised); color: var(--ink); }
.question-card h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.question-card.has-result { border-color: #8eaa32; }
.question-card.has-result mark { color: var(--accent); background: transparent; text-decoration: none; }
.question-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.question-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1; font-size: 10px; color: var(--muted); }
.question-meta .card-pack-name { margin: 0; color: #a0a697; font-size: 10px; font-weight: 400; opacity: 1; line-height: 1.25; overflow-wrap: anywhere; }
.question-meta .card-audio-icon { margin-left: 0; }
.question-jump { display: none; }
.question-card .round-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding-top: 8px; }
.question-card .round-summary > div { justify-content: flex-start; gap: 8px; }
.question-card .round-summary > p { margin: 0; font-size: 12px; }
.question-card .round-summary .identity-avatar { width: 28px; height: 28px; }
.question-card .point-gained { font-size: 18px; }
.question-card > small { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Отправка на ПК следует за рукой; на телефоне закреплена над навигацией. */
.hand-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.hand-controls > div { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
.hand-controls small { color: var(--muted); font-size: 11px; }
.hand-controls.needs-send { border-color: #748a35; }
.hand-controls.urgent { border-color: var(--danger); }
#selection-count { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; min-height: 38px; border: 0; background: transparent; font-size: 14px; }
#selection-count .ui-icon { width: 14px; height: 14px; }
#swap-button, #submit-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; font-size: 13px; }
.swap-glyph { display: inline-flex; }
.swap-glyph .ui-icon { width: 18px; height: 18px; }
.swap-count { font-variant-numeric: tabular-nums; }

/* ПК: две независимые колонки; таймер отделяет общий стол от собственной руки. */
@media (min-width:761px) {
  .game-columns { display: grid; grid-template-columns: clamp(190px, 24%, 260px) minmax(0, 1fr); align-items: start; gap: 16px; }
  .game-sidebar, .game-play { min-width: 0; }
  .game-play { container: play / inline-size; }
  .game-play .table-content { margin-top: 0; min-height: var(--table-min-height, 0px); }
  .game-play .game-status { margin: 14px 0 0; }
  .game-play .hand-area { margin-top: 12px; }
  .game-play .hand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Служебная звёздочка не сужает текст обычных карт; выбор, отправка и замок остаются видны. */
  .game-play .hand-area:not(.judge-hand) .answer-card:not(.selected):not(.card-sent) strong { padding-right: 0; }
  .game-play .hand-area:not(.judge-hand) .answer-card:not(.selected):not(.card-sent) .selection-number { display: none; }
  .game-sidebar .question-card { min-height: 230px; padding: 12px; box-shadow: 0 2px 0 #22271e; }
  .question-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -4px 10px 0; }
  .question-header > span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
  .question-header .icon-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 7px; border: 0; background: transparent; color: var(--muted); }
  .question-header .icon-button:hover { background: var(--paper-raised); color: var(--ink); }
  .game-sidebar .question-card h2 { margin-bottom: 12px; font-size: 19px; }
  .game-sidebar .question-footer { flex-wrap: nowrap; margin-top: auto; padding-top: 12px; align-items: flex-end; order: 2; }
  .game-sidebar .question-tools { margin-right: -4px; margin-bottom: -4px; }
  .game-sidebar .question-card > small { order: 1; margin: 0 0 8px; }
  .game-sidebar .room-roster { margin: 16px 0 0; }
  .game-sidebar .roster-heading { gap: 4px; }
  .game-sidebar .roster-score { flex-basis: 100%; margin: 0; font-size: 11px; }
  .game-sidebar .roster-list { flex-direction: column; gap: 0; }
  .game-sidebar .room-player { width: 100%; max-width: none; min-width: 0; min-height: 34px; padding: 5px 6px; border-color: transparent; border-bottom-color: var(--line); border-radius: 0; }
  .game-sidebar .room-player.is-self { border-color: #728831; border-radius: 7px; }
  @container play (max-width:740px) {
    .game-play .hand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .game-play .hand-controls small, .game-play .swap-label { display: none; }
    .game-play #selection-count { flex: none; white-space: nowrap; }
  }
  @container play (max-width:560px) {
    .game-play .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

@media (max-width:760px) {
  body.game-focus { --nav-h: 64px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.game-focus.has-hand-controls { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  body.game-focus .layout { gap: 12px; padding-top: 12px; }
  .game-heading { gap: 6px; margin-bottom: 8px; }
  .game-heading h1 { font-size: 18px; }
  .game-heading .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .game-heading [data-action="invite"], .game-heading [data-action="leave"] { display: none; }
  .game-status { position: sticky; top: var(--header-h); z-index: 22; margin-bottom: 4px; }
  .phase-line { gap: 4px 10px; padding: 6px 8px; font-size: 11px; }
  .status-count { display: none; }
  .status-judge { flex: 1; }
  .status-phase { order: 5; flex-basis: 100%; font-size: 10px; }
  #timer { font-size: 16px; }
  .game-people { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--muted); font-size: 11px; }
  .game-people button { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; font-size: 12px; }
  .game-people .ui-icon { width: 14px; height: 14px; }
  .active-roster { display: none; }
  .question-card { position: sticky; top: calc(var(--header-h) + var(--game-status-h, 62px) + 4px); z-index: 20; padding: 8px 10px; }
  .question-card.is-tall { position: static; }
  .question-tools .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 12px; }
  .question-card h2 { font-size: 17px; }
  .question-jump { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-left: auto; min-height: 44px; padding: 4px; background: transparent; border: 0; color: var(--accent); font-size: 12px; font-weight: 700; }
  .question-jump .ui-icon { width: 16px; height: 16px; }
  .question-card.is-pinned .question-tools, .question-card.is-pinned .question-meta, .question-card.is-pinned > small, .question-card.is-pinned .round-summary > p { display: none; }
  .table-heading h2 { font-size: 16px; }
  .table-instruction { margin: 5px 0 8px; font-size: 11px; }
  .submissions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hand-heading h2 { font-size: 18px; }
  .hand-controls { position: fixed; z-index: 65; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); min-height: 64px; padding: 8px 12px; gap: 8px; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .hand-controls > div { flex: none; margin-right: 0; }
  .hand-controls small, .swap-label { display: none; }
  #selection-count { min-height: 44px; min-width: 48px; font-size: 13px; }
  #swap-button { min-height: 44px; padding: 8px; }
  #submit-button { flex: 1; min-width: 0; min-height: 44px; }
  body.chat-open .hand-controls { display: none; }
}

/* Отдельная озвучка доступна даже в неактивной руке; кнопки не вложены друг в друга. */
.hand-card, .table-card { position: relative; display: flex; min-width: 0; }
.hand-card > .answer-card, .table-card > .answer-card { width: 100%; }
.hand-card > .answer-card .card-footer, .table-card > .answer-card .card-footer { min-height: 20px; }
.hand-card.has-audio > .answer-card .card-footer, .table-card.has-audio > .answer-card .card-footer { padding-right: 32px; }
.card-audio-button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 8px; margin: -8px -6px -6px 0; border: 0; border-radius: 8px; background: transparent; color: #515a49; }
.card-audio-button .ui-icon { width: 18px; height: 18px; }
.card-audio-button:hover { background: #d7ddcb; color: #1f2d12; }
.hand-card > .card-audio-button, .table-card > .card-audio-button { position: absolute; bottom: 2px; right: 4px; margin: 0; }
.judge-hand .answer-card { background: #b9beb1; color: #343a30; border-color: #858e7b; box-shadow: none; }
.judge-hand .selection-number { color: #47513e; }
.judge-hand .card-pack-name { color: #505b46; }
.answer-like { cursor: pointer; touch-action: manipulation; }
.answer-like:active { background: #e9f0d1; }
.card-reaction-icon { flex: none; display: block; width: 22px; height: 22px; color: #687743; pointer-events: none; }
.card-reaction-icon .ui-icon { display: block; width: 100%; height: 100%; }
#answer-reaction-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.flying-reaction { position: absolute; display: block; box-sizing: border-box; width: 44px; height: 44px; padding: 4px; border: 1px solid #fff2af; border-radius: 50%; background: #ffe354; color: #382600; box-shadow: 0 3px 9px #0009, 0 0 12px #ffe35466; pointer-events: none; }
.flying-reaction svg { width: 100%; height: 100%; fill: none; }
@media (max-width:760px) {
  .card-audio-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}
.roster-score { margin: 0 0 0 auto; color: var(--muted); font-size: 12px; }
.roster-score b { color: var(--ink); }