html,
body {
  height: auto;
  min-height: 100%;
  overflow: auto;
  background: #f5f6f7;
}

.app-shell {
  display: grid;
  width: 100%;
  max-width: 1800px;
  height: auto;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  grid-template-areas: "stats table coach";
  align-items: start;
  gap: 16px;
  margin: 0 auto;
  padding: 16px;
  overflow: visible;
}

.app-shell .left-rail,
.app-shell .right-rail,
.app-shell .table-workspace {
  display: block;
  min-width: 0;
  height: auto;
  overflow: visible;
}

.app-shell .left-rail { grid-area: stats; }
.app-shell .table-workspace { grid-area: table; }
.app-shell .right-rail { grid-area: coach; }

.app-shell .topbar {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.app-shell .topbar h1 { font-size: 24px; }
.app-shell .topbar-actions { flex-wrap: wrap; }
.app-shell .topbar-actions button { padding: 8px 12px; }

.app-shell .hero-panel {
  position: static;
  min-height: 0;
  height: auto;
  grid-template-columns: 1fr;
  margin-top: 12px;
  overflow: visible;
}

.app-shell .daily-score-panel,
.app-shell .replay-panel,
.app-shell .coach-panel,
.app-shell .bad-history-panel {
  position: static;
  width: auto;
  height: auto;
  max-height: none;
  margin-bottom: 12px;
  overflow: visible;
}

.app-shell .daily-score-heading { flex-wrap: wrap; }
.app-shell .daily-query-metrics { grid-template-columns: 1fr 1fr; }
.app-shell .hero-control-row { flex-wrap: wrap; }
.app-shell .action-area { min-width: 0; width: 100%; }
.app-shell .table-felt { height: 560px; min-height: 560px; }
.app-shell .status-strip {
  position: absolute;
  inset: auto;
  top: calc(50% + 88px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(56%, 420px);
  gap: 4px;
  transform: translateX(-50%);
}
.app-shell .status-strip > div {
  position: static;
  width: auto;
  padding: 5px 3px;
}
.app-shell .status-strip span { font-size: 11px; }
.app-shell .status-strip strong { font-size: 15px; }
.app-shell .pot-badge { display: none; }
.app-shell .seat { width: min(18%, 148px); min-width: 0; }
.app-shell .seat-grid[data-seat-count="9"] .seat-0 { left: 50%; bottom: 12px; top: auto; transform: translateX(-50%); }
.app-shell .seat-grid[data-seat-count="9"] .seat-1 { left: 3%; bottom: 12px; top: auto; transform: none; }
.app-shell .seat-grid[data-seat-count="9"] .seat-2 { left: 2%; top: 48%; bottom: auto; transform: translateY(-50%); }
.app-shell .seat-grid[data-seat-count="9"] .seat-3 { left: 3%; top: 12px; bottom: auto; transform: none; }
.app-shell .seat-grid[data-seat-count="9"] .seat-4 { left: 28%; top: 12px; bottom: auto; transform: none; }
.app-shell .seat-grid[data-seat-count="9"] .seat-5 { left: 53%; right: auto; top: 12px; bottom: auto; transform: none; }
.app-shell .seat-grid[data-seat-count="9"] .seat-6 { left: auto; right: 3%; top: 12px; bottom: auto; transform: none; }
.app-shell .seat-grid[data-seat-count="9"] .seat-7 { left: auto; right: 2%; top: 48%; bottom: auto; transform: translateY(-50%); }
.app-shell .seat-grid[data-seat-count="9"] .seat-8 { left: auto; right: 3%; bottom: 12px; top: auto; transform: none; }

@media (max-width: 1199px) {
  .app-shell {
    max-width: 960px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "table" "coach" "stats";
  }
}

@media (max-width: 600px) {
  .app-shell { padding: 10px; }
  .app-shell .topbar { display: block; }
  .app-shell .topbar h1 { font-size: 22px; }
  .app-shell .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 6px;
    margin-top: 8px;
  }
  .app-shell .account-session {
    grid-column: 1 / -1;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .app-shell .topbar-actions button { min-width: 0; font-size: 13px; }
  .app-shell .table-felt { height: 560px; min-height: 560px; }
  .app-shell .hero-hand-group { min-width: 0; flex-wrap: wrap; }
  .app-shell .action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell .action-buttons button { min-width: 0; }
  .app-shell .role-assignment-list { grid-template-columns: 1fr; }
  .app-shell .seat { width: 21%; padding: 5px; }
  .app-shell .seat-grid[data-seat-count="9"] .seat-3 { left: 2%; }
  .app-shell .seat-grid[data-seat-count="9"] .seat-4 { left: 27%; }
  .app-shell .seat-grid[data-seat-count="9"] .seat-5 { left: 52%; }
  .app-shell .seat-grid[data-seat-count="9"] .seat-6 { right: 2%; }
  .app-shell .seat-name { min-height: 16px; padding: 0; font-size: 11px; gap: 2px; white-space: nowrap; }
  .app-shell .seat-stack { font-size: 13px; }
  .app-shell .seat-action { font-size: 11px; }
  .app-shell .seat-meta { font-size: 9px; }
  .app-shell .seat-note-button { display: none; }
  .app-shell .mini-card { width: 27px; height: 38px; font-size: 13px; }
  .app-shell .position-badge { position: static; display: inline-block; font-size: 9px; padding: 2px 3px; margin-bottom: 2px; }
  .app-shell .status-strip { width: 52%; gap: 2px; }
  .app-shell .status-strip strong { font-size: 12px; }
  .app-shell .status-strip span { font-size: 10px; }
  .app-shell .community { width: 52%; gap: 5px; }
  .app-shell .community .card,
  .app-shell .community .card-back { width: calc((100% - 20px) / 5); height: 58px; font-size: 16px; }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 16px 20px;
  color: #515b62;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.site-footer a {
  color: inherit;
  text-underline-offset: 3px;
}

.web-unavailable {
  margin: 24px;
  color: #202428;
}

.privacy-page {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 24px;
  line-height: 1.8;
}

.privacy-page h1 {
  font-size: 26px;
}