:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --watch-width: 337px;
  --watch-height: calc(var(--watch-width) * 257 / 211);
  --watch-scale: calc(var(--watch-width) / 211);
  --case-light: #777a7d;
  --case-mid: #303237;
  --case-dark: #08090a;
  --band-color: #151719;
  --band-highlight: #34373a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.symbol-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sf-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}
.people-three { width: 1.35em; }
.number-circle {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  align-items: center;
  justify-content: center;
  border: .1em solid currentColor;
  border-radius: 50%;
  font-size: .9em;
  line-height: 1;
}
.portrait-symbol {
  display: inline-block;
  width: .72em;
  height: 1.05em;
  border-radius: .12em;
  background: currentColor;
  vertical-align: -.12em;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #fff;
  background:
    linear-gradient(rgba(10, 28, 16, .2), rgba(12, 18, 14, .2)),
    url("/images/soccerfield.jpg") center / cover fixed;
}

button { font: inherit; }

.tutorial-header-links { display:flex; align-items:center; gap:24px; }
.tutorial-header-links a { color:#fff; font-size:.94rem; font-weight:700; text-decoration:none; }
.tutorial-header-links a:hover,.tutorial-header-links a:focus-visible { color:#baf19d; }

.simulator-layout {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  padding: 42px 0 52px;
}

.tutorial-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(18,24,20,.84);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.watch-stage { grid-column: 1; grid-row: 1; height:640px; padding: 24px 20px 92px; }
.format-loader-card { grid-column:2; grid-row:1; display:flex; min-height:0; flex-direction:column; }
.format-loader-card { height:640px; }
.instructions { grid-column:1; grid-row:2; align-self:start; height:960px; }
.instructions[open] { display:grid; grid-template-rows:auto minmax(0, 1fr); }
.instructions:not([open]) { height:auto; }
.live-report-card { grid-column:2; grid-row:2; height:960px; overflow-y:auto; }
.format-loader-card,.live-report-card { padding: 0 22px 22px; }
.card-heading { margin: 0 -22px 16px; padding: 18px 22px 14px; background: rgba(30,122,60,.34); }
.card-heading p { margin:0 0 3px; color:#9cdf7d; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card-heading h2 { margin:0; font-size:23px; }
.format-loader-list { display:grid; flex:1; align-content:start; gap:7px; min-height:0; overflow:auto; padding-right:4px; }
.tutorial-format-button { position:relative; display:grid; width:100%; padding:10px 42px 10px 12px; border:1px solid rgba(255,255,255,.13); border-radius:11px; color:#fff; background:rgba(255,255,255,.06); text-align:left; }
.tutorial-format-button:hover,.tutorial-format-button.is-selected { border-color:#9cdf7d; background:rgba(151,220,115,.1); }
.tutorial-format-button.is-loaded { box-shadow:inset 3px 0 #9cdf7d; background:rgba(151,220,115,.16); }
.tutorial-format-button .selection-mark { position:absolute; top:50%; right:12px; display:grid; width:21px; height:21px; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:transparent; transform:translateY(-50%); }
.tutorial-format-button.is-selected .selection-mark { border-color:#9cdf7d; color:#071008; background:#9cdf7d; }
.tutorial-format-button strong { font-size:13px; }.tutorial-format-button small { margin-top:2px; color:#b7c0ba; }
.manage-formats-link { display:inline-block; margin-top:14px; color:#9cdf7d; font-weight:750; text-underline-offset:4px; }
.live-report-card { font-size:18px; }
.live-report-card .card-heading p { font-size:13px; }
.live-report-card .card-heading h2 { font-size:25px; }
.live-report-card h3 { margin:18px 0 7px; font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:#9cdf7d; }
.report-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.report-score span { padding:12px; border-radius:10px; background:rgba(255,255,255,.06); text-align:center; }.report-score strong { margin-left:5px; font-size:22px; }
.report-summary { margin:14px 0 0; }.report-summary div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.1); }.report-summary dt { color:#aeb9b1; }.report-summary dd { margin:0; text-align:right; font-weight:700; }
.live-event-list { display:grid; gap:6px; margin:0; padding-left:22px; color:#d5ddd7; }.live-event-list li { padding-left:3px; }.empty-report-row { color:#919d95; font-style:italic; }

.stage-heading { text-align: center; }
.stage-heading p,
.instructions-eyebrow {
  margin: 0 0 4px;
  color: #9cdf7d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stage-heading h1 { margin: 0 0 24px; font-size: 28px; }

.watch-case {
  position: relative;
  isolation: isolate;
  width: calc(var(--watch-width) + 34px);
  height: calc(var(--watch-height) + 34px);
  margin: auto;
  padding: 17px;
  border-radius: 76px;
  border: 1px solid color-mix(in srgb, var(--case-light), white 16%);
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(255,255,255,.16) 4% 5%, transparent 5% 95%, rgba(0,0,0,.34) 95% 96%, transparent 96%),
    linear-gradient(145deg, var(--case-light), var(--case-mid) 46%, var(--case-dark));
  box-shadow: 0 30px 55px rgba(0, 0, 0, 0.48), inset 0 1px 2px rgba(255,255,255,.38);
}

.watch-case::before {
  position:absolute;
  top:-20px;
  bottom:-20px;
  left:28%;
  z-index:-1;
  width:44%;
  border-radius:28px 28px 24px 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.07) 9px 10px),
    linear-gradient(90deg, var(--band-color), var(--band-highlight) 48%, var(--band-color));
  box-shadow: inset 8px 0 12px rgba(255,255,255,.06), inset -8px 0 12px rgba(0,0,0,.3), 0 12px 24px rgba(0,0,0,.28);
  content:"";
}

.watch-case[data-frame-texture="ridge"]::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 10px),
    linear-gradient(90deg, var(--band-color), var(--band-highlight) 48%, var(--band-color));
}

.watch-case[data-frame-texture="trail"]::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 3px, transparent 3px 8px),
    linear-gradient(90deg, var(--band-color), var(--band-highlight) 48%, var(--band-color));
}

.watch-crown {
  position: absolute;
  right: -11px;
  top: 92px;
  width: 12px;
  height: 58px;
  border-radius: 0 9px 9px 0;
  border:1px solid color-mix(in srgb, var(--case-light), black 24%);
  background: repeating-linear-gradient(0deg, var(--case-dark) 0 3px, var(--case-mid) 3px 6px);
}

.watch-case > .simulator-scroll-controls {
  top: 94px;
  right: -37px;
}

.watch-screen {
  position: relative;
  width: var(--watch-width);
  height: var(--watch-height);
  overflow: hidden;
  border-radius: 59px;
  background: #000;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.07);
}

.watch-clock {
  display: block;
  height: calc(19 * var(--watch-scale));
  padding-top: calc(2 * var(--watch-scale));
  font-size: calc(10 * var(--watch-scale));
  font-weight: 650;
  text-align: center;
}

.watch-brand {
  position: absolute;
  top: calc(20 * var(--watch-scale));
  left: 0;
  width: 100%;
  height: calc(88 * var(--watch-scale));
  display: grid;
  place-items: center;
}
.watch-brand img {
  width: calc(176 * var(--watch-scale));
  max-width: 96%;
  height: 100%;
  object-fit: contain;
}

.active-dashboard {
  position: absolute;
  inset: 0 calc(10 * var(--watch-scale)) auto;
  height: calc(118 * var(--watch-scale));
  text-align: center;
}
.active-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(20 * var(--watch-scale));
  padding: calc(2 * var(--watch-scale)) calc(5 * var(--watch-scale)) 0;
  font-size: calc(10 * var(--watch-scale));
  font-weight: 650;
}
.main-timer-label {
  margin-top: calc(5 * var(--watch-scale));
  color: #c9a9f2;
  font-size: calc(14 * var(--watch-scale));
  font-weight: 700;
}
.main-timer-value {
  display: block;
  margin-top: calc(-3 * var(--watch-scale));
  font-size: calc(var(--watch-width) * .24645);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.watch-rule {
  position: absolute;
  top: calc(118 * var(--watch-scale));
  left: calc(10 * var(--watch-scale));
  width: calc(191 * var(--watch-scale));
  height: 1px;
  background: rgba(255,255,255,.75);
}
.break-alert {
  position: absolute;
  display: grid;
  place-items: center;
  top: calc(107 * var(--watch-scale));
  left: calc(10 * var(--watch-scale));
  z-index: 6;
  width: calc(191 * var(--watch-scale));
  height: calc(24 * var(--watch-scale));
  padding: 0;
  border: 0;
  border-radius: calc(5 * var(--watch-scale));
  color: #fff;
  background: #d96d00;
  font-size: calc(12 * var(--watch-scale));
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.watch-scroll {
  position: absolute;
  inset: calc(119 * var(--watch-scale)) 0 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: calc(9 * var(--watch-scale)) calc(10 * var(--watch-scale)) calc(8 * var(--watch-scale));
  background: rgba(255,255,255,.025);
}
.watch-scroll.is-scrolling { scrollbar-width: thin; }
.watch-scroll::-webkit-scrollbar { width: 0; }
.watch-scroll.is-scrolling::-webkit-scrollbar { width: 5px; }
.watch-scroll::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(255,255,255,.55); }

.primary-row { display: flex; justify-content: space-between; align-items: flex-start; }
.screen-label {
  margin-bottom: calc(4 * var(--watch-scale));
  color: rgba(255,255,255,.72);
  font-size: calc(13 * var(--watch-scale));
  font-weight: 700;
  text-align: center;
}
.active-context {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.period-label {
  color: rgba(255,255,255,.72);
  font-size: calc(13 * var(--watch-scale));
  font-weight: 500;
}
.period-progress {
  display: block;
  margin-top: calc(1 * var(--watch-scale));
  color: rgba(255,255,255,.72);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: calc(20 * var(--watch-scale));
}
.context-rule {
  height: 1px;
  margin: calc(5 * var(--watch-scale)) 0 calc(3 * var(--watch-scale));
  background: rgba(255,255,255,.7);
}
.match-time-label {
  color: rgba(255,255,255,.72);
  font-size: calc(10 * var(--watch-scale));
  font-weight: 600;
}
.match-time-value {
  display: block;
  margin-top: calc(-2 * var(--watch-scale));
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: calc(26 * var(--watch-scale));
  font-weight: 600;
}
body:not(.hero-embed) .match-time-value { font-size:16pt; }
.watch-screen.is-active .pregame-only { display: none; }
.watch-screen.timer-only .full-only { display: none !important; }
.watch-screen.timer-only .timeout-start-actions { grid-template-columns: 1fr; }
.watch-screen.timer-only .screen-label { display: none; }
.timer-only-pregame {
  display: grid;
  justify-items: center;
  gap: calc(2 * var(--watch-scale));
  padding: calc(7 * var(--watch-scale)) 0;
  color: #ff9f0a;
  font-size: calc(13 * var(--watch-scale));
  font-weight: 700;
}
.timer-only-pregame[hidden] { display: none; }
.timer-only-pregame strong {
  color: #fff;
  font-size: calc(48 * var(--watch-scale));
  font-variant-numeric: tabular-nums;
}
.timer-only-half-start[hidden] { display: none; }
.active-controls {
  padding-top: calc(10 * var(--watch-scale));
}
.active-button {
  display: block;
  width: 100%;
  margin: 0 auto calc(33 * var(--watch-scale));
  background: rgba(255,255,255,.08);
}
.active-button.voice-button { margin-top: 0; }
.stoppage-button { background: #2380d8; }
.stoppage-button[aria-pressed="true"] { background: #b94732; }
.stoppage-adjustments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(9 * var(--watch-scale));
  margin: calc(-3 * var(--watch-scale)) 0 calc(9 * var(--watch-scale));
}
.adjustment-button { background: rgba(255,255,255,.13); }
.timeout-controls h3 {
  margin: calc(4 * var(--watch-scale)) 0 calc(6 * var(--watch-scale));
  color: rgba(255,255,255,.72);
  font-size: calc(15 * var(--watch-scale));
  font-weight: 600;
  text-align: center;
}
.active-timeouts { display: grid; gap: calc(5 * var(--watch-scale)); }
.timeout-card {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--watch-scale));
  width: 100%;
  min-height: calc(33 * var(--watch-scale));
  padding: 0 calc(7 * var(--watch-scale));
  border: 0;
  border-radius: calc(7 * var(--watch-scale));
  font-size: calc(18 * var(--watch-scale));
  font-weight: 600;
}
.timeout-card strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.timeout-card.injury { color: #ff5b57; background: rgba(255,59,48,.16); }
.timeout-card.caution { color: #ffd60a; background: rgba(255,214,10,.16); }
.timeout-start-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(8 * var(--watch-scale));
  margin: calc(6 * var(--watch-scale)) 0 calc(9 * var(--watch-scale));
}
.timeout-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--watch-scale));
  min-width: 0;
  min-height: calc(33 * var(--watch-scale));
  font-size: calc(12 * var(--watch-scale));
}
.injury-timeout-button { color: #ff6961; border-color: #ff6961; background: rgba(255,59,48,.12); }
.caution-timeout-button { color: #ffd60a; border-color: #ffd60a; background: rgba(255,214,10,.12); }
.score-button {
  border: 0;
  background: transparent;
  text-align: center;
}
.team-dot {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: calc(4 * var(--watch-scale));
  border: 1px solid transparent;
  border-radius: 50%;
  vertical-align: -0.12em;
}
.home-dot { background: var(--home-team-color, #0a84ff); border-color: var(--home-team-dot-border, transparent); }
.visitor-dot { background: var(--visitor-team-color, #ff453a); border-color: var(--visitor-team-dot-border, transparent); }
.destructive-button { background: #9f3128; }
.active-footer { padding-top: calc(7 * var(--watch-scale)); }
.event-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
}
.event-header {
  display: flex;
  align-items: center;
  height: calc(27 * var(--watch-scale));
  padding: 0 calc(8 * var(--watch-scale));
  font-size: calc(18 * var(--watch-scale));
  font-weight: 600;
}
.event-header.is-pinned {
  height: calc(38 * var(--watch-scale));
  padding: 0 calc(4 * var(--watch-scale)) calc(4 * var(--watch-scale));
}
.event-header.is-pinned [data-screen-title] { display: none; }
.event-header.is-pinned + .event-scroll { inset: calc(38 * var(--watch-scale)) 0 0; }
.pinned-cancel {
  min-height: calc(34 * var(--watch-scale));
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.68) !important;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.event-scroll {
  position: absolute;
  inset: calc(27 * var(--watch-scale)) 0 0;
  overflow-y: auto;
  padding: calc(9 * var(--watch-scale)) calc(4 * var(--watch-scale)) calc(8 * var(--watch-scale));
}
.event-stack { display: grid; gap: calc(7 * var(--watch-scale)); }
.event-button {
  width: 100%;
  min-height: calc(34 * var(--watch-scale));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: calc(7 * var(--watch-scale));
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: calc(15 * var(--watch-scale));
  font-weight: 600;
}
.event-button:disabled { opacity: .48; cursor: default; }
.field-satellite-toggle, .field-marker-row { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--watch-scale)); padding: calc(4 * var(--watch-scale)) calc(7 * var(--watch-scale)); text-align: left; }
.field-satellite-toggle [data-satellite-status] { color: rgba(255,255,255,.72); }
.field-marker-row { min-height: calc(52 * var(--watch-scale)); line-height: 1.15; }
.field-marker-checkbox { flex: none; font-size: calc(18 * var(--watch-scale)); }
.field-marker-done, .field-marker-cancel { margin-top: calc(34 * var(--watch-scale)); }
.field-preview-note {
  margin: calc(5 * var(--watch-scale)) calc(4 * var(--watch-scale));
  color: rgba(255,255,255,.72);
  font-size: calc(12 * var(--watch-scale));
  line-height: 1.3;
  text-align: center;
}
.event-button.goal { color: #fff; }
.event-button.yellow-card { color: #ffd60a; border-color: #ffd60a; }
.event-button.red-card { color: #ff453a; border-color: #ff453a; }
.event-button.injury { color: #ff9f0a; border-color: #ff9f0a; }
.event-button.misconduct { color: #bf5af2; border-color: #bf5af2; }
.event-button.primary { background: #258b3c; }
.event-button.cancel { color: #fff !important; background: transparent; }
.team-selector { text-align: left; padding-inline: calc(8 * var(--watch-scale)); }
.team-kit-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(6 * var(--watch-scale)); }
.team-kit-toggle small { grid-column: 2; color: rgba(255,255,255,.7); font-size: calc(10 * var(--watch-scale)); }
.team-toggle-black { color: #111; background: #f2f2f7; border-color: rgba(0,0,0,.28); }
.team-toggle-black small { color: rgba(0,0,0,.67); }
.team-kit-swatch { position: relative; display: grid; place-items: center; width: calc(20 * var(--watch-scale)); height: calc(20 * var(--watch-scale)); overflow: hidden; border: 1px solid var(--kit-border, rgba(255,255,255,.45)); border-radius: 50%; background: var(--kit-color); }
.team-kit-swatch.is-light::before, .team-kit-swatch.is-dark::before, .team-kit-swatch.is-striped::after { position: absolute; inset: 0; content: ""; }
.team-kit-swatch.is-light::before { background: rgba(255,255,255,.38); }
.team-kit-swatch.is-dark::before { background: rgba(0,0,0,.42); }
.team-kit-swatch.is-striped.stripe-dark::after { background: repeating-linear-gradient(-25deg, transparent 0 3px, rgba(0,0,0,.6) 3px 5px); }
.team-kit-swatch.is-striped.stripe-light::after { background: repeating-linear-gradient(-25deg, transparent 0 3px, rgba(255,255,255,.82) 3px 5px); }
.team-kit-check { position: relative; z-index: 1; color: #fff; font-size: calc(12 * var(--watch-scale)); font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.team-kit-check.check-dark { color: #111; text-shadow: 0 1px 2px rgba(255,255,255,.7); }
.recipient-grid { display: grid; gap: calc(7 * var(--watch-scale)); }
.recipient-button.is-selected { background: #258b3c; }
.player-number {
  min-height: calc(24 * var(--watch-scale));
  text-align: center;
  font-size: calc(17 * var(--watch-scale));
  font-weight: 600;
}
.number-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6 * var(--watch-scale));
}
.keypad-button { min-height: calc(32 * var(--watch-scale)); background: rgba(142,142,147,.22); }
.goal-record-action { padding-block: calc(16 * var(--watch-scale)); }
.settings-grid { display: grid; gap: calc(8 * var(--watch-scale)); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--watch-scale)); min-height: calc(28 * var(--watch-scale)); font-size: calc(12 * var(--watch-scale)); }
.settings-row span:first-child { color: rgba(255,255,255,.72); }
.settings-row input[type="number"] { width: 4.5em; }
.settings-row input { accent-color: #30d158; }
.settings-section-label { margin-top: calc(4 * var(--watch-scale)); color: rgba(255,255,255,.55); font-size: calc(10 * var(--watch-scale)); font-weight: 600; }
.break-time-entry { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: calc(4 * var(--watch-scale)); }
.break-time-entry input { width: calc(43 * var(--watch-scale)); min-height: calc(29 * var(--watch-scale)); text-align: center; }
.format-card { min-height: calc(46 * var(--watch-scale)); }
.format-card small { display: block; color: rgba(255,255,255,.65); }
.workflow-input { width: 100%; min-height: calc(31 * var(--watch-scale)); border: 1px solid rgba(255,255,255,.35); border-radius: calc(6 * var(--watch-scale)); color: #fff; background: #222; padding: calc(5 * var(--watch-scale)); }
.report-row { padding: calc(5 * var(--watch-scale)); border-bottom: 1px solid rgba(255,255,255,.16); font-size: calc(11 * var(--watch-scale)); }
.team-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(5 * var(--watch-scale)); }
.team-color-choice { display: grid; justify-items: center; gap: calc(1 * var(--watch-scale)); min-height: calc(38 * var(--watch-scale)); border: 0; color: #fff; background: transparent; font-size: calc(8 * var(--watch-scale)); font-weight: 600; }
.team-color-choice.is-selected { font-weight: 800; }
.team-color-choice .team-kit-swatch { width: calc(20 * var(--watch-scale)); height: calc(20 * var(--watch-scale)); }
.team-kit-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(5 * var(--watch-scale)); }
.team-pattern-choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-kit-choice { min-height: calc(30 * var(--watch-scale)); font-size: calc(11 * var(--watch-scale)); }
.team-kit-choice.is-selected { background: #258b3c; }
.team-setup-editor { min-height: 100%; }
.team-setup-toggle { position: sticky; top: calc(-5 * var(--watch-scale)); z-index: 1; text-align: left; background: #202020; }
.time-wheels { display: grid; grid-template-columns: 1fr auto 1fr 1fr; align-items: center; gap: calc(4 * var(--watch-scale)); }
.time-wheel { height: calc(90 * var(--watch-scale)); border: 0; border-radius: calc(7 * var(--watch-scale)); color: #fff; background: #191919; font-size: calc(18 * var(--watch-scale)); text-align: center; }
.outcome-toggle { min-height: calc(58 * var(--watch-scale)); }
.outcome-toggle strong, .outcome-toggle small { display: block; }
.outcome-toggle small { margin-top: calc(2 * var(--watch-scale)); color: rgba(255,255,255,.65); }
.outcome-explanation { display: grid; gap: calc(2 * var(--watch-scale)); min-height: calc(46 * var(--watch-scale)); place-content: center; text-align: center; font-size: calc(13 * var(--watch-scale)); }
.game-over-button { order: -1; font-size: calc(16 * var(--watch-scale)); font-weight: 700; }
.coin-stage { min-height: calc(210 * var(--watch-scale)); height: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--watch-scale)); padding-bottom: calc(2 * var(--watch-scale)); }
.coin-stage::before { content: ""; flex: 1 1 auto; min-height: 0; }
.coin-face { display: grid; place-items: center; flex: 0 1 auto; width: min(calc(100% - calc(8 * var(--watch-scale))), calc(171 * var(--watch-scale))); aspect-ratio: 1; border: 2px solid rgba(0,0,0,.5); border-radius: 50%; background-color: #171717; background-position: center; background-repeat: no-repeat; background-size: cover; transition: transform 2s linear; }
.coin-stage > .event-button { flex: 0 0 auto; }
.coin-face.is-flipping { transform: rotateY(2160deg) scale(1.45); }
.coin-face.heads { background-image: url("images/coin-heads.png"); }
.coin-face.tails { background-image: url("images/coin-tails.png"); }
.kickoff-team-picker { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--watch-scale)); }
.kickoff-team-picker .is-selected { background: #258b3c; }
.penalty-stack { padding-bottom: calc(18 * var(--watch-scale)); }
.penalty-lower-actions { display: grid; gap: calc(33 * var(--watch-scale)); padding-top: calc(33 * var(--watch-scale)); }
.penalty-team-size-list { padding-bottom: calc(18 * var(--watch-scale)); }
.penalty-league { padding: calc(3 * var(--watch-scale)); text-align: center; font-size: calc(14 * var(--watch-scale)); font-weight: 600; }
.penalty-divider { height: 1px; background: rgba(255,255,255,.35); }
.penalty-team-button strong, .penalty-team-button span, .penalty-winner strong, .penalty-winner span { display: block; }
.penalty-team-button { border-color: #30d158; }
.penalty-score-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: calc(5 * var(--watch-scale)); min-height: calc(27 * var(--watch-scale)); font-size: calc(14 * var(--watch-scale)); }
.penalty-score-row span { display: inline-flex; align-items: center; gap: calc(3 * var(--watch-scale)); font-size: calc(19 * var(--watch-scale)); font-variant-numeric: tabular-nums; }
.penalty-score-row.compact { font-size: calc(11 * var(--watch-scale)); }
.penalty-score-row.compact span { font-size: calc(13 * var(--watch-scale)); }
.penalty-summary { margin: 0; color: rgba(255,255,255,.7); font-size: calc(11 * var(--watch-scale)); line-height: 1.3; }
.penalty-attempts { display: grid; gap: calc(2 * var(--watch-scale)); font-size: calc(11 * var(--watch-scale)); }
.penalty-attempt { display: grid; grid-template-columns: calc(22 * var(--watch-scale)) 1fr calc(34 * var(--watch-scale)) calc(22 * var(--watch-scale)); align-items: center; gap: calc(3 * var(--watch-scale)); }
.penalty-attempt span:nth-child(2) { display: flex; align-items: center; gap: calc(3 * var(--watch-scale)); }
.penalty-attempt-header { color: rgba(255,255,255,.65); font-weight: 600; }
.penalty-attempt .made { color: #30d158; }
.penalty-attempt .missed { color: #ff453a; }
.penalty-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--watch-scale)); }
.penalty-player-picker { display: grid; gap: calc(7 * var(--watch-scale)); text-align: center; }
.penalty-player-picker .time-wheel { width: 100%; height: calc(145 * var(--watch-scale)); }
.demo-timer {
  margin-top: calc(8 * var(--watch-scale));
  margin-bottom: calc(8 * var(--watch-scale));
  text-align: center;
}
.demo-timer span {
  display: block;
  color: #d0c1f0;
  font-size: calc(11 * var(--watch-scale));
  font-weight: 700;
}
.demo-timer strong {
  display: block;
  font-size: calc(38 * var(--watch-scale));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.watch-button {
  min-height: calc(33 * var(--watch-scale));
  border: 1px solid rgba(255,255,255,.58);
  border-radius: calc(7 * var(--watch-scale));
  color: #fff;
  font-size: calc(13 * var(--watch-scale));
  font-weight: 600;
  line-height: 1.05;
  cursor: pointer;
}
.watch-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.start-button { display: inline-flex; width: calc(130 * var(--watch-scale)); align-items: center; justify-content: center; gap: calc(4 * var(--watch-scale)); background: #258b3c; }
.start-symbol { flex: 0 0 auto; }
.whistle-button {
  width: calc(33 * var(--watch-scale));
  font-size: calc(24 * var(--watch-scale));
  background: #2380d8;
}
.whistle-button img { display: block; width: calc(25 * var(--watch-scale)); height: calc(25 * var(--watch-scale)); margin: auto; object-fit: contain; }
.halftime-stack { padding-top: calc(8 * var(--watch-scale)); }
.halftime-timer { display: grid; justify-items: center; gap: calc(2 * var(--watch-scale)); font-variant-numeric: tabular-nums; }
.halftime-timer span { color: #d0c1f0; font-size: calc(12 * var(--watch-scale)); font-weight: 700; }
.halftime-timer strong { font-size: calc(43 * var(--watch-scale)); line-height: 1; }
.halftime-start-row { padding-top: calc(8 * var(--watch-scale)); }
.voice-button {
  width: 100%;
  margin-top: calc(10 * var(--watch-scale));
  background: #7774c9;
}
.voice-note-recording { color: #fff !important; border-color: #ff453a !important; background: #b63129 !important; }
.summary {
  padding: calc(10 * var(--watch-scale)) 0;
  font-size: calc(11 * var(--watch-scale));
}
.summary summary {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(26 * var(--watch-scale));
  padding: 0 calc(18 * var(--watch-scale));
  cursor: pointer;
  list-style: none;
}
.summary summary::-webkit-details-marker { display: none; }
.summary summary > span { position: absolute; right: calc(4 * var(--watch-scale)); }
.summary strong { min-width: 0; font-size: calc(13 * var(--watch-scale)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-details {
  display: grid;
  gap: calc(4 * var(--watch-scale));
  padding: calc(5 * var(--watch-scale)) calc(2 * var(--watch-scale));
  text-align: left;
}
.lower-button {
  display: block;
  width: calc(161 * var(--watch-scale));
  margin: 0 auto calc(33 * var(--watch-scale));
  background: rgba(255,255,255,.08);
}
.compass {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(5 * var(--watch-scale));
  margin: calc(4 * var(--watch-scale)) auto calc(8 * var(--watch-scale));
  font-size: calc(14 * var(--watch-scale));
}
.compass strong { font-size: calc(11 * var(--watch-scale)); }
.direction-arrow { display: inline-block; transform-origin: center; }
.watch-footer {
  display: grid;
  gap: calc(2 * var(--watch-scale));
  padding-bottom: calc(5 * var(--watch-scale));
  color: rgba(255,255,255,.67);
  font-size: calc(8 * var(--watch-scale));
  text-align: center;
}

.instructions {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(18, 24, 20, .78);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.instructions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  background: rgba(30,122,60,.34);
  cursor: pointer;
  list-style: none;
}
.instructions-header::-webkit-details-marker { display: none; }
.instructions-header > span:first-child { display: grid; gap: 4px; }
.instructions-eyebrow { display: block; font-size: 14px; }
.instructions-header strong { font-size: 27px; line-height: 1.15; }
.instructions-toggle::before { content: "Hide"; color: #d5ddd7; font-size: 15px; font-weight: 750; }
.instructions:not([open]) .instructions-toggle::before { content: "Show"; }
.instructions-body { height:100%; min-height:0; overflow-y:auto; padding: 22px 24px 24px; color: #d5ddd7; font-size:18px; }
.instructions-body p { margin-top: 0; }
.instructions-body ul:empty { display: none; }
.instructions-body ul { margin: 0; padding-left: 20px; }
.instructions-body li + li { margin-top: 8px; }
.demo-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #aeb9b1;
  font-size: 15px;
}

@media (max-width: 760px) {
  :root { --watch-width: min(337px, calc(100vw - 66px)); }
  .simulator-layout { grid-template-columns: 1fr; }
  .watch-stage,.format-loader-card,.instructions,.live-report-card { grid-column:auto; grid-row:auto; }
  .tutorial-header-links { gap:14px; }
  .tutorial-header-links a { font-size:.82rem; }
}

html.hero-embed-root,body.hero-embed { min-height:0; overflow:hidden; background:transparent !important; color-scheme:normal; }
.hero-embed .simulator-layout { width:100%; display:block; padding:0; }
.hero-embed .tutorial-card:not(.watch-stage),.hero-embed .stage-heading,.hero-embed .site-header,.hero-embed .skip-link { display:none; }
.hero-embed .watch-stage { padding:20px 0; border:0; background:transparent; box-shadow:none; }
.hero-embed { --watch-width:min(337px, calc(100vw - 45px)); }
.hero-embed .main-timer-value { font-size:64pt; }
.hero-embed .watch-case > .simulator-scroll-controls { display:none; }