/* The Soccer Field (js/soccer.js): its HUD (hud.js), its menu (ui/soccer.js), its box in the Play menu
   and its results (ui/results.js). Bright pitch greens with the game's chunky ink outlines. */

/* ---------------------------------------------------------------- HUD */

/* The score box at the top: each side's kit, short name and score round the clock (or the five kicks). */
.sc {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.sc-team {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  column-gap: 7px;
  min-width: 84px;
  padding: 6px 10px 7px;
  border-radius: 14px;
  background: rgba(18, 32, 58, 0.55);
  backdrop-filter: blur(6px);
}
.sc-kit { grid-row: 1; width: 26px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 2px #fff, 0 2px 0 2px rgba(18, 32, 58, 0.5); }
.sc-team em { grid-row: 1; font-style: normal; font-weight: 900; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-team b {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.sc-team b.pop { animation: score-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.sc-mid {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 84px;
  padding: 6px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 #b9cbe4;
}
.sc-mid b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.sc-mid span { display: flex; gap: 4px; font-weight: 900; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.sc.is-pens .sc-mid b { font-size: 21px; }
.sc.urgent .sc-mid b { color: var(--red); animation: urgent 1s ease-in-out infinite; }
/* Penalties: a dot per kick, green for a goal, red for a miss or a save, yellow for the one being taken. */
.sc-dot { width: 11px; height: 11px; border-radius: 50%; background: #d6e0ee; box-shadow: inset 0 0 0 2px #b4c3d8; }
.sc-dot.is-goal { background: var(--green); box-shadow: inset 0 -2px 0 var(--green-dark); }
.sc-dot.is-miss { background: var(--red); box-shadow: inset 0 -2px 0 var(--red-dark); }
.sc-dot.is-now { background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); animation: pulse 0.9s ease-in-out infinite; }

/* The team's goal event: "Argentina goal event: 3/5 goals · 7 min left". */
.sc-event {
  position: absolute;
  left: 50%;
  top: calc(96px + env(safe-area-inset-top));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 4px 0 var(--yellow-dark);
}
.sc-event.is-won { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-dark); }
.sc-ball {
  flex: none;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fff' stroke='%2312203a' stroke-width='2'/%3E%3Cpath d='M12 7.6l3.3 2.4-1.3 3.9H10l-1.3-3.9z' fill='%2312203a'/%3E%3Cpath d='M12 7.6V3.2M15.3 10l4.2-1.4M14 13.9l2.6 3.6M10 13.9l-2.6 3.6M8.7 10L4.5 8.6' stroke='%2312203a' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
}

/* The power bar while a kick is held: green to yellow to red, glowing when full, faded while the ball is
   out of reach (let go then and the kick still happens if you reach it in a moment). */
.sc-power {
  position: absolute;
  left: 50%;
  bottom: calc(118px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  border-radius: 16px;
  background: rgba(18, 32, 58, 0.72);
  transition: opacity 0.15s ease;
}
.sc-power b { min-width: 40px; font-family: var(--display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
/* The colours are the track's; a dark cover over the part not charged yet shrinks away to the right. */
.sc-power i { position: relative; display: block; width: 210px; height: 16px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 55%, var(--red) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.sc-power u { position: absolute; inset: 0; transform-origin: right; background: #2a3650; }
.sc-power.is-full i { box-shadow: inset 0 0 0 2px #fff, 0 0 14px rgba(255, 75, 85, 0.75); }
.sc-power.is-far { opacity: 0.6; }

/* Five goals for a team with a goal event on: its kit and jersey charm are yours! */
.sc-prize { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sc-prize-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(440px, calc(100vw - 40px));
  margin-top: 16vh;
  padding: 16px 20px 18px;
  border-radius: 26px;
  background:
    repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 204, 46, 0.22) 0 10deg, transparent 10deg 20deg),
    #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 0 0 4px var(--ink), 0 10px 0 4px rgba(10, 22, 52, 0.5);
  animation: sc-prize 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.sc-prize-card svg { width: 104px; height: 104px; animation: sc-bob 1.2s ease-in-out 0.6s infinite; }
.sc-prize-card b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.sc-prize-card span { color: var(--muted); font-weight: 900; font-size: 14px; }
@keyframes sc-prize { 0% { opacity: 0; transform: scale(0.4) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes sc-bob { 50% { transform: translateY(-6px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .sc-prize-card, .sc-prize-card svg { animation: none; } }

/* On the field there's nothing to reload, and on phones the mode's name and the hint give way to the
   score box (the Kick and Chip buttons say what they do; the box stays, hidden, so the minimap keeps its
   corner). The event's pill drops below the minimap. */
body.soccer #touch-reload { display: none; }
body.touch.soccer .hud-info { visibility: hidden; }
body.touch .sc-event { top: calc(108px + env(safe-area-inset-top)); }
body.touch .sc-team { backdrop-filter: none; background: rgba(18, 32, 58, 0.72); }
/* Just above the thumb controls (two rows of buttons, about 194px tall with their margin). */
body.touch .sc-power { bottom: calc(206px + env(safe-area-inset-bottom)); }
body.touch #touch-alt { font-weight: 900; }

@media (max-width: 900px) {
  .sc-team { min-width: 64px; padding: 4px 7px 5px; column-gap: 5px; }
  .sc-team b { font-size: 26px; }
  .sc-mid { min-width: 62px; padding: 4px 8px; }
  .sc-mid b { font-size: 22px; }
  .sc.is-pens .sc-mid b { font-size: 17px; }
  .sc-kit { width: 20px; height: 14px; }
  .sc-event { top: calc(78px + env(safe-area-inset-top)); font-size: 13px; }
}
/* Narrow phones: the score box must clear the minimap on the right and the pause icon on the left. */
@media (max-width: 400px) {
  .sc { gap: 4px; }
  .sc-team { min-width: 50px; padding: 3px 5px 4px; grid-template-columns: auto; column-gap: 0; }
  .sc-team .sc-kit { display: none; }
  .sc-team em { font-size: 11px; }
  .sc-mid { min-width: 52px; padding: 3px 6px; }
  .sc-mid b { font-size: 19px; }
  .sc.is-pens .sc-mid b { font-size: 14px; }
  .sc-mid span { gap: 3px; }
  .sc:not(.is-pens) .sc-mid span { display: none; }
  .sc-dot { width: 8px; height: 8px; }
  .sc-power i { width: 160px; }
  .sc-prize-card b { font-size: 23px; }
}
@media (max-height: 520px) {
  .sc-event { top: calc(70px + env(safe-area-inset-top)); padding: 4px 12px 4px 6px; font-size: 12.5px; }
  body.touch .sc-power { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .sc-power i { width: 150px; }
  .sc-prize-card { margin-top: 12vh; padding: 10px 16px 12px; }
  .sc-prize-card svg { width: 70px; height: 70px; }
}

/* ---------------------------------------------------------------- the menu (ui/soccer.js) */

.sf .pnl-head {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 34px, transparent 34px 68px),
    linear-gradient(180deg, #49d36b, #1fa04a);
  box-shadow: inset 0 -5px 0 rgba(0, 80, 30, 0.3);
}
.sf .pnl-body { display: grid; align-content: start; gap: 14px; background: #eef8ee; }
.sf-ball .m-ico, .sf .pnl-icon .m-ico { width: 30px; height: 30px; }
.sf-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf-mode {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 -5px 0 #cfe3cf, 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink);
  transition: transform 0.07s ease;
}
.sf-mode:active { transform: translateY(3px); }
.sf-mode.is-on { background: linear-gradient(180deg, #f2fff2, #d6f7da); box-shadow: inset 0 -5px 0 var(--green), 0 0 0 4px var(--green-dark), 0 5px 0 4px var(--ink); }
@media (hover: hover) { .sf-mode:not(.is-on):hover { filter: brightness(1.03); } }
.sf-art { display: block; width: 124px; height: 87px; }
.sf-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sf-mode-text { display: grid; gap: 7px; min-width: 0; }
.sf-mode-name { font-size: 28px; }
.sf-mode-blurb { color: var(--ink-2); font-size: 14px; font-weight: 800; line-height: 1.3; }
.sf-check { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 3px var(--ink); }
.sf-mode.is-on .sf-check { display: grid; animation: m-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.sf-box { min-width: 0; padding: 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 2px #d8ead8, 0 5px 0 #cfe0cf; }
.sf-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 22px; }
.sf-h .m-ico { color: var(--green-dark); font-size: 22px; width: 24px; height: 24px; }
.sf-sub { margin: -6px 0 12px; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.35; }
.sf-diff { display: grid; gap: 6px; }
.sf-diff .sf-h { margin-bottom: 4px; }
/* Goal events: a card per team, with its time left and your goals toward its kit. */
.sf-events { background: linear-gradient(180deg, #fff8d6, #fff); box-shadow: inset 0 0 0 3px var(--yellow), 0 5px 0 var(--yellow-dark); }
.sf-evlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sf-ev {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink);
}
.sf-ev.is-on { background: #e6ffe9; box-shadow: 0 0 0 4px var(--green-dark), 0 5px 0 4px var(--ink); }
.sf-ev:active { transform: translateY(3px); }
.sf-ev-shirt { width: 52px; height: 52px; }
.sf-ev-text { display: grid; gap: 2px; min-width: 0; }
.sf-ev-text b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.05; }
.sf-ev-match { color: var(--ink-2); font-size: 12.5px; font-weight: 800; }
.sf-ev-time { display: inline-flex; align-items: center; gap: 4px; color: var(--red-dark); font-size: 13px; font-weight: 900; }
.sf-ev-time .m-ico { width: 15px; height: 15px; }
.sf-ev-goals { display: grid; justify-items: end; gap: 4px; }
.sf-ev-goals b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; }
.sf-ev-bar { display: block; width: 64px; height: 9px; overflow: hidden; border-radius: 999px; background: #e1e8f2; }
.sf-ev-bar u { display: block; height: 100%; background: var(--green); }
.sf-ev-done { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12.5px; font-weight: 900; }
.sf-ev-done .m-ico { width: 15px; height: 15px; }
/* Every team: a chip each, countries then clubs. */
.sf-group + .sf-group { margin-top: 12px; }
.sf-group-name { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; padding-bottom: 4px; }
.sf-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  text-align: left;
  box-shadow: inset 0 0 0 2px #d6e0ee, 0 3px 0 #d6e0ee;
}
.sf-team:active { transform: translateY(2px); }
.sf-team.is-on { background: #e6ffe9; box-shadow: inset 0 0 0 3px var(--green-dark), 0 3px 0 var(--green-dark); }
@media (hover: hover) { .sf-team:not(.is-on):hover { background: #fff; } }
.sf-team-shirt { flex: none; width: 34px; height: 34px; }
/* Long names ("Inter Miami", "Man United") wrap onto a second line rather than being cut. */
.sf-team-name { min-width: 0; line-height: 1.1; overflow-wrap: anywhere; }
.sj { display: inline-block; }
.sj svg { display: block; width: 100%; height: 100%; }
/* The bar at the bottom: who you'll play for, and Play. */
.sf-foot { display: flex; flex: none; align-items: center; gap: 14px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 0 #d8ead8; }
.sf-summary { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.sf-summary-shirt { flex: none; width: 46px; height: 46px; }
.sf-summary-text { display: grid; min-width: 0; }
.sf-summary-text b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.05; }
.sf-summary-text span { color: var(--muted); font-size: 13px; font-weight: 800; }
.sf-go { min-width: 260px; }

@media (max-width: 760px) {
  .sf-modes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sf-mode { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .sf-art { width: 86px; height: 60px; }
  .sf-mode-name { font-size: 23px; }
  .sf-mode-blurb { font-size: 13px; }
  .sf-teams { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .sf-team { font-size: 13px; }
  .sf-evlist { grid-template-columns: minmax(0, 1fr); }
  .sf-foot { gap: 10px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .sf-go { min-width: 0; flex: 1; padding-left: 12px; padding-right: 12px; font-size: 18px; white-space: nowrap; }
  .sf-summary-shirt { width: 38px; height: 38px; }
  .sf-summary-text b { font-size: 18px; }
  .sf-summary-text span { display: none; }
}
@media (max-height: 520px) {
  .sf-mode { padding: 8px 10px; }
  .sf-art { width: 74px; height: 52px; }
  .sf-mode { grid-template-columns: 74px minmax(0, 1fr); }
  .sf-mode-blurb { display: none; }
}

/* ---------------------------------------------------------------- the Play menu's box */

/* A striped pitch with its lines, across both columns. */
.pm-soccer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 50%, transparent 0 46px, rgba(255, 255, 255, 0.55) 47px 50px, transparent 51px),
    linear-gradient(90deg, transparent calc(78% - 2px), rgba(255, 255, 255, 0.55) calc(78% - 2px) calc(78% + 2px), transparent calc(78% + 2px)),
    repeating-linear-gradient(90deg, #42a83a 0 64px, #4cb543 64px 128px);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 5px 0 #1f6b1c;
}
.pm-badge-soccer .m-ico { width: 19px; height: 19px; }
.pm-soccer .pm-daily-blurb { max-width: 56ch; }
.pm-soccer .pm-go { min-width: 140px; }
.pm-goals { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.pm-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 -4px 0 var(--yellow-dark), 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink);
}
.pm-goal:active { transform: translateY(3px); }
.pm-goal-shirt { width: 36px; height: 36px; }
.pm-goal span { display: grid; }
.pm-goal b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.05; }
.pm-goal small { font-size: 12px; font-weight: 900; }

/* ---------------------------------------------------------------- results (ui/results.js) */

.rs.is-soccer .pnl-head {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 34px, transparent 34px 68px),
    linear-gradient(180deg, #49d36b, #1fa04a);
}
.rs.is-soccer.is-loss .pnl-head, .rs.is-soccer.is-draw .pnl-head { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 34px, transparent 34px 68px), linear-gradient(180deg, #8592b0, #5b6886); }
.rs.is-soccer .pnl-icon .m-ico { width: 30px; height: 30px; }
.rs.is-soccer .rs-hero { background: radial-gradient(ellipse at 50% 40%, #e3fbe3, rgba(227, 251, 227, 0) 72%); }
.rs.is-soccer .rs-tw-sub { color: var(--ink-2); }
.rs.is-soccer .rs-title { color: var(--green-dark); }
.rs.is-soccer.is-win .rs-title { color: var(--yellow); }
.rs.is-draw .rs-rays { display: none; }
.rs-sc-kicks { position: relative; display: flex; gap: 8px; }
.rs-sc-kicks i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink); animation: rs-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.rs-sc-kicks i:nth-child(2) { animation-delay: 0.1s; }
.rs-sc-kicks i:nth-child(3) { animation-delay: 0.2s; }
.rs-sc-kicks i:nth-child(4) { animation-delay: 0.3s; }
.rs-sc-kicks i:nth-child(5) { animation-delay: 0.4s; }
.rs-sc-kicks i.is-goal { background: var(--green); }
.rs-sc-kicks i.is-miss { background: var(--red); }
.rs-sc-kicks .m-ico { width: 24px; height: 24px; }
.rs-sc-score { position: relative; display: flex; align-items: center; gap: 14px; }
.rs-sc-team { display: grid; justify-items: center; min-width: 96px; }
.rs-sc-team b { font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 1; color: var(--ink); }
.rs-sc-team small { color: var(--ink-2); font-size: 13px; font-weight: 900; }
.rs-sc-shirt { width: 60px; height: 60px; }
.rs-keeper { padding: 1px 7px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.rs-sc-event { display: grid; gap: 8px; }
.rs-sc-event .rs-h { margin: 0; }
.rs-sc-event .m-ico { width: 22px; height: 22px; }
.rs-sc-event-text { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 800; color: var(--ink-2); line-height: 1.35; }
.rs-sc-event-text b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--ink); }
.rs-sc-prize { display: grid; justify-items: center; gap: 6px; text-align: center; background: radial-gradient(circle at 50% 30%, #fff3c4, #fff 70%); box-shadow: inset 0 0 0 3px var(--yellow), 0 5px 0 var(--yellow-dark); }
.rs-sc-prize-shirt { width: 96px; height: 96px; animation: rs-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.4s both; }
.rs-sc-prize-text { margin: 0; font-weight: 900; color: var(--ink-2); }

@media (max-width: 760px) {
  .rs-sc-kicks i { width: 38px; height: 38px; }
  .rs-sc-team b { font-size: 38px; }
  .rs-sc-shirt { width: 48px; height: 48px; }
}