/* Play layout: compact phone, two-column tablet, three-zone desktop. */
.game-view .intro { display: none; }
.game-view .layout { display: block; min-height: 0; }
.game-view > .layout > .ticket { display: contents; }
.game-view .ticket-footer { display: none; }
#game { display: grid; gap: var(--space-4); align-items: start; }
.game-side, .called-panel { min-width: 0; padding: var(--space-3); }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.game-header strong { font-family: var(--font-display); letter-spacing: .05em; }
.game-header button { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); padding: var(--space-2); }
.opponent-status { font-size: var(--text-xs); color: var(--muted); margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.game-banner { padding: var(--space-3); margin: 0 0 var(--space-3); border: var(--border-control) dashed var(--error); border-radius: var(--radius-control); color: var(--error); font-weight: 700; line-height: 1.4; background: var(--paper); }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.score-row { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-1) var(--space-2); padding: var(--space-2); border-radius: var(--radius-control); background: var(--paper); min-width: 0; }
.avatar-chip { display: grid; place-items: center; width: 28px; height: 28px; border: var(--border-control) solid var(--purple); border-radius: 50%; grid-row: 1 / 3; font-weight: 900; background: var(--surface); }
.score-name { font-size: var(--text-xs); font-weight: 700; overflow-wrap: anywhere; }
.player-status { font-size: var(--text-xs); color: var(--muted); display: flex; align-items: center; gap: var(--space-1); }
.player-status::before { content: ''; width: 6px; height: 6px; border: var(--border-thin) solid var(--muted); border-radius: 50%; }
.player-status[data-online="true"]::before { background: var(--teal); border-color: var(--teal); }
.score-total, .player-ready { font-size: var(--text-xs); color: var(--muted); grid-column: 1 / -1; }
.score-letters { display: flex; gap: var(--space-1); grid-column: 1 / -1; margin-top: var(--space-1); }
.score-letters span { display: grid; place-items: center; width: 22px; height: 26px; font-weight: 900; border: var(--border-thin) solid var(--line); border-radius: var(--space-1); color: var(--muted); }
.score-letters .lit { background: var(--yellow); color: var(--brand-ink); border: var(--border-control) solid var(--brand-ink); box-shadow: 0 2px 0 var(--brand-ink); }
.game-side .progress-toggle, .game-side .progress-note { font-size: var(--text-xs); }
#game-home { margin-top: var(--space-3); }

/* Card and turn hierarchy */
.card-zone { min-width: 0; width: 100%; }
.game-status { display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); font-weight: 900; font-size: var(--text-base); line-height: 1.4; border: var(--border-control) solid var(--purple); background: var(--surface); border-radius: var(--radius-control); }
.game-status.your-turn { color: var(--brand-ink); background: var(--yellow); }
.play-mat { position: relative; padding: var(--space-2); border: var(--border-ticket) solid var(--purple); border-radius: var(--radius-ticket) var(--radius-ticket) var(--radius-sm) var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-ticket-mobile); }
.play-mat.my-turn { border-color: var(--teal); }
.play-mat.my-turn::before { content: ''; position: absolute; inset: -6px; border: var(--border-control) solid var(--teal); border-radius: inherit; opacity: .25; pointer-events: none; }
.card-heading, .card-grid { display: grid; grid-template-columns: repeat(5, minmax(56px, 1fr)); gap: var(--space-1); }
.card-heading { margin-bottom: var(--space-1); color: var(--brand-ink); font: 900 var(--text-lg)/1 var(--font-display); text-align: center; }
.card-heading span { display: grid; place-items: center; height: 28px; background: var(--yellow); border: var(--border-control) solid var(--brand-ink); border-radius: var(--radius-sm); }
.card-heading span:nth-child(2n) { background: var(--pink); }
.card-cell { position: relative; padding: var(--space-2); aspect-ratio: 1; min-width: var(--tap-size); min-height: var(--tap-size); font: 900 clamp(1.25rem, 3vw, 2.5rem)/1 var(--font-body); background: var(--paper); }
.card-cell:disabled { color: var(--ink); cursor: default; }
.card-cell:not(:disabled) { background: var(--turn-tint); border-color: var(--teal); box-shadow: var(--shadow-control); }
.cell-check { position: absolute; right: 2px; top: 2px; }
.cell-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.cell-star { position: absolute; left: 2px; bottom: 2px; }
.cell-star .icon { width: 12px; height: 12px; fill: currentColor; }
.card-cell.called { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--stamp-tint) 6px 9px), var(--yellow); color: var(--brand-ink); border-color: var(--brand-ink); }
.card-cell.complete { border: var(--border-ticket) double var(--brand-ink); box-shadow: inset 0 0 0 var(--border-control) var(--brand-ink); }
.ready-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.ready-controls .primary { margin: 0; display: block; }

/* Called board / feedback */
.called-panel summary { min-height: var(--tap-size); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 900; cursor: pointer; }
.called-panel details[open] .disclosure-icon { transform: rotate(180deg); }
#latest-number { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.called-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); }
.called-board li { display: grid; place-items: center; position: relative; aspect-ratio: 1; border: var(--border-thin) solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--paper); font-weight: 900; }
.called-board .icon { display: none; position: absolute; width: 10px; height: 10px; right: 1px; top: 1px; }
.called-board .marked { background: var(--yellow); color: var(--brand-ink); border-color: var(--brand-ink); }
.called-board .marked .icon { display: block; }
.called-board .latest { outline: var(--border-ticket) solid var(--teal); outline-offset: 1px; font-family: var(--font-display); }
.called-section { border-top: var(--border-control) dashed var(--line); padding-top: var(--space-3); min-width: 0; }
.called-section h3, .event-log h3 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.called-section h3 { display: flex; justify-content: space-between; gap: var(--space-1); }
.called-section h3 span { font-size: var(--text-xs); color: var(--muted); font-weight: 400; }
.called-section ol { display: flex; gap: var(--space-1); list-style: none; padding: var(--space-1); margin: 0 0 var(--space-3); overflow-x: auto; max-width: 100%; }
.called-section li { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: var(--border-thin) solid var(--purple); background: var(--paper); border-radius: 50%; font-size: var(--text-xs); font-weight: 700; }
.called-section ol:empty::before { content: 'No numbers called yet.'; color: var(--muted); font-size: var(--text-xs); }
.event-log { border-top: var(--border-control) dashed var(--line); padding-top: var(--space-3); }
.event-log .toast { min-height: 32px; margin: 0; }
.game-view #default-feedback:empty { display: none; }

/* Tablet */
@media (min-width: 768px) {
  #game { grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-4); }
  .card-zone { grid-column: 1; grid-row: 1 / 3; }
  .game-side { grid-column: 2; grid-row: 1; }
  .called-panel { grid-column: 2; grid-row: 2; }
  .scores { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 32px 1fr; gap: var(--space-1) var(--space-2); padding: var(--space-3); }
  .avatar-chip { width: 32px; height: 32px; }
  .score-name { font-size: var(--text-sm); }
  .score-letters span { width: 26px; height: 28px; }
  .game-header { flex-wrap: wrap; }
  .game-header button { width: 100%; justify-content: center; }
  .game-side, .called-panel { padding: var(--space-4); }
  .card-cell { font-size: var(--text-2xl); }
}
/* Desktop: height-aware cells; Ready reserves room for its actions. */
@media (min-width: 1024px) {
  .game-view { padding-bottom: var(--space-4); }
  #game { grid-template-columns: clamp(200px, 19vw, 248px) minmax(0, 1fr) clamp(200px, 19vw, 248px); }
  .game-side { grid-column: 1; grid-row: 1; }
  .card-zone { grid-column: 2; grid-row: 1; --board-size: min(600px, calc(100vw - 512px), calc(100svh - 208px)); }
  .called-panel { grid-column: 3; grid-row: 1; }
  #game[data-phase="waiting"] .card-zone { --board-size: min(600px, calc(100vw - 512px), calc(100svh - 276px)); }
  .play-mat { width: calc(var(--board-size) + 22px); max-width: 100%; margin-inline: auto; }
  .card-grid, .card-heading { width: var(--board-size); max-width: 100%; }
  .game-status { font-size: var(--text-lg); }
  .card-cell { font-size: var(--text-2xl); }
  .cell-check .icon { width: 20px; height: 20px; }
  .cell-star .icon { width: 16px; height: 16px; }
  .game-side, .called-panel { max-height: calc(100svh - 104px); overflow-y: auto; }
  .called-section ol { flex-wrap: wrap; max-height: 76px; overflow-y: auto; }
  #game:has(#opponent-banner:not([hidden])) .card-zone { --board-size: min(600px, calc(100vw - 512px), calc(100svh - 276px)); }
  .game-view:has(> #self-banner:not([hidden])) .card-zone { --board-size: min(600px, calc(100vw - 512px), calc(100svh - 276px)); }
}