/* One clue collection: identical cards, inline editing, compact grouped replies. */
/* Separate the game board from the notebook without stacking legacy margins. */
.is-playing #phase-playing { display:grid; gap:20px; min-width:0; }
.is-playing #phase-playing > .table-notebook { margin:0; }
.notebook-dock { display:flex; align-items:center; gap:8px; }
.notebook-open { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:10px; border:0; background:transparent; text-align:left; }
.notebook-open > span,.clue-count { display:inline-flex; align-items:center; justify-content:center; min-width:23px; padding:2px 7px; border-radius:9px; background:#30445c; color:#e8cf90; font-size:12px; font-weight:500; }
.notebook-open > .game-icon:last-child { margin-left:auto; width:18px; transform:rotate(-90deg); }
.notebook-desktop { display:block; border-top:1px solid #43577744; padding-top:12px; margin-top:8px; }
.notebook-sheet #sheet-title { display:flex; gap:10px; align-items:center; font-size:18px; }
.notebook-sheet .head { gap:8px; padding:14px 18px; }
.notebook-sheet .head > .icon-button { flex:0 0 44px; }
.notebook-sheet .body { padding:16px 18px; overflow-y:auto; overscroll-behavior:contain; }
.notebook-sheet .log-heading,.notebook-desktop .log-heading { margin:14px 0 0; padding:6px 0 0; border-top:1px solid #43577755; }
.records-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:44px; padding:8px 6px; border:0; background:transparent; color:#b6c5dd; text-align:left; font-size:14px; }
.records-toggle:hover,.records-toggle:active { transform:none; background:#a0bbdc0b; color:#e8cf90; }
.records-toggle:focus-visible { outline:2px solid #edc46d; outline-offset:2px; }
.records-toggle .game-icon { width:18px; height:18px; transition:transform .15s ease; }
.records-toggle[aria-expanded="true"] .game-icon { transform:rotate(180deg); }
.notebook-records-panel[hidden] { display:none; }
.record-filters { justify-content:flex-end; margin:4px 0 10px; }
.notebook-sheet h3,.notebook-desktop h3 { margin:0; font-size:14px; color:#b6c5dd; }
.clue-set { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:8px; min-width:0; }
.clue-tile { display:flex; gap:6px; align-items:center; padding:5px; min-width:0; border:1px solid #3a4f6b; border-radius:14px; background:linear-gradient(135deg,#1c3048,#162438); }
.clue-tile.yes { border-left:3px solid #61bb99; }.clue-tile.no { border-left:3px solid #c88494; }.clue-tile.tentative { border-left:3px solid #c7ad71; }
/* Informational tags have no edit affordance or judgement/status color. */
.clue-tile.clue-info { display:block; align-self:start; padding:10px 12px; }
.clue-info-text,.clue-info-question { margin:0; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.clue-info-text { font-size:14px; color:#e1e8f5; }
.clue-info-question { margin-bottom:6px; font-size:12px; color:#9eb3d0; }
.clue-info-by { color:#92a9c7; font-size:11px; }
.clue-info-replies { display:grid; gap:4px; list-style:none; margin:0; padding:0; font-size:13px; line-height:1.55; }
.clue-info-replies li { white-space:pre-wrap; overflow-wrap:anywhere; }
.clue-text-button { flex:1; min-width:0; min-height:44px; display:flex; gap:6px; align-items:center; justify-content:space-between; text-align:left; padding:8px 6px; border:0; border-radius:9px; background:transparent; color:#e1e8f5; font-size:14px; line-height:1.5; }
.clue-text-button > span { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.clue-text-button > .game-icon { width:14px; height:14px; color:#7e97b9; }
.clue-text-button:hover { background:#a0bbdc0b; }.clue-text-button:hover > .game-icon { color:#e5c983; }
.clue-status-switch { display:flex; flex:0 0 auto; gap:0; border-radius:10px; padding:0; background:#0a142344; }
.clue-status-switch .clue-status { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:#7e92ac; font-size:17px; }
.clue-status-switch .clue-status:hover { background:#ffffff08; }.clue-status-switch .clue-status[aria-pressed="true"] { box-shadow:inset 0 1px #ffffff0b; }
.clue-status.yes[aria-pressed="true"] { color:#9ae5c5; background:#25483f; border-color:#599b81; }.clue-status.no[aria-pressed="true"] { color:#ffb7c2; background:#4b2d3b; border-color:#a96c7d; }.clue-status.tentative[aria-pressed="true"] { color:#f2d58b; background:#463e2b; border-color:#9d8756; }
.clue-tile.clue-editing { display:block; grid-column:1 / -1; padding:8px; border-color:#b99c60; background:#1c2e44; }
.clue-editing #note-text { display:block; min-height:64px; max-height:160px; padding:10px; border-radius:9px; font-size:14px; }
.clue-edit-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:8px; }
.clue-edit-actions { display:flex; align-items:center; gap:0; margin-left:auto; }
.clue-edit-actions .icon-button { width:44px; height:44px; background:transparent; border-color:transparent; }.clue-edit-actions .game-icon { width:19px; height:19px; }
.clue-edit-actions .delete-clue { color:#d894a2; }.clue-edit-actions .delete-clue:hover { background:#482b39; border-color:#946072; }
.clue-edit-actions #note-save { color:#201b10; background:linear-gradient(145deg,#efd99c,#ccae63); border-color:#dab96c; border-radius:11px; }
.clue-add-empty { display:flex; align-items:center; justify-content:center; gap:8px; min-height:60px; border:1px dashed #526b8e; border-radius:14px; background:#14223788; color:#b7cbe7; font-size:13px; }
.clue-add-empty .game-icon { width:19px; height:19px; }
.note-error { color:#ffb0aa; margin:7px 2px 0; font-size:12px; }.note-error:empty { display:none; }
.clue-records { gap:10px; }
.clue-records .clue-entry { margin:0; padding:10px 12px; border:1px solid #344963; border-radius:14px; background:#152337; }
.record-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; }
.record-heading > div { min-width:0; }.record-heading small { display:block; margin-bottom:4px; font-size:11px; color:#8ea8c9; }
.record-heading h4,.record-heading p { margin:0; font-size:13px; color:#e5edf9; font-weight:600; overflow-wrap:anywhere; line-height:1.55; white-space:pre-wrap; }
.record-heading .record-add { width:44px; height:44px; flex:0 0 44px; border-color:transparent; background:transparent; color:#8ea8c9; }
.record-heading .record-add:hover { color:#e8c97c; background:#ffffff08; }.record-add .game-icon { width:18px; height:18px; }
.record-replies { display:flex; flex-direction:column; gap:7px; padding-top:8px; margin-top:4px; border-top:1px solid #3b506844; }
.reply-group { display:flex; align-items:center; gap:10px; min-width:0; }
.reply-label { display:inline-flex; align-items:center; gap:4px; flex:0 0 74px; font-size:11px; white-space:nowrap; }.reply-label i { font-style:normal; }.reply-label b { font-size:10px; color:inherit; opacity:.75; }
.reply-group.yes .reply-label { color:#8fddbb; }.reply-group.no .reply-label { color:#efa2b3; }.reply-group.tentative .reply-label { color:#d6bc80; }
.reply-people { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.reply-person { display:inline-flex; align-items:center; gap:5px; min-height:28px; max-width:100%; padding:3px 7px 3px 4px; border-radius:8px; background:#243750; color:#c1d0e5; }
.reply-person .reply-avatar { width:20px; height:20px; border:0; border-radius:7px; }
.reply-person b { font-weight:500; font-size:11px; max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-comments { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.reply-comment { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:7px; padding:6px 9px; max-width:100%; border-radius:9px; background:#22334a; font-size:12px; color:#c6d4e8; }
.reply-comment b { font-size:11px; color:#92adcf; overflow-wrap:anywhere; }.reply-comment span { overflow-wrap:anywhere; }
.reply-comment.long { display:block; width:100%; padding:0; }.reply-comment.long button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px 10px; text-align:left; background:transparent; border:0; font-size:12px; }
.reply-comment.long button b { flex:0 1 auto; max-width:7em; }.reply-comment.long button > span { flex:1; min-width:0; }.reply-comment.long .game-icon { width:16px; height:16px; }
.reply-comment.long button[aria-expanded="true"] .game-icon { transform:rotate(180deg); }
.reply-comment.long p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:0 10px 10px; line-height:1.6; font-size:13px; }
.record-wait,.records-empty { padding:8px 0; color:#849cbc; font-size:12px; }
.record-guess { display:flex; gap:8px; align-items:center; font-size:12px; }.record-guess .yes { color:#8cdebb; }.record-guess .no { color:#e9a3b2; }
@media (max-width:540px) {
  .notebook-sheet .head { padding:10px 12px; gap:6px; }
  .notebook-sheet .body { padding:12px; }.clue-set { grid-template-columns:minmax(0,1fr); }
  .clue-tile { gap:2px; }.clue-text-button { font-size:13px; }
  .clue-records .clue-entry { padding:8px 10px; }.reply-label { flex-basis:66px; }.reply-group { gap:6px; }
  .reply-person b { max-width:6em; }
}
.notebook-hud { display:none; }
.feedback-more { display:none; }
.action-sheet .body { display:flex; flex-direction:column; gap:10px; }
.action-sheet .question-toolbar { flex-wrap:wrap; margin:0; gap:6px; }.action-sheet .question-toolbar > div { margin-left:auto; }
.action-sheet .question-toolbar button { min-height:44px; }
.action-sheet .quick-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.action-sheet .question-chip { min-height:48px; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.action-sheet .hint-targets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.action-sheet .hint-target { min-width:0; }.action-sheet .hint-target b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.action-sheet #ask-send { margin:0; }
.feedback-body .answers { display:flex; }.feedback-body .feedback-more { display:none; }
/* Both layouts show clues below the board; phones use tighter spacing. */
@media (max-width:899px), (max-width:1100px) and (max-height:540px) {
  #app.is-playing { padding:6px max(8px,env(safe-area-inset-left)) calc(6px + var(--safe-b)); min-height:var(--viewport-height,100dvh); }
  .is-playing .in-game-head { min-height:52px; padding:4px 5px 6px; margin-bottom:6px; gap:5px; }
  .is-playing .in-game-head .eyebrow { display:none; }
  .is-playing .room-turn-title { font-size:14px; line-height:1.3; margin:0; }
  .is-playing .in-game-head .room-tools { gap:3px; }.is-playing .in-game-head .room-tools .icon-button,.is-playing .in-game-head > .icon-button { width:44px; height:44px; flex-basis:44px; }
  .is-playing .room-tools .game-icon { width:20px; height:20px; }
  .is-playing .notebook-hud { display:inline-grid; }
  .is-playing #phase-playing { gap:12px; }
  .is-playing .game-table-stage { padding:10px; border-radius:20px; }
  .is-playing .table-caption { display:none; }
  .is-playing .game-table-stage .arena { display:grid; grid-template-areas:none; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:10px; padding:0; }
  .is-playing .arena::before { display:none; }.is-playing .arena-center { grid-area:auto; }
  .is-playing .arena-seats { display:grid; grid-template-columns:repeat(var(--opponent-cols,4),minmax(0,1fr)); width:100%; max-width:500px; gap:6px; margin:0 auto; }
  .is-playing .arena-seats .portrait-seat { grid-area:auto; }
  .is-playing .portrait-seat { width:60px; min-height:65px; gap:3px; }
  .is-playing .portrait-seat .seat-interact { width:48px; height:48px; min-height:48px; padding:3px; }
  .is-playing .portrait-seat .seat-avatar { width:40px; height:40px; }
  .is-playing .portrait-seat .pname { font-size:10px; max-width:64px; }
  .is-playing .seat-badge { width:20px; height:20px; right:-1px; bottom:-1px; }
  .is-playing .game-table-stage .arena-center #current-event { min-height:110px; border-radius:16px; padding:12px; }
  .is-playing .game-table-stage .arena-center #current-event.event-idle { min-height:110px; padding:12px; }
  .is-playing #current-event .table-sigil { margin-bottom:4px; }.is-playing #current-event h2 { font-size:18px; margin:4px 0 8px; line-height:1.35; }
  .is-playing .self-dock { grid-template-columns:50px minmax(0,1fr); gap:6px 10px; margin-top:10px; padding:8px; border-radius:16px; }
  .is-playing .self-dock .portrait-seat { width:50px; min-height:65px; }
  .is-playing .self-dock .action-choices { gap:5px; }
  .is-playing .self-dock .action-choices > button { min-height:56px; padding:6px 4px; gap:3px; }
  .is-playing .self-dock .action-choices .game-icon { width:24px; height:24px; }
  .is-playing .self-dock .action-heading { margin:0; }
  .is-playing .self-dock:has(.skip-turn) { grid-template-columns:60px minmax(0,1fr); row-gap:2px; }
  .is-playing .self-dock .action-heading .skip-turn { margin:0; min-height:44px; padding:6px; }
  .is-playing .self-dock #act-slot:empty { display:none; }
  .is-playing .dock-wait { min-height:65px; font-size:11px; gap:5px; }
  .is-playing .self-dock:has(#answer-composer) { grid-template-columns:50px minmax(0,1fr); }
  .is-playing .self-dock:has(#answer-composer) > .portrait-seat { justify-self:center; }
  .is-playing .self-dock:has(#answer-composer) .dock-wait { display:none; }
  .is-playing .answer-buttons { margin:0 0 6px; }
  .is-playing #answer-composer input { padding:8px; min-width:0; }.is-playing #answer-composer button { min-height:44px; padding:8px 5px; font-size:12px; }
  .is-playing #answer-composer .answer-buttons .game-icon { width:16px; }
  .is-playing #current-event .answers,.is-playing #current-event .conflict { display:none; }
  .is-playing .feedback-more { display:inline-flex; gap:5px; align-items:center; min-height:44px; margin-top:4px; padding:5px 8px; }
  .is-playing #current-event .answer-summary { margin:6px 0; gap:5px; font-size:11px; flex-wrap:wrap; }
  .is-playing #current-event .answer-reference { margin:6px 0; padding:6px; }
  .is-playing #current-event .answer-reference small { display:none; }
  .is-playing #current-event .answer-reference img { width:30px; height:30px; }
  .is-playing #current-event .hint-card-head h2 { font-size:17px; }.is-playing #current-event .hint-card-head .eyebrow { display:none; }
  .is-playing #current-event .hint-parcel { display:none; }.is-playing #current-event .parcel-names { font-size:11px; margin:4px 0; }
  .is-playing #current-event #hint-text { min-height:52px; }.is-playing #current-event #hint-send { padding:8px; min-height:44px; }
  .is-playing #current-event .result-hero img { width:58px; height:58px; margin:5px auto; }
  .is-playing #current-event .result-hero p { margin:4px 0; font-size:11px; }
  .is-playing .table-notebook { padding:2px 6px; margin:0; border-radius:14px; }
  .is-playing .notebook-desktop { padding:8px 4px 4px; margin-top:2px; }.is-playing .notebook-dock > small { display:none; }
  .is-playing .notebook-open { min-height:44px; padding:6px; font-size:13px; }
  .is-playing .notebook-dock > button.icon-button { width:44px; height:44px; }
  .notebook-sheet .head { padding:10px 12px; }.notebook-sheet .body { padding:12px; }
  .clue-entry-head { flex-wrap:wrap; }
}
/* Landscape: table on the left, local controls on the right. Never lock orientation. */
@media (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .is-playing .in-game-head { min-height:46px; margin-bottom:3px; padding:0 4px 3px; }
  .is-playing .game-table-stage { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr); gap:10px; padding:8px; }
  .is-playing .game-table-stage .arena { gap:7px; }
  .is-playing .game-table-stage .arena-center #current-event,.is-playing .game-table-stage .arena-center #current-event.event-idle { min-height:88px; padding:8px 12px; }
  .is-playing .self-dock { align-self:center; margin:0; padding:8px; }
  .is-playing .table-glow { inset:10% 52% 10% 5%; }
  .is-playing .portrait-seat { min-height:62px; }
  .is-playing .notebook-dock { max-width:500px; margin:auto; }
  .sheet .panel { max-height:calc(var(--viewport-height,100dvh) - 12px); }
  .action-sheet .quick-questions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .notebook-sheet { max-width:840px; }
}

@media (max-width:380px) { .is-playing .room-turn-title { font-size:12px; }.is-playing .room-head > .grow { min-width:0; }.is-playing .room-tools { gap:0; }.is-playing .in-game-head { gap:1px; } }
@media (max-width:899px), (max-width:1100px) and (max-height:540px) {
  .is-playing #current-event > .eyebrow { display:none; }
  .is-playing #current-event .answer-summary { align-items:center; flex-wrap:nowrap; margin:5px 0 0; }
  .is-playing #current-event .answer-summary > span { padding:4px 5px; font-size:11px; white-space:nowrap; }
  .is-playing #current-event .answer-summary .game-icon { width:18px; height:18px; }
  .is-playing #current-event .answer-summary .summary-label { display:none; }
  .is-playing #current-event .feedback-more { margin:0 0 0 auto; padding:6px; min-width:44px; flex-shrink:0; }
  .is-playing #current-event .answer-reference { padding:3px 6px; gap:6px; margin:4px 0; }
  .is-playing #current-event .answer-reference img { width:24px; height:24px; }
  .is-playing #answer-composer #ans-send { white-space:nowrap; flex-shrink:0; min-width:44px; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  #app.is-playing { padding-top:3px; padding-bottom:calc(3px + var(--safe-b)); }
  .is-playing .game-table-stage { padding:6px; }
  .is-playing .game-table-stage .arena { gap:5px; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .is-playing #current-event:has(.answer-summary) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 8px; align-items:center; }
  .is-playing #current-event:has(.answer-summary) h2 { grid-column:1; font-size:16px; margin:0; }
  .is-playing #current-event .answer-reference { grid-column:2; grid-row:1; margin:0; padding:3px 5px; }
  .is-playing #current-event .answer-reference img { display:none; }.is-playing #current-event .answer-reference b { font-size:12px; }
  .is-playing #current-event .answer-summary { grid-column:1 / -1; }
}
@media (max-width:899px), (max-width:1100px) and (max-height:540px) {
  .is-playing .room-head > .grow { min-width:0; }
  .is-playing .room-turn-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .is-playing .ring { flex-shrink:0; }
}