/* ============================================================
   SquadRotate · Game Day LIVE surface (mobile-v1)
   The sideline-dark slate context from the mobile design set
   (design-system/project/ui_kits/mobile/ · Figma VvcYjds21eBmi7pjLzJmhP).
   Scoped entirely under .gd-live — the rest of the app keeps the
   cream theme. Token values lifted from colors_and_type.css; the
   two Daylight Boost L1 tokens are the only new values (QA gate).
   ============================================================ */
/* ── shared slate-context tokens (live overlay, takeover, pre-game panel) ──
   The takeover is a DOM sibling of .gd-live, so tokens must be declared on
   every slate surface root — never rely on inheritance across overlays. */
.gd-live, .gdl-takeover, .gd-pitch-panel {
  --gdl-ink:        #1A2837;                    /* --sr-slate-ink */
  --gdl-slate:      #2C4259;                    /* --sr-slate */
  --gdl-steel:      #3C5573;                    /* --sr-steel (alias of slate-12) */
  --gdl-cream:      #F0EDE8;                    /* --sr-cream */
  --gdl-text:       var(--gdl-cream);
  --gdl-muted:      rgba(240, 237, 232, 0.65);  /* --sr-on-slate-muted */
  --gdl-subtle:     rgba(240, 237, 232, 0.30);  /* --sr-on-slate-subtle */
  --gdl-line:       rgba(240, 237, 232, 0.18);  /* --sr-on-slate-line */
  --gdl-card:       rgba(240, 237, 232, 0.06);
  --gdl-ok:         oklch(0.62 0.12 145);       /* --sr-status-ok */
  --gdl-warn:       oklch(0.74 0.13 80);
  --gdl-alert:      oklch(0.56 0.15 28);
  --gdl-gk:         oklch(0.62 0.10 70);        /* --sr-role-1 warm gold */
  --gdl-def:        oklch(0.62 0.10 230);
  --gdl-mid:        oklch(0.62 0.10 140);
  --gdl-str:        oklch(0.62 0.12 30);
  --gdl-action:     var(--gdl-cream);           /* primary action — chalk on slate */
  --gdl-on-action:  var(--gdl-ink);
  /* sport surface — matches the sport (soccer = grass); swap per sport */
  --gdl-pitch:        #166534;
  --gdl-pitch-stripe: #15803D;
  --gdl-pitch-line:   rgba(255,255,255,0.72);
  --gdl-mono:       'DM Mono', 'Courier New', monospace;
}

.gd-live {
  position: fixed; inset: 0; z-index: 800;
  background: var(--gdl-ink); color: var(--gdl-text);
  display: none; flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}
.gd-live.open { display: flex; }

/* Daylight Boost — the exactly-two new L1 tokens (QA gate item 7) */
.gd-live.boost, .gdl-takeover.boost {
  --gdl-text:   #FFFFFF;                        /* --sr-text-boost */
  --gdl-action: #FFFFFF;                        /* action surface follows text-boost */
  --gdl-muted:  rgba(255, 255, 255, 0.78);
  --gdl-line:   rgba(240, 237, 232, 0.34);      /* --sr-border-boost */
}
.gd-live.boost .gdl-timer-num { font-weight: 500; }
.gd-live.boost .gdl-chip { color: var(--gdl-ink); }
.gd-live.boost .chip-gk  { background: var(--gdl-gk);  }
.gd-live.boost .chip-def { background: var(--gdl-def); }
.gd-live.boost .chip-mid { background: var(--gdl-mid); }
.gd-live.boost .chip-str { background: var(--gdl-str); }

/* ── header bar ── */
.gdl-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--gdl-slate);
  border-bottom: 1px solid var(--gdl-line);
}
.gdl-bar .t { font-weight: 700; font-size: 1rem; }
.gdl-bar .sub { font-family: var(--gdl-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gdl-muted); }
.gdl-bar-actions { display: flex; gap: 8px; align-items: center; }
.gdl-iconbtn {
  min-width: 44px; min-height: 44px; border-radius: 10px;
  background: transparent; border: 1px solid var(--gdl-line);
  color: var(--gdl-muted); font-size: 0.9rem; cursor: pointer;
}
.gdl-iconbtn.active { border-color: var(--gdl-warn); color: var(--gdl-warn); }

/* sync pill — steel offline, cream pulse syncing, green synced (no amber) */
.gdl-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gdl-line);
  font-family: var(--gdl-mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gdl-muted);
}
.gdl-sync .d { width: 8px; height: 8px; border-radius: 50%; background: var(--gdl-ok); }
.gdl-sync.is-offline { border-color: var(--gdl-steel); background: rgba(60,85,115,0.22); }
.gdl-sync.is-offline .d { background: var(--gdl-steel); }
.gdl-sync.is-syncing .d { background: var(--gdl-cream); animation: gdl-pulse 1.2s ease-in-out infinite; }
@keyframes gdl-pulse { 50% { opacity: 0.35; } }

/* ── timer block ── */
.gdl-timer { flex: none; text-align: center; padding: 14px 0 6px; }
.gdl-shiftlabel { font-family: var(--gdl-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gdl-muted); margin-bottom: 8px; }
.gdl-ring { position: relative; width: 208px; height: 208px; margin: 0 auto; }
.gdl-ring svg { transform: rotate(-90deg); }
.gdl-ring .track { stroke: var(--gdl-line); }
.gdl-ring .arc   { stroke: var(--gdl-ok); transition: stroke-dashoffset 0.9s linear, stroke 0.3s; }
.gdl-ring.is-warn .arc  { stroke: var(--gdl-warn); }
.gdl-ring.is-alert .arc { stroke: var(--gdl-alert); }
.gdl-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.gdl-timer-num { font-family: var(--gdl-mono); font-weight: 400; font-size: 3.1rem; letter-spacing: 0.02em; line-height: 1; }
.gdl-strength { font-family: var(--gdl-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gdl-ok); }
.gdl-ring.is-alert .gdl-strength { color: var(--gdl-alert); }

/* ── roster groups ── */
.gdl-roster { flex: 1; overflow-y: auto; padding: 6px 16px 12px; }
.gdl-group-label { font-family: var(--gdl-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gdl-muted); margin: 12px 2px 6px; }
.gdl-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 12px; margin-bottom: 8px;
  background: var(--gdl-card); border: 1px solid var(--gdl-line); border-radius: 12px;
}
.gdl-row.is-gk { border-color: var(--gdl-gk); }
.gdl-row .nm { font-weight: 600; font-size: 1rem; flex: 1; }
.gdl-row .kit { font-family: var(--gdl-mono); font-size: 0.78rem; color: var(--gdl-muted); }
.gdl-chip {
  font-family: var(--gdl-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 6px; border: 1px solid;
  background: transparent;
}
.chip-gk  { color: var(--gdl-gk);  border-color: var(--gdl-gk); }
.chip-def { color: var(--gdl-def); border-color: var(--gdl-def); }
.chip-mid { color: var(--gdl-mid); border-color: var(--gdl-mid); }
.chip-str { color: var(--gdl-str); border-color: var(--gdl-str); }
.chip-bn  { color: var(--gdl-subtle); border-color: var(--gdl-line); }
.gdl-row.is-bench { opacity: 0.55; min-height: 44px; }

/* ── next-shift strip + CTA ── */
.gdl-next {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--gdl-line);
  font-family: var(--gdl-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gdl-muted);
  overflow-x: auto; white-space: nowrap;
}
.gdl-next .in { margin-left: auto; }
.gdl-next .av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gdl-line); font-size: 0.6rem; color: var(--gdl-text);
}
.gdl-next .av.gk { border-color: var(--gdl-gk); color: var(--gdl-gk); }
.gdl-cta-wrap { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.gdl-cta {
  width: 100%; min-height: 58px; border: none; border-radius: 14px;
  background: var(--gdl-action); color: var(--gdl-on-action);
  font-family: var(--gdl-mono); font-weight: 500; font-size: 1rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.gdl-cta:active { filter: brightness(0.92); }

/* ── shift-change takeover ── */
.gdl-takeover {
  position: fixed; inset: 0; z-index: 900;
  background: var(--gdl-ink); color: var(--gdl-text);
  display: none; flex-direction: column; padding: calc(24px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
}
.gdl-takeover.open { display: flex; }
.gdl-tk-boundary { text-align: center; font-family: var(--gdl-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gdl-ok); }
.gdl-tk-title { text-align: center; font-size: 2.4rem; font-weight: 800; margin: 6px 0 2px; }
.gdl-tk-sub { text-align: center; font-family: var(--gdl-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gdl-muted); margin-bottom: 18px; }
.gdl-tk-gk {
  border: 1.5px solid var(--gdl-gk); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  background: var(--gdl-card);
}
.gdl-tk-gk .who { font-weight: 700; font-size: 1.05rem; }
.gdl-tk-gk .what { font-family: var(--gdl-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gdl-gk); margin-top: 3px; }
.gdl-tk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow-y: auto; }
.gdl-tk-col-label { font-family: var(--gdl-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.gdl-tk-col-label.off { color: var(--gdl-alert); }
.gdl-tk-col-label.on  { color: var(--gdl-ok); }
.gdl-tk-row {
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 6px 12px; margin-bottom: 8px;
  background: var(--gdl-card); border: 1px solid var(--gdl-line); border-radius: 12px;
  font-weight: 600;
}
.gdl-tk-row.on { border-color: var(--gdl-ok); }
.gdl-tk-row .tag { font-family: var(--gdl-mono); font-size: 0.58rem; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--gdl-line); color: var(--gdl-muted); }
.gdl-tk-row.on .tag { border-color: var(--gdl-ok); color: var(--gdl-ok); }
.gdl-tk-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.gdl-tk-done {
  min-height: 64px; border: none; border-radius: 14px;
  background: var(--gdl-action); color: var(--gdl-on-action);
  font-family: var(--gdl-mono); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
}
.gdl-tk-delay {
  min-height: 52px; border-radius: 14px; background: transparent;
  border: 1px solid var(--gdl-line); color: var(--gdl-text);
  font-family: var(--gdl-mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.gdl-tk-dismissnote { text-align: center; font-family: var(--gdl-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gdl-subtle); }

/* ── Chalkboard pitch view (drag-swap, ported from design-system comp) ── */
.gdl-board {
  position: relative; flex: 1; overflow-y: auto;
  margin: 6px auto 12px; display: none;
  width: calc(100% - 32px); max-width: 400px; /* phone-shaped even on tablet/desktop */
}
.gd-live.pitch-view .gdl-board { display: block; }
.gd-live.pitch-view .gdl-roster { display: none; }
.cb-pitch { position: absolute; left: 0; top: 0; width: 100%; border-radius: 10px; overflow: hidden; }
.cb-pitch svg { display: block; width: 100%; height: 100%; }
.cb-benchzone {
  position: absolute; left: 0; width: 100%;
  border-radius: 10px; background: rgba(240,237,232,0.04);
  border: 1px dashed var(--gdl-line);
}
.cb-bz-label {
  position: absolute; bottom: 4px; right: 12px;
  font-family: var(--gdl-mono); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gdl-subtle);
}
.cb-slot {
  position: absolute; transform: translate(-50%, -50%);
  width: 82px; height: 44px; border: 1.5px dashed rgba(255,255,255,0.22);
  border-radius: 10px; pointer-events: none;
}
.cb-slot .cb-slot-lab {
  position: absolute; left: 50%; top: -5px; transform: translate(-50%, -100%);
  font-family: var(--gdl-mono); font-size: 0.54rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.38); white-space: nowrap;
}
.cb-slot.bench { border-color: rgba(255,255,255,0.14); }
.cb-slot.target { border-style: solid; border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.10); }
.cb-slot.target .cb-slot-lab { color: #fff; }
.cb-chip {
  position: absolute; transform: translate(-50%, -50%);
  width: 82px; height: 44px; /* 44px touch target (QA gate) — comp was 30px */
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8rem; line-height: 1; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: grab; user-select: none; touch-action: none;
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.28);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: left 0.18s cubic-bezier(0.2,0,0,1), top 0.18s cubic-bezier(0.2,0,0,1);
}
.cb-chip.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 8px 18px rgba(0,0,0,0.5); z-index: 30; transition: none; }
.cb-chip.gk    { background: oklch(0.58 0.12 70); }
.cb-chip.def   { background: oklch(0.50 0.13 230); }
.cb-chip.mid   { background: oklch(0.50 0.12 140); }
.cb-chip.str   { background: oklch(0.53 0.15 30); }
.cb-chip.bench { background: #475569; color: #CBD5E1; border-color: rgba(255,255,255,0.14); }

/* ── Pre-game pitch panel (Game Day tab, cream page · slate card) ── */
.gd-pitch-panel {
  background: var(--gdl-ink); color: var(--gdl-text);
  border-radius: 14px; padding: 12px; margin-bottom: 14px;
}
.gdp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gdp-step {
  min-width: 44px; min-height: 44px; border-radius: 10px;
  background: transparent; border: 1px solid var(--gdl-line);
  color: var(--gdl-muted); font-size: 0.8rem; cursor: pointer;
}
.gdp-step:disabled { opacity: 0.3; cursor: default; }
.gdp-label {
  font-family: var(--gdl-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; min-width: 92px; text-align: center;
}
.gdp-pill {
  margin-left: auto; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-family: var(--gdl-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; cursor: pointer; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--gdl-ok); color: var(--gdl-ok);
}
.gdp-pill.is-warn { border-color: var(--gdl-warn); color: var(--gdl-warn); }
.gdp-pill.is-empty { border-color: var(--gdl-line); color: var(--gdl-subtle); }
.gdp-board { position: relative; height: 540px; }
.gdp-hint {
  margin-top: 8px; text-align: center;
  font-family: var(--gdl-mono); font-size: 0.56rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gdl-subtle);
}