/* === Last Licks Web Game Styles === */

:root {
  --bg: #1a1a2e;
  --bg-light: #16213e;
  --bg-card: #0f3460;
  --accent: #e94560;
  --accent-gold: #f5c518;
  --text: #eee;
  --text-dim: #999;
  --green: #27ae60;
  --red: #e74c3c;
  --blue: #3498db;
  --tier1: #f5c518;
  --tier2: #c0c0c0;
  --tier3: #cd7f32;
  --tier4: #8b7355;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
/* When the game screen is active, lock body to viewport so its single-page
   layout fits exactly and panels manage their own internal scroll. */
body:has(#screen-game.active) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body:has(#screen-game.active) .auth-header { flex-shrink: 0; }
body:has(#screen-game.active) .resume-banner { flex-shrink: 0; }

/* === Screens === */
.screen { display: none; padding: 20px; max-width: 1200px; margin: 0 auto; }
.screen.active { display: block; }

/* Game screen: single-page no-scroll layout. Fills available viewport height
   minus header/banners. Children flex/scroll inside their own panels.
   2026-05-05: width:100% + margin:0 override `.screen { max-width: 1200px;
   margin: 0 auto }`. Without these, auto margins in body's flex-column
   layout absorb remaining space and size #screen-game to its content's
   max-content width. That made the entire game container change width
   between phase panels (e.g. shrinking visibly on phase=resolved). */
#screen-game.active {
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#game-grid {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
#game-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 6px;
}
#game-center #scoreboard,
#game-center #game-status,
#game-center #manager-bar,
#game-center .waiting-panel {
  margin: 0;
  flex-shrink: 0;
}
#game-center #scoreboard { padding: 6px 10px; }
#game-center #scoreboard .sb-score { font-size: 1.8rem; }
#game-center #scoreboard .score-row { font-size: 1rem; gap: 12px; }
#game-center #game-status { margin-bottom: 0; }
/* Action area absorbs the leftover vertical space and scrolls internally
   if its content overflows — keeps the action button reachable. min-height
   intentionally 0 so it can shrink when manager-bar / opponent-banner /
   waiting-panel are all visible at once; internal scroll covers tall content.
   2026-05-05: scrollbar-gutter: stable reserves the ~15px scrollbar lane
   on every render, so the inner content width doesn't reflow when the
   scrollbar appears/disappears between phase panels. Without it the
   game-center column visibly shifts between plays — jarring in an SPA. */
#game-center #action-area {
  padding: 12px;
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* 2026-05-05: pin every direct child of #action-area AND the standalone
   #waiting-panel sibling to the SAME centered width (not just max-width)
   so every phase panel renders the same visible size. With max-width
   alone, narrow panels (#phase-roll has only a single button) stayed
   narrow while #phase-result hit the 480px cap — that width swap is
   what reads as "the column resizing" between plays. width:100% +
   max-width:480px pins them all to the same outer box regardless of
   content size. The waiting panel lives as a sibling of #action-area
   inside #game-center (NOT a child of #action-area) — both selectors
   are needed to cover both DOM positions. */
#game-center > #waiting-panel,
#game-center #action-area > .phase-panel,
#game-center #action-area > .waiting-panel {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Tighten result panel internals to fit in shorter action areas. */
#game-center #action-area .result-display { padding: 4px 8px; margin-bottom: 8px; }
#game-center #action-area .hit-result { font-size: 1.6rem; margin: 6px 0; }
#game-center #action-area .result-breakdown { margin-bottom: 8px; font-size: 0.85rem; }
#game-center #action-area .runs-scored { font-size: 1rem; }
#game-center #action-area .result-footer { padding: 8px 12px; margin-top: 8px; }
#game-center #action-area .rule-banner { font-size: 1rem; padding: 6px 12px; margin-bottom: 8px; }
#field-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
}
#field-row #diamond-container { margin: 0; }
#field-row .diamond { width: 110px; height: 110px; }
#field-row .base { width: 22px; height: 22px; }
#field-row .base-2nd { margin-left: -11px; }
#field-row .base-3rd { margin-top: -11px; }
#field-row .base-1st { margin-top: -11px; }
#field-row .base-home { margin-left: -11px; }
#field-row .matchup-card { padding: 6px 12px; min-width: 120px; }
#field-row .matchup-card .mc-photo { width: 42px; height: 42px; margin-bottom: 4px; }
#field-row .matchup-card .mc-name { font-size: 1rem; margin-bottom: 2px; }
#field-row .matchup-card .mc-tier { font-size: 0.72rem; margin-bottom: 4px; }
#field-row .matchup-card .mc-label { font-size: 0.65rem; margin-bottom: 2px; }

/* Team side-panels (left = home/you, right = away/opponent) */
.team-panel {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.team-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.team-panel-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-panel-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 600;
}
.team-panel-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 6px;
}
.team-panel-section .lineup-title { margin-bottom: 4px; }
.team-panel-section .lineup-list { overflow-y: auto; scrollbar-gutter: stable; }
.team-panel-section.log-section { flex: 1; min-height: 60px; }
.team-panel-section.log-section #log-entries {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-size: 0.75rem;
}

/* Phase 14 follow-up (2026-05-05): wrap lineup/rotation/log in <details>
   so they collapse on phone. Desktop must NOT change — force the content
   visible at >=769px regardless of [open] state, hide the native marker. */
details.tp-collapse > summary {
  list-style: none;
  cursor: pointer;
}
details.tp-collapse > summary::-webkit-details-marker { display: none; }
details.tp-collapse > summary::marker { display: none; }
@media (min-width: 769px) {
  details.tp-collapse > .lineup-list,
  details.tp-collapse > #log-entries,
  details.tp-collapse > #tl-bat-list,
  details.tp-collapse > #tl-pit-list,
  details.tp-collapse > #tr-bat-list,
  details.tp-collapse > #tr-pit-list {
    display: flex;
  }
  details.tp-collapse > summary { cursor: default; }
}

/* === Title Screen === */
.title-card {
  text-align: center;
  padding: 60px 20px;
}
.box-art {
  max-width: 400px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(233, 69, 96, 0.3);
  margin-bottom: 24px;
}
.title-card h1 {
  font-size: 3rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.subtitle {
  color: var(--text-dim);
  font-size: 1.2rem;
  margin-bottom: 32px;
}

/* === Buttons === */
.btn {
  padding: 10px 24px;
  border: 2px solid var(--text-dim);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { border-color: var(--text); background: rgba(255,255,255,0.05); }
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover { background: #c73850; }
.btn-lg { font-size: 1.2rem; padding: 14px 36px; }

/* === Setup Screen === */
.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.setup-panel {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 20px;
}
.setup-panel h3 {
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 1.3rem;
}
.setup-panel h4 {
  margin: 16px 0 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.input-name {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #333;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.input-name:focus { outline: none; border-color: var(--accent); }

/* Card pools */
.card-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}
.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.card-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-chip.selected { border-color: var(--green); background: rgba(39, 174, 96, 0.15); }
.card-chip.taken { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.card-chip .tier-badge {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #000;
}
.tier-1 { background: var(--tier1); }
.tier-2 { background: var(--tier2); }
.tier-3 { background: var(--tier3); }
.tier-4 { background: var(--tier4); }

.card-chip .chip-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.card-chip .chip-photo-placeholder {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-light);
  flex-shrink: 0;
}
.card-chip .chip-stats {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.selected-section {
  margin-top: 8px;
  min-height: 40px;
}
.selected-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.selected-cards .card-chip {
  border-color: var(--green);
  background: rgba(39, 174, 96, 0.1);
}

.setup-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* === Game Screen === */

/* Scoreboard */
#scoreboard {
  text-align: center;
  padding: 10px;
  background: var(--bg-light);
  border-radius: 12px;
  margin-bottom: 8px;
}
.score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1.3rem;
}
.sb-name { font-weight: 600; min-width: 120px; }
.sb-name:first-child { text-align: right; }
.sb-name:last-child { text-align: left; }
.sb-score {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent-gold);
  min-width: 50px;
  text-align: center;
}
.sb-divider { color: var(--text-dim); font-size: 2rem; }
.half-indicator {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
}

/* Status bar */
#game-status {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.status-items {
  display: flex;
  gap: 32px;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-item .label {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.status-item .value {
  font-size: 1.5rem;
  font-weight: 700;
}
.outs-display {
  display: flex;
  gap: 6px;
}
.out-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  background: transparent;
  transition: background 0.3s;
}
.out-dot.active {
  background: var(--red);
  border-color: var(--red);
}

/* Diamond */
#diamond-container {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.diamond {
  position: relative;
  width: 180px;
  height: 180px;
}
.base {
  position: absolute;
  width: 28px;
  height: 28px;
  transform: rotate(45deg);
  border: 3px solid var(--text-dim);
  background: transparent;
  transition: all 0.3s;
}
.base.occupied {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
}
/* Ghost runner — distinct from a regular occupied base.
   Regular occupied: solid gold. Ghost: dashed blue outline + translucent fill.
   .base.ghost applies to empty bases; .base.occupied.ghost overrides the gold fill. */
.base.ghost {
  border-style: dashed;
  border-color: var(--blue);
  background: rgba(52, 152, 219, 0.25);
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
}
.base.occupied.ghost,
.base.ghost.occupied {
  background: rgba(52, 152, 219, 0.35);
  border-color: var(--blue);
  border-style: dashed;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}
.base-2nd { top: 10px; left: 50%; margin-left: -14px; }
.base-3rd { top: 50%; left: 10px; margin-top: -14px; }
.base-1st { top: 50%; right: 10px; margin-top: -14px; }
.base-home { bottom: 10px; left: 50%; margin-left: -14px; border-radius: 0 0 6px 6px; }

/* Matchup cards */
#matchup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.matchup-card {
  background: var(--bg-light);
  border: 2px solid var(--bg-card);
  border-radius: 12px;
  padding: 10px 18px;
  text-align: center;
  min-width: 160px;
  transition: border-color 0.3s;
}
.matchup-card .mc-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 6px;
  display: block;
  border: 2px solid var(--bg-card);
}
.matchup-card .mc-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.matchup-card .mc-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.matchup-card .mc-tier {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.mc-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pitcher-matchup { border-color: var(--accent); }

/* Matchup + Lineup 3-column row */
#matchup-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin: 12px auto;
  max-width: 960px;
}
.lineup-panel {
  flex: 1;
  background: var(--bg-light);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 150px;
  max-width: 220px;
}
.lineup-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.lineup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lineup-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  opacity: 0.6;
}
.lineup-row.lineup-active {
  opacity: 1;
  background: rgba(231, 76, 60, 0.15);
  border-left: 3px solid var(--accent);
}
.lineup-order {
  font-weight: 700;
  color: var(--accent);
  min-width: 20px;
  text-align: center;
}
.lineup-photo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lineup-photo-placeholder {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-card);
  flex-shrink: 0;
}
.lineup-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-tier {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}
.lineup-stats {
  color: var(--text-dim);
  font-size: 0.7rem;
  white-space: nowrap;
}

.vs-badge {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-dim);
}

/* Action area */
#action-area {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin: 16px 0;
  min-height: 160px;
}
.phase-panel h3 { margin-bottom: 12px; font-size: 1.2rem; }
.phase-hint {
  color: var(--text-dim);
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.dice-btn { font-size: 1.5rem; min-width: 160px; }

/* Guess buttons */
.guess-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.btn-guess {
  padding: 16px 28px;
  font-size: 1.2rem;
  font-weight: 700;
  border: 3px solid var(--blue);
  border-radius: 12px;
  min-width: 100px;
}
.btn-guess:hover { background: rgba(52, 152, 219, 0.2); border-color: var(--blue); }
.btn-guess small { font-weight: 400; opacity: 0.7; }

/* Pitch choice */
.pitch-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.btn-pitch {
  padding: 14px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 3px solid var(--green);
  border-radius: 12px;
  min-width: 120px;
}
.btn-pitch:hover { background: rgba(39, 174, 96, 0.2); }
.btn-pitch small { font-weight: 400; opacity: 0.7; }

/* Roll reveal */
.roll-reveal { margin-bottom: 16px; }
.die-value {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent-gold);
  background: var(--bg);
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 12px;
  border: 3px solid var(--accent-gold);
  vertical-align: middle;
  margin-left: 8px;
}

/* Guess result */
.guess-result h3 {
  font-size: 1.3rem;
}
.guess-correct { color: var(--green); }
.guess-wrong { color: var(--red); }

/* Result display */
.result-display {
  padding: 16px;
  margin-bottom: 16px;
}
.result-display h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.result-breakdown {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  max-width: 400px;
  margin: 0 auto 16px;
  font-size: 0.95rem;
}
.result-breakdown .rb-label {
  color: var(--text-dim);
  text-align: right;
}
.result-breakdown .rb-vs { color: var(--text-dim); }
.result-breakdown .rb-value { text-align: left; font-weight: 700; }

.hit-result {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 12px 0;
  letter-spacing: 2px;
}
.hit-out { color: var(--red); }
.hit-single { color: var(--blue); }
.hit-double { color: var(--green); }
.hit-triple { color: var(--accent-gold); }
.hit-home_run { color: var(--accent-gold); text-shadow: 0 0 20px rgba(245, 197, 24, 0.5); }
.hit-replay { color: var(--text-dim); }

/* Pitcher switch button */
.btn-switch {
  padding: 8px 18px;
  border: 2px solid #e67e22;
  border-radius: 8px;
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-switch:hover { background: rgba(230, 126, 34, 0.3); }

.runs-scored {
  font-size: 1.2rem;
  color: var(--green);
  font-weight: 700;
}

/* Phase 1 — engine rule banners */
.rule-banner {
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.rule-banner-auto-hr {
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.25), rgba(230, 126, 34, 0.25));
  color: var(--accent-gold);
  text-shadow: 0 0 20px rgba(245, 197, 24, 0.6);
  border: 2px solid var(--accent-gold);
}
.rule-banner-double-roll {
  background: rgba(52, 152, 219, 0.18);
  color: var(--blue);
  border: 2px solid var(--blue);
}
.tie-badge {
  display: inline-block;
  padding: 4px 12px;
  margin-top: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Result panel footer — half-end / game-end messages appended inside the
   at-bat result (so the user always sees the play that caused the transition). */
.result-footer {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.result-footer.half-over-footer {
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.4);
  color: var(--text);
}
.result-footer.game-over-footer {
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid var(--accent-gold);
  color: var(--text);
  text-align: center;
}
.result-footer.game-over-footer h3 {
  color: var(--accent-gold);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.result-footer .final-score {
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.result-footer .winner-line { font-size: 1rem; }
.result-footer .tie-note {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Game over */
.game-over-display h2 {
  font-size: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 8px;
}
.game-over-display .final-score {
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.game-over-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* At-bat log (sidebar variant) */
.log-entry {
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-entry:nth-child(odd) { background: rgba(255,255,255,0.03); }
.log-entry .log-batter { font-weight: 600; }
.log-entry .log-detail { color: var(--text-dim); font-size: 0.7rem; }
.log-entry .log-result { font-weight: 700; }

/* Half-over display */
#half-over-display h3 { font-size: 1.5rem; margin-bottom: 8px; }
#half-over-display p { font-size: 1.1rem; color: var(--text-dim); }

/* Manager bar */
#manager-bar {
  background: var(--bg-light);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 12px;
}
.manager-info {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
}
.mgr-label { color: var(--text-dim); }
.mgr-label strong { color: var(--text); }
.mgr-note {
  color: #e67e22;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 4px 0;
}
.manager-notes { margin-bottom: 8px; }

/* Season screen */
#season-header {
  text-align: center;
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
#season-header h2 {
  color: var(--accent-gold);
  margin-bottom: 8px;
}
#season-content .setup-panel {
  margin-bottom: 16px;
}
#season-log {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
}

.player-slot[hidden] { display: none !important; }
#btn-start-game[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Manager ability hints and action buttons */
.mgr-hint {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}
.mgr-hint-active {
  color: #e67e22;
  font-weight: 600;
  background: rgba(230, 126, 34, 0.12);
}
.mgr-action-btn {
  font-size: 0.78rem;
  padding: 3px 10px;
  margin-left: 8px;
  background: var(--accent-gold);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.mgr-action-btn:hover { opacity: 0.85; }
.mgr-action-btn:disabled,
.mgr-action-btn[disabled] {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.7;
}
.mgr-action-btn:disabled:hover,
.mgr-action-btn[disabled]:hover { opacity: 0.7; }
.mgr-used {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-left: 8px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 1024px) {
  #game-grid { grid-template-columns: 200px 1fr 220px; gap: 8px; }
}
@media (max-width: 768px) {
  .setup-grid { grid-template-columns: 1fr; }
  /* Phase 14 follow-up: keep #matchup as a horizontal row (batter | VS | pitcher)
     and stack the diamond ABOVE it via #field-row column layout. The pre-Phase-14
     `flex-direction: column` rule pushed the pitcher card off-screen at 360px. */
  #field-row {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  #matchup {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }
  .vs-badge { font-size: 0.85rem; align-self: center; }
  /* Shrink matchup cards so 2 cards + VS fit at 360px with breathing room */
  #field-row .matchup-card {
    padding: 4px 6px;
    min-width: 0;
    flex: 1 1 0;
    max-width: 140px;
  }
  #field-row .matchup-card .mc-photo { width: 36px; height: 36px; margin-bottom: 2px; }
  #field-row .matchup-card .mc-name { font-size: 0.85rem; margin-bottom: 1px; }
  #field-row .matchup-card .mc-tier { font-size: 0.65rem; margin-bottom: 2px; padding: 1px 4px; }
  #field-row .matchup-card .mc-label { font-size: 0.55rem; margin-bottom: 1px; letter-spacing: 1px; }
  #field-row .mc-stats { gap: 6px; }
  #field-row .stat { font-size: 0.7rem; }
  #field-row .stat-label { font-size: 0.55rem; }
  /* Shrink diamond to leave more room for the matchup row */
  #field-row .diamond { width: 80px; height: 80px; }
  #field-row .base { width: 18px; height: 18px; }
  #field-row .base-2nd { margin-left: -9px; }
  #field-row .base-3rd { margin-top: -9px; }
  #field-row .base-1st { margin-top: -9px; }
  #field-row .base-home { margin-left: -9px; }

  .guess-buttons, .pitch-buttons { flex-direction: column; align-items: center; }
  .score-row { font-size: 1rem; }
  .sb-score { font-size: 2rem; }
  /* Game grid collapses to single column on narrow screens; allow scroll. */
  #screen-game.active { height: auto; overflow: auto; }
  #game-grid { grid-template-columns: 1fr; }
  .team-panel-section .lineup-list { max-height: 200px; }

  /* Phase 14 follow-up: action-area (where pitch picker / guess buttons /
     result banner render) was getting clipped to ~30px on phone. Cause:
     #action-area has `flex: 1 1 0; min-height: 0; overflow-y: auto` which
     collapses inside the auto-height 1-col grid cell. Restore natural height
     on phone — let it grow to fit content, no internal scroll. */
  #game-center #action-area {
    flex: 0 0 auto;
    min-height: auto;
    overflow-y: visible;
    scrollbar-gutter: auto;
    padding: 10px;
  }
  /* Don't cap phase-panels and waiting-panel at 480px on phone — let them
     be the full width of the action-area / game-center column. */
  #game-center > #waiting-panel,
  #game-center #action-area > .phase-panel,
  #game-center #action-area > .waiting-panel {
    max-width: none;
  }
  /* Tighten guess/pitch button column on phone so 6 buttons (exact mode) fit */
  .guess-buttons .btn,
  .pitch-buttons .btn { width: 100%; max-width: 280px; }

  /* Phase 15.3: legacy .opponent-banner phone follow-up deleted (block replaced
     by .opp-strip strip at EOF). Team-panel stacking context still required to
     prevent layering bleed with manager-bar / waiting-panel. */
  /* Team panels: explicit stacking context so they cannot land under
     manager-bar / waiting-panel. */
  #screen-game .team-panel {
    position: relative;
    z-index: 0;
  }
  #screen-game #team-right { margin-top: 4px; }
  /* Manager-bar same — keep its content from bleeding into siblings */
  #game-center #manager-bar {
    position: relative;
    z-index: 1;
    background: var(--bg-light);
    border-radius: 8px;
  }

  /* Phase 14 follow-up: collapsed-by-default <details> for lineup/rotation/log.
     Show a chevron in the summary so users know it's tappable. */
  details.tp-collapse > summary {
    padding: 6px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
    user-select: none;
  }
  details.tp-collapse > summary::after {
    content: '▾';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.15s ease;
    opacity: 0.6;
    font-size: 0.85rem;
  }
  details.tp-collapse[open] > summary::after {
    transform: translateY(-50%) rotate(0deg);
  }
  details.tp-collapse[open] > summary {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
  }
  /* Tighten team-panel padding on phone so collapsed headers stack densely */
  .team-panel { padding: 6px 8px; gap: 0; }
  .team-panel-head { margin-bottom: 4px; padding-bottom: 4px; }

  /* Phase 14 D-10: Sticky scoreboard on phone (UI-SPEC §Layout Contract — Game Screen).
     RESEARCH R1/A1 fall-back path APPLIED — `position: sticky` resolved correctly
     in computed style but did not stick during scroll because the scoreboard's
     containing block (#game-center, a flex column) does not extend past the
     scroller's top edge. Documented in 14-RESEARCH.md (§Sticky Scoreboard backup)
     and pre-approved in 14-UI-SPEC.md (§Sticky Scoreboard Contract). Switching
     to position:fixed + padding-top compensation on #screen-game.active. */
  #screen-game.active #scoreboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--bg-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    margin-bottom: 0;
  }
  /* Compensate for fixed scoreboard so first content isn't hidden under it. */
  #screen-game.active { padding-top: 64px; }
  #screen-game.active #scoreboard .sb-score { font-size: 1.6rem; }
  #screen-game.active #scoreboard .score-row { font-size: 0.9rem; gap: 8px; }
  #screen-game.active #scoreboard .sb-name { min-width: 60px; font-size: 0.85rem; }
  #screen-game.active #scoreboard .sb-divider { font-size: 1.4rem; }

  /* Phase 14: 44px touch-target floor for primary action buttons (UI-SPEC) */
  .btn { padding: 12px 24px; }
  .btn-primary { padding: 12px 24px; }
}

/* Animations */
@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: popIn 0.3s ease-out; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s ease-in-out; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.pulse { animation: pulse 0.5s ease-in-out; }

/* === Booster Panel === */
.booster-panel {
  background: var(--bg-card);
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
}

.booster-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.booster-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.boost-badge {
  background: var(--accent-gold);
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

/* === Choice Modal === */
.choice-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.choice-modal {
  background: var(--bg-card);
  border: 2px solid var(--accent-gold);
  border-radius: 10px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

/* === Dynasty Scoreboard (upgraded) === */
.dynasty-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 50px 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dynasty-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dynasty-dp {
  text-align: center;
  color: var(--accent-gold);
  font-size: 0.85rem;
  font-weight: 600;
}

.dynasty-tok {
  text-align: center;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
}

.dynasty-total {
  text-align: center;
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
}

.dynasty-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.dynasty-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent));
  border-radius: 3px;
  transition: width 0.3s ease;
  min-width: 2px;
}

/* === Championship Panel === */
.championship-panel {
  background: var(--bg-card);
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.champ-title {
  color: var(--accent-gold);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.champ-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}

.champ-team {
  font-size: 1rem;
  font-weight: 600;
  max-width: 140px;
  word-break: break-word;
}

.champ-team.home {
  color: var(--accent-gold);
}

.champ-team.away {
  color: var(--blue);
}

.champ-score {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text);
  min-width: 48px;
  text-align: center;
}

.champ-vs {
  font-size: 1.4rem;
  color: var(--text-dim);
}

.champ-inning-info {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* === Dynasty Win Banner === */
.dynasty-win-banner {
  text-align: center;
  padding: 48px 24px;
  max-width: 580px;
  margin: 0 auto;
}

.dynasty-crown {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 16px;
}

.dynasty-winner-name {
  font-size: 2.8rem;
  color: var(--accent-gold);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.dynasty-winner-sub {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.dynasty-final-scores {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 16px;
  margin: 0 auto;
  max-width: 400px;
}

.dynasty-final-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.9rem;
  gap: 12px;
}

.dynasty-final-name {
  font-weight: 700;
  color: var(--accent-gold);
}

.dynasty-final-row:last-child {
  border-bottom: none;
}

/* === Phase 7: best-guess rules — awaiting client clarification === */
.badge-best-guess {
  display: inline-block;
  background: #b8860b;
  color: #1a1510;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.badge-best-guess::before {
  content: "\26A0 ";
}

/* Dynasty badge (3-Peat, etc.) */
.dynasty-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 0.95rem;
}

/* === Authed header strip (Phase 8) === */
.auth-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-light);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem;
  color: var(--text-dim);
}
.auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  /* 2026-05-05: avatar is the first item in the identity group on the
     RIGHT — push it (and everything after) to the right edge. */
  margin-left: auto;
}
.auth-greeting strong { color: var(--text); }
/* When avatar is absent, the greeting is the first identity item —
   make IT carry the auto margin so the layout still hugs the right.
   `:not(.auth-avatar + *)` means "not the element directly after an avatar". */
.auth-header > .auth-greeting:not(.auth-avatar + *) { margin-left: auto; }
.auth-signout {
  color: var(--accent-gold);
  text-decoration: none;
}
.auth-signout:hover { color: var(--accent); }

/* === Phase 9: Persistence UI (/my-games + Resume banner + header link) === */

/* sr-only utility (screen-reader-only text for aria landmark patterns per UI-SPEC) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* My Games page shell */
.mygames-page {
  max-width: 800px;
  margin: 48px auto 24px auto;
  padding: 0 24px;
}
.mygames-heading {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--text);
}

/* My Games table — UI-SPEC Component 2 */
.mygames-table {
  width: 100%;
  background: var(--bg-light);
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
}
.mygames-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mygames-table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mygames-table tbody tr:last-child td { border-bottom: none; }
.mygames-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.mygames-opp-fallback { color: var(--text-dim); }

/* W/L badge — UI-SPEC Component 1 (pill, 24px height, min-width 32px) */
.wl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.wl-badge.win  { background: var(--green); }
.wl-badge.loss { background: var(--red); }

/* My Games empty state — UI-SPEC Component 5 */
.mygames-empty {
  max-width: 480px;
  margin: 48px auto;
  padding: 32px 16px;
  text-align: center;
}
.mygames-empty h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--text);
}
.mygames-empty p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* Resume banner — UI-SPEC Component 3 */
.resume-banner {
  background: var(--bg-light);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px auto;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.resume-banner .resume-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
}
.resume-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  flex: 1 1 100%;
}
.resume-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.resume-list-label {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.resume-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.resume-link:hover {
  color: #c73850;
  text-decoration: underline;
}

/* Header nav link — UI-SPEC Component 4 (companion to existing .auth-signout) */
.auth-nav-link {
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 16px;
  font-size: 0.9rem;
}
.auth-nav-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Responsive: tighten table padding on small screens per UI-SPEC */
@media (max-width: 768px) {
  .mygames-page { padding: 0 12px; margin-top: 24px; }
  .mygames-table th,
  .mygames-table td { padding: 8px 12px; }
  .resume-banner { margin: 12px 8px; }
  /* Phase 14 R5: Lobby table horizontal-scroll wrapper (UI-SPEC item #10) */
  .lobby-table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .lobby-table-scroll-wrapper .lobby-table { min-width: 640px; }
  /* Phase 14: Auth login box phone padding (UI-SPEC item #16) */
  .login-box { padding: 32px 24px; }
}

/* Phase 14 R5: Lobby table wrapper — desktop default (no scroll needed) */
.lobby-table-scroll-wrapper { width: 100%; }

/* === Phase 10: Lobby UI === */

/* Lobby page shell */
.lobby-page { max-width: 800px; margin: 48px auto 24px auto; padding: 0 24px; }
.lobby-heading { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--text); }

/* Create Game inline form */
.lobby-create-form {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
  max-width: 480px;
  margin: 0 auto 24px auto;
}
.lobby-create-form .form-label {
  font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim);
  display: block; margin-bottom: 8px;
}
.lobby-seat-chips { display: flex; gap: 8px; margin-bottom: 16px; }
.lobby-seat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 32px; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: var(--bg-card, #21294a);
  color: var(--text-dim);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.lobby-seat-chip input[type="radio"] { display: none; }
.lobby-seat-chip:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Lobby table — extends .mygames-table visual */
.lobby-table {
  width: 100%;
  background: var(--bg-light);
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
  margin-top: 16px;
}
.lobby-table caption { caption-side: top; text-align: left; padding-bottom: 8px; }
.lobby-table thead th {
  font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim);
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lobby-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem; color: var(--text);
}
.lobby-table tbody tr:last-child td { border-bottom: none; }
.lobby-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.lobby-join-link { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lobby-join-link:hover { color: #c73850; text-decoration: underline; }

/* Lobby empty state */
.lobby-empty {
  max-width: 480px;
  margin: 48px auto;
  padding: 32px 16px;
  text-align: center;
}
.lobby-empty h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 8px; }
.lobby-empty p { font-size: 0.9rem; line-height: 1.5; color: var(--text-dim); margin-bottom: 16px; }

/* Waiting room page */
.waiting-room-page { max-width: 800px; margin: 48px auto 24px auto; padding: 0 24px; }
.waiting-room-heading { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--text); }

/* Seat list */
.seat-list {
  list-style: none;
  padding: 16px;
  margin: 24px auto;
  max-width: 800px;
  background: var(--bg-light);
  border-radius: 12px;
}
.seat-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.seat-list-row:last-child { border-bottom: none; }
.seat-list-row.you { border-left: 4px solid var(--accent); }
.seat-number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 24px;
  border-radius: 50%;
  background: var(--bg-card, #21294a);
  color: var(--text-dim);
  font-size: 0.75rem; font-weight: 700;
  margin-right: 12px;
}
.seat-display-name { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.5; }
.seat-manager-name { font-size: 0.9rem; font-weight: 400; color: var(--text-dim); line-height: 1.5; }
.seat-open-label { font-size: 0.9rem; font-weight: 400; color: var(--text-dim); font-style: italic; }
.seat-creator-badge {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent-gold);
  padding: 2px 8px;
  border: 1px solid var(--accent-gold);
  border-radius: 12px;
  margin-left: 8px;
}
.seat-you-badge {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  margin-left: 8px;
}

/* Action bar */
.lobby-action-bar {
  display: flex; justify-content: center; gap: 12px;
  margin: 24px 0;
}
.lobby-btn-start {
  background: var(--green);
  color: #fff; font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.lobby-btn-start[aria-disabled="true"] {
  background: rgba(39,174,96,0.3);
  color: rgba(255,255,255,0.6);
  cursor: not-allowed;
}
.lobby-btn-start:hover:not([aria-disabled="true"]) { background: #1f8b4c; }
.lobby-btn-cancel, .lobby-btn-leave {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.lobby-btn-cancel:hover, .lobby-btn-leave:hover {
  background: var(--red);
  color: #fff;
}

/* Inline error banner (lobby + waiting room) */
.lobby-error-banner {
  background: var(--bg-light);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px auto;
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lobby-error-body { font-size: 0.9rem; line-height: 1.5; color: var(--text); }

/* Phase 11 preview: not-your-turn panel styling (ready for Phase 11 game.js use) */
.phase-not-your-turn {
  background: var(--bg-light);
  border-left: 4px solid var(--red);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

/* === Phase 10.1: Multiplayer UI Split === */
/* Phase 15.3: .opponent-banner rules deleted (block replaced by .opp-strip at EOF). */

.waiting-panel {
  text-align: center;
  padding: 32px 16px;
  margin: 24px auto;
  max-width: 480px;
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px dashed var(--text-dim, #666);
}

.waiting-panel-inner {
  max-width: 320px;
  margin: 0 auto;
}

.waiting-panel .waiting-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.waiting-panel .waiting-text {
  color: var(--text);
  font-size: 1rem;
  margin: 0;
}

.waiting-panel .waiting-name,
.waiting-panel .waiting-action {
  color: var(--accent, #3498db);
  font-weight: 600;
}

@media (max-width: 600px) {
  .waiting-panel { padding: 20px 12px; }
}

/* === End Phase 10.1 === */

/* Join-manager dialog */
.lobby-dialog {
  border: none;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 90%;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.lobby-dialog::backdrop {
  background: rgba(0,0,0,0.5);
}
.lobby-dialog h2 {
  font-size: 1.2rem;
  color: var(--text);
}

/* Responsive */
@media (max-width: 768px) {
  .lobby-page, .waiting-room-page { padding: 0 12px; margin-top: 24px; }
  .seat-list, .lobby-error-banner { margin: 12px 8px; }
  .seat-list-row { padding: 8px 12px; }
  .lobby-action-bar { flex-direction: column; gap: 8px; }
  /* Phase 14: Lobby button touch-target floor (UI-SPEC Touch-Target Contract) */
  .lobby-btn-start, .lobby-btn-cancel, .lobby-btn-leave { padding: 14px 24px; }
}

/* === Feedback FAB + dialog === */
.ll-feedback-fab {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  right: max(20px, env(safe-area-inset-right, 20px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--red, #d62027);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ll-feedback-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  background: #e63a40;
}
.ll-feedback-fab:active { transform: translateY(0); }
.ll-feedback-fab:focus-visible {
  outline: 2px solid var(--accent-gold, #e1b84b);
  outline-offset: 2px;
}
.ll-feedback-fab svg { display: block; }
@media (max-width: 600px) {
  .ll-feedback-fab { padding: 12px; }
  .ll-feedback-fab .ll-feedback-fab-label { display: none; }

  /* Phase 14: Auth header flex-wrap (RESEARCH worst-offender #1) */
  .auth-header { flex-wrap: wrap; gap: 6px; padding: 6px 12px; font-size: 0.85rem; }
  .auth-avatar { width: 24px; height: 24px; }
  .auth-nav-link { margin-left: 8px; font-size: 0.85rem; }

  /* Phase 14 D-11: Card shrink-to-fit on phone (UI-SPEC §Phone Reduction Map) */
  .matchup-card { padding: 8px 12px; min-width: 130px; }
  .matchup-card .mc-photo { width: 48px; height: 48px; }
  .matchup-card .mc-name { font-size: 1.1rem; }
  #field-row .matchup-card { padding: 4px 8px; min-width: 100px; }
  #field-row .matchup-card .mc-photo { width: 36px; height: 36px; }
  #field-row .matchup-card .mc-name { font-size: 0.9rem; }
  .card-chip { padding: 4px 8px; font-size: 0.8rem; }
  .card-chip .chip-photo { width: 24px; height: 24px; }
  .card-pool { max-height: 160px; }

  /* Phase 14: Worst-offender #3 dynasty winner banner shrink */
  .dynasty-winner-name { font-size: 1.6rem; letter-spacing: 2px; }

  /* Phase 14: Lobby seat chip touch-target floor (UI-SPEC Touch-Target Contract) */
  .lobby-seat-chip { padding: 8px 12px; min-height: 40px; }
  /* Phase 14: Tutorial close button touch-target (UI-SPEC item #15) */
  .tutorial-modal-close { padding: 12px 18px; }
  /* Phase 14: Dynasty row tightening (UI-SPEC item #17) */
  .dynasty-row { gap: 4px; }
  /* Phase 14: Championship panel polish (UI-SPEC item #18) */
  .champ-team { max-width: 110px; }
  .champ-score { font-size: 1.8rem; }
}

.ll-feedback-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 560px;
  width: 92%;
  background: var(--bg, #1a1f2b);
  color: var(--text, #e8e8e8);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.ll-feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.ll-feedback-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ll-feedback-dialog-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}
.ll-feedback-dialog-close {
  background: transparent;
  border: none;
  color: var(--text-dim, #999);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ll-feedback-dialog-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.ll-feedback-dialog-body { padding: 18px 20px; }
.ll-feedback-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ll-feedback-required { color: var(--red, #d62027); }
.ll-feedback-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-dim, #aaa);
  margin-bottom: 8px;
  cursor: pointer;
}
.ll-feedback-status {
  font-size: 0.85rem;
  margin: 8px 0 0;
  min-height: 1.2em;
}
.ll-feedback-status[data-kind="error"] { color: var(--red, #d62027); }
.ll-feedback-status[data-kind="warn"]  { color: #d8a23a; }
.ll-feedback-status[data-kind="info"]  { color: var(--text-dim, #aaa); }
.ll-feedback-status[data-kind="ok"]    { color: #4caf50; }

/* === Phase 11: Socket.IO Real-Time === */

/* (a) Reconnected toast (UI-SPEC §1) */
.reconnected-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  background: var(--bg-light);
  border-left: 4px solid var(--accent-gold);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 1rem;
  min-width: 240px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.reconnected-toast[hidden] { display: none; }
.reconnected-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reconnected-toast-icon {
  color: var(--accent-gold);
  font-size: 1.2rem;
}
.reconnected-toast-name {
  font-weight: 600;
  color: var(--accent-gold);
}

/* 2026-05-04: Steal-attempt banner — main-window outcome visible to BOTH seats. */
.steal-result-banner {
  margin: 12px auto;
  max-width: 560px;
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--bg-light);
  border-left: 4px solid var(--accent-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 1.05rem;
  text-align: center;
}
.steal-result-banner.steal-success {
  border-left-color: var(--accent, #4ade80);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), var(--bg-light));
}
.steal-result-banner.steal-failure {
  border-left-color: var(--red, #ef4444);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), var(--bg-light));
}
.steal-result-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.steal-result-icon { font-size: 1.4rem; }
.steal-result-text { font-weight: 600; letter-spacing: 0.2px; }

/* (b) Paused-banner state extension (UI-SPEC §2 — extends Phase 10.1 #waiting-panel) */
.waiting-panel.is-paused {
  border-left: 4px solid var(--red);
}
.waiting-panel.is-paused .waiting-icon::before {
  content: "🔌";
}

/* (c) Phase 15.3: .opponent-banner.is-disconnected + .opponent-disconnected-pill deleted.
   Replaced by .opp-strip-tile.is-disconnected per-tile dimming at EOF. */

/* (d) Local user connection-lost banner (UI-SPEC §6) */
.local-disconnect-banner {
  position: sticky;
  top: 0;
  z-index: 9998;
  background: var(--red);
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}
.local-disconnect-banner[hidden] { display: none; }

/* (e) Mobile + reduced-motion */
@media (max-width: 600px) {
  .reconnected-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reconnected-toast {
    transition: none;
  }
}

/* === End Phase 11 === */

/* === Phase 13: Multiplayer Season Mode === */

/* (a) Lobby badges — exhibition vs season pill on Open Lobbies table */
.lobby-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.lobby-badge-season {
  background: var(--accent, #2196f3);
  color: #fff;
}

.lobby-badge-exhibition {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim, #999);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* (b) Phase 15.3: Phase 13 season-hub .opponent-banner row variants deleted.
   Season-hub opponent display now uses the same .opp-strip strip as exhibition. */

/* (c) Season-mode tag — small inline pill in waiting-room metadata row */
.season-mode-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--accent, #2196f3);
  color: var(--accent, #2196f3);
  font-size: 0.75rem;
  font-weight: 700;
}

.waiting-room-meta {
  text-align: center;
  color: var(--text-dim, #999);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* (d) Season schedule preview — BO-N alternating home/away grid */
.season-schedule {
  background: var(--bg-light, rgba(255, 255, 255, 0.04));
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 8px;
}

.schedule-heading {
  font-size: 1rem;
  margin: 0 0 12px 0;
  font-weight: 700;
}

.schedule-row {
  padding: 8px 12px;
  border-left: 3px solid var(--text-dim, #666);
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.schedule-row-pending { border-left-color: var(--text-dim, #666); }
.schedule-row-win { border-left-color: #4caf50; }
.schedule-row-loss { border-left-color: var(--red, #e53935); }

/* (e) Resume banner — season variant (subclass for future tweaks) */
.resume-banner-season {
  /* shares .resume-banner styling; subclass placeholder for future tweaks */
}

/* === End Phase 13 === */

/* === Phase 15.1: First-Off-Season FA banner === */
.fa-banner {
  /* Inline styles in renderOffseason carry the visual; this class is
     a stable hook for e2e DOM grep and future restyling. */
}

/* === Phase 15.2: Setup UX — Front Office Hub Manager subsection (D-09) === */
.fro-hub-manager > summary.lineup-title {
  /* Inherits .lineup-title for visual parity with Lineup/Rotation summaries */
}
.manager-card-hub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 6px;
}
.manager-card-hub-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.manager-card-hub-ability-name {
  font-size: 0.85rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
}
.manager-card-hub-ability {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 4px 0 0 0;
}
/* === end Phase 15.2: Setup UX (Plan 01 — manager hub) === */

/* === Phase 15.2: Setup UX (Plan 02 — lineup slots) ===
 * Vertical 5-row numbered slot grid. Identical layout desktop + mobile (D-13).
 * 0 new media queries (Phase 14 D-06 budget). 0 new :root tokens.
 */
.lineup-slot-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.lineup-slot-row-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.lineup-slot {
  display: grid;
  grid-template-columns: 32px 64px 1fr;
  column-gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
}
.lineup-slot:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.lineup-slot-num {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.lineup-slot-role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--text-dim);
}
.lineup-slot-leadoff .lineup-slot-role {
  background: var(--accent-gold);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
}
.lineup-slot-target {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-slot-empty {
  border: 1px dashed var(--text-dim);
  border-left-width: 3px;
}
.lineup-slot-filled {
  background: var(--bg-light);
  border-left-color: var(--green);
}
.lineup-slot-filled .lineup-slot-target {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}
.lineup-slot-leadoff {
  border-left-color: var(--accent-gold);
}
.lineup-slot-filled.lineup-slot-leadoff {
  border-left-color: var(--accent-gold);
}
.lineup-slot.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.lineup-slot.is-drag-over {
  outline: 2px dashed var(--accent-gold);
  outline-offset: 1px;
}
.card-chip.taken {
  opacity: 0.4;
  cursor: default;
}
.card-chip.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* === end Phase 15.2: Setup UX (Plan 02 — lineup slots) === */

/* === Phase 15.3: Multi-Player Expansion (Plan 02 — opponent strip) ===
 * Multi-opponent horizontal strip (1..5 tiles). flex + overflow-x: auto +
 * scroll-snap-type: x mandatory. Replaces legacy .opponent-banner.
 * 0 new @media queries (Phase 14 D-06 / UI-SPEC line 50 target).
 * 0 new :root tokens (uses --bg, --bg-light, --accent, --accent-gold,
 * --text, --text-dim from style.css:3-18).
 */
.opp-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  position: relative;
  scrollbar-width: thin;
}
.opp-strip-tile {
  flex: 0 0 160px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-light);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid transparent;
  border-radius: 6px;
  scroll-snap-align: start;
  box-sizing: border-box;
}
.opp-strip-tile.is-active-pitcher { border-left-color: var(--accent); }
.opp-strip-tile.is-current-turn   { border-left-color: var(--accent-gold); }
.opp-strip-tile.is-disconnected   { opacity: 0.5; }
.opp-strip-tile-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-strip-tile-runs,
.opp-strip-tile-dpdt,
.opp-strip-tile-pitcher {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-strip-label {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 2px;
}
.opp-strip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg) 80%);
}
/* === end Phase 15.3: Multi-Player Expansion (Plan 02 — opponent strip) === */

/* === Phase 15.3: Multi-Player Expansion (Plan 04 — hot-seat privacy curtain) === */
/* UI-SPEC §Component 2 (lines 318-342). Full-screen modal that blocks the
   private-field DOM until the next seat taps Ready. z-index: 10500 sits
   above all other game-screen panels. Zero new @media queries — the layout
   uses flex centering which adapts to any viewport without breakpoints. */
.hot-seat-curtain {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 22, 36, 0.95);
}
.curtain-card {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 32px 24px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.curtain-heading {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 16px 0;
}
.curtain-subhead {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 0 0 24px 0;
}
.curtain-ready-btn {
  min-width: 200px;
  min-height: 44px;
  margin-top: 8px;
}
/* === end Phase 15.3: Multi-Player Expansion (Plan 04 — hot-seat privacy curtain) === */

/* === Phase 15.3: Multi-Player Expansion (Plan 04b — lobby hot-seat block) === */
/* UI-SPEC §Component 3 (lines 411-427). Hot-seat checkbox + nickname fieldset
   for the /lobby create form. Touch-target floor 44px on the checkbox label
   and nickname inputs (Phase 14 D-13). Zero new @media queries — layout
   inherits the existing .lobby-page responsive shell at the 768px breakpoint. */
.lobby-hot-seat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
.lobby-hot-seat-helper {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-dim);
  margin: 4px 0 12px 24px;
}
.lobby-hot-seat-nicknames {
  border: none;
  padding: 0;
  margin: 12px 0 0 0;
}
.lobby-nickname-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.lobby-nickname-input {
  min-height: 44px;
}
.lobby-form-error {
  color: var(--accent);
  font-size: 0.85rem;
  margin: 8px 0 0 0;
}
/* === end Phase 15.3: Multi-Player Expansion (Plan 04b — lobby hot-seat block) === */