/* Flow layout keeps controls clear of the table and hands. */
.flow-table.table-shell { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'dealer dealer' 'left right' 'talon talon' 'center center' 'announcements announcements' 'actions actions' 'self self' 'hand hand'; align-content:start; gap:16px 12px; min-height:0; padding:22px; isolation:isolate; }
.flow-table .felt-table { inset:80px 2% 100px; z-index:-1; }
.flow-table .seat { position:static; width:100%; min-width:0; transform:none; align-self:start; z-index:auto; }
.flow-table .seat-0 { grid-area:self; }
.flow-table .seat-0 .avatar { display:none; }
.flow-table .seat-1 { grid-area:left; }
.flow-table .seat-2 { grid-area:right; }
.flow-table .seat-3 { grid-area:dealer; }
.flow-table .seat.sitting-out { opacity:1; color:var(--muted); }
.flow-table .table-center { grid-area:center; position:static; transform:none; width:100%; }
.flow-table .talon-corner { grid-area:talon; position:static; justify-self:center; display:flex; align-items:center; gap:10px; }
.flow-table .table-announcements { grid-area:announcements; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.table-announcements span { border:1px solid var(--line); background:#0b2b22; border-radius:10px; padding:7px 10px; font-size:13px; overflow-wrap:anywhere; }
.table-announcements span:last-child { border-color:var(--gold); color:#f0d39a; }
.seat-declaration { color:#ffe1a1; background:#183f30; border:1px solid #877449; border-radius:8px; padding:5px 8px; width:fit-content; max-width:100%; margin:7px auto; font-size:14px; }
.flow-table .actions { grid-area:actions; position:static; transform:none; width:100%; z-index:auto; align-items:center; padding:10px 0; }
.action-explanation { flex-basis:100%; text-align:center; line-height:1.5; margin:0 0 5px; color:var(--ink); }
.flow-table .hand-zone { grid-area:hand; position:static; min-width:0; z-index:auto; }
.flow-table .cards { gap:3px; padding-top:24px; }
.flow-table .card { flex:1 1 0; min-width:0; max-width:68px; height:100px; margin:0; padding:5px; border-radius:6px; }
.flow-table .card > span:first-child { position:absolute; top:6px; left:4px; }
.card:hover,.card:focus,.card:active,.card:disabled { background:#f7f3e9; opacity:1; }
.card:hover { box-shadow:0 0 0 2px var(--gold); }
.card:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.card.playable { border:2px solid #c69736; box-shadow:0 0 0 1px #ffe1a1,0 6px 12px #0005; }
.flow-table .empty-trick { display:none; }
.flow-table .seat-open-hand { max-width:100%; }
.flow-table .seat-open-hand .mini-card { flex:0 1 31px; min-width:0; }
.game-layout { margin-bottom:22px; align-items:start; }
.stats-filters { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#09251d; }
.stats-filters .field { min-width:0; margin:0; }
.stats-filters .switch { grid-column:1/-1; }
.switch { display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.5; cursor:pointer; }
.switch input { appearance:none; width:42px; min-width:42px; height:24px; border-radius:20px; padding:3px; background:#46534c; margin:0; cursor:pointer; }
.switch input::before { content:''; display:block; width:16px; height:16px; border-radius:50%; background:#fff9e8; transition:transform .15s; }
.switch input:checked { background:#378766; }
.switch input:checked::before { transform:translateX(17px); }
.switch input:disabled { opacity:.5; cursor:wait; }
.insight-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.insight-heading h3 { font:38px Georgia,serif; margin:8px 0; overflow-wrap:anywhere; }
.insight-heading .field { max-width:220px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric { padding:22px 18px; background:linear-gradient(140deg,#173e2e,#0c2a20); border:1px solid var(--line); border-radius:16px; }
.metric span,.metric small { display:block; color:var(--muted); font-size:13px; line-height:1.5; }
.metric strong { display:block; font:36px Georgia,serif; margin:14px 0 10px; overflow-wrap:anywhere; }
.insight-chart { padding:20px; border:1px solid var(--line); border-radius:16px; background:#0b281f; min-width:0; }
.insight-chart h3,.archive-heading h3,.insight-groups h3 { font:24px Georgia,serif; margin:0; }
.insight-chart .section-head { flex-wrap:wrap; }
.result-chart { width:100%; display:block; height:auto; }
.result-chart text { fill:#a7b5aa; font-size:13px; }
.result-chart circle { fill:#f1c877; stroke:#0b281f; stroke-width:2; }
.chart-line { fill:none; stroke:#efc879; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-zero { stroke:#708577; stroke-dasharray:4 5; }
.insight-groups { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
.stat-card summary,.insight-chart summary { cursor:pointer; padding:12px 0; }
.stat-card .switch { flex-shrink:0; }
.excluded-game { border-style:dashed; background:#10291f; }
.archive-heading { margin:24px 0 0; }
@media(max-width:1000px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .insight-groups { grid-template-columns:1fr; } }
@media(max-width:640px) {
  .flow-table.table-shell { padding:14px 9px; gap:10px 8px; }
  .flow-table .card { height:82px; font-size:14px; padding:4px 2px; }
  .flow-table .card-symbol { font-size:clamp(18px,5.5vw,30px); top:61%; }
  .flow-table .seat-open-hand .mini-card { margin-right:-9px; }
  .flow-table .seat-name { font-size:13px; }
  .flow-table .actions button { min-height:44px; }
  .flow-table .phase { letter-spacing:.06em; line-height:1.6; }
  .stats-filters { grid-template-columns:1fr; padding:12px; }
  .insight-heading { align-items:flex-start; flex-direction:column; gap:0; }
  .insight-heading .field { max-width:100%; width:100%; }
  .metric { padding:14px 10px; }
  .metric strong { font-size:28px; }
  .stat-card .section-head { flex-direction:column; }
  .insight-chart { padding:12px; }
  .stats-grid { gap:12px; }
  .section { min-width:0; padding:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }