/* Built from the WPCode Footer box by the Utopia PHP snippet. Edit the box, not this file. */

span.mvp-blog-story-author a {
  color: #ED2733 !important;
}
span.mvp-blog-story-author a:hover {
  color: #ED2733 !important;
}
.utopia-scoreboard {
  background: #1a4982;
  color: #fff;
  padding: 14px 0 10px;
  position: relative;
  margin-top: -1px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
}
.utopia-scoreboard-select {
  flex: 0 0 auto;
  margin: 0 12px 0 6px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0 L10 0 L5 6 Z' fill='%231a4982'/></svg>") no-repeat right 6px center;
  background-size: 9px 6px;
  color: #1a4982;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 4px 18px 4px 6px;
  font-size: 12px;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.utopia-scoreboard-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.utopia-scoreboard-inner {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 0 20px;
  animation: utopia-scroll 60s linear infinite;
}
.utopia-scoreboard:hover .utopia-scoreboard-inner {
  animation-play-state: paused;
}
.utopia-score-empty {
  font-size: 13px;
  color: #c3cbd6;
  white-space: nowrap;
}
@keyframes utopia-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.utopia-score-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
}
.utopia-score-card img { width: 18px; height: 18px; }
.utopia-score-comp {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 6px;
}
.utopia-score-status {
  color: #c3cbd6;
  font-size: 11px;
  margin-left: 6px;
}
.utopia-score-live {
  color: #ED2733;
  font-weight: 700;
}
.mvp-widget-list-story1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mvp-widget-list-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mvp-widget-list-img img.mvp-reg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mvp-widget-list-text1 h2 {
  max-height: 2.6em;
  line-height: 1.3em;
  overflow: hidden;
  width: 100%;
}
.mvp-widget-list-text1 h2 a {
  display: block;
  width: 100%;
}
.mvp-widget-list-text1 p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mvp-blog-story-info {
  margin-top: auto;
  padding-top: 8px;
}
.ayvpp_video_meta {
  display: none !important;
}
/* Shared styling for the "More on X" related-posts card grid — used both by
   manually-authored grids (like the Ronaldo post) and the automatic sitewide
   version injected by JS below. */
.utopia-related-wrap {
  margin: 0;
  padding-top: 20px;
  clear: both;
  width: 100%;
  display: block;
  float: none;
  box-sizing: border-box;
}
/* Homepage "For You" is built from the theme's own section markup
   (section.mvp-body-sec-wrap > .mvp-body-sec-cont > h4.mvp-sec-head), so its
   padding, heading, underline, closing grey line and spacing all come from
   the theme. Measured 2026-09-15 against the Football section: 30px to the
   heading, 30px heading, 20px to the cards, 30px to the 1px #bbb line, 20px
   to the next section, identical. Only the card grid needs clearing below
   the floated heading. */
section.utopia-for-you .utopia-related-grid { clear: both; width: 100%; }
/* Matched exactly to the theme's own .mvp-sec-head: Oswald 14px/#222,
   15px margin-bottom. The red accent-underline below is a deliberate extra. */
.utopia-related-title {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
}
.utopia-related-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background: #ED2733;
}
.utopia-for-you-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.utopia-for-you-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background: #ED2733;
}
/* !important throughout: the /for-you/ page's content sits inside
   .mvp-post-content-in, so the theme's article-body heading styles apply
   here too and outrank this same-specificity selector by source order
   (computed size was 25.6px, not the ~17.6px asked for). */
.utopia-for-you-head h3 {
  font-size: 1.1em !important;
  font-weight: 700 !important;
  color: #07182D !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.utopia-for-you-more {
  font-size: 0.8em;
  font-weight: 700;
  color: #ED2733 !important;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.utopia-for-you-more:hover {
  text-decoration: underline;
}
/* /for-you/ page: hide the theme's native page title and share-icon rail.
   #mvp-post-soc-wrap (the icon list), NOT .mvp-post-soc-out — that outer
   div also wraps the entire content column, so hiding it hid the page's
   whole content too. */
body.page-id-15376 .mvp-post-title,
body.page-id-15376 #mvp-post-soc-wrap {
  display: none !important;
}
/* Hiding the <h1> wasn't enough — its wrapper still rendered as an empty
   block with margin-bottom:30px, which was the "huge space on top". */
body.page-id-15376 #mvp-article-head2 {
  display: none !important;
  margin: 0 !important;
}
/* .mvp-content-box carries the theme's article-reading-width cap
   (max-width:872px, auto margins) and .mvp-post-soc-in/-out carry a 72px
   offset reserving room for the share rail we just hid. */
body.page-id-15376 .mvp-content-box {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-id-15376 .mvp-post-soc-in,
body.page-id-15376 .mvp-post-soc-out {
  margin-left: 0 !important;
}
/* Side padding removed entirely (bottom kept): the outer column already
   matches a real tag page (both 760px at 1920px), but this page's own 2.5%
   side padding shrank everything INSIDE it by ~38px that a tag page's
   banner never has. */
#utopia-for-you-page {
  padding: 0 0 20px;
  box-sizing: border-box;
}
.utopia-follow-banner {
  align-items: center !important;
}
/* Static badge, not the toggleable pair — everything on this page is by
   definition already followed. */
.utopia-follow-banner .utopia-follow-btn {
  margin-left: auto;
  cursor: default;
  background: #ED2733 !important;
  border-color: #ED2733 !important;
  color: #fff !important;
}
.utopia-follow-banner .utopia-follow-btn:hover {
  background: #ED2733 !important;
}
.utopia-stories-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* width 92px, not 84 — the name label is visible, and 84 clipped multi-word
   names like "Luis Enrique" far too early. */
.utopia-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  width: 92px;
  flex-shrink: 0;
}
/* No fixed-size, overflow:hidden wrapper: that made the 3px border eat INTO
   the declared 84x84 (leaving ~78x78 of photo), a visibly tighter crop than
   the bio card, which uses content-box so the full 84x84 shows. */
.utopia-story-avatar {
  display: block;
  flex-shrink: 0;
}
/* !important on width/height: the theme's global img { max-width:100%;
   height:auto } reset otherwise wins and a non-square crest renders at its
   natural ratio, which border-radius:50% then draws as an oval. */
.utopia-story-avatar img {
  display: block;
  width: 84px !important;
  height: 84px !important;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 3px solid #ED2733;
}
/* padding 0 and NO box-sizing:border-box. Crest sources are square (512x512)
   so contain already fills the box edge-to-edge. The stale border-box left
   over from when padding existed was silently making every crest's real
   footprint 84x84 (border eaten inward) while photos render 90x90 (border
   outward) — measured live, a genuine ~6.6% size gap. */
.utopia-story-avatar img.utopia-story-avatar-logo {
  object-fit: contain;
  padding: 0;
}
.utopia-story-avatar-empty {
  background: #ccc;
  border-radius: 50%;
}
.utopia-story-avatar-empty img {
  visibility: hidden;
}
/* white: every .utopia-story renders inside the dark-blue banner, so the
   previous navy was navy-on-navy. */
.utopia-story-name {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.utopia-for-you-section {
  margin-bottom: 20px;
  scroll-margin-top: 20px;
}
/* Reserves one card row + heading so the section doesn't start at 0 and
   jump once its own per-tag fetch resolves. */
.utopia-for-you-section-skeleton {
  height: 360px;
  background: #f5f6f8;
  border-radius: 8px;
}
.utopia-for-you-empty {
  padding: 60px 0;
  text-align: center;
}
.utopia-for-you-empty h2 {
  font-size: 1.4em;
  color: #07182D;
  margin: 0 0 10px;
}
.utopia-for-you-empty p {
  color: #555;
  max-width: 480px;
  margin: 0 auto;
}
.utopia-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
  .utopia-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.utopia-related-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.utopia-related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
/* ">" (direct child), NOT a descendant "span" — as a descendant selector
   this (class+element, 0-1-1) also matched the category/date/author spans
   nested deeper and BEAT their own single-class rules (0-1-0), which is why
   every one of those pieces rendered as this same bold title style. */
.utopia-related-card > span {
  margin-top: 8px;
  font-size: 19.2px;
  font-weight: 700;
  line-height: 21.12px;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Values copied from the native "Football" widget card
   (.mvp-post-info-top / .mvp-blog-story-info). */
.utopia-related-card-meta {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.utopia-related-card-cat {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.12px;
  color: #888;
}
.utopia-related-card-date {
  font-size: 12.8px;
  font-weight: 400;
  color: #888;
}
.utopia-related-card-meta + span { margin-top: 4px; }
/* max-height is the real guarantee, not line-clamp: line-clamp needs
   display:-webkit-box to do anything, and that was being overridden back to
   plain "block" on /for-you/ (confirmed live), leaving length governed by
   nothing. max-height + overflow:hidden works under display:block too.
   line-height pinned to a known 24px so 3 x 24 = 72px is exact.
   !important on size/weight/color/margin: this <p> sits inside
   .mvp-post-content-in on /for-you/, so the theme's article-paragraph style
   (18.4px/#444 + 15px margin-bottom) outranks it by source order. */
.utopia-related-card-excerpt {
  margin: 4px 0 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  max-height: 72px !important;
  color: #555 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* 2 lines (48px = 2 x 24px) on the homepage preview and the /for-you/ page;
   "More on X" keeps 3. Two-class selectors beat the base rule's single
   class at the same !important. */
.utopia-for-you .utopia-related-card-excerpt,
#utopia-for-you-page .utopia-related-card-excerpt {
  max-height: 48px !important;
  -webkit-line-clamp: 2 !important;
}
.utopia-related-card-author {
  margin: 6px 0 0 !important;
  font-size: 14.4px !important;
  font-weight: 400 !important;
  color: #888 !important;
}
.utopia-related-card-author span {
  color: #ED2733 !important;
  font-weight: 600 !important;
}
@media (max-width: 700px) {
  .utopia-related-grid { grid-template-columns: 1fr; }
}
/* Tag/player hub-page banner. margin-top 15px matches the sidebar's own
   natural offset on the same page; margin-bottom 20px matches the theme's
   native inter-section rule. */
.utopia-hub-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 15px 0 20px;
  padding: 20px;
  background: #1a4982;
  border-radius: 10px;
  color: #fff;
}
.utopia-hub-banner img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ffffff;
  border: 3px solid #ED2733;
}
/* Same fix as .utopia-story-avatar-logo: contain, padding 0, and no
   box-sizing:border-box, so crests render the same real 90x90 footprint as
   the player photos beside them. */
.utopia-hub-banner img.utopia-hub-banner-logo {
  object-fit: contain;
  background: #ffffff;
  padding: 0;
}
.utopia-hub-banner-text h2 {
  margin: 0 0 4px !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.utopia-hub-banner-text p {
  margin: 0 0 4px;
  font-size: 0.95em;
  color: #cfd7e3;
  max-width: 640px;
}
.utopia-hub-banner-count {
  font-size: 0.8em;
  color: #c3cbd6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* font-family: inherit — <button> is one of the few elements browsers don't
   give the page font to by default, so it silently fell back to Arial. */
.utopia-follow-btn {
  font-family: inherit;
  flex-shrink: 0;
  margin-left: auto;
  background: #ED2733;
  border: 1px solid #ED2733;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.utopia-follow-btn:hover {
  background: #d81f2a;
}
.utopia-follow-btn.utopia-following {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
@media (max-width: 600px) {
  .utopia-hub-banner { flex-direction: column; align-items: flex-start; }
  .utopia-follow-btn { margin-left: 0; }
}
/* 124px = 84px avatar + 20px padding top/bottom, reserved BEFORE the fetch
   starts so the real banner replaces it in place instead of shoving the
   post list down ~2s after first paint. */
.utopia-hub-banner-skeleton {
  height: 124px;
  margin: 15px 0 20px;
  border-radius: 10px;
  background: #eef1f5;
}
/* Standings sidebar. The theme's own #mvp-side-wrap float collides with the
   article's floated share rail, so content + sidebar get wrapped in our own
   flex row instead of touching the theme's float math. */
.utopia-post-flex-wrap {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  /* .mvp-sec-pad's 30px reading gutter leaves the sidebar 30px short of the
     page's true right edge, which the header/ticker run flush to. */
  margin-right: -30px;
}
.utopia-post-flex-wrap > .mvp-post-content-in {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  margin-right: 0 !important;
}
.utopia-post-flex-wrap #mvp-side-wrap {
  order: 2;
  flex: 0 0 400px;
  width: 400px;
  float: none !important;
  margin: 0 !important;
}
/* A sidebar added through wp-admin keeps the theme's own native width. */
.utopia-post-flex-wrap #mvp-side-wrap.utopia-native-sidebar {
  flex-basis: 330px !important;
  width: 330px !important;
}
/* Measured from a real unmodified tag archive: content x=383 w=760, sidebar
   x=1193 w=330. 1140 - 330 - 760 = 50, the theme's actual native gap. And no
   edge-extension here: a native archive sidebar keeps the standard inset. */
.utopia-post-flex-wrap.utopia-flex-native {
  gap: 50px;
  margin-right: 0 !important;
}
.utopia-post-flex-wrap {
  flex-wrap: wrap;
}
.utopia-post-flex-wrap > #utopia-post-extras {
  order: 3;
  flex: 1 1 100%;
  margin-right: 0 !important;
}
@media (max-width: 768px) {
  .utopia-post-flex-wrap {
    flex-direction: column;
    /* The -30px pull is a desktop-only edge-alignment fix; on mobile it just
       pushed the column past the screen edge, clipping the text. */
    margin-right: 0;
  }
  .utopia-post-flex-wrap #mvp-side-wrap {
    flex-basis: auto;
    width: 100%;
  }
}
.utopia-featured-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 20px;
}
.utopia-side-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}
.utopia-side-card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  color: #07182D;
}
.utopia-standings-skeleton-row {
  height: 30px;
  border-bottom: 1px solid #f5f5f5;
  background: linear-gradient(90deg, #f5f5f5 25%, #eee 37%, #f5f5f5 63%);
  background-size: 400% 100%;
  animation: utopia-skeleton-pulse 1.4s ease infinite;
}
@keyframes utopia-skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.utopia-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.utopia-standings-table th {
  text-align: left;
  color: #9aa5b1;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0 6px 8px;
  border-bottom: 1px solid #eee;
}
.utopia-standings-table th.utopia-st-num,
.utopia-standings-table td.utopia-st-num {
  text-align: center;
}
.utopia-standings-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #f5f5f5;
  color: #222;
}
.utopia-standings-table tr.utopia-st-highlight td {
  background: #f7f9fc;
  font-weight: 700;
}
.utopia-standings-table img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 8px;
  object-fit: contain;
}
.utopia-standings-table td.utopia-st-team {
  white-space: nowrap;
}
/* Live Scores page: the sidebar's widgets are emptied server-side (see the
   PHP snippet), but the theme still prints the empty #mvp-side-wrap column
   and the generic flex-wrap script still reserves space beside the content.
   Collapse both so the fixtures list uses the full width instead of sitting
   next to an empty column. Scoped to this page only. */
body.page-id-14200 #mvp-side-wrap {
  display: none !important;
}
body.page-id-14200 .utopia-post-flex-wrap {
  display: block !important;
  margin-right: 0 !important;
}
/* Live Scores page (14200) inherited the single-article share-rail offset
   even though it has no share rail. */
body.page-id-14200 .mvp-post-soc-in,
body.page-id-14200 .mvp-post-soc-out {
  margin-left: 0 !important;
}
body.page-id-14200 .mvp-sec-pad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Match Center page (15782): no social share rail. #mvp-post-soc-wrap is the
   theme's 42px vertical icon column; .mvp-post-soc-out/.mvp-post-soc-in carry
   a matching -72px / +72px offset that would otherwise leave a gap. */
body.page-id-15782 #mvp-post-soc-wrap {
  display: none !important;
}
body.page-id-15782 .mvp-post-soc-out,
body.page-id-15782 .mvp-post-soc-in {
  margin-left: 0 !important;
}
/* Elementor declares this class at font-weight:800 and LiteSpeed can
   re-inject that stylesheet AFTER this block, so specificity is boosted
   (html body ...) to win regardless of load order. */
html body .utopia-ls-scoreval,
html body span.utopia-ls-scoreval {
  font-weight: 700 !important;
  color: #222222 !important;
}
/* The theme's media-queries.css hides the "More Football" link on <=479px. */
span.mvp-widget-head-link {
  display: inline !important;
}
@media (max-width: 479px) {
  .mvp-sec-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  span.mvp-widget-head-link a {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 800px) {
  .mvp-blog-story-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .mvp-blog-story-wrap > a {
    flex: 0 0 110px !important;
    width: 110px !important;
  }
  .mvp-blog-story-img {
    width: 110px !important;
    height: 70px !important;
    float: none !important;
    overflow: hidden !important;
  }
  .mvp-blog-story-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .mvp-blog-story-text {
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
  }
  .mvp-widget-list-story1 {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    height: auto !important;
  }
  .mvp-widget-list-img {
    position: relative !important;
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 90px !important;
    float: none !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
  }
  /* The theme swaps to a SEPARATE .mvp-mob-img element on real mobile
     devices via its own media-queries.css. Both are styled so whichever
     one it actually shows ends up sized correctly. */
  .mvp-widget-list-img img.mvp-reg-img,
  .mvp-widget-list-img img.mvp-mob-img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
  }
  .mvp-widget-list-text1 {
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
  }
  .mvp-blog-story-img {
    position: relative !important;
    overflow: hidden !important;
  }
  .mvp-blog-story-img img.mvp-reg-img,
  .mvp-blog-story-img img.mvp-mob-img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
  }
}

/* ===== YouTube nav link + watch-page CTA ===== */

/* "YouTube" item in the primary nav (markup added by the PHP snippet's
   wp_nav_menu_items filter). Channel red so it reads as an outbound
   destination rather than another site section. */
.utopia-yt-nav-item a.utopia-yt-nav {
  color: #ED2733 !important;
  font-weight: 700;
}
.utopia-yt-nav-item a.utopia-yt-nav::after {
  content: ' \2197';
  font-size: 0.85em;
  display: inline-block;
}

/* "Watch on YouTube" / "Subscribe" buttons under the player on video posts
   (markup added by the PHP snippet's the_content filter at priority 25).
   Red = primary action, outlined = secondary, so they don't read as two
   competing buttons of equal weight. */
.utopia-yt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.utopia-yt-cta a {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.utopia-yt-cta a.utopia-yt-cta-watch {
  background: #ED2733;
  color: #fff !important;
  border: 1px solid #ED2733;
}
.utopia-yt-cta a.utopia-yt-cta-watch:hover { background: #d81f2a; }
.utopia-yt-cta a.utopia-yt-cta-sub {
  background: transparent;
  color: #07182D !important;
  border: 1px solid #d5d9e0;
}
.utopia-yt-cta a.utopia-yt-cta-sub:hover { border-color: #07182D; }
@media (max-width: 480px) {
  .utopia-yt-cta a { flex: 1 1 100%; text-align: center; }
}


.utopia-mobile-comment-form {
  margin-top: 16px;
  padding: 20px;
  background: #f7f7f9;
  border-radius: 8px;
}
.utopia-mobile-comment-form h3 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 12px;
}
.utopia-mobile-comment-form input,
.utopia-mobile-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95em;
  font-family: inherit;
}
.utopia-mobile-comment-form textarea {
  min-height: 90px;
  resize: vertical;
}
.utopia-mobile-comment-form button {
  background: #ED2733;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
}
.utopia-mobile-comment-form .utopia-comment-msg {
  margin-top: 10px;
  font-size: 0.9em;
}


/* ── LIVE CENTER ─────────────────────────────────────────────────────────
   Deliberately mirrors the existing .utopia-ls-* design system used on the
   Live Scores page — same tokens, same row geometry, same type scale — so
   the two read as one product rather than two. Values copied rather than
   inherited: .utopia-ls-* is defined in a different snippet, and depending
   on another snippet's CSS would break this the moment that one changes.

   Tokens:  ink #07182D | text #222 | muted #888 | faint #aaa
            live #ED2733 | card #fff | border #eee | divider #f2f2f2
            head #f8f9fa | hover #fafbfc | radius 8px                      */

.utopia-lc, .utopia-lc * { box-sizing: border-box; max-width: 100%; }

.utopia-lc {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 12px;
}

/* League card ---------------------------------------------------------- */

.utopia-lc-league {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.utopia-lc-league-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.utopia-lc-league-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.utopia-lc-league-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.utopia-lc-league-head h2 {
  margin: 0 !important;
  font-size: 15px !important;
  color: #07182D !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

.utopia-lc-league-head .utopia-lc-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Match row ------------------------------------------------------------ */

.utopia-lc-match {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #f2f2f2;
  min-width: 0;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.utopia-lc-match:last-of-type { border-bottom: none; }
.utopia-lc-match:hover { background: #fafbfc; }
.utopia-lc-match:focus-visible { outline: 2px solid #07182D; outline-offset: -2px; }

.utopia-lc-status {
  width: 36px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
}
.utopia-lc-status.live { color: #ED2733; }

.utopia-lc-status .utopia-lc-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ED2733;
  margin-right: 3px;
  vertical-align: middle;
  animation: utopia-lc-pulse 1.6s ease-in-out infinite;
}
@keyframes utopia-lc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  .utopia-lc-status .utopia-lc-dot { animation: none; }
}

.utopia-lc-teams {
  display: grid;
  grid-template-columns: 1fr 22px minmax(90px, auto) 22px 1fr;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.utopia-lc-team-name {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.utopia-lc-team-name.away { text-align: left; }

.utopia-lc-teams img { width: 22px; height: 22px; object-fit: contain; }

.utopia-lc-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.utopia-lc-scoreval {
  font-size: 19px;
  font-weight: 700;
  color: #222;
  font-variant-numeric: tabular-nums;
}

.utopia-lc-kickoff {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
}

.utopia-lc-caret {
  flex: 0 0 12px;
  color: #ccc;
  font-size: 10px;
  transition: transform .15s ease;
}
.utopia-lc-match[aria-expanded="true"] .utopia-lc-caret {
  transform: rotate(90deg);
  color: #888;
}
@media (prefers-reduced-motion: reduce) {
  .utopia-lc-caret { transition: none; }
}

/* Timeline ------------------------------------------------------------- */

.utopia-lc-timeline {
  padding: 10px 16px 14px 66px;
  background: #fafbfc;
  border-bottom: 1px solid #f2f2f2;
}

.utopia-lc-ev {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: #222;
}

.utopia-lc-ev-min {
  flex: 0 0 34px;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.utopia-lc-ev-icon { flex: 0 0 18px; text-align: center; font-size: 12px; }

.utopia-lc-ev-card {
  display: inline-block;
  width: 9px; height: 12px;
  border-radius: 1px;
  vertical-align: -1px;
}
.utopia-lc-ev-card.yellow { background: #f5c518; }
.utopia-lc-ev-card.red    { background: #ED2733; }

.utopia-lc-ev-var {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #888;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1px 3px;
}

.utopia-lc-ev-text { flex: 1 1 auto; min-width: 0; }
.utopia-lc-ev-sub { color: #888; font-size: 12px; font-weight: 400; }
.utopia-lc-ev-none { color: #aaa; font-size: 13px; padding: 4px 0; }

/* Empty / loading ------------------------------------------------------ */

.utopia-lc-empty,
.utopia-lc-loading {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 13px;
}

.utopia-lc-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.utopia-lc-sectionhead h2 {
  margin: 0 !important;
  font-size: 16px !important;
  color: #07182D !important;
  font-weight: 700 !important;
}
.utopia-lc-updated { font-size: 11px; color: #aaa; white-space: nowrap; }

.utopia-lc-schedule { margin-top: 26px; }
.utopia-lc-schedule .utopia-lc-match { cursor: default; }
.utopia-lc-schedule .utopia-lc-match:hover { background: none; }

/* Mobile — mirrors the .utopia-ls-* breakpoint values exactly ----------- */

@media (max-width: 767px) {
  .utopia-lc { padding: 8px; }
  .utopia-lc-match { padding: 10px 8px; gap: 6px; }
  .utopia-lc-status { width: 22px; flex: 0 0 22px; font-size: 10px; }
  .utopia-lc-teams { grid-template-columns: 1fr 18px minmax(64px, auto) 18px 1fr; gap: 6px; }
  .utopia-lc-teams img { width: 18px; height: 18px; }
  .utopia-lc-team-name { font-size: 12px; }
  .utopia-lc-kickoff { font-size: 10px; }
  .utopia-lc-scoreval { font-size: 15px; }
  .utopia-lc-timeline { padding-left: 36px; }
  .utopia-lc-league-head { padding: 10px 12px; }
}


/* ── MATCH DETAIL STYLES ─────────────────────────────────────────────────
   Timeline, stats bars, pitch and head-to-head rows used by the match page.
   (They came from the Match Center block; its drop-down front-end was
   replaced by the scoreboard.)                                           */

.utopia-lc-parthead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #f2f2f2;
  font-size: 12px; font-weight: 700; color: #07182D;
}
.utopia-lc-parthead span:last-child { text-align: right; }

/* Timeline: home events left of the minute, away events right. */
.utopia-lc-tl-row {
  display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center;
  padding: 5px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; color: #222;
}
.utopia-lc-tl-row:last-child { border-bottom: 0; }
.utopia-lc-tl-min { text-align: center; font-size: 12px; font-weight: 700; color: #888; font-variant-numeric: tabular-nums; }
.utopia-lc-tl-home, .utopia-lc-tl-away { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.utopia-lc-tl-home { justify-content: flex-end; text-align: right; }
.utopia-lc-tl-home .utopia-lc-ev-icon { order: 2; }

/* Stats: value / label / value, split bar underneath. */
.utopia-lc-stat { padding: 7px 0; }
.utopia-lc-stat-top { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; font-size: 13px; }
.utopia-lc-stat-v { font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.utopia-lc-stat-v:last-child { text-align: right; }
.utopia-lc-stat-l { text-align: center; color: #888; font-size: 12px; }
.utopia-lc-stat-bar { display: flex; gap: 3px; height: 6px; margin-top: 5px; }
.utopia-lc-stat-bar span { display: block; border-radius: 3px; min-width: 0; }
.utopia-lc-stat-bar .h { background: #07182D; }
.utopia-lc-stat-bar .a { background: #aab2bd; }
.utopia-lc-stat.zero .utopia-lc-stat-bar span { background: #eee; }

/* Line-ups: vertical pitch, away at the top, home at the bottom. */
/* Specificity raised on purpose: the older Live Center block sets
   .utopia-lc * { max-width: 100% } at equal weight, and in a browser test
   that rule won and drew the pitch 600x863px on desktop. */
.utopia-lc .utopia-lc-lu { max-width: 380px; margin: 0 auto; }
.utopia-lc-pitch { display: block; width: 100%; height: auto; }
.utopia-lc-pitch .turf { fill: #3f8054; }
.utopia-lc-pitch .lines * { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.utopia-lc-pitch .h circle { fill: #07182D; stroke: #fff; stroke-width: 1.5; }
.utopia-lc-pitch .a circle { fill: #fff; stroke: #07182D; stroke-width: 1.5; }
.utopia-lc-pitch text { text-anchor: middle; font-family: inherit; }
.utopia-lc-pitch text.n { font-size: 10px; font-weight: 700; }
.utopia-lc-pitch .h text.n { fill: #fff; }
.utopia-lc-pitch .a text.n { fill: #07182D; }
.utopia-lc-pitch text.s {
  font-size: 9px; font-weight: 700; fill: #fff;
  paint-order: stroke; stroke: rgba(0,0,0,.5); stroke-width: 2.5px;
}
.utopia-lc-lu-team { font-size: 12px; color: #888; padding: 8px 2px; text-align: center; }
.utopia-lc-lu-team b { color: #07182D; }
.utopia-lc-lu-team i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.utopia-lc-lu-team i.h { background: #07182D; }
.utopia-lc-lu-team i.a { background: #fff; border: 1.5px solid #07182D; }
.utopia-lc-lu-team span { margin-left: 6px; }
.utopia-lc-lu-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; font-size: 12px; color: #444; }
.utopia-lc-lu-subs-h { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.utopia-lc-lu-subs div + div { padding-top: 2px; }

/* Head to head: neutral — the winner's name is bold, no W/D/L from one side. */
.utopia-lc-h2h-row {
  display: grid; grid-template-columns: 96px 1fr auto 1fr; gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; color: #444;
}
.utopia-lc-h2h-row:last-child { border-bottom: 0; }
.utopia-lc-h2h-date { font-size: 12px; color: #888; font-variant-numeric: tabular-nums; }
.utopia-lc-h2h-home, .utopia-lc-h2h-away { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.utopia-lc-h2h-home { text-align: right; }
.utopia-lc-h2h-home.win, .utopia-lc-h2h-away.win { font-weight: 700; color: #222; }
.utopia-lc-h2h-sc { font-weight: 700; color: #07182D; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utopia-lc-h2h-comp { grid-column: 2 / 5; font-size: 11px; color: #aaa; text-align: center; margin-top: -4px; }

@media (max-width: 767px) {
  .utopia-lc-tl-row { grid-template-columns: 1fr 40px 1fr; font-size: 12px; }
  .utopia-lc-h2h-row { grid-template-columns: 1fr auto 1fr; }
  .utopia-lc-h2h-date { grid-column: 1 / 4; text-align: center; }
  .utopia-lc-h2h-comp { grid-column: 1 / 4; }
}


/* ── MATCH WIDGET ────────────────────────────────────────────────────────
   Appended to the BOTTOM of the theme's #mvp-side-wrap on single posts,
   under whatever already sits there. Reuses .utopia-side-card so it reads
   as a sibling of the standings card, not a second design.

   The sidebar is ~330px, so the teams stack vertically here rather than
   using the Live Center's horizontal row — that layout needs width the
   sidebar does not have.                                                 */

.utopia-mw { padding: 0 !important; overflow: hidden; }

.utopia-mw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}
.utopia-mw-head img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
.utopia-mw-comp {
  font-size: 11px;
  font-weight: 700;
  color: #07182D;
  text-transform: uppercase;
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utopia-mw-body { padding: 12px 14px 4px; }

.utopia-mw-team {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
}
.utopia-mw-team img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }

.utopia-mw-name {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.utopia-mw-team.beaten .utopia-mw-name { color: #888; }

.utopia-mw-score {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  font-variant-numeric: tabular-nums;
}
.utopia-mw-team.beaten .utopia-mw-score { color: #888; }

.utopia-mw-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px 12px;
  border-top: 1px solid #f2f2f2;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
}
.utopia-mw-foot.live { color: #ED2733; }

.utopia-mw-foot .utopia-mw-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ED2733;
  animation: utopia-mw-pulse 1.6s ease-in-out infinite;
}
@keyframes utopia-mw-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .utopia-mw-foot .utopia-mw-dot { animation: none; } }

.utopia-mw-events {
  padding: 0 14px 12px;
  border-top: 1px solid #f2f2f2;
}
.utopia-mw-ev {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: #222;
}
.utopia-mw-ev-min {
  flex: 0 0 28px;
  color: #888;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.utopia-mw-ev-icon { flex: 0 0 14px; text-align: center; font-size: 11px; }
.utopia-mw-ev-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utopia-mw-card {
  display: inline-block;
  width: 7px; height: 10px;
  border-radius: 1px;
  vertical-align: -1px;
}
.utopia-mw-card.yellow { background: #f5c518; }
.utopia-mw-card.red    { background: #ED2733; }

/* Venue ---------------------------------------------------------------- */

.utopia-mw-venue {
  padding: 0 14px 10px;
  font-size: 11px;
  color: #888;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Head to head --------------------------------------------------------- */

.utopia-mw-h2h { border-top: 1px solid #eee; background: #fcfcfd; }

.utopia-mw-h2h-title {
  padding: 9px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.utopia-mw-h2h-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 11px;
  color: #444;
}
.utopia-mw-h2h-row:last-child { padding-bottom: 12px; }

.utopia-mw-h2h-date {
  flex: 0 0 52px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

.utopia-mw-h2h-tie {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utopia-mw-h2h-sc {
  font-weight: 700;
  color: #222;
  font-variant-numeric: tabular-nums;
}

/* W / D / L from the perspective of the club the post is about. */
.utopia-mw-h2h-res {
  flex: 0 0 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.utopia-mw-h2h-res.w { background: #2e9e5b; }
.utopia-mw-h2h-res.d { background: #aab2bd; }
.utopia-mw-h2h-res.l { background: #ED2733; }


/* ── MATCH PAGE (/match/<id>/<slug>/) ────────────────────────────────────
   Same tokens as the Live Scores page: ink #07182D, text #222, muted #888,
   live #ED2733, card #fff / #eee / 8px, band #f8f9fa. Timeline, stats bars,
   pitch and head-to-head rows reuse the unscoped .utopia-lc-* rules from the
   Match Center block above — keep those class names if that block changes. */

.utopia-mp-wrap { max-width: 1200px; margin: 24px auto 40px; padding: 0 16px; box-sizing: border-box; }
.utopia-mp, .utopia-mp * { box-sizing: border-box; }
.utopia-mp { color: #222; }
.utopia-mp-loading, .utopia-mp-empty {
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 40px 20px; text-align: center; color: #888; font-size: 14px;
}
.utopia-mp-empty p { margin: 0 0 6px; }
.utopia-mp-muted { color: #888; font-size: 13px; margin: 0; }
.utopia-mp-note { margin: 0; font-size: 14px; line-height: 1.5; color: #07182D; }

.utopia-mp-head {
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 16px 20px 18px; margin-bottom: 16px; text-align: center;
}
.utopia-mp-comp {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px;
}
.utopia-mp-comp img { width: 20px; height: 20px; object-fit: contain; }
.utopia-mp-scoreline {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 16px; margin-top: 12px;
}
.utopia-mp-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.utopia-mp-team.home { justify-content: flex-end; text-align: right; }
.utopia-mp-team.away { justify-content: flex-start; text-align: left; }
.utopia-mp-team img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.utopia-mp-team-name { font-size: 20px; font-weight: 700; color: #07182D; line-height: 1.2; overflow-wrap: anywhere; }
.utopia-mp-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; }
.utopia-mp-mid-score { display: flex; align-items: center; gap: 10px; }
.utopia-mp-sc { font-size: 44px; font-weight: 700; color: #07182D; line-height: 1; font-variant-numeric: tabular-nums; }
.utopia-mp-dash { font-size: 28px; color: #aaa; line-height: 1; }
.utopia-mp-vs { font-size: 20px; font-weight: 700; color: #aaa; }
.utopia-mp-status { font-size: 12px; font-weight: 700; color: #888; white-space: nowrap; }
.utopia-mp-status.live { color: #ED2733; }
.utopia-mp-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ED2733;
  margin-right: 5px; vertical-align: 1px; animation: utopia-lc-pulse 1.6s ease-in-out infinite;
}
.utopia-mp-scorers {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2f2f2; font-size: 13px; color: #444;
}
.utopia-mp-scorers .home { text-align: right; }
.utopia-mp-scorers .away { text-align: left; }
.utopia-mp-h1 {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; padding: 0 !important;
}

.utopia-mp-watch {
  display: flex; align-items: center; gap: 14px; background: #07182D; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; text-decoration: none !important;
}
.utopia-mp-watch img { width: 120px; height: 68px; object-fit: cover; border-radius: 4px; flex: 0 0 120px; }
.utopia-mp-watch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: left; }
.utopia-mp-watch-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #ED2733; }
.utopia-mp-watch-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; }
.utopia-mp-watch-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; background: #ED2733; color: #fff; border-radius: 20px; padding: 7px 14px; }

.utopia-mp-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.utopia-mp-main, .utopia-mp-left, .utopia-mp-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .utopia-mp-grid { grid-template-columns: 300px minmax(0,1fr) 320px; grid-template-areas: "left main right"; align-items: start; }
  .utopia-mp-left { grid-area: left; }
  .utopia-mp-main { grid-area: main; }
  .utopia-mp-right { grid-area: right; }
}

.utopia-mp-card { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; scroll-margin-top: 90px; }
:is(.utopia-mp, .utopia-club) .utopia-mp-card-title {
  margin: 0 !important; padding: 12px 16px !important; background: #f8f9fa; border-bottom: 1px solid #eee;
  font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important;
  color: #07182D !important; text-transform: none !important; letter-spacing: normal !important;
}
.utopia-mp-card-body { padding: 14px 16px; }

.utopia-mp-motm { font-size: 13px; color: #444; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #f2f2f2; }
.utopia-mp-leaders-row {
  display: grid; grid-template-columns: minmax(0,1fr) 110px minmax(0,1fr); align-items: center;
  gap: 8px; padding: 9px 0; border-bottom: 1px solid #f5f5f5;
}
.utopia-mp-leaders-row:last-child { border-bottom: 0; }
.utopia-mp-leader { display: flex; flex-direction: column; min-width: 0; }
.utopia-mp-leader.away { align-items: flex-end; text-align: right; }
.utopia-mp-leader-val { font-size: 20px; font-weight: 700; color: #07182D; line-height: 1.1; font-variant-numeric: tabular-nums; }
.utopia-mp-leader-name { font-size: 13px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.utopia-mp-leader-note { font-size: 11px; color: #888; }
.utopia-mp-leader-label { text-align: center; font-size: 12px; font-weight: 700; color: #888; }

.utopia-mp-subs-side + .utopia-mp-subs-side { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2f2f2; }
.utopia-mp-subs-team { font-size: 12px; font-weight: 700; color: #07182D; margin-bottom: 6px; }
.utopia-mp-sub { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; }
.utopia-mp-sub-min { flex: 0 0 34px; color: #888; font-weight: 700; font-variant-numeric: tabular-nums; }
.utopia-mp-sub-names { display: flex; flex-direction: column; min-width: 0; }
.utopia-mp-in { color: #2e9e5b; font-size: 10px; margin-right: 4px; }
.utopia-mp-out { color: #ED2733; font-size: 10px; margin-right: 4px; }
.utopia-mp-sub-names .off { color: #888; }

.utopia-mp-info { margin: 0; }
.utopia-mp-info div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
.utopia-mp-info div:last-child { border-bottom: 0; }
.utopia-mp-info dt { color: #888; margin: 0; }
.utopia-mp-info dd { margin: 0; text-align: right; font-weight: 700; color: #222; }

.utopia-mp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.utopia-mp-table th { font-weight: 700; color: #888; text-align: right; padding: 6px 4px; border-bottom: 1px solid #eee; }
.utopia-mp-table th.team, .utopia-mp-table td.team { text-align: left; }
.utopia-mp-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid #f5f5f5; font-variant-numeric: tabular-nums; color: #444; }
.utopia-mp-table td.team span { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.utopia-mp-table td.team img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.utopia-mp-table tr.mark td { background: #f8f9fa; font-weight: 700; color: #07182D; }
.utopia-mp-table tr.gap td { text-align: center; color: #ccc; padding: 2px; }

/* Video widget (same look as the scores page's Latest Training Videos). */
.utopia-mp-player { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
:is(.utopia-mp, .utopia-club) button.utopia-mp-play {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0;
  border-radius: 0; background: #000; cursor: pointer; box-shadow: none; min-height: 0;
}
.utopia-mp-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.utopia-mp-play-icon {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(7, 24, 45, .85);
}
.utopia-mp-play-icon::after {
  content: ''; position: absolute; left: 20px; top: 15px; border-style: solid;
  border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff;
}
.utopia-mp-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
:is(.utopia-mp, .utopia-club) .utopia-mp-vlist { list-style: none; margin: 0 !important; padding: 0 !important; }
:is(.utopia-mp, .utopia-club) .utopia-mp-vlist li { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid #f2f2f2; }
:is(.utopia-mp, .utopia-club) .utopia-mp-vlist li:first-child { border-top: 0; }
:is(.utopia-mp, .utopia-club) .utopia-mp-vlist li::before { content: none; }
:is(.utopia-mp, .utopia-club) button.utopia-mp-vitem {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: #fff;
  border: 0; border-radius: 0; padding: 11px 16px; margin: 0; cursor: pointer; font: inherit; color: #222;
  box-shadow: none; min-height: 0; height: auto; text-transform: none; letter-spacing: normal; line-height: 1.3;
}
:is(.utopia-mp, .utopia-club) button.utopia-mp-vitem.is-current { background: #f4f6f9; }
.utopia-mp-vicon {
  flex: 0 0 auto; margin-top: 3px; width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #07182D;
}
.utopia-mp-vtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.utopia-mp-vtitle { font-size: 13px; font-weight: 700; color: #222; }
:is(.utopia-mp, .utopia-club) button.utopia-mp-vitem.is-current .utopia-mp-vtitle { color: #ED2733; }
.utopia-mp-vdur { font-size: 12px; color: #888; }
.utopia-mp-hl-meta { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px; }
:is(.utopia-mp, .utopia-club) a.utopia-mp-play {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: #000; text-decoration: none !important;
}
.utopia-mp-hl-msg {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px 10px; color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(rgba(7, 24, 45, 0), rgba(7, 24, 45, .85));
}
@media (hover: hover) {
  :is(.utopia-mp, .utopia-club) button.utopia-mp-vitem:hover .utopia-mp-vtitle { color: #ED2733; }
  :is(.utopia-mp, .utopia-club) button.utopia-mp-play:hover .utopia-mp-play-icon { background: #ED2733; }
  :is(.utopia-mp, .utopia-club) a.utopia-mp-play:hover .utopia-mp-play-icon { background: #ED2733; }
}

/* Head to head (ESPN-style): both clubs across the top, one row per meeting.
   Winner's score in navy with a marker, the other in the scoreboard's grey. */
.utopia-mp-h2h-head, .utopia-mp-h2h-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.utopia-mp-h2h-head { padding-bottom: 12px; border-bottom: 1px solid #eee; }
.utopia-mp-h2h-team { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.utopia-mp-h2h-team img { width: 32px; height: 32px; object-fit: contain; }
.utopia-mp-h2h-team b { font-size: 12px; font-weight: 700; color: #07182D; letter-spacing: .03em; }
.utopia-mp-h2h-title { text-align: center; font-size: 14px; font-weight: 700; color: #07182D; }
.utopia-mp-h2h-row { padding: 12px 0; border-bottom: 1px solid #f2f2f2; }
.utopia-mp-h2h-row:last-child { border-bottom: 0; padding-bottom: 0; }
.utopia-mp-h2h-sc {
  position: relative; text-align: center; font-size: 20px; font-weight: 700; line-height: 1;
  color: #8a9099; font-variant-numeric: tabular-nums;
}
.utopia-mp-h2h-sc.strong { color: #07182D; }
.utopia-mp-h2h-win { position: absolute; top: 50%; margin-top: -5px; width: 0; height: 0; border-style: solid; }
.utopia-mp-h2h-win.home { left: calc(50% + 10px); border-width: 5px 7px 5px 0; border-color: transparent #07182D transparent transparent; }
.utopia-mp-h2h-win.away { right: calc(50% + 10px); border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #07182D; }
.utopia-mp-h2h-mid { display: flex; flex-direction: column; gap: 2px; text-align: center; font-size: 12px; color: #888; line-height: 1.35; min-width: 0; }
.utopia-mp-h2h-comp { font-weight: 700; color: #444; }

/* Match prediction ("Who will win?"), same tokens as the page. */
.utopia-mp .utopia-mp-pred-q { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #07182D; }
.utopia-mp-pred-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.utopia-mp button.utopia-mp-pred-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 12px 6px; margin: 0; background: #fff; border: 1.5px solid #07182D; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; color: #07182D;
  box-shadow: none; min-height: 0; height: auto; text-transform: none; letter-spacing: normal;
}
.utopia-mp-pred-btn span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utopia-mp-pred-btn img { width: 32px; height: 32px; object-fit: contain; }
.utopia-mp-pred-draw {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: #eef0f2; color: #6b7280; font-size: 13px;
}
.utopia-mp button.utopia-mp-pred-btn[disabled] { opacity: .55; cursor: default; }
.utopia-mp-pred-row + .utopia-mp-pred-row { margin-top: 10px; }
.utopia-mp-pred-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: #222; }
.utopia-mp-pred-bar { height: 8px; border-radius: 4px; background: #eef0f2; overflow: hidden; }
.utopia-mp-pred-bar span { display: block; height: 100%; border-radius: 4px; background: #07182D; }
.utopia-mp-pred-row.is-draw .utopia-mp-pred-bar span { background: #8a9099; }
.utopia-mp-pred-row.is-away .utopia-mp-pred-bar span { background: #ED2733; }
.utopia-mp-pred-chip {
  display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 10px; vertical-align: 1px;
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #fff; background: #07182D;
}
.utopia-mp-pred-chip.is-result { background: #2e9e5b; }
.utopia-mp .utopia-mp-pred-note { margin: 10px 0 0; }
@media (hover: hover) {
  .utopia-mp button.utopia-mp-pred-btn:not([disabled]):hover { background: #07182D; color: #fff; }
}

.utopia-mp-related a { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; text-decoration: none !important; }
.utopia-mp-related a:last-child { border-bottom: 0; }
.utopia-mp-related img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; flex: 0 0 96px; }
.utopia-mp-related-title { font-size: 13px; font-weight: 700; color: #222; line-height: 1.3; }
.utopia-mp-related a:hover .utopia-mp-related-title { color: #ED2733; }
.utopia-mp-related-date { display: block; font-size: 11px; color: #888; margin-top: 3px; font-weight: 400; }

/* Link into the match page from the post widget. */
.utopia-mw-more {
  display: block; text-align: center; padding: 10px 14px 12px; border-top: 1px solid #eee;
  font-size: 12px; font-weight: 700; color: #07182D !important; text-decoration: none !important;
}
.utopia-mw-more:hover { color: #ED2733 !important; }
/* Vote inside the post sidebar's match card. */
.utopia-mw-pred { margin: 8px 14px 6px; padding-top: 12px; border-top: 1px solid #f2f2f2; }
.utopia-mw-pred-q { margin-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.utopia-mw-pred-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.utopia-mw button.utopia-mw-pred-btn {
  min-width: 0; padding: 8px 4px; margin: 0; background: #fff; border: 1.5px solid #07182D; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; color: #07182D;
  box-shadow: none; min-height: 0; height: auto; text-transform: none; letter-spacing: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.utopia-mw button.utopia-mw-pred-btn[disabled] { opacity: .55; cursor: default; }
.utopia-mw-pred-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 36px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.utopia-mw-pred-row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #222; }
.utopia-mw-pred-row .b { height: 6px; border-radius: 3px; background: #eef0f2; overflow: hidden; }
.utopia-mw-pred-row .b i { display: block; height: 100%; border-radius: 3px; background: #07182D; }
.utopia-mw-pred-row.is-draw .b i { background: #8a9099; }
.utopia-mw-pred-row.is-away .b i { background: #ED2733; }
.utopia-mw-pred-row .v { text-align: right; font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.utopia-mw-pred-note { margin-top: 6px; font-size: 11px; color: #6b7280; }
@media (hover: hover) {
  .utopia-mw button.utopia-mw-pred-btn:not([disabled]):hover { background: #07182D; color: #fff; }
}

@media (max-width: 767px) {
  .utopia-mp-wrap { margin-top: 12px; padding: 0 10px; }
  .utopia-mp-head { padding: 12px 10px 14px; }
  .utopia-mp-scoreline { gap: 8px; }
  .utopia-mp-team, .utopia-mp-team.home, .utopia-mp-team.away { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
  .utopia-mp-team.home { flex-direction: column-reverse; }
  .utopia-mp-team img { width: 44px; height: 44px; flex-basis: 44px; }
  .utopia-mp-team-name { font-size: 14px; }
  .utopia-mp-sc { font-size: 32px; }
  .utopia-mp-mid { min-width: 84px; }
  .utopia-mp-scorers { font-size: 12px; gap: 8px; }
  .utopia-mp-watch img { width: 80px; height: 45px; flex-basis: 80px; }
  .utopia-mp-watch-cta { display: none; }
  .utopia-mp-leaders-row { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { .utopia-mp-dot { animation: none; } }


/* ── SCOREBOARD ([utopia_live_center]) ───────────────────────────────────
   ESPN's scoreboard layout in the site's tokens: ink #07182D, text #222,
   muted #6b7280, accent #ED2733, white cards on a grey page. */

body.utopia-sb-page #mvp-main-body-wrap { background: #f1f2f4; }
/* The theme's content column is narrower than its wrapper and floated left with
   no margin, so below full desktop width the cards touched the left edge.
   Centre it at every width. */
body.utopia-sb-page .mvp-sec-pad { float: none !important; margin-left: auto !important; margin-right: auto !important; }
body.utopia-sb-page #mvp-article-wrap,
body.utopia-sb-page .mvp-sec-pad { background: transparent !important; }
body.utopia-sb-page #mvp-article-head2,
body.utopia-sb-page #mvp-post-soc-wrap,
body.utopia-sb-page #mvp-side-wrap { display: none !important; }
body.utopia-sb-page .mvp-post-content-out,
body.utopia-sb-page .utopia-post-flex-wrap,
body.utopia-sb-page .mvp-post-content-in,
body.utopia-sb-page #mvp-post-content,
body.utopia-sb-page .mvp-content-box,
body.utopia-sb-page .mvp-post-soc-out,
body.utopia-sb-page .mvp-post-soc-in,
body.utopia-sb-page #mvp-content-main,
body.utopia-sb-page .theiaPostSlider_slides,
body.utopia-sb-page .theiaPostSlider_preloadedSlide {
  width: 100% !important; max-width: 1200px !important; margin-left: 0 !important; margin-right: 0 !important;
}

.utopia-sb, .utopia-sb * { box-sizing: border-box; }
.utopia-sb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; color: #222; text-align: left; }
@media (min-width: 1100px) {
  .utopia-sb { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
}
.utopia-sb-main, .utopia-sb-side { min-width: 0; }
.utopia-sb-card {
  background: #fff; border: 1px solid #e4e6ea; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(7, 24, 45, .04); overflow: hidden;
}
.utopia-sb-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Theme button styles must not leak in. */
.utopia-sb button {
  font: inherit; text-transform: none; letter-spacing: normal; line-height: 1.2;
  box-shadow: none; margin: 0; min-height: 0; height: auto; border-radius: 0;
}

/* Title, league picker, date strip */
.utopia-sb-top { padding: 14px 16px 0; margin-bottom: 18px; }
.utopia-sb-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.utopia-sb .utopia-sb-title {
  margin: 0 !important; padding: 0 !important; font-size: 26px !important; line-height: 1.2 !important;
  font-weight: 700 !important; color: #07182D !important; text-transform: none !important; letter-spacing: normal !important;
}
/* Picker sits at the right of the title, as on ESPN. The theme gives the page's h1
   width:100%, which pushed the picker onto its own line. */
.utopia-sb .utopia-sb-titlebar .utopia-sb-title { width: auto !important; flex: 1 1 auto; min-width: 0; }
.utopia-sb .utopia-sb-league { display: block; flex: 0 1 auto; width: auto !important; min-width: 0; max-width: 55%; margin: 0 0 0 auto !important; padding: 0; }
/* Our own chevron: the browser's native arrow sat low against the right edge. */
.utopia-sb .utopia-sb-league select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; color: #07182D;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23ED2733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px !important;
  border: 1.5px solid #07182D; border-radius: 18px; padding: 7px 36px 7px 14px;
  height: auto; margin: 0; max-width: 100%; cursor: pointer; box-shadow: none;
}
/* No extra ring around the picker when it's clicked (asked for 2026-09-15). */
.utopia-sb .utopia-sb-league select:focus, .utopia-sb .utopia-sb-league select:focus-visible { outline: none; box-shadow: none; }
.utopia-sb-dates { display: flex; align-items: stretch; margin-top: 12px; border-top: 1px solid #eef0f2; }
.utopia-sb button.utopia-sb-arrow {
  flex: 0 0 34px; background: none; border: 0; color: #07182D; font-size: 26px; cursor: pointer; padding: 0;
}
.utopia-sb-days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
.utopia-sb button.utopia-sb-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0;
  border-bottom: 3px solid transparent; padding: 9px 2px 7px; cursor: pointer; color: #6b7280;
}
.utopia-sb-day .d1 { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.utopia-sb-day .d2 { font-size: 11px; text-transform: uppercase; }
.utopia-sb button.utopia-sb-day.is-active { color: #07182D; border-bottom-color: #ED2733; }
.utopia-sb button.utopia-sb-day.is-active .d1 { font-weight: 800; }
.utopia-sb-cal {
  position: relative; flex: 0 0 48px; display: flex; align-items: center; justify-content: center;
  color: #07182D; border-left: 1px solid #eef0f2; margin: 0; cursor: pointer;
}
.utopia-sb-cal input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.utopia-sb .utopia-sb-dayhead {
  margin: 0 0 10px 2px !important; padding: 0 !important; font-size: 17px !important; line-height: 1.3 !important;
  font-weight: 700 !important; color: #222 !important; text-transform: none !important; letter-spacing: normal !important;
}

/* Competition card */
.utopia-sb-comp { margin-bottom: 14px; }
.utopia-sb-comp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.utopia-sb-comp-head img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.utopia-sb .utopia-sb-comp-name {
  margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1.3 !important;
  font-weight: 700 !important; color: #07182D !important; text-transform: none !important; letter-spacing: normal !important;
}

/* Match row: status | teams | [headline or venue] | scorers | buttons */
.utopia-sb-row {
  display: grid; grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr) 108px;
  gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid #eef0f2;
}
.utopia-sb-info { display: none; }
@media (min-width: 1100px) {
  .utopia-sb-row { grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.1fr) 104px; }
  .utopia-sb-info { display: block; }
}
.utopia-sb-status { font-size: 12px; font-weight: 700; color: #222; white-space: nowrap; }
.utopia-sb-status.pre { color: #6b7280; }
.utopia-sb-status.live { color: #ED2733; }
.utopia-sb-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ED2733;
  margin-right: 4px; vertical-align: 1px; animation: utopia-lc-pulse 1.6s ease-in-out infinite;
}

.utopia-sb-teams { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.utopia-sb a.utopia-sb-teams { text-decoration: none !important; color: inherit !important; }
.utopia-sb-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; }
.utopia-sb-team img { width: 28px; height: 28px; object-fit: contain; }
.utopia-sb-tname { font-size: 15px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utopia-sb-tscore { font-size: 20px; font-weight: 700; color: #222; font-variant-numeric: tabular-nums; text-align: right; min-width: 14px; }
.utopia-sb-tarrow { display: flex; align-items: center; }
/* Winner marker drawn in CSS: iOS showed the U+25C0 character as a blue emoji. */
.utopia-sb-win { display: block; width: 0; height: 0; border-style: solid; border-width: 5px 7px 5px 0; border-color: transparent #07182D transparent transparent; }
.utopia-sb-team.lose .utopia-sb-tname,
.utopia-sb-team.lose .utopia-sb-tscore { color: #8a9099; font-weight: 600; }

.utopia-sb-info { font-size: 12px; color: #6b7280; line-height: 1.4; min-width: 0; }
.utopia-sb a.utopia-sb-headline {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: #222 !important; text-decoration: none !important;
}
.utopia-sb-kicker {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #ED2733; margin-bottom: 3px;
}
.utopia-sb-venue { font-weight: 700; }

.utopia-sb-scorers { font-size: 12px; color: #6b7280; line-height: 1.4; min-width: 0; }
.utopia-sb-scorers .grp + .grp { margin-top: 8px; }
.utopia-sb-scorers .tm { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #222; }
.utopia-sb-scorers .tm img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.utopia-sb-scorers .gl { display: flex; gap: 6px; margin-top: 2px; }
.utopia-sb-scorers .ball { flex: 0 0 16px; text-align: center; font-size: 11px; }

.utopia-sb-actions { display: flex; flex-direction: column; gap: 8px; }
.utopia-sb a.utopia-sb-btn {
  display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  color: #07182D !important; background: #fff; border: 1px solid #c5ccd6; border-radius: 16px;
  padding: 7px 8px; text-decoration: none !important;
}
.utopia-sb a.utopia-sb-btn.watch { background: #ED2733; border-color: #ED2733; color: #fff !important; }

.utopia-sb-about { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: #6b7280; }
.utopia-sb-list.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.utopia-sb-empty {
  background: #fff; border: 1px solid #e4e6ea; border-radius: 8px; padding: 40px 20px;
  text-align: center; color: #6b7280; font-size: 14px;
}

/* Sidebar */
.utopia-sb-side { display: flex; flex-direction: column; gap: 16px; }
.utopia-sb .utopia-sb-card-title {
  margin: 0 !important; padding: 14px 16px 12px !important; font-size: 16px !important; line-height: 1.3 !important;
  font-weight: 700 !important; color: #07182D !important; text-transform: none !important; letter-spacing: normal !important;
}
.utopia-sb-player { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.utopia-sb button.utopia-sb-play {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer;
}
.utopia-sb-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.utopia-sb-play-icon {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(7, 24, 45, .85);
}
.utopia-sb-play-icon::after {
  content: ''; position: absolute; left: 22px; top: 17px; border-style: solid;
  border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff;
}
.utopia-sb-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.utopia-sb .utopia-sb-vlist { list-style: none; margin: 0 !important; padding: 0 !important; }
.utopia-sb .utopia-sb-vlist li { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid #eef0f2; }
.utopia-sb .utopia-sb-vlist li::before { content: none; }
.utopia-sb button.utopia-sb-vitem {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: #fff;
  border: 0; padding: 12px 16px; cursor: pointer; color: #222;
}
.utopia-sb button.utopia-sb-vitem.is-current { background: #f4f6f9; }
.utopia-sb-vicon {
  flex: 0 0 auto; margin-top: 3px; width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #07182D;
}
.utopia-sb-vtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.utopia-sb-vtitle { font-size: 13px; font-weight: 700; color: #222; line-height: 1.3; }
.utopia-sb button.utopia-sb-vitem.is-current .utopia-sb-vtitle { color: #ED2733; }
.utopia-sb-vdur { font-size: 12px; color: #6b7280; }

.utopia-sb a.utopia-sb-newsitem {
  display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid #eef0f2;
  text-decoration: none !important; color: inherit !important;
}
.utopia-sb-newsitem img { width: 84px; height: 60px; object-fit: cover; border-radius: 4px; flex: 0 0 84px; }
.utopia-sb-newstext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.utopia-sb-newstitle { font-size: 14px; font-weight: 700; line-height: 1.3; color: #222; }
.utopia-sb-newsdesc {
  font-size: 12px; line-height: 1.4; color: #6b7280;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.utopia-sb-newsmeta { font-size: 11px; color: #9aa1ab; }

@media (max-width: 767px) {
  body.utopia-sb-page .mvp-sec-pad { padding-top: 12px !important; }
  .utopia-sb-top { padding: 12px 10px 0; }
  .utopia-sb .utopia-sb-title { font-size: 21px !important; }
  .utopia-sb-days { display: flex; overflow-x: auto; scrollbar-width: none; }
  .utopia-sb-days::-webkit-scrollbar { display: none; }
  .utopia-sb button.utopia-sb-day { flex: 0 0 54px; }
  .utopia-sb button.utopia-sb-arrow { flex-basis: 26px; }
  .utopia-sb-cal { flex-basis: 40px; }
  .utopia-sb-comp-head { padding: 10px 12px; }
  .utopia-sb-row { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; padding: 12px; }
  .utopia-sb-scorers { grid-column: 2; }
  .utopia-sb-scorers:empty { display: none; }
  .utopia-sb-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .utopia-sb-actions:empty { display: none; }
  .utopia-sb a.utopia-sb-btn { flex: 1 1 0; }
  .utopia-sb-team { grid-template-columns: 24px minmax(0, 1fr) auto 10px; gap: 8px; }
  .utopia-sb-team img { width: 24px; height: 24px; }
  .utopia-sb-tname { font-size: 14px; }
  .utopia-sb-tscore { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .utopia-sb-dot { animation: none; } }
/* Hover colours only where a pointer really hovers: touch browsers keep :hover
   after a tap, which left tapped team names red on iPhone. */
@media (hover: hover) {
  .utopia-sb button.utopia-sb-arrow:hover { color: #ED2733; }
  .utopia-sb button.utopia-sb-day:hover { color: #07182D; }
  .utopia-sb-cal:hover { color: #ED2733; }
  .utopia-sb a.utopia-sb-teams:hover .utopia-sb-tname { color: #ED2733; }
  .utopia-sb a.utopia-sb-headline:hover { color: #ED2733 !important; }
  .utopia-sb a.utopia-sb-btn:hover { background: #07182D; border-color: #07182D; color: #fff !important; }
  .utopia-sb a.utopia-sb-btn.watch:hover { background: #c81e29; border-color: #c81e29; }
  .utopia-sb button.utopia-sb-play:hover .utopia-sb-play-icon { background: #ED2733; }
  .utopia-sb button.utopia-sb-vitem:hover .utopia-sb-vtitle { color: #ED2733; }
  .utopia-sb a.utopia-sb-newsitem:hover .utopia-sb-newstitle { color: #ED2733; }
}


/* ── CLUB PAGES (club tag archives, e.g. /tag/arsenal/) ──────────────────
   Next match / last result / league tiles, fixtures and results and the
   league table above the theme's post list; the club's videos top the
   sidebar (in the main column on phones). Section headings use the theme's
   own h4.mvp-sec-head markup, so they match every other section heading.
   Cards use the site tokens: ink #07182D, text #222, muted #6b7280, border
   #e4e6ea, accent #ED2733. */
.utopia-club, .utopia-club * { box-sizing: border-box; }
.utopia-club { color: #222; }
.utopia-club-main { clear: both; margin: 0 0 10px; }
.utopia-club-skeleton { height: 110px; margin: 0 0 30px; border-radius: 8px; background: #eef1f5; }

.utopia-club-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 12px; }
.utopia-club a.utopia-club-tile,
.utopia-club div.utopia-club-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px;
  background: #fff; border: 1px solid #e4e6ea; border-radius: 8px; text-decoration: none !important; color: #222 !important;
}
.utopia-club-tile-label {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: #6b7280;
}
.utopia-club-tile-label img { width: 16px; height: 16px; object-fit: contain; }
.utopia-club-tile-main { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: #07182D; }
.utopia-club-tile-main img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.utopia-club .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utopia-club .ha { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #6b7280; }
.utopia-club-tile-sub { font-size: 12px; line-height: 1.35; color: #6b7280; }
.utopia-club-live { color: #ED2733; font-weight: 700; }
.utopia-club-form { display: flex; gap: 4px; margin-top: 2px; }
.utopia-club-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 4px; font-size: 12px; font-weight: 800; line-height: 1; color: #fff; background: #8a9099;
}
.utopia-club-badge.is-W { background: #2e9e5b; }
.utopia-club-badge.is-L { background: #ED2733; }
.utopia-club-form .utopia-club-badge { flex-basis: 18px; width: 18px; height: 18px; font-size: 10px; }

.utopia-club-facts { margin: 0 0 30px !important; font-size: 13px; line-height: 1.5; color: #6b7280; }
.utopia-club-facts b { color: #222; font-weight: 700; }

/* A section is a float container for the theme's floated h4 heading. */
.utopia-club-sec { display: flow-root; margin: 0 0 30px; }
.utopia-club-fx { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.utopia-club-col, .utopia-club-card { background: #fff; border: 1px solid #e4e6ea; border-radius: 8px; overflow: hidden; }
.utopia-club-card { clear: both; padding: 4px 14px; }
.utopia-club .utopia-club-col-title {
  margin: 0 !important; padding: 10px 14px !important; background: #f8f9fa; border-bottom: 1px solid #eef0f2;
  font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #6b7280 !important;
  text-transform: uppercase !important; letter-spacing: .5px !important;
}
.utopia-club a.utopia-club-row,
.utopia-club div.utopia-club-row {
  display: grid; grid-template-columns: 76px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid #f2f3f5; font-size: 13px; text-decoration: none !important; color: #222 !important;
}
.utopia-club-col-title + .utopia-club-row { border-top: 0; }
.utopia-club-row .dt { font-size: 12px; color: #6b7280; white-space: nowrap; }
.utopia-club-row .comp img { display: block; width: 18px; height: 18px; object-fit: contain; }
.utopia-club-row .opp { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.utopia-club-row .opp img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
.utopia-club-row .res { display: flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utopia-club-empty { margin: 0 !important; padding: 14px; font-size: 13px; color: #6b7280; }

.utopia-club-side { margin: 0 0 20px; }
.utopia-club-main .utopia-mp-videos { margin: 0 0 30px; }

.utopia-club-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.utopia-club .utopia-club-links a { font-size: 12px; font-weight: 700; color: #07182D !important; text-decoration: none !important; border-bottom: 1px solid #d3d8df; }
.utopia-shop {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 30px; padding: 14px 16px; background: #07182D; border-radius: 8px;
}
.utopia-club a.utopia-shop-link { font-size: 15px; font-weight: 700; color: #fff !important; text-decoration: none !important; }
.utopia-shop-note { font-size: 11px; color: #aab2bd; }
.utopia-ps a.utopia-ps-shop .nm { color: #ED2733; }
@media (hover: hover) {
  .utopia-club .utopia-club-links a:hover { border-bottom-color: #ED2733; }
  .utopia-club a.utopia-club-row:hover .nm,
  .utopia-club a.utopia-club-tile:hover .nm { color: #ED2733; }
}
@media (max-width: 700px) {
  .utopia-club-fx { grid-template-columns: minmax(0, 1fr); }
  .utopia-club-tiles { grid-template-columns: minmax(0, 1fr); }
  .utopia-club a.utopia-club-row, .utopia-club div.utopia-club-row { grid-template-columns: 70px 18px minmax(0, 1fr) auto; padding: 10px 12px; }
}


/* ── POST SIDEBAR (single posts) ─────────────────────────────────────────
   Club card and videos under the match card / league table, in the same
   400px column those widgets use. Card look matches .utopia-side-card. */
#mvp-side-wrap > * + .utopia-ps,
.utopia-ps > * + * { margin-top: 20px; }
.utopia-ps-skel { min-height: 420px; border-radius: 8px; background: #f3f5f8; }
.utopia-ps-club { padding: 0 !important; overflow: hidden; }
.utopia-ps-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.utopia-ps-head img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 30px; }
.utopia-ps .utopia-ps-name {
  margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: #07182D !important; text-transform: none !important; letter-spacing: normal !important;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.utopia-ps a.utopia-ps-link {
  margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #ED2733 !important;
  text-decoration: none !important; white-space: nowrap;
}
.utopia-ps a.utopia-ps-row,
.utopia-ps div.utopia-ps-row {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; border-top: 1px solid #f2f3f5;
  text-decoration: none !important; color: #222 !important;
}
.utopia-ps-head + .utopia-ps-row { border-top: 0; }
.utopia-ps-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.utopia-ps-main { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; color: #07182D; }
.utopia-ps-main img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.utopia-ps-main .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utopia-ps-main .ha { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #6b7280; }
.utopia-ps-sub { font-size: 12px; line-height: 1.35; color: #6b7280; }
.utopia-ps .utopia-club-form { margin-top: 3px; }
@media (hover: hover) {
  .utopia-ps a.utopia-ps-row:hover .nm { color: #ED2733; }
  .utopia-ps a.utopia-ps-link:hover { text-decoration: underline !important; }
}