/* ─── Player Interface Styles ────────────────────────────────── */

.player-body {
  background: var(--surface-0);
  min-height: 100vh;
}

/* ─── Position Picker ────────────────────────────────────────── */
.position-picker {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.picker-card {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  max-width: 540px;
  width: 100%;
  text-align: center;
}

.picker-brand {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-4);
}

.picker-title {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.picker-sub {
  font-size: 14px;
  color: var(--chalk-muted);
  margin-bottom: var(--space-6);
}

.picker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.picker-section { text-align: left; }

.picker-section-label {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--chalk-muted);
  margin-bottom: var(--space-2);
}

.picker-pos-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pos-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--chalk-dim);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.pos-chip:hover {
  background: var(--turf-light);
  border-color: var(--signal);
  color: var(--signal);
}

.picker-note { font-size: 12px; color: var(--chalk-muted); }

/* ─── Player App ─────────────────────────────────────────────── */
.player-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.player-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.player-brand {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--chalk);
  flex: 1;
}

.player-pos-badge {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--signal);
  background: var(--turf-mid);
  border: 1.5px solid var(--signal);
  border-radius: var(--r-sm);
  padding: 2px 10px;
  letter-spacing: 1px;
}

.player-nav {
  display: flex;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.player-nav-btn {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--chalk-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.player-nav-btn.active {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.player-main {
  flex: 1;
  padding: var(--space-5);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Playbook Tabs ──────────────────────────────────────────── */
.playbook-tabs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pb-tab {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--chalk-dim);
  transition: background var(--t-fast), color var(--t-fast);
}

.pb-tab.active {
  background: var(--turf-light);
  border-color: var(--signal);
  color: var(--signal);
}

/* ─── Play Cards ─────────────────────────────────────────────── */
.play-list { display: flex; flex-direction: column; gap: var(--space-4); }

.play-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.play-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.play-card__name {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--chalk);
}

.play-card__formation {
  font-size: 12px;
  color: var(--chalk-muted);
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

.play-card__tags {
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--turf-light);
  border-radius: 999px;
  color: var(--chalk-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.play-card__diagram {
  background: var(--surface-1);
  aspect-ratio: 9 / 14;
  max-height: 260px;
}

.play-card__diagram--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chalk-muted);
  font-size: 13px;
}

.play-card__my-note {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--turf-light);
}

.play-card__my-note strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--signal);
  margin-bottom: var(--space-2);
}

.play-card__my-note p { font-size: 14px; line-height: 1.6; }

/* ─── Game Plan Player View ──────────────────────────────────── */
.gp-player-header {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.gp-player-name {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.gp-player-vs   { color: var(--signal); font-weight: 600; margin-bottom: var(--space-2); }
.gp-player-notes { font-size: 14px; color: var(--chalk-dim); line-height: 1.6; margin-top: var(--space-3); }

.player-empty {
  text-align: center;
  color: var(--chalk-muted);
  font-size: 14px;
  padding: var(--space-10) var(--space-6);
}