/*
 * SYNAPSE SOCCER INTELLIGENCE
 * WPA Design System → Web App - Mobile UI
 *
 * Shared mobile foundation.
 * First production consumer: Mobile/Match Report 256:4110
 */

:root {
  --syn-surface-01:#07111f;
  --syn-surface-02:#0c1b2a;
  --syn-surface-03:#12283c;
  --syn-card:#10243a;

  --syn-border:#20364a;

  --syn-blue:#169bff;
  --syn-ice:#73d5ff;
  --syn-teal:#18d7d1;

  --syn-positive:#22c55e;
  --syn-warning:#f5b942;

  --syn-text-primary:#f7fafc;
  --syn-text-secondary:#8ea2b8;
  --syn-text-supporting:#d9e3ec;

  --syn-technical:#73d5ff;
  --syn-tactical:#4d8dff;
  --syn-defensive:#b7f06b;
  --syn-physical:#ffbf69;
  --syn-psychological:#bd3ef8;

  --syn-radius-md:8px;
  --syn-radius-lg:12px;
  --syn-radius-xl:20px;

  --syn-card-shadow:
    0 4px 12px rgba(3,7,12,.24);
}


/* ==========================================================
   SHARED MOBILE APP SHELL
   ========================================================== */

.syn-mobile-screen {
  position:relative;
  isolation:isolate;

  width:min(100%,390px);
  min-height:844px;

  margin:0 auto;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:var(--syn-radius-xl);

  background:var(--syn-surface-01);

  color:var(--syn-text-primary);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.syn-mobile-screen.hidden {
  display:none !important;
}


.syn-mobile-atmosphere {
  position:absolute;
  z-index:-2;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(12,27,42,.30) 0%,
      rgba(22,155,255,.30) 50%,
      rgba(115,213,255,.30) 100%
    ),
    var(--syn-surface-01);
}


.syn-mobile-atmosphere::after {
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 68%,
      rgba(22,155,255,.22),
      transparent 48%
    );

  pointer-events:none;
}


.syn-mobile-safe-top {
  position:relative;
  z-index:2;

  flex:0 0 auto;

  padding-top:16px;
}


.syn-mobile-topbar {
  width:100%;
  height:80px;

  display:flex;
  align-items:center;

  padding:24px 16px;
}


.syn-mobile-brand-logo {
  width:145px;
  height:auto;

  display:block;
  object-fit:contain;
  object-position:left center;
}


.syn-mobile-topbar-spacer {
  flex:1;
}


.syn-mobile-avatar {
  width:32px;
  height:32px;

  flex:0 0 32px;

  border:1px solid var(--syn-border);
  border-radius:50%;

  background:var(--syn-surface-03);
}


.syn-mobile-scroll {
  position:relative;

  flex:1 1 auto;

  min-height:0;

  overflow-x:hidden;
  overflow-y:auto;

  padding:0 16px;

  scrollbar-width:none;
}


.syn-mobile-scroll::-webkit-scrollbar {
  display:none;
}


.syn-mobile-page-heading {
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:4px;

  text-align:center;
}


.syn-mobile-page-heading h1 {
  margin:0;

  color:var(--syn-text-primary);

  font-size:24px;
  font-weight:700;
  line-height:32px;
}


.syn-mobile-page-heading p {
  width:100%;

  margin:0;

  color:var(--syn-text-secondary);

  font-size:14px;
  font-weight:400;
  line-height:20px;
}


/* ==========================================================
   SHARED CARD
   ========================================================== */

.syn-mobile-card {
  width:100%;

  padding:12px;

  display:flex;
  flex-direction:column;

  gap:12px;

  overflow:hidden;

  border:1px solid var(--syn-border);
  border-radius:var(--syn-radius-lg);

  background:var(--syn-card);

  box-shadow:var(--syn-card-shadow);
}


/* ==========================================================
   MATCH REPORT
   FIGMA NODE 256:4110
   ========================================================== */

.syn-match-report-screen {
  padding-top:0;
}


.syn-match-report-content {
  width:100%;

  padding:8px 0 24px;

  display:flex;
  flex-direction:column;

  gap:16px;
}


/* MATCH CONTEXT */

.syn-match-context-card {
  gap:8px;
}


.syn-match-context-top {
  width:100%;

  display:flex;
  align-items:center;

  gap:12px;
}


.syn-match-context-copy {
  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.syn-match-context-copy h2 {
  margin:0;

  color:var(--syn-text-primary);

  font-size:20px;
  font-weight:600;
  line-height:28px;

  text-transform:uppercase;
}


.syn-match-context-copy p {
  margin:0;

  color:var(--syn-text-secondary);

  font-size:14px;
  font-weight:400;
  line-height:20px;

  text-transform:uppercase;
}


.syn-match-ready-badge {
  flex:0 0 auto;

  padding:8px;

  border:1px solid var(--syn-positive);
  border-radius:var(--syn-radius-md);

  background:var(--syn-surface-03);

  color:var(--syn-positive);

  font-size:12px;
  font-weight:600;
  line-height:16px;

  white-space:nowrap;
}


.syn-match-player-line {
  width:100%;

  margin:0;

  color:var(--syn-text-secondary);

  font-size:12px;
  font-weight:600;
  line-height:16px;

  text-transform:uppercase;
}


/* SECTION MARKER */

.syn-section-marker {
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;
}


.syn-section-marker > span {
  height:1px;

  min-width:16px;
  flex:1;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--syn-blue) 0%,
      rgba(22,155,255,.35) 50%,
      rgba(115,213,255,.8) 75%,
      #fff 100%
    );
}


.syn-section-marker > span:last-child {
  transform:scaleX(-1);
}


.syn-section-marker b {
  color:var(--syn-ice);

  font-size:15px;
  line-height:1;

  letter-spacing:-2px;
}


.syn-section-marker strong {
  flex:0 0 auto;

  color:#d7e0e8;

  font-size:18px;
  font-weight:600;
  line-height:24px;

  text-align:center;
}


/* OVERALL SUMMARY */

.syn-summary-rating-row {
  width:100%;

  padding:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:16px;
}


.syn-overall-ring {
  --syn-ring-progress:0deg;

  position:relative;

  width:100px;
  height:100px;

  flex:0 0 100px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      from -90deg,
      var(--syn-blue) 0deg,
      var(--syn-ice) var(--syn-ring-progress),
      rgba(255,255,255,.13) var(--syn-ring-progress),
      rgba(255,255,255,.13) 360deg
    );

  box-shadow:
    0 0 16px rgba(22,155,255,.28),
    0 0 32px rgba(22,155,255,.12);
}


.syn-overall-ring::before {
  content:"";

  position:absolute;
  inset:7px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(22,155,255,.12),
      transparent 65%
    ),
    var(--syn-card);
}


.syn-overall-ring-inner {
  position:relative;
  z-index:1;

  display:grid;
  place-items:center;
}


.syn-overall-ring-inner strong {
  color:var(--syn-text-primary);

  font-size:40px;
  font-weight:700;
  line-height:44px;

  text-shadow:
    0 0 16px rgba(22,155,255,.28),
    0 0 32px rgba(22,155,255,.12);
}


.syn-summary-rating-copy {
  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:4px;

  text-align:center;
}


.syn-summary-eyebrow {
  color:var(--syn-text-supporting);

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-summary-rating-number {
  color:var(--syn-teal);

  font-size:28px;
  font-weight:700;
  line-height:32px;
}


.syn-summary-rating-status {
  color:var(--syn-text-supporting);

  font-size:12px;
  font-weight:600;
  line-height:16px;
}


.syn-summary-divider {
  width:100%;
  height:12px;

  display:flex;
  align-items:center;

  gap:8px;
}


.syn-summary-divider span {
  flex:1;

  height:1px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--syn-blue),
      rgba(115,213,255,.8),
      #fff
    );
}


.syn-summary-divider span:last-child {
  transform:scaleX(-1);
}


.syn-summary-divider b {
  color:var(--syn-ice);

  letter-spacing:-2px;
}


/* CATEGORY RATINGS */

.syn-category-ratings {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:16px;
}


.syn-category-helper {
  width:100%;

  margin:0;

  color:var(--syn-text-secondary);

  font-size:12px;
  font-weight:400;
  line-height:18px;

  text-align:center;
}


.syn-figma-category {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.syn-figma-category-label-row {
  width:100%;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:12px;
}


.syn-figma-category-label-row > span {
  color:#d7e0e8;

  font-size:14px;
  font-weight:600;
  line-height:20px;
}


.syn-category-data {
  display:flex;
  align-items:baseline;

  gap:8px;
}


.syn-category-data small {
  color:var(--syn-text-secondary);

  font-size:10px;
  font-weight:600;
  line-height:14px;
}


.syn-category-data strong {
  font-size:18px;
  font-weight:600;
  line-height:24px;
}


.syn-category-progress-track {
  width:100%;
  height:8px;

  overflow:hidden;

  border-radius:999px;

  background:var(--syn-border);

  box-shadow:
    0 0 16px rgba(22,155,255,.10);
}


.syn-category-progress-fill {
  width:0;
  height:100%;

  border-radius:999px;

  transition:width .25s ease;
}


.syn-figma-category[data-category="technical"]
.syn-category-data strong {
  color:var(--syn-technical);
}


.syn-figma-category[data-category="technical"]
.syn-category-progress-fill {
  background:var(--syn-technical);
}


.syn-figma-category[data-category="tactical"]
.syn-category-data strong {
  color:var(--syn-tactical);
}


.syn-figma-category[data-category="tactical"]
.syn-category-progress-fill {
  background:var(--syn-tactical);
}


.syn-figma-category[data-category="defensive"]
.syn-category-data strong {
  color:var(--syn-defensive);
}


.syn-figma-category[data-category="defensive"]
.syn-category-progress-fill {
  background:var(--syn-defensive);
}


.syn-figma-category[data-category="physical"]
.syn-category-data strong {
  color:var(--syn-physical);
}


.syn-figma-category[data-category="physical"]
.syn-category-progress-fill {
  background:var(--syn-physical);
}


.syn-figma-category[data-category="psychological"]
.syn-category-data strong {
  color:var(--syn-psychological);
}


.syn-figma-category[data-category="psychological"]
.syn-category-progress-fill {
  background:var(--syn-psychological);
}


/* EXISTING ANALYSIS RENDERERS,
   PRESENTED INSIDE THE FIGMA SHELL */

.syn-match-report-screen .syn-insight-card {
  width:100%;

  padding:12px;

  display:flex;
  flex-direction:column;

  gap:8px;

  border:1px solid var(--syn-border);
  border-radius:var(--syn-radius-lg);

  background:var(--syn-card);

  box-shadow:var(--syn-card-shadow);
}


.syn-match-report-screen .syn-insight-card + .syn-insight-card {
  margin-top:12px;
}


.syn-match-report-screen .syn-insight-card strong {
  display:block;

  color:var(--syn-text-primary);

  font-size:20px;
  font-weight:600;
  line-height:28px;
}


.syn-match-report-screen .syn-insight-card p {
  margin:0;

  color:var(--syn-text-secondary);

  font-size:14px;
  font-weight:400;
  line-height:20px;
}


.syn-match-report-screen .syn-card-label {
  color:var(--syn-teal);

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-match-report-screen .syn-evidence-chip {
  border:1px solid var(--syn-border) !important;
  border-radius:var(--syn-radius-md) !important;

  background:var(--syn-surface-02) !important;

  color:#fff !important;

  font-size:12px !important;
  font-weight:600 !important;
}


/* DEVELOPMENT */

.syn-development-block {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:8px;
}


.syn-development-block + .syn-development-block {
  padding-top:12px;

  border-top:1px solid var(--syn-border);
}


.syn-development-type {
  display:flex;
  align-items:center;

  gap:8px;

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-development-type span {
  width:8px;
  height:8px;

  flex:0 0 8px;

  border-radius:50%;
}


.syn-development-strength {
  color:var(--syn-positive);
}


.syn-development-strength span {
  background:var(--syn-positive);
}


.syn-development-priority {
  color:var(--syn-warning);
}


.syn-development-priority span {
  background:var(--syn-warning);
}


.syn-development-block .syn-insight-card {
  padding:0;

  border:0;

  background:transparent;

  box-shadow:none;
}


/* ACTIONS */

.syn-match-report-actions {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:8px;
}


.syn-control-primary,
.syn-control-secondary {
  width:100%;
  min-height:32px;

  padding:8px;

  border:0;
  border-radius:var(--syn-radius-md);

  color:#fff;

  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:16px;

  cursor:pointer;
}


.syn-control-primary {
  background:var(--syn-blue);
}


.syn-control-secondary {
  background:var(--syn-surface-02);
}


/* ==========================================================
   SHARED BOTTOM NAV
   FIGMA COMPONENT 349:6757
   ========================================================== */

.syn-mobile-bottom-nav {
  position:relative;
  z-index:3;

  width:100%;
  height:96px;

  flex:0 0 96px;

  padding:8px;

  display:grid;
  grid-template-columns:repeat(5,1fr);

  border:1px solid var(--syn-border);
  border-radius:
    0 0
    var(--syn-radius-xl)
    var(--syn-radius-xl);

  background:var(--syn-surface-02);
}


.syn-mobile-bottom-nav button {
  min-width:0;

  padding:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:4px;

  border:0;

  background:transparent;

  color:var(--syn-text-secondary);

  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:16px;

  cursor:pointer;
}


.syn-mobile-bottom-nav button > img {
  width:20px;
  height:20px;
}


.syn-mobile-bottom-nav button.active {
  color:var(--syn-teal);
}


.syn-mobile-bottom-nav .submit {
  color:#fff;
}


.syn-submit-icon {
  width:36px;
  height:36px;

  display:grid;
  place-items:center;
}


.syn-submit-icon img {
  width:36px;
  height:36px;
}


/* PHONE / EXISTING BETA HOST */

@media (max-width:640px) {
  body[data-synapse-screen="match-report"] #pipeline {
    padding:0 !important;
  }

  body[data-synapse-screen="match-report"] #matchReport {
    width:100%;
    max-width:390px;

    margin:0 auto;

    border-radius:20px;
  }
}



/* ==========================================================
   FIGMA SHELL ALIGNMENT PASS — 20260913p
   ========================================================== */


/*
 * Critical architecture:
 *
 * Top bar = outside scroll region.
 * Scroll region = only center content.
 * Bottom nav = outside scroll region.
 *
 * This matches the Web App - Mobile UI frames rather than
 * normal document scrolling.
 */

.syn-mobile-screen {
  width:min(100%,390px) !important;

  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;

  margin:0 auto !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:#07111f !important;
}


.syn-mobile-safe-top {
  position:relative !important;

  flex:0 0 auto !important;

  z-index:20 !important;

  background:
    linear-gradient(
      180deg,
      rgba(7,17,31,.98),
      rgba(7,17,31,.92)
    ) !important;
}


.syn-mobile-topbar {
  flex:0 0 auto !important;
}


.syn-mobile-scroll {
  position:relative !important;

  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior-y:contain;
}


.syn-mobile-bottom-nav {
  position:relative !important;

  flex:0 0 96px !important;

  height:96px !important;

  z-index:30 !important;

  margin:0 !important;

  background:#0c1b2a !important;
}


/*
 * Remove legacy sandbox page sizing from Match Report.
 */

#matchReport.syn-match-report-screen {
  position:relative !important;

  padding:0 !important;

  border:0 !important;

  background:#07111f !important;

  box-shadow:none !important;
}


body[data-synapse-screen="match-report"] {
  overflow:hidden !important;

  background:#07111f !important;
}


body[data-synapse-screen="match-report"] #pipeline {
  width:100% !important;

  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  background:#07111f !important;
}


body[data-synapse-screen="match-report"]
#pipeline > #matchReport {
  display:flex !important;
}


body[data-synapse-screen="match-report"]
#pipeline > #matchReport.hidden {
  display:none !important;
}


/* ==========================================================
   MATCH REPORT — INSIGHTS
   ========================================================== */

#matchReportInsights {
  width:100%;
}


.syn-figma-insight-card {
  position:relative;

  width:100%;

  padding:12px !important;

  display:flex !important;
  flex-direction:column !important;

  gap:8px !important;

  border:1px solid #20364a !important;
  border-radius:12px !important;

  background:#10243a !important;

  box-shadow:
    0 4px 12px rgba(3,7,12,.24) !important;
}


.syn-figma-insight-card +
.syn-figma-insight-card {
  margin-top:12px;
}


.syn-figma-insight-header {
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  color:#18d7d1;

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-figma-insight-header strong {
  margin:0 !important;

  color:#73d5ff !important;

  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;

  letter-spacing:0 !important;

  white-space:nowrap;
}


.syn-figma-original-label {
  display:none !important;
}


.syn-figma-insight-card > strong {
  margin:0 !important;

  color:#f7fafc !important;

  font-size:20px !important;
  font-weight:600 !important;
  line-height:28px !important;
}


.syn-figma-insight-card > p {
  margin:0 !important;

  color:#8ea2b8 !important;

  font-size:14px !important;
  font-weight:400 !important;
  line-height:20px !important;
}


.syn-figma-evidence-row {
  width:100%;

  margin-top:4px;
  padding-top:8px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  border-top:1px solid #20364a;
}


.syn-figma-evidence-row > span {
  color:#8ea2b8;

  font-size:12px;
  font-weight:600;
  line-height:16px;

  white-space:nowrap;
}


.syn-figma-view-clips {
  min-height:32px !important;

  padding:8px !important;

  border:0 !important;
  border-radius:8px !important;

  background:#0c1b2a !important;

  color:#fff !important;

  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
}


.syn-figma-source-chip {
  display:none !important;
}


/* ==========================================================
   DEVELOPMENT FOCUS
   ========================================================== */

#matchReportPositive,
#matchReportCoaching {
  width:100%;
}


#matchReportPositive
.syn-review-list,
#matchReportCoaching
.syn-review-list {
  width:100%;
}


#matchReportPositive
.syn-insight-card,
#matchReportCoaching
.syn-insight-card {
  padding:0 !important;

  border:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


#matchReportPositive
.syn-insight-card:not(:first-child),
#matchReportCoaching
.syn-insight-card:not(:first-child) {
  display:none !important;
}


#matchReportPositive
.syn-insight-card
.syn-card-label,
#matchReportCoaching
.syn-insight-card
.syn-card-label {
  display:none !important;
}


#matchReportPositive
.syn-insight-card > strong,
#matchReportCoaching
.syn-insight-card > strong {
  display:block;

  margin:0 0 4px !important;

  color:#f7fafc !important;

  font-size:20px !important;
  font-weight:600 !important;
  line-height:28px !important;
}


#matchReportPositive
.syn-insight-card > p,
#matchReportCoaching
.syn-insight-card > p {
  margin:0 !important;

  color:#8ea2b8 !important;

  font-size:14px !important;
  font-weight:400 !important;
  line-height:20px !important;
}


.syn-development-block
.syn-evidence-chip {
  display:none !important;
}


/* ==========================================================
   SOCIAL OUTPUTS — SAME FIGMA APP SHELL BEHAVIOR
   ========================================================== */

.syn-social-mobile {
  width:min(100%,390px) !important;

  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;

  margin:0 auto !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:#07111f !important;
}


.syn-social-mobile-topbar {
  position:relative !important;

  flex:0 0 auto !important;

  z-index:20 !important;

  background:
    linear-gradient(
      180deg,
      rgba(7,17,31,.98),
      rgba(7,17,31,.92)
    ) !important;
}


.syn-social-mobile-scroll {
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior-y:contain;
}


.syn-social-bottom-nav {
  position:relative !important;

  flex:0 0 96px !important;

  height:96px !important;

  z-index:30 !important;

  margin:0 !important;
}


/*
 * Replace the temporary text/shape brand treatment with
 * the actual Figma Synapse Soccer Intelligence logo.
 */

.syn-social-logo-lockup {
  width:145px !important;
  height:48px !important;

  flex:0 0 145px;

  background:
    url("/assets/figma-mobile/synapse-logo-white.png")
    no-repeat
    left center /
    contain !important;
}


.syn-social-logo-lockup > * {
  display:none !important;
}


/* ==========================================================
   PHONE VIEWPORT
   ========================================================== */

@media (max-width:640px) {

  html,
  body {
    min-height:100%;
  }


  body[data-synapse-screen="match-report"]
  #matchReport,

  .syn-social-mobile {
    width:100% !important;

    max-width:390px !important;

    height:100dvh !important;

    max-height:100dvh !important;

    border-radius:20px !important;
  }

}



/* ==========================================================
   MOBILE BROWSER CHROME / BOTTOM NAV BEHAVIOR — 20260913r
   ========================================================== */

.syn-mobile-bottom-nav,
.syn-social-bottom-nav {
  padding-bottom:
    max(
      8px,
      env(safe-area-inset-bottom)
    ) !important;

  transition:
    transform .20s ease,
    opacity .18s ease !important;

  will-change:
    transform,
    opacity;
}


html.synapse-mobile-nav-hidden
.syn-mobile-bottom-nav,
html.synapse-mobile-nav-hidden
.syn-social-bottom-nav {
  transform:
    translateY(
      calc(
        100% +
        env(safe-area-inset-bottom)
      )
    ) !important;

  opacity:0 !important;

  pointer-events:none !important;
}


/*
 * Standalone / Home Screen mode has no Safari
 * browser toolbar competing for this space.
 */
html.synapse-standalone
.syn-mobile-bottom-nav,
html.synapse-standalone
.syn-social-bottom-nav {
  transform:none !important;

  opacity:1 !important;

  pointer-events:auto !important;
}


@media (prefers-reduced-motion:reduce) {
  .syn-mobile-bottom-nav,
  .syn-social-bottom-nav {
    transition:none !important;
  }
}


/* Chrome / iOS bottom-nav collapse */
html.synapse-mobile-nav-hidden .syn-mobile-bottom-nav,
html.synapse-mobile-nav-hidden .syn-social-bottom-nav {
  height:0 !important;
  min-height:0 !important;
  flex-basis:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-width:0 !important;
  overflow:hidden !important;
}



/* ==========================================================
   SHARED SECONDARY-SCREEN BACK BUTTON
   ========================================================== */

.syn-mobile-topbar,
.syn-social-mobile-topbar {
  position:relative;
}


.syn-mobile-back-button {
  width:44px;
  height:44px;

  flex:0 0 44px;

  margin-left:-8px;
  padding:0;

  display:grid;
  place-items:center;

  border:0;
  border-radius:22px;

  background:transparent;

  color:#f7fafc;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}


.syn-mobile-back-button > span {
  display:block;

  margin-top:-3px;

  font-size:42px;
  font-weight:300;
  line-height:40px;
}


.syn-mobile-back-button:active {
  background:rgba(255,255,255,.06);
}


@media (hover:hover) {
  .syn-mobile-back-button:hover {
    background:rgba(255,255,255,.05);
  }
}



/* ==========================================================
   MATCH ANALYSIS + MATCH RATINGS
   Figma nodes 246:3195 / 250:3588
   ========================================================== */

.matchAnalysis-screen,
.matchRatings-screen {
  position:relative;
}


.syn-match-analysis-content {
  width:100%;

  padding:8px 0 24px;

  display:flex;
  flex-direction:column;

  gap:16px;
}


.syn-analysis-stadium {
  position:absolute;
  z-index:-1;
  inset:0;

  background:
    linear-gradient(
      0deg,
      rgba(12,27,42,.68) 0%,
      rgba(12,27,42,.78) 35%,
      rgba(12,27,42,.92) 70%,
      #0c1b2a 100%
    ),
    url("/assets/figma-mobile/match-analysis-stadium.png")
      top center /
      auto 320px
      no-repeat,
    #07111f;
}


.syn-analysis-hero {
  gap:12px;
}


.syn-explore-analysis {
  background:#12283c;
}


.syn-explore-row {
  width:100%;

  padding:12px;

  display:flex;
  align-items:center;

  gap:12px;

  border:1px solid #20364a;
  border-radius:12px;

  background:#10243a;

  color:#f7fafc;

  text-align:left;

  box-shadow:
    0 4px 12px rgba(3,7,12,.24);

  cursor:pointer;
}


.syn-explore-row > img:first-child {
  width:40px;
  height:40px;

  padding:9px;

  flex:0 0 40px;

  border:1px solid #18d7d1;
  border-radius:8px;

  background:#12283c;
}


.syn-explore-row > img:last-child {
  width:16px;
  height:16px;

  flex:0 0 16px;
}


.syn-explore-row > span {
  min-width:0;

  flex:1;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.syn-explore-row b {
  color:#d9e3ec;

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-explore-row small {
  color:#8ea2b8;

  font-size:14px;
  font-weight:400;
  line-height:20px;
}


.syn-empty-copy {
  margin:0;

  color:#8ea2b8;

  font-size:14px;
  line-height:20px;

  text-align:center;
}


.matchAnalysis-screen
.syn-figma-insight-card,
.matchRatings-screen
.syn-figma-insight-card {
  margin-top:12px;
}


body[data-synapse-screen="match-analysis"],
body[data-synapse-screen="match-ratings"] {
  overflow:hidden !important;

  background:#07111f !important;
}


body[data-synapse-screen="match-analysis"] #pipeline,
body[data-synapse-screen="match-ratings"] #pipeline {
  margin:0 !important;
  padding:0 !important;
}


@media (max-width:640px) {
  #matchAnalysis,
  #matchRatings {
    width:100% !important;

    max-width:390px !important;

    height:100dvh !important;

    margin:0 auto !important;
  }
}



/* ==========================================================
   FIGMA MOBILE SCREEN HOST
   Active Figma screens own the viewport.
   ========================================================== */

body[data-synapse-screen="match-analysis"],
body[data-synapse-screen="match-ratings"],
body[data-synapse-screen="evidence-clips"],
body[data-synapse-screen="match-report"],
body[data-synapse-screen="social-outputs"] {
  margin:0 !important;
  padding:0 !important;

  width:100% !important;
  min-width:0 !important;
  height:100dvh !important;

  overflow:hidden !important;

  background:#07111f !important;
}


/* Legacy application shell becomes only a viewport host. */

body[data-synapse-screen="match-analysis"] .shell,
body[data-synapse-screen="match-ratings"] .shell,
body[data-synapse-screen="evidence-clips"] .shell,
body[data-synapse-screen="match-report"] .shell,
body[data-synapse-screen="social-outputs"] .shell {
  position:fixed !important;
  inset:0 !important;

  width:100% !important;
  max-width:none !important;
  height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  background:#07111f !important;
}


/* Hide every legacy shell child while a Figma view is active. */

body[data-synapse-screen="match-analysis"] .shell > *:not(#pipeline),
body[data-synapse-screen="match-ratings"] .shell > *:not(#pipeline),
body[data-synapse-screen="evidence-clips"] .shell > *:not(#pipeline),
body[data-synapse-screen="match-report"] .shell > *:not(#pipeline),
body[data-synapse-screen="social-outputs"] .shell > *:not(#pipeline) {
  display:none !important;
}


/* Remove the legacy white/card pipeline presentation. */

body[data-synapse-screen="match-analysis"] #pipeline,
body[data-synapse-screen="match-ratings"] #pipeline,
body[data-synapse-screen="evidence-clips"] #pipeline,
body[data-synapse-screen="match-report"] #pipeline,
body[data-synapse-screen="social-outputs"] #pipeline {
  position:absolute !important;
  inset:0 !important;

  display:block !important;

  width:100% !important;
  max-width:none !important;
  height:100dvh !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  overflow:hidden !important;

  background:#07111f !important;

  box-shadow:none !important;
}


/* Within pipeline, only the active Figma panel participates in layout. */

body[data-synapse-screen="match-analysis"] #pipeline > *,
body[data-synapse-screen="match-ratings"] #pipeline > *,
body[data-synapse-screen="evidence-clips"] #pipeline > *,
body[data-synapse-screen="match-report"] #pipeline > *,
body[data-synapse-screen="social-outputs"] #pipeline > * {
  display:none !important;
}


body[data-synapse-screen="match-analysis"]
#pipeline > #matchAnalysis,

body[data-synapse-screen="match-ratings"]
#pipeline > #matchRatings,

body[data-synapse-screen="evidence-clips"]
#pipeline > #evidenceClips,

body[data-synapse-screen="match-report"]
#pipeline > #matchReport,

body[data-synapse-screen="social-outputs"]
#pipeline > #socialOutputs {
  position:absolute !important;
  inset:0 !important;

  display:flex !important;

  width:100% !important;
  max-width:390px !important;
  height:100dvh !important;

  margin:0 auto !important;

  border:0 !important;

  overflow:hidden !important;

  background:#07111f !important;

  left:50% !important;
  right:auto !important;

  transform:translateX(-50%) !important;
}


/* Active Figma panels must never remain hidden. */

body[data-synapse-screen="match-analysis"]
#matchAnalysis.hidden,

body[data-synapse-screen="match-ratings"]
#matchRatings.hidden,

body[data-synapse-screen="evidence-clips"]
#evidenceClips.hidden,

body[data-synapse-screen="match-report"]
#matchReport.hidden,

body[data-synapse-screen="social-outputs"]
#socialOutputs.hidden {
  display:flex !important;
}


/* Shared Figma layout geometry */

#matchAnalysis,
#matchRatings,
#evidenceClips,
#matchReport,
#socialOutputs {
  flex-direction:column !important;
}


#matchAnalysis .syn-mobile-scroll,
#matchRatings .syn-mobile-scroll,
#evidenceClips .syn-mobile-scroll,
#matchReport .syn-mobile-scroll,
#socialOutputs .syn-social-mobile-scroll {
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior:contain;

  -webkit-overflow-scrolling:touch;
}


#matchAnalysis .syn-mobile-safe-top,
#matchRatings .syn-mobile-safe-top,
#evidenceClips .syn-mobile-safe-top,
#matchReport .syn-mobile-safe-top,
#socialOutputs .syn-social-mobile-topbar {
  flex:0 0 auto !important;
}


#matchAnalysis .syn-mobile-bottom-nav,
#matchRatings .syn-mobile-bottom-nav,
#evidenceClips .syn-mobile-bottom-nav,
#matchReport .syn-mobile-bottom-nav,
#socialOutputs .syn-social-bottom-nav {
  flex:0 0 96px !important;

  width:100% !important;

  margin:0 !important;
}


@media (min-width:391px) {
  body[data-synapse-screen="match-analysis"],
  body[data-synapse-screen="match-ratings"],
  body[data-synapse-screen="evidence-clips"],
  body[data-synapse-screen="match-report"],
  body[data-synapse-screen="social-outputs"] {
    background:#020811 !important;
  }
}


/* ==========================================================
   SYNAPSE APP ROOT — HARD PRESENTATION SEPARATION
   ========================================================== */

#synapseApp {
  display:none;
}

body[data-synapse-screen="match-analysis"] #synapseApp,
body[data-synapse-screen="match-ratings"] #synapseApp,
body[data-synapse-screen="evidence-clips"] #synapseApp,
body[data-synapse-screen="match-report"] #synapseApp,
body[data-synapse-screen="social-outputs"] #synapseApp {
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;

  display:block !important;

  width:100vw !important;
  height:100dvh !important;

  overflow:hidden !important;

  background:#07111f !important;
}

body[data-synapse-screen="match-analysis"] > main,
body[data-synapse-screen="match-ratings"] > main,
body[data-synapse-screen="evidence-clips"] > main,
body[data-synapse-screen="match-report"] > main,
body[data-synapse-screen="social-outputs"] > main,
body[data-synapse-screen="match-analysis"] > footer,
body[data-synapse-screen="match-ratings"] > footer,
body[data-synapse-screen="evidence-clips"] > footer,
body[data-synapse-screen="match-report"] > footer,
body[data-synapse-screen="social-outputs"] > footer {
  display:none !important;
}

#synapseApp > * {
  display:none !important;
}

body[data-synapse-screen="match-analysis"]
#synapseApp > #matchAnalysis,

body[data-synapse-screen="match-ratings"]
#synapseApp > #matchRatings,

body[data-synapse-screen="evidence-clips"]
#synapseApp > #evidenceClips,

body[data-synapse-screen="match-report"]
#synapseApp > #matchReport,

body[data-synapse-screen="social-outputs"]
#synapseApp > #socialOutputs {
  position:absolute !important;
  inset:0 auto 0 50% !important;

  display:flex !important;

  width:100% !important;
  max-width:390px !important;
  height:100dvh !important;

  transform:translateX(-50%) !important;

  flex-direction:column !important;

  overflow:hidden !important;

  background:#07111f !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#synapseApp .syn-mobile-scroll,
#synapseApp .syn-social-mobile-scroll {
  flex:1 1 auto !important;
  min-height:0 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;
}

#synapseApp .syn-mobile-bottom-nav,
#synapseApp .syn-social-bottom-nav {
  flex:0 0 96px !important;
  width:100% !important;
}



/* ==========================================================
   LIVE EVIDENCE & CLIPS
   ========================================================== */

.syn-live-evidence-content {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:16px;

  padding:
    8px
    16px
    24px;
}


.syn-live-evidence-group {
  display:flex;
  flex-direction:column;

  gap:12px;
}


.syn-live-evidence-group-head {
  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#18d7d1;

  font-size:12px;
  font-weight:600;
  line-height:16px;

  letter-spacing:.96px;
}


.syn-live-evidence-group-head strong {
  color:#73d5ff;

  font-size:12px;

  letter-spacing:0;
}


.syn-live-evidence-group > h2 {
  margin:0;

  color:#f7fafc;

  font-size:20px;
  font-weight:600;
  line-height:28px;
}


.syn-live-evidence-group > p {
  margin:0;

  color:#8ea2b8;

  font-size:12px;
  font-weight:600;
  line-height:16px;
}


.syn-live-evidence-card {
  padding:12px;

  display:flex;
  flex-direction:column;

  gap:12px;

  border:1px solid #20364a;
  border-radius:12px;

  background:#10243a;

  box-shadow:
    0 4px 12px
    rgba(3,7,12,.24);
}


.syn-live-evidence-preview {
  position:relative;

  width:100%;
  aspect-ratio:346 / 168;

  overflow:hidden;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(22,155,255,.14),
      transparent 58%
    ),
    #12283c;
}


.syn-live-play {
  position:absolute;

  left:50%;
  top:50%;

  width:44px;
  height:44px;

  transform:
    translate(-50%,-50%);

  border:0;
  border-radius:50%;

  display:grid;
  place-items:center;

  padding-left:3px;

  background:#18d7d1;

  color:#07111f;

  font-size:17px;
}


.syn-live-timestamp {
  position:absolute;

  right:8px;
  bottom:8px;

  padding:6px 8px;

  border-radius:4px;

  background:#0d1b2c;

  color:#f7fafc;

  font-size:12px;
  font-weight:600;
}


.syn-live-evidence-meta {
  display:flex;
  flex-direction:column;

  gap:8px;
}


.syn-live-evidence-label {
  display:flex;

  align-items:center;
  justify-content:space-between;

  color:#d9e3ec;

  font-size:12px;
  font-weight:600;
  line-height:16px;
}


.syn-live-evidence-label span {
  letter-spacing:.96px;
}


.syn-live-evidence-label strong {
  color:#73d5ff;
}


.syn-live-evidence-meta h3 {
  margin:0;

  color:#f7fafc;

  font-size:20px;
  font-weight:600;
  line-height:28px;
}


.syn-live-evidence-meta p {
  margin:0;

  color:#8ea2b8;

  font-size:14px;
  font-weight:400;
  line-height:20px;
}


#evidenceClips {
  background:#07111f;
}