/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL GAMEPLAY — page-specific components
   ───────────────────────────────────────────────────────────────────────────
   The ruled card index that used to live here has been promoted into
   css/style.css as the canonical case-study card treatment, so it now applies
   to DreamPlay, Scout and TSYS too. Only components unique to this page remain:
   the two-phase comparison, the pivot shift table, and the ecosystem map
   reweighting.

   TO REVERT: delete the <link> to this file in social-gameplay.html.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cr-ink:      #111111;
  --cr-ink-600:  #444448;
  --cr-line-1:   rgba(0,0,0,0.10);
  --cr-line-2:   rgba(0,0,0,0.22);
  --cr-accent:   #1D4ED8;
}

/* ═══ TWO-PHASE COMPARISON (.sg-phases) ═══
   The approach chapter was two stacked bullet lists, so the single most
   important fact about the project (that it changed direction halfway) was
   invisible. Side by side it reads as a before and after.

   No hard rules. The earlier attempt used 2px ink borders and a rotated label,
   which was heavy and awkward. The contrast between the two panels carries the
   story instead: phase 1 sits back on plain grey, phase 2 comes forward on the
   accent tint. Soft tiles, matching the rest of this page's language. */
[data-project="social-gameplay"] .sg-phases {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s3);
  margin-top: var(--s4);
}
[data-project="social-gameplay"] .sg-phase {
  background: var(--surface-1);
  border-radius: var(--r-tile);
  padding: var(--s4);
}
/* Phase 2 is where it worked, so it carries the accent and slightly more weight */
[data-project="social-gameplay"] .sg-phase--two {
  background: color-mix(in srgb, var(--cr-accent) 6%, #ffffff);
}

/* Connector: a confident arrow, vertically centred, full strength — this is
   the pivot between the two phases and needs to read as one, not a faint
   afterthought between them. Shaft is drawn ~2x the length of the old 24-wide
   glyph and the svg box widened to match, rather than just scaling a square
   icon up (which would have made the arrowhead oversized too). */
[data-project="social-gameplay"] .sg-phase-rule {
  display: flex; align-items: center; justify-content: center;
  color: var(--cr-accent);
}
[data-project="social-gameplay"] .sg-phase-rule svg { width: 48px; height: 24px; display: block; }

[data-project="social-gameplay"] .sg-phase-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cr-accent); margin: 0 0 4px;
}
[data-project="social-gameplay"] .sg-phase--one .sg-phase-tag { color: var(--text-3); }
[data-project="social-gameplay"] .sg-phase-years {
  font-size: 13px; color: var(--text-3); margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
[data-project="social-gameplay"] .sg-phase-name {
  font-size: 20px; font-weight: 600; line-height: 1.25;
  color: var(--cr-ink); margin: 0 0 6px;
}
[data-project="social-gameplay"] .sg-phase-what {
  font-size: 15px; line-height: 1.5; color: var(--cr-ink-600); margin: 0 0 20px;
}
[data-project="social-gameplay"] .sg-phase ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
[data-project="social-gameplay"] .sg-phase li {
  font-size: 15px; line-height: 1.5; color: var(--cr-ink-600);
  padding-left: 16px; position: relative;
}
[data-project="social-gameplay"] .sg-phase li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-3);
}
[data-project="social-gameplay"] .sg-phase--two li::before { background: var(--cr-accent); }
[data-project="social-gameplay"] .sg-phase li strong { color: var(--cr-ink); font-weight: 600; }

/* How each phase ended. The contrast between these two lines is the argument. */
[data-project="social-gameplay"] .sg-phase-end {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--border-1);
  font-size: 15px; line-height: 1.5; color: var(--cr-ink);
}

@media (max-width: 900px) {
  [data-project="social-gameplay"] .sg-phases { grid-template-columns: 1fr; gap: var(--s2); }
  [data-project="social-gameplay"] .sg-phase { padding: var(--s3); }
  [data-project="social-gameplay"] .sg-phase-rule { transform: rotate(90deg); padding: 4px 0; }
}

/* ═══ THE SHIFT (.sg-shift) ═══
   The pivot chapter carried the most important idea in the case study and
   rendered it as four ordinary bullets, so the turn was described rather than
   shown. Each bullet is really a before and after, so it is set as one.
   Sits inside .cs-band, so the tile goes white per the tint-band rule. */
[data-project="social-gameplay"] .sg-shift {
  background: #ffffff; border-radius: var(--r-tile);
  padding: var(--s2) var(--s4); margin-top: var(--s4);
}
[data-project="social-gameplay"] .sg-shift-row {
  display: grid; grid-template-columns: 150px 1fr 32px 1fr;
  align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--border-1);
}
[data-project="social-gameplay"] .sg-shift-row:first-child { border-top: none; }
[data-project="social-gameplay"] .sg-shift-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); margin: 0;
}
[data-project="social-gameplay"] .sg-shift-from { font-size: 16px; line-height: 1.45; color: var(--text-3); margin: 0; }
[data-project="social-gameplay"] .sg-shift-arrow { display: flex; align-items: center; justify-content: center; color: var(--cr-accent); opacity: 0.6; }
[data-project="social-gameplay"] .sg-shift-arrow svg { width: 20px; height: 20px; display: block; }
[data-project="social-gameplay"] .sg-shift-to { font-size: 16px; line-height: 1.45; color: var(--cr-ink); margin: 0; font-weight: 500; }
@media (max-width: 900px) {
  [data-project="social-gameplay"] .sg-shift { padding: var(--s2) var(--s3); }
  [data-project="social-gameplay"] .sg-shift-row { grid-template-columns: 1fr; gap: 6px; }
  [data-project="social-gameplay"] .sg-shift-arrow { justify-content: flex-start; transform: rotate(90deg); width: 20px; }
}