/* SimPitch match data generator: styles. Everything is scoped to .mg-* classes or #mg-app. */
:root { --mg-g:#0E4D3A; --mg-gd:#0A2A17; --mg-ink:#14201B; --mg-line:#D9DDD5; --mg-mute:#5B6761; --mg-chalk:#F6F7F3; --mg-flag:#F2B01E; --mg-hi:#D9822B; }
@keyframes mgUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes mgFloat { 0%,100% { transform:translate(0,0); } 50% { transform:translate(10px,-8px); } }
@keyframes mgShimmer { from { background-position:0 0; } to { background-position:60px 0; } }
@keyframes mgPulse { 0%,100% { box-shadow:0 0 0 0 rgba(242,176,30,.55); } 50% { box-shadow:0 0 0 10px rgba(242,176,30,0); } }
@keyframes mgSlide { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }

/* ---------- hero and marketing blocks (outside the tool) ---------- */
.mg-hero { position:relative; overflow:hidden; border-radius:18px; padding:3rem 2rem 2.6rem; margin:0 0 2rem; color:#fff;
  background:radial-gradient(1200px 420px at 85% -10%, #1E6B32 0%, transparent 60%), linear-gradient(135deg,#0A2A17 0%,#0E4D3A 100%); }
.mg-hero svg.lines { position:absolute; inset:0; width:100%; height:100%; opacity:.16; }
.mg-hero .orb { position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; opacity:.85; animation:mgFloat 6s ease-in-out infinite; }
.mg-hero .orb.o { background:var(--mg-flag); }
.mg-hero > * { position:relative; }
.mg-hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; margin:.2rem 0 .8rem; border:0; }
.mg-hero p.lead { font-size:clamp(1rem,2.2vw,1.2rem); max-width:44rem; color:#D8EBDF; margin:0 0 1.4rem; }
.mg-hero .tag { display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.2rem .8rem; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.mg-hero .pills { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem; }
.mg-hero .pills span { background:rgba(255,255,255,.1); border-radius:999px; padding:.3rem .8rem; font-size:.9rem; }
.mg-cta { display:inline-block; background:var(--mg-flag); color:#0A2A17 !important; font-weight:800; border-radius:10px; padding:.8rem 1.5rem; text-decoration:none !important; animation:mgPulse 2.4s infinite; transition:transform .2s; }
.mg-cta:hover { transform:translateY(-2px); }
.mg-why { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin:1.2rem 0 2rem; }
.mg-why > div { background:#fff; border:1px solid var(--mg-line); border-radius:14px; padding:1.1rem 1.2rem; transition:transform .25s, box-shadow .25s; }
.mg-why > div:hover { transform:translateY(-4px); box-shadow:0 10px 26px rgba(10,42,23,.12); }
.mg-why .k { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mg-g); color:#fff; font-weight:700; margin-bottom:.5rem; }
.mg-why h3 { font-size:1.05rem; margin:.1rem 0 .3rem; color:var(--mg-g); }
.mg-why p { margin:0; font-size:.93rem; color:#33433B; }
.mg-uses { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.8rem; margin:1rem 0 2rem; padding:0; list-style:none; }
.mg-uses li { background:var(--mg-chalk); border-left:4px solid var(--mg-g); border-radius:8px; padding:.8rem 1rem; font-size:.94rem; }
.mg-uses li b { display:block; color:var(--mg-g); }
.mg-in-view { animation:mgUp .7s both; }

/* ---------- the tool ---------- */
#mg-app { color:var(--mg-ink); max-width:1100px; margin:0 auto; }
#mg-app * { box-sizing:border-box; }
#mg-app .mg-note { background:#FFF7E0; border:1px solid var(--mg-flag); border-radius:10px; padding:.7rem 1rem; margin:0 0 1.2rem; font-size:.92rem; }
#mg-app .mg-reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
#mg-app .mg-reveal.in { opacity:1; transform:none; }
#mg-app .mg-step { background:#fff; border:1px solid var(--mg-line); border-radius:16px; padding:1.2rem 1.3rem 1.4rem; margin:0 0 1.2rem; box-shadow:0 2px 0 rgba(10,42,23,.04); }
#mg-app .mg-stephead { display:flex; gap:.9rem; align-items:center; margin-bottom:1rem; }
#mg-app .mg-num { flex:none; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#0E4D3A,#1E6B32); color:#fff; font-weight:800; }
#mg-app .mg-stephead h3 { margin:0; font-size:1.2rem; color:var(--mg-g); }
#mg-app .mg-stephead p { margin:.1rem 0 0; color:var(--mg-mute); font-size:.9rem; }
#mg-app .mg-lbl { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mg-mute); margin:.9rem 0 .4rem; font-weight:700; }
#mg-app .mg-help { color:var(--mg-mute); font-size:.84rem; margin:.2rem 0 .5rem; }
#mg-app .mg-help.center { text-align:center; }
#mg-app .mg-val { color:var(--mg-g); text-transform:none; letter-spacing:0; margin-left:.4rem; }
#mg-app select, #mg-app input[type=text], #mg-app input[type=number] { padding:.5rem .6rem; border:1.5px solid #C4CCC6; border-radius:8px; background:#fff; font:inherit; font-size:.92rem; color:var(--mg-ink); }
#mg-app select:focus, #mg-app input:focus { outline:3px solid rgba(14,77,58,.25); border-color:var(--mg-g); }
#mg-app input[type=number] { width:4.6rem; }
#mg-app input[type=range] { width:100%; accent-color:var(--mg-g); }
#mg-app label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
#mg-app .mg-check { flex-direction:row; align-items:center; gap:.5rem; }
#mg-app .mg-row { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:flex-end; }
#mg-app .mg-inline { display:flex; gap:.5rem; }
#mg-app .mg-btn2 { background:#fff; color:var(--mg-g); border:1.5px solid var(--mg-g); border-radius:8px; padding:.45rem .9rem; cursor:pointer; font:inherit; font-size:.88rem; font-weight:600; transition:background .2s, transform .15s; }
#mg-app .mg-btn2:hover { background:#EAF1ED; transform:translateY(-1px); }
#mg-app .mg-evrow { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.4rem 0; font-size:.9rem; animation:mgSlide .3s both; }
#mg-app .mg-x { border:0; background:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--mg-mute); }
#mg-app .mg-x:hover { color:#B42318; }

/* teams */
#mg-app .mg-teams { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap:1.1rem; align-items:start; }
@media (max-width:980px){ #mg-app .mg-teams { grid-template-columns:1fr; } #mg-app .mg-pitchwrap { order:-1; } }
#mg-app .mg-team h4 { margin:0; font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
#mg-app .mg-team h4 i { width:.9rem; height:.9rem; border-radius:50%; background:#fff; border:3px solid var(--mg-g); }
#mg-app .mg-team.away h4 i { background:var(--mg-hi); border-color:var(--mg-hi); }
#mg-app .mg-pills { display:flex; flex-wrap:wrap; gap:.35rem; }
#mg-app .mg-pill { border:1.5px solid #C4CCC6; background:#fff; border-radius:999px; padding:.3rem .75rem; cursor:pointer; font:inherit; font-size:.85rem; font-weight:600; transition:all .2s; }
#mg-app .mg-pill:hover { border-color:var(--mg-g); }
#mg-app .mg-pill.on { background:var(--mg-g); color:#fff; border-color:var(--mg-g); transform:scale(1.05); }
#mg-app .mg-team.away .mg-pill.on { background:var(--mg-hi); border-color:var(--mg-hi); }
#mg-app .mg-styles { display:grid; gap:.4rem; }
#mg-app .mg-style { text-align:left; border:1.5px solid #D5DBD6; background:#fff; border-radius:10px; padding:.5rem .7rem; cursor:pointer; font:inherit; display:flex; flex-direction:column; transition:all .2s; }
#mg-app .mg-style b { font-size:.9rem; } #mg-app .mg-style span { font-size:.78rem; color:var(--mg-mute); }
#mg-app .mg-style:hover { border-color:var(--mg-g); transform:translateX(3px); }
#mg-app .mg-style.on { border-color:var(--mg-g); background:#EAF1ED; box-shadow:inset 4px 0 0 var(--mg-g); }
#mg-app .mg-team.away .mg-style.on { border-color:var(--mg-hi); background:#FBEBD8; box-shadow:inset 4px 0 0 var(--mg-hi); }
#mg-app .mg-pitchwrap { position:sticky; top:84px; }
#mg-app .mg-pitch { border-radius:14px; overflow:hidden; box-shadow:0 12px 30px rgba(10,42,23,.25); }
#mg-app .mg-svg { display:block; width:100%; height:auto; }
#mg-app .mg-dot { transition:transform .7s cubic-bezier(.2,.8,.2,1); }
#mg-app .mg-dot circle { stroke-width:.5; }
#mg-app .mg-dot.home circle { fill:#fff; stroke:#0A2A17; } #mg-app .mg-dot.home text { fill:#0A2A17; }
#mg-app .mg-dot.away circle { fill:var(--mg-hi); stroke:#fff; } #mg-app .mg-dot.away text { fill:#fff; }
#mg-app .mg-dot text { font-size:2.6px; font-weight:800; text-anchor:middle; pointer-events:none; }
#mg-app .mg-pitch.small .mg-dot { cursor:pointer; }
#mg-app .mg-pitch.small .mg-dot:hover circle { stroke:var(--mg-flag); stroke-width:.9; }
#mg-app .mg-dot.sel circle { stroke:var(--mg-flag); stroke-width:1.1; filter:drop-shadow(0 0 1.6px #F2B01E); }
#mg-app .mg-legend { display:flex; justify-content:center; gap:.6rem; align-items:center; font-size:.78rem; color:var(--mg-mute); margin-top:.5rem; flex-wrap:wrap; }
#mg-app .mg-legend span { width:.8rem; height:.8rem; border-radius:50%; display:inline-block; } #mg-app .mg-legend .h { background:#fff; border:2px solid var(--mg-g); } #mg-app .mg-legend .a { background:var(--mg-hi); }
#mg-app .mg-modes { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:.6rem; }
@media (max-width:760px){ #mg-app .mg-modes { grid-template-columns:1fr 1fr; } }
#mg-app .mg-mode { position:relative; cursor:pointer; flex-direction:row; }
#mg-app .mg-mode input { position:absolute; opacity:0; }
#mg-app .mg-mode span { display:flex; flex-direction:column; width:100%; border:1.5px solid #C9D0CA; border-radius:12px; padding:.7rem .8rem; font-size:.8rem; color:var(--mg-mute); transition:all .2s; }
#mg-app .mg-mode span b { color:var(--mg-ink); font-size:.95rem; }
#mg-app .mg-mode input:checked + span { border-color:var(--mg-g); background:#EAF1ED; box-shadow:0 0 0 3px rgba(14,77,58,.12); }
#mg-app .mg-mode input:focus-visible + span { outline:3px solid rgba(14,77,58,.4); }
#mg-app .mg-pickwrap { max-width:520px; margin:.4rem auto 1rem; }

/* dock */
#mg-app .mg-dock { position:sticky; bottom:12px; z-index:20; display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; background:rgba(10,42,23,.96); color:#fff; border-radius:16px; padding:.8rem 1rem .8rem 1.3rem; margin:1.2rem 0; box-shadow:0 14px 34px rgba(10,42,23,.35); backdrop-filter:blur(6px); }
#mg-app .mg-sum { flex:1 1 260px; display:flex; flex-direction:column; font-size:.95rem; } #mg-app .mg-sum span { font-size:.8rem; color:#BFD9CB; }
#mg-app .mg-warnmsg { color:#FFD98A !important; font-weight:700; }
#mg-app .mg-fast { font-size:.8rem; color:#BFD9CB; }
#mg-app .mg-go { background:var(--mg-flag); color:#0A2A17; border:0; border-radius:12px; padding:.85rem 1.8rem; font-size:1.05rem; font-weight:800; cursor:pointer; transition:transform .15s, box-shadow .2s; }
#mg-app .mg-go:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 18px rgba(242,176,30,.45); }
#mg-app .mg-go:disabled { opacity:.7; cursor:wait; }

/* run panel */
#mg-app .mg-run { margin:1.2rem 0; animation:mgUp .5s both; }
#mg-app .mg-runcard { background:linear-gradient(135deg,#0A2A17,#0E4D3A); color:#fff; border-radius:20px; padding:1.4rem 1.5rem 1.2rem; box-shadow:0 16px 40px rgba(10,42,23,.35); }
#mg-app .mg-runtop { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
#mg-app .mg-clock { font-size:3.4rem; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; color:var(--mg-flag); } #mg-app .mg-clock i { font-style:normal; }
#mg-app .mg-runscore { display:flex; align-items:baseline; gap:.8rem; font-size:2rem; font-weight:800; } #mg-app .mg-runscore span { font-size:.85rem; font-weight:500; color:#BFD9CB; }
#mg-app .mg-runcard .mg-btn2 { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
#mg-app .mg-bar { position:relative; height:16px; background:rgba(255,255,255,.14); border-radius:999px; margin:1.1rem 0 .9rem; overflow:hidden; }
#mg-app .mg-bar i { display:block; height:100%; width:0; border-radius:999px; transition:width .25s ease; background:repeating-linear-gradient(115deg,#F2B01E 0 14px,#FFD36A 14 28px); background-size:60px 100%; animation:mgShimmer .9s linear infinite; }
#mg-app .mg-bar em { position:absolute; right:10px; top:-1px; font-style:normal; font-size:.75rem; font-weight:800; color:#0A2A17; mix-blend-mode:normal; }
#mg-app .mg-phases { list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.35rem; }
#mg-app .mg-phases li { display:flex; align-items:center; gap:.6rem; font-size:.93rem; color:#8FB5A2; transition:color .3s; }
#mg-app .mg-phases li small { margin-left:auto; color:#BFD9CB; font-size:.8rem; }
#mg-app .mg-phases .dot { width:.85rem; height:.85rem; border-radius:50%; border:2px solid #4E7A66; flex:none; transition:all .3s; }
#mg-app .mg-phases li.now { color:#fff; font-weight:700; } #mg-app .mg-phases li.now .dot { border-color:var(--mg-flag); background:var(--mg-flag); animation:mgPulse 1.4s infinite; }
#mg-app .mg-phases li.done { color:#CFE7DA; } #mg-app .mg-phases li.done .dot { background:#4ADE80; border-color:#4ADE80; }
#mg-app .mg-ticker { list-style:none; margin:0; padding:.7rem 0 0; border-top:1px solid rgba(255,255,255,.15); min-height:6.2rem; font-size:.86rem; color:#D8EBDF; }
#mg-app .mg-ticker li { padding:.12rem 0; animation:mgSlide .35s both; } #mg-app .mg-ticker li b { color:var(--mg-flag); margin-right:.3rem; } #mg-app .mg-ticker li.goal { color:#fff; font-weight:800; }

/* results */
#mg-app .mg-eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:800; color:var(--mg-hi); }
#mg-app .mg-result { background:#fff; border:1px solid var(--mg-line); border-radius:18px; padding:1.4rem 1.4rem 1rem; margin:1.4rem 0 1.2rem; }
#mg-app .mg-bigscore { display:flex; justify-content:center; align-items:baseline; gap:1.4rem; font-size:clamp(2.6rem,8vw,4.4rem); font-weight:900; color:var(--mg-g); line-height:1.1; } #mg-app .mg-bigscore em { font-style:normal; font-variant-numeric:tabular-nums; } #mg-app .mg-bigscore span { font-size:1rem; font-weight:600; color:var(--mg-mute); }
#mg-app .mg-versus { margin-top:1rem; display:grid; gap:.55rem; }
#mg-app .mg-vs { display:grid; grid-template-columns:4.5rem 1fr 4.5rem; align-items:center; gap:.6rem; font-variant-numeric:tabular-nums; } #mg-app .mg-vs .l { text-align:right; font-weight:700; } #mg-app .mg-vs .r { font-weight:700; }
#mg-app .mg-vs small { grid-column:1/-1; text-align:center; color:var(--mg-mute); font-size:.74rem; margin-top:-.45rem; }
#mg-app .mg-vs .bars { display:flex; height:12px; gap:3px; background:#EEF1EE; border-radius:999px; overflow:hidden; } #mg-app .mg-vs .bars i { display:block; width:0; transition:width 1s cubic-bezier(.2,.8,.2,1); }
#mg-app .mg-vs .hb { background:var(--mg-g); border-radius:999px 0 0 999px; } #mg-app .mg-vs .ab { background:var(--mg-hi); border-radius:0 999px 999px 0; }
#mg-app .mg-vs.go .bars i { width:var(--w); }
#mg-app .mg-valcard { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; background:#fff; border:1px solid var(--mg-line); border-radius:18px; padding:1.2rem 1.4rem; margin:0 0 .8rem; }
#mg-app .mg-ring { position:relative; width:120px; height:120px; flex:none; } #mg-app .mg-ring svg { transform:rotate(-90deg); width:100%; height:100%; }
#mg-app .mg-ring circle { fill:none; stroke-width:10; } #mg-app .mg-ring .bg { stroke:#E4E9E5; } #mg-app .mg-ring .fg { stroke-linecap:round; } #mg-app .mg-ring .fg.pass { stroke:#1E8E3E; } #mg-app .mg-ring .fg.warn { stroke:#D9822B; } #mg-app .mg-ring .fg.fail { stroke:#B42318; }
#mg-app .mg-ring > div { position:absolute; inset:0; display:grid; place-content:center; text-align:center; } #mg-app .mg-ring b { font-size:2rem; line-height:1; } #mg-app .mg-ring span { font-size:.64rem; color:var(--mg-mute); max-width:5.5rem; }
#mg-app .mg-valtext { flex:1 1 280px; } #mg-app .mg-valtext h3 { margin:.2rem 0; font-size:1.2rem; }
#mg-app .mg-chip { display:inline-block; font-size:.7rem; font-weight:800; border-radius:6px; padding:.12rem .5rem; color:#fff; vertical-align:middle; } #mg-app .mg-pass { background:#1E8E3E; } #mg-app .mg-warn { background:#B7791F; } #mg-app .mg-fail { background:#B42318; }
#mg-app details { border:1px solid var(--mg-line); border-radius:12px; padding:.2rem .9rem; margin:.4rem 0; background:#fff; } #mg-app summary { cursor:pointer; font-weight:700; padding:.5rem 0; } #mg-app summary em { font-style:normal; font-weight:500; color:var(--mg-mute); margin-left:.5rem; font-size:.85rem; }
#mg-app .mg-table { width:100%; border-collapse:collapse; font-size:.88rem; margin:.2rem 0 .6rem; } #mg-app .mg-table td { padding:.4rem .4rem; border-top:1px solid #EDF0ED; vertical-align:top; }
#mg-app .mg-figs { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.2rem 0; } #mg-app .mg-figs .mg-wide { grid-column:1/-1; }
@media (max-width:760px){ #mg-app .mg-figs { grid-template-columns:1fr; } }
#mg-app figure { margin:0; } #mg-app .mg-figt { font-weight:800; color:var(--mg-g); margin-bottom:.4rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } #mg-app canvas { width:100%; height:auto; border-radius:12px; border:1px solid var(--mg-line); display:block; } #mg-app figcaption { color:var(--mg-mute); font-size:.82rem; margin-top:.3rem; }
#mg-app .mg-dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.7rem; margin:.7rem 0; }
#mg-app .mg-dlcard { display:flex; align-items:center; gap:.8rem; text-align:left; border:1.5px solid var(--mg-line); background:#fff; border-radius:14px; padding:.8rem 1rem; cursor:pointer; font:inherit; transition:all .2s; }
#mg-app .mg-dlcard:hover { border-color:var(--mg-g); transform:translateY(-3px); box-shadow:0 10px 22px rgba(10,42,23,.14); }
#mg-app .mg-dlcard .ic { width:2.4rem; height:2.4rem; border-radius:10px; background:var(--mg-g); color:#fff; display:grid; place-items:center; font-size:1.2rem; flex:none; }
#mg-app .mg-dlcard b { display:block; } #mg-app .mg-dlcard small { color:var(--mg-mute); } #mg-app .mg-dlcard em { margin-left:auto; font-style:normal; font-size:.78rem; color:var(--mg-mute); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } #mg-app .mg-reveal { opacity:1; transform:none; } }
/* Quarto 1.10 still emits a plain title block with title-block-style: none; the hero carries the title. */
#title-block-header { display: none; }