/* ================================================================
   Friendly Live Match — restyles the desktop coding screen to match
   the landing page (Bricolage team names, JetBrains Mono scores,
   floating rounded cards on the sky canvas, the hero's navy-framed
   court, rounded possession bar, blue/orange/green/red washes).

   Scoped entirely under #matchPage and >700px. No JS or DOM changes:
   it only overrides the base match classes in style.css. Mobile
   (≤700px) keeps the approved "1C Pro Balanced" layout untouched.
   ================================================================ */
@media (min-width:701px){

#matchPage{
  --fm-sky:#f1f4fb; --fm-line:#e4e7ee; --fm-line2:#d2d7e1;
  --fm-ink:#14171f; --fm-soft:#5b626f; --fm-faint:#8a909c;
  --fm-blue:#3a55e6; --fm-blue-deep:#2b40c4; --fm-blue-wash:#eef0fe;
  --fm-away:#a85117; --fm-away-bright:#e07a36; --fm-away-wash:#fdf1e8;
  --fm-green:#0d7539; --fm-green-wash:#e6f6ec;
  --fm-red:#d3413a; --fm-red-wash:#fdeceb;
  --fm-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fm-mono:'JetBrains Mono',ui-monospace,monospace;
  --fm-shadow:0 12px 30px -18px rgba(32,38,75,.40);
  --fm-shadow-lg:0 26px 56px -30px rgba(32,38,75,.45);
  /* the sidebar Undo button styles itself inline with var(--navy) */
  --navy:#14171f;
}

/* ── page canvas ─────────────────────────────────────────────── */
#matchPage .match-view{background:var(--fm-sky)}

/* ── scorebar ────────────────────────────────────────────────── */
#matchPage .scorebar{
  background:#fff;border-bottom:1px solid var(--fm-line);
  padding:16px 26px 22px;box-shadow:0 10px 26px -22px rgba(32,38,75,.45);
}
/* hard square stripe → rounded inset possession bar (landing .lf-sb-bar) */
#matchPage .scorebar::after{
  left:26px;right:26px;bottom:10px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--fm-blue),var(--fm-blue) 50%,var(--fm-away-bright) 50%,var(--fm-away-bright));
}
#matchPage .team-name{
  font-family:var(--fm-display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;color:var(--fm-ink);
}
/* team dots, like the landing scoreboard (.lf-sb-dot) */
#matchPage .team-name::before{
  content:'';display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:9px;vertical-align:2px;
}
#matchPage #homeTeamSide .team-name::before{background:var(--fm-blue)}
#matchPage #awayTeamSide .team-name::before{background:var(--fm-away-bright)}
#matchPage .serving-badge{
  font-family:var(--fm-mono);font-size:9.5px;letter-spacing:.08em;
  background:var(--fm-away-wash);border:1px solid #f4dcc3;color:var(--fm-away);
}
#matchPage .serving-dot{background:var(--fm-away-bright)}
#matchPage .set-score{
  font-family:var(--fm-mono);font-size:10.5px;font-weight:700;
  background:var(--fm-blue-wash);border:1px solid #c5cdfb;color:var(--fm-blue-deep);
  border-radius:99px;padding:5px 12px;min-width:0;
}
#matchPage .score-num{color:var(--fm-ink)}
#matchPage #homeScore{color:var(--fm-blue)}
#matchPage #awayScore{color:var(--fm-away)}
#matchPage .score-num.bump{color:var(--fm-green)}
#matchPage .score-dash{color:var(--fm-line2)}
#matchPage .set-label{
  background:transparent;border-bottom:none;
  font-family:var(--fm-mono);font-weight:700;font-size:10px;
  letter-spacing:.18em;color:var(--fm-faint);padding:12px 8px 0;
}

/* ── workbench: three floating cards on the sky canvas ───────── */
#matchPage .main-grid{
  gap:16px;padding:14px 18px 18px;height:calc(100vh - 118px);
}
#matchPage .sidebar-left,
#matchPage .sidebar-right{
  background:#fff;border:1px solid var(--fm-line);border-radius:20px;
  box-shadow:var(--fm-shadow);
}
#matchPage .sidebar-right{overflow:hidden;overflow-y:auto}
#matchPage .center-panel{background:transparent;padding:6px 4px 4px}

/* ── play-by-play ────────────────────────────────────────────── */
#matchPage .sidebar-title{background:transparent;color:var(--fm-soft)}
#matchPage .sidebar-title::before{border-radius:99px;background:var(--fm-blue)}
#matchPage .pbp-item{border-bottom:1px solid var(--fm-line)}
#matchPage .pbp-item:hover{background:#f6f8fd}
#matchPage .pbp-code{border-radius:7px}
#matchPage .pbp-item-auto{border-left-color:var(--fm-blue)}

/* ── court — the landing hero's navy-framed court card ───────── */
#matchPage .court{
  background:linear-gradient(180deg,#0e3f6e,#0b3055);border-radius:22px;
  padding:26px 34px;box-shadow:var(--fm-shadow-lg);
}
#matchPage .court-half{
  background:linear-gradient(180deg,#1763a6,#155a97);
  border-color:rgba(255,255,255,.85);border-width:4px;
}
#matchPage .court-half.home{border-radius:14px 0 0 14px;border-right-width:0}
#matchPage .court-half.away{border-radius:0 14px 14px 0;border-left-width:0}
/* dashed net line, like the landing court */
#matchPage .court::before{
  width:0;background:none;box-shadow:none;
  border-left:3px dashed rgba(255,255,255,.65);top:22px;bottom:22px;
}
#matchPage .court::after{display:none}
#matchPage .player-num{box-shadow:0 4px 10px -2px rgba(0,0,0,.35);transition:box-shadow .15s ease}
#matchPage .court-half.home .player-num{border-color:var(--fm-blue);color:var(--fm-blue)}
#matchPage .court-half.away .player-num{border-color:var(--fm-away-bright);color:var(--fm-away)}
#matchPage .player-spot:hover .player-num{
  box-shadow:0 0 0 4px rgba(255,255,255,.35),0 5px 12px -3px rgba(0,0,0,.4);
}

/* ── voice card (replaces the typing/command bar) ────────────── */
/* the typed-code card is retired on desktop; the voice card takes its
   place under the court. #codeField et al. stay in the DOM for JS. */
#matchPage .code-area{display:none}
#matchPage .voice-area{
  background:#fff;border:1px solid var(--fm-line);border-radius:20px;
  box-shadow:var(--fm-shadow);padding:16px 18px;
}
/* transcript + mic side by side (globally display:contents on desktop) */
#matchPage .mob-voice-row{display:flex;gap:10px;align-items:stretch}
#matchPage .transcript{
  flex:1;background:var(--fm-sky);border-color:var(--fm-line);border-radius:12px;
  min-height:52px;display:flex;align-items:center;
}
/* surface the mic beside the transcript (hidden on desktop by default) */
#matchPage #micBarBtn{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:52px;border:none;border-radius:12px;cursor:pointer;
  background:var(--fm-blue);color:#fff;
  box-shadow:0 10px 20px -10px rgba(58,85,230,.95);
  transition:background .15s ease,transform .15s ease;
}
#matchPage #micBarBtn svg{width:20px;height:20px}
#matchPage #micBarBtn:hover{background:var(--fm-blue-deep);transform:translateY(-1px)}
#matchPage #micBarBtn.recording{background:var(--fm-red);animation:pulse-rec 1.1s infinite}
#matchPage .detected-bar{border-radius:12px;border-color:#cce6d6;background:var(--fm-green-wash)}
#matchPage .confirm-box{border-radius:14px;border-color:#cce6d6;background:var(--fm-green-wash)}
#matchPage .confirm-grid{border-radius:10px}
#matchPage .eval-badge{font-family:var(--fm-mono)}
#matchPage .code-display{color:var(--fm-blue)}
#matchPage .btn-save{border-radius:10px;font-weight:800;box-shadow:0 8px 16px -8px rgba(13,117,57,.8)}
#matchPage .btn-discard{border-radius:10px}

/* ── right sidebar controls ──────────────────────────────────── */
#matchPage .sb-section{border-bottom:1px solid var(--fm-line)}
#matchPage .sb-section-label{color:var(--fm-faint)}
/* same marker as the Play-by-Play title */
#matchPage .sb-section-label::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--fm-blue);margin-right:7px;vertical-align:1px;
}
#matchPage .action-btn{border-radius:12px;border-color:var(--fm-line2)}
#matchPage .action-btn:hover{border-color:var(--fm-faint)}
#matchPage .action-btn.info{border-color:#c5cdfb;color:var(--fm-blue-deep)}

}

/* ================================================================
   Phone (≤700px) — the 1C Pro Balanced layout keeps its structure
   (vertical court, white dock, steppers) but trades the dark navy
   theme for the friendly landing language: sky canvas, white
   scorebar card with Bricolage team names, the hero's navy court.
   !important is needed wherever the base mobile block uses it.
   ================================================================ */
@media (max-width:700px){

#matchPage{
  --fm-sky:#f1f4fb; --fm-line:#e4e7ee; --fm-line2:#d2d7e1;
  --fm-ink:#14171f; --fm-soft:#5b626f; --fm-faint:#8a909c;
  --fm-blue:#3a55e6; --fm-blue-deep:#2b40c4; --fm-blue-wash:#eef0fe;
  --fm-away:#a85117; --fm-away-bright:#e07a36; --fm-away-wash:#fdf1e8;
  --fm-green:#0d7539; --fm-green-wash:#e6f6ec;
  --fm-red:#d3413a; --fm-red-wash:#fdeceb;
  --fm-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fm-mono:'JetBrains Mono',ui-monospace,monospace;
  --fm-shadow:0 12px 30px -18px rgba(32,38,75,.40);
  --fm-shadow-lg:0 26px 56px -30px rgba(32,38,75,.45);
}

/* ── sky canvas instead of the dark navy screen ──────────────── */
body.coding,
body.coding .app,
body.coding .app-main{background:var(--fm-sky) !important}
#matchPage .match-view{background:var(--fm-sky) !important}
#matchPage .center-panel{background:var(--fm-sky) !important}

/* ── scorebar: white card, ink names, blue/orange scores ─────── */
#matchPage .scorebar{
  background:#fff !important;
  border-bottom:1px solid var(--fm-line) !important;
  box-shadow:0 10px 26px -22px rgba(32,38,75,.45) !important;
}
#matchPage .mob-back-btn{
  background:var(--fm-sky);
  border:1px solid var(--fm-line2);
  color:var(--fm-ink);
}
#matchPage .team-name{
  font-family:var(--fm-display) !important;font-weight:800 !important;
  color:var(--fm-ink) !important;
}
/* team dots, like the landing scoreboard */
#matchPage .team-name::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:1px;
}
#matchPage #homeTeamSide .team-name::before{background:var(--fm-blue)}
#matchPage #awayTeamSide .team-name::before{background:var(--fm-away-bright)}
#matchPage .serving-badge{
  background:var(--fm-away-wash) !important;
  border:1px solid #f4dcc3 !important;
  color:var(--fm-away) !important;
  font-family:var(--fm-mono) !important;letter-spacing:.06em !important;
}
#matchPage .set-score{
  background:var(--fm-blue-wash) !important;
  color:var(--fm-blue-deep) !important;
  font-family:var(--fm-mono) !important;font-weight:700 !important;
}
#matchPage .score-num{color:var(--fm-ink) !important}
#matchPage #homeScore{color:var(--fm-blue) !important}
#matchPage #awayScore{color:var(--fm-away) !important}
#matchPage .score-num.bump{color:var(--fm-green) !important}
#matchPage .score-dash{color:var(--fm-line2) !important}
#matchPage .mob-set-chip{
  font-family:var(--fm-mono);color:var(--fm-faint);
}

/* ── court: the landing hero's navy-framed card ──────────────── */
#matchPage .court{
  background:linear-gradient(180deg,#0e3f6e,#0b3055);
  box-shadow:var(--fm-shadow-lg);
}

/* ── white dock: softer navy-tinted lift ─────────────────────── */
#matchPage .mob-dock{
  box-shadow:0 -14px 36px -20px rgba(32,38,75,.5) !important;
}
#matchPage .mob-stepper-label{
  font-family:var(--fm-mono) !important;letter-spacing:.08em !important;
}
#matchPage .mob-qbtn{background:#fff !important}
#matchPage .mob-qbtn-warn{background:#fcf3e1 !important}
#matchPage .mob-qbtn-info{background:var(--fm-blue-wash) !important}

/* ── voice row + confirm ─────────────────────────────────────── */
#matchPage .transcript{
  background:var(--fm-sky) !important;
  border-color:var(--fm-line) !important;
}
#matchPage .detected-bar{border-color:#cce6d6 !important;background:var(--fm-green-wash) !important}
#matchPage .confirm-box{border-color:#cce6d6 !important;background:var(--fm-green-wash) !important}
#matchPage .eval-badge{font-family:var(--fm-mono)}
#matchPage .code-display{color:var(--fm-blue)}
#matchPage .btn-save{font-weight:800;box-shadow:0 8px 16px -8px rgba(13,117,57,.8)}

}