/* Global correctness fix, verified in the running app.
 * The team search DID filter — it set [hidden] on the non-matching rows — but
 * the list styles give those rows an explicit display, and an explicit display
 * beats the [hidden] attribute's default. So every team stayed on screen and
 * the search looked dead. With this rule "jo12" narrows 59 teams to the two
 * JO12 sides, as it always intended to. */
[data-dem71-picker-results][hidden],
[data-dem71-picker-results] [hidden],
[data-dem71-filter-wrap][hidden],
.dem71-team-card[hidden],
.dem71-picker-empty[hidden] { display: none !important; }

/* Phone/tablet containment fixes (v84). Loaded after every other stylesheet so
   these win over the layered app CSS without needing a new specificity war. */

@media (max-width: 1024px), (pointer: coarse) {
  /* Training location ran past the card border and off-screen: the row was a
     two-column grid whose text child could not shrink (no min-width:0 on the
     chain), so a long address pushed the whole card wider than the viewport.
     Every link in that chain is now allowed to shrink, and the address wraps
     instead of extending. */
  .sx-parent-event,
  .sx-parent-event > div,
  .sx-parent-when,
  .sx-training-plan-weather-card,
  .sx-training-weather-row,
  .sx-parent-training-weather-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .sx-parent-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  .sx-parent-when .sx-when-place {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    /* Addresses like "Sportpark Assumburg, Communicatieweg 12" have no short
       break point, so anywhere-breaking is what keeps them inside the card. */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
  }
  .sx-parent-when .sx-when-place svg,
  .sx-parent-when .sx-when-place .sx-ios-icon { flex: 0 0 auto; margin-top: 1px; }

  .sx-training-weather-row,
  .sx-parent-training-weather-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
  }
  .sx-training-weather-place,
  .sx-parent-training-weather-place {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .sx-training-weather-place > span,
  .sx-parent-training-weather-place > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sx-training-weather-row .sx-mobile-weather,
  .sx-parent-training-weather-row .sx-mobile-weather { flex: 0 0 auto; max-width: 46%; }

  /* A card may never be the reason the page scrolls sideways. */
  .sx-parent-list,
  .sx-parent-portal { min-width: 0; max-width: 100%; }
}

/* One "Ouderomgeving" block, not two. The welcome card already states the
   child and the team; the context switcher only earns its place when a parent
   has more than one child linked, and the runtime fallbacks now bail out below
   that threshold. This is the CSS half of the same rule, so a stale cached
   script cannot bring the duplicate back. */
.sx-parent-portal .sx-parent-context-switch:not(.is-child-picker) { display: none !important; }
.sx-parent-portal .sx-parent-context-switch[hidden] { display: none !important; }

/* The equipment counters are hidden with the [hidden] attribute; the chip
   styles set an explicit display, which would otherwise win. */
.need-mini > .n[hidden], .need-mini[hidden] { display: none !important; }

/* ===========================================================================
 * Match chips and the attendance block — phone and desktop alike.
 * The chips carry meaning, so they carry colour: where you play (neutral),
 * when it kicks off (blue), when to be there (green). The address stays plain
 * so it does not compete with the three that are decisions.
 * ========================================================================= */
:is(.sx-when-chip, .sx-coach-fixture-pills .sx-when-chip) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
}
.sx-when-chip.is-home { background: rgba(16, 185, 129, .13); color: #067a52; }
.sx-when-chip.is-away { background: rgba(100, 116, 139, .15); color: #475569; }
.sx-when-chip.is-kick { background: rgba(59, 130, 246, .14); color: #1d4ed8; }
.sx-when-chip.is-arrive { background: rgba(16, 185, 129, .14); color: #047857; }
.sx-when-chip.is-place { background: transparent; color: var(--text-muted); font-weight: 650; }
.sx-when-chip svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .9; }

[data-theme="dark"] .sx-when-chip.is-home { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
[data-theme="dark"] .sx-when-chip.is-away { background: rgba(148, 163, 184, .20); color: #cbd5e1; }
[data-theme="dark"] .sx-when-chip.is-kick { background: rgba(96, 165, 250, .20); color: #bfdbfe; }
[data-theme="dark"] .sx-when-chip.is-arrive { background: rgba(16, 185, 129, .20); color: #6ee7b7; }

/* ===========================================================================
 * Attendance block ("2 aanwezig"), phone and desktop, matches and trainings.
 * The icons are wrapped in a span, so the earlier rules — written against a
 * bare svg — never matched and the block kept its stock-admin look. The count
 * is the subject: a tinted tile beside it, the answer groups colour-coded, and
 * the faces as an overlapping group.
 * ========================================================================= */
.sx-squad { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-card); }
.sx-squad-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 62px; padding: 11px 14px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sx-squad-toggle > span:first-child {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  box-sizing: border-box; padding: 9px; border-radius: 13px;
  background: linear-gradient(150deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .10));
  color: #059669;
  box-shadow: inset 0 1px rgba(255, 255, 255, .5);
}
.sx-squad-toggle > span:first-child svg { width: 20px; height: 20px; }
.sx-squad-counts { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.sx-squad-counts b { margin-right: 2px; font-size: 17px; font-weight: 800; color: var(--text-main); }
/* The chevron is matched by the icon it contains, not by position: on some
   cards the toggle ends with another element, and a positional rule spun the
   people icon on open instead. */
.sx-squad-toggle > span:has(.ico-chevron-down) {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--bg-subtle); color: var(--text-muted);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1), background .2s ease, color .2s ease;
}
.sx-squad-toggle > span:has(.ico-chevron-down) svg { width: 16px; height: 16px; }
.sx-squad.is-open .sx-squad-toggle > span:has(.ico-chevron-down) {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
/* Never rotate the people icon, whatever a legacy rule tries. */
.sx-squad-toggle > span:first-child,
.sx-squad.is-open .sx-squad-toggle > span:first-child { transform: none !important; }
.sx-squad-faces { display: flex; align-items: center; gap: 0; margin: 0; padding: 0 14px 14px; list-style: none; }
.sx-squad-faces > li {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -9px;
  overflow: hidden; border-radius: 50%; border: 2px solid var(--bg-card);
  background: linear-gradient(150deg, #dbeafe, #c7d2fe);
  color: #3730a3; font-size: 12.5px; font-weight: 800;
}
.sx-squad-faces > li:first-child { margin-left: 0; }
.sx-squad-faces > li img { width: 100%; height: 100%; object-fit: cover; }
.sx-squad-more { background: var(--bg-subtle); color: var(--text-muted); font-size: 11.5px; }
.sx-squad-lists { display: grid; gap: 12px; padding: 0 14px 14px; }
.sx-squad-group { padding: 12px; border-radius: 14px; background: var(--bg-subtle); }
.sx-squad-group h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.sx-squad-group h4 span { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; }
.sx-squad-group.is-yes h4 span { background: #10b981; }
.sx-squad-group.is-maybe h4 span { background: #f59e0b; }
.sx-squad-group.is-no h4 span { background: #f43f5e; }
.sx-squad-empty { margin: 0; padding: 14px; border: 1px dashed var(--border-subtle); border-radius: 16px; color: var(--text-muted); font-size: 13px; }

[data-theme="dark"] .sx-squad { background: var(--bg-card); border-color: rgba(148, 163, 184, .14); }
[data-theme="dark"] .sx-squad-toggle > span:first-child { background: linear-gradient(150deg, rgba(16, 185, 129, .28), rgba(16, 185, 129, .12)); color: #6ee7b7; }

/* The match list sat inside the page card's own padding as well as its own,
   leaving 73px of a 375px screen to chrome. The list breaks out of that inner
   padding so the cards get the width back (302px → 320px), while the page card
   keeps its edge. */
@media (max-width: 1024px), (pointer: coarse) {
  html.sx-phone-webapp .sx-mobile-match-views {
    width: calc(100% + 18px) !important;
    margin-inline: -9px !important;
    box-sizing: border-box !important;
  }
  html.sx-phone-webapp .sx-mobile-match-views .sx-mobile-fixture-card { width: 100% !important; box-sizing: border-box !important; }
  html.sx-phone-webapp .sx-parent-fixture-summary { padding: 13px 12px 12px !important; }
}

/* The standings table carries the full record as columns on desktop; on a
   phone those columns would not fit, so there they stay inside the row's
   dropdown and only the summary columns show. */
@media (max-width: 1024px), (pointer: coarse) {
  .dem71-col-extra { display: none !important; }
}

/* ===========================================================================
 * Match weather panels, desktop: the same treatment as the training planning
 * band — a scrim under the text and glass pills behind the location and the
 * temperature, so both stay readable over a bright noon scene as well as a
 * storm-grey one. The phone keeps its own weather design, which is tuned to
 * its width; it only gains a little height and a glass pill behind the compact
 * reading.
 * ========================================================================= */
@media (min-width: 1025px) {
:is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
  }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(4, 12, 28, .50), rgba(4, 12, 28, .18) 58%, rgba(4, 12, 28, .28));
  }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) > *:not(.sx-weather-scene) { position: relative; z-index: 2; }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-weather-scene { z-index: 1; }
  
  /* Compact phone layout: place pill left, reading pill right. */
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-mobile-weather:not(.sx-weather-proxy) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(6, 14, 30, .30);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
    backdrop-filter: blur(9px) saturate(140%);
    color: #fff;
  }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-mobile-weather:not(.sx-weather-proxy) > span { display: grid; gap: 1px; justify-items: end; text-align: right; min-width: 0; }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-mobile-weather:not(.sx-weather-proxy) strong { color: #fff; line-height: 1; }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-mobile-weather:not(.sx-weather-proxy) small { color: #fff; opacity: .95; white-space: nowrap; }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-weather-icon { color: #fff; }
  
  /* The rich layout keeps its stack, with the temperature on its own glass pill. */
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-overview-weather-city,
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-overview-weather-head small { text-shadow: 0 1px 2px rgba(2, 8, 20, .38); }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-overview-weather-tempbox {
    justify-self: start;
    width: max-content;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    background: rgba(6, 14, 30, .30);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
    backdrop-filter: blur(9px) saturate(140%);
  }
  :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) :is(.sx-overview-weather-meta, .sx-overview-weather-details) { text-shadow: 0 1px 2px rgba(2, 8, 20, .32); }
  
}

@media (max-width: 1024px), (pointer: coarse) {
  html.sx-phone-webapp :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) { min-height: 132px !important; }
  html.sx-phone-webapp :is(.sx-parent-fixture-info, .sx-mobile-fixture-weather-panel) .sx-mobile-weather:not(.sx-weather-proxy) {
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 13px !important;
    background: rgba(6, 14, 30, .28) !important;
    -webkit-backdrop-filter: blur(9px) saturate(140%) !important;
    backdrop-filter: blur(9px) saturate(140%) !important;
  }
}

/* Ouderportaal, telefoon.
   Two things were off. The summary block carried negative side margins but a
   max-width of 100%, so it was shifted left instead of widened: the content sat
   against the left border and left 27px of card showing on the right. And the
   weather band, nested inside that summary's padding as well, floated in the
   middle with a strip of background either side. The summary now spans the card
   and the band keeps a small, even gutter. */
@media (max-width: 1024px), (pointer: coarse) {
  html.sx-phone-webapp .sx-parent-event { overflow: hidden !important; }
  html.sx-phone-webapp .sx-parent-event .sx-parent-fixture-summary {
    width: calc(100% + 26px) !important;
    max-width: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }
  html.sx-phone-webapp .sx-parent-fixture-summary > .sx-parent-fixture-info {
    width: calc(100% + 14px) !important;
    margin-inline: -7px !important;
    margin-bottom: 0 !important;
    min-height: 140px !important;
    padding: 12px 15px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Ouderportaal · training weather strip on the phone: the reading ran off the
   right edge of a 66px strip. Same treatment as the match band, at phone size:
   a scrim, the location on a glass pill that truncates, and the temperature on
   its own pill so it always fits. */
@media (max-width: 1024px), (pointer: coarse) {
  html.sx-phone-webapp .sx-parent-training-weather-row {
    position: relative !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 10px !important; min-height: 84px !important; padding: 12px 13px !important;
    border: 0 !important; border-radius: 16px !important;
    overflow: hidden !important; isolation: isolate !important;
  }
  html.sx-phone-webapp .sx-parent-training-weather-row::after {
    content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;
    background: linear-gradient(100deg, rgba(4, 12, 28, .50), rgba(4, 12, 28, .18) 55%, rgba(4, 12, 28, .30)) !important;
  }
  html.sx-phone-webapp .sx-parent-training-weather-row > * { position: relative !important; z-index: 2 !important; }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-weather-scene { z-index: 1 !important; }
  html.sx-phone-webapp .sx-parent-training-weather-place {
    display: flex !important; align-items: center !important; gap: 7px !important;
    flex: 1 1 auto !important; min-width: 0 !important;
    padding: 6px 11px !important; border-radius: 999px !important;
    background: rgba(6, 14, 30, .28) !important;
    -webkit-backdrop-filter: blur(9px) !important; backdrop-filter: blur(9px) !important;
    color: #fff !important; font-size: 11.5px !important; font-weight: 650 !important;
  }
  html.sx-phone-webapp .sx-parent-training-weather-place > span:last-child { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-mobile-weather {
    display: flex !important; align-items: center !important; gap: 8px !important;
    flex: 0 0 auto !important; min-width: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 14px !important;
    background: rgba(6, 14, 30, .30) !important;
    -webkit-backdrop-filter: blur(9px) saturate(140%) !important; backdrop-filter: blur(9px) saturate(140%) !important;
    color: #fff !important;
  }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-mobile-weather > span { display: grid !important; gap: 1px !important; justify-items: end !important; text-align: right !important; min-width: 0 !important; }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-mobile-weather strong { font-size: 20px !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-mobile-weather small { max-width: none !important; overflow: visible !important; white-space: nowrap !important; font-size: 10.5px !important; color: #fff !important; opacity: .95 !important; }
  html.sx-phone-webapp .sx-parent-training-weather-row .sx-weather-icon { width: 24px !important; height: 24px !important; flex: 0 0 auto !important; color: #fff !important; }
}

/* The address appeared twice on a training card — once as a chip and once in
   the weather strip right below it. The strip keeps it. */
@media (max-width: 1024px), (pointer: coarse) {
  html.sx-phone-webapp .sx-parent-event:has(.sx-parent-training-weather-row) .sx-parent-when .sx-when-place { display: none !important; }
}

/* ===========================================================================
 * The "three dots" action menu.
 * Every item now carries its own icon (see ActionMenu's mapping — anything
 * unmapped used to fall back to a chevron, so half the menu read as "go
 * somewhere"), and the menu itself is a glass sheet with icon tiles.
 * ========================================================================= */
.sx-action-trigger {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-muted);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.sx-action-trigger:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border-subtle));
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
}
.sx-action-popover {
  display: grid;
  gap: 2px;
  min-width: 240px;
  max-width: 280px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--text-main) 9%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-card) 82%, transparent));
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 26px 60px rgba(2, 6, 23, .22);
  animation: sxMenuIn .18s cubic-bezier(.22, 1, .36, 1) both;
}
.sx-action-popover button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-main);
  font: inherit; font-size: 14px; font-weight: 600;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.sx-action-popover button:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.sx-action-popover button > span:first-child {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: color-mix(in srgb, var(--text-main) 6%, transparent);
  color: var(--text-muted);
}
.sx-action-popover button:hover > span:first-child { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.sx-action-popover button > span:first-child svg { width: 17px; height: 17px; }
.sx-action-popover button.is-danger { color: #dc2626; }
.sx-action-popover button.is-danger > span:first-child { background: rgba(239, 68, 68, .12); color: #dc2626; }
.sx-action-popover button.is-danger:hover { background: rgba(239, 68, 68, .12); color: #b91c1c; }
@keyframes sxMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sx-action-popover { animation: none; } }
[data-theme="dark"] .sx-action-popover {
  border-color: rgba(148, 163, 184, .16);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 26px 60px rgba(0, 0, 0, .5);
}

/* ===========================================================================
 * v121 — mobile polish round
 * - mobile cards more glass
 * - attendance people icon never rotates
 * - bottom menu more liquid iOS, still MK Vision blue (no purple)
 * - tactics board tools / bench / placing players cleaner on mobile
 * - mobile tactics players use shirt-like tokens
 * - training/oefening tools feel more like app dashboard cards
 * - oefenveld stays horizontal in normal view; only fullscreen focus keeps the
 *   rotated presentation on portrait phones
 * ======================================================================== */

@media (max-width: 1024px), (pointer: coarse) {
  /* White cards on the phone/tablet: slightly more glass, without touching
     the dark pitch cards themselves. */
  html.sx-phone-webapp :is(
    .card,
    .tabs-card,
    .training-editor,
    .training-steps-panel,
    .training-equip,
    .exercise-card,
    .sx-parent-event,
    .sx-mobile-fixture-card,
    .sx-squad,
    .team-tab-pane > .card,
    .list-item,
    .sx-dash-card,
    .sx-dash-action,
    .sx-parent-context-switch,
    .tactics-events-card,
    .bench-side,
    .tactics-player-size-inline,
    .tactics-toolbar-group,
    .tactics-tool-group,
    .tactics-standalone-bar
  ) {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56)) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    box-shadow:
      0 16px 34px rgba(15,23,42,.08),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(155%) !important;
    backdrop-filter: blur(16px) saturate(155%) !important;
  }

  html.sx-phone-webapp [data-theme="dark"] :is(
    .card,
    .tabs-card,
    .training-editor,
    .training-steps-panel,
    .training-equip,
    .exercise-card,
    .sx-parent-event,
    .sx-mobile-fixture-card,
    .sx-squad,
    .team-tab-pane > .card,
    .list-item,
    .sx-dash-card,
    .sx-dash-action,
    .sx-parent-context-switch,
    .tactics-events-card,
    .bench-side,
    .tactics-player-size-inline,
    .tactics-toolbar-group,
    .tactics-tool-group,
    .tactics-standalone-bar
  ),
  html.sx-phone-webapp.dark :is(
    .card,
    .tabs-card,
    .training-editor,
    .training-steps-panel,
    .training-equip,
    .exercise-card,
    .sx-parent-event,
    .sx-mobile-fixture-card,
    .sx-squad,
    .team-tab-pane > .card,
    .list-item,
    .sx-dash-card,
    .sx-dash-action,
    .sx-parent-context-switch,
    .tactics-events-card,
    .bench-side,
    .tactics-player-size-inline,
    .tactics-toolbar-group,
    .tactics-tool-group,
    .tactics-standalone-bar
  ) {
    background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.58)) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow:
      0 22px 44px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* Attendance: the people icon must stay still. Only the chevron rotates. */
  .sx-squad-toggle > span:first-child,
  .sx-squad-toggle > span:first-child *,
  .sx-squad.is-open .sx-squad-toggle > span:first-child,
  .sx-squad.is-open .sx-squad-toggle > span:first-child * {
    transform: none !important;
  }

  /* --- Bottom menu: more iOS liquid / Instagram-ish, but on-brand blue --- */
  .mobile-tabbar.mobile-tabbar-ios26 {
    width: min(calc(100% - 14px), 560px) !important;
    padding: 7px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42)) !important;
    box-shadow:
      0 20px 54px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.84),
      inset 0 -1px 0 rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26::before {
    inset: 1px !important;
    border-radius: 28px !important;
    opacity: .7 !important;
  }
  [data-theme="dark"] .mobile-tabbar.mobile-tabbar-ios26,
  .dark .mobile-tabbar.mobile-tabbar-ios26 {
    border-color: rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(9,14,24,.54), rgba(9,14,24,.30)) !important;
    box-shadow:
      0 24px 64px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tabbar-indicator {
    top: 5px !important;
    left: 5px !important;
    width: calc((100% - 10px) / var(--tabs, 5)) !important;
    height: calc(100% - 10px) !important;
    border-radius: 24px !important;
    background: rgba(83, 98, 213, .14) !important;
    border: 1px solid rgba(83, 98, 213, .18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      0 10px 24px rgba(83, 98, 213, .16) !important;
  }
  [data-theme="dark"] .mobile-tabbar.mobile-tabbar-ios26 .mobile-tabbar-indicator,
  .dark .mobile-tabbar.mobile-tabbar-ios26 .mobile-tabbar-indicator {
    background: rgba(83, 98, 213, .22) !important;
    border-color: rgba(83, 98, 213, .24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 24px rgba(0,0,0,.28) !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab {
    min-height: 56px !important;
    padding: 9px 6px 10px !important;
    border-radius: 22px !important;
    color: rgba(15,23,42,.56) !important;
  }
  [data-theme="dark"] .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab,
  .dark .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab {
    color: rgba(226,232,240,.62) !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab .icon svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 1.85 !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab.active {
    color: #5362D5 !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab::after {
    bottom: 5px !important;
    width: 4px !important;
    height: 4px !important;
    opacity: .52 !important;
  }
  .mobile-tabbar.mobile-tabbar-ios26 .mobile-tab.active::after {
    opacity: .96 !important;
  }

  /* --- Tactics board on mobile/tablet --- */
  html.sx-phone-webapp .tactics-toolbar {
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html.sx-phone-webapp .tactics-toolbar-group,
  html.sx-phone-webapp .tactics-tool-group,
  html.sx-phone-webapp .tactics-player-size-inline,
  html.sx-phone-webapp .tactics-standalone-bar {
    border-radius: 22px !important;
    padding: 13px 14px !important;
  }
  html.sx-phone-webapp .tactics-group-label,
  html.sx-phone-webapp .tactics-tool-group > span,
  html.sx-phone-webapp .bench-title,
  html.sx-phone-webapp .tactics-bench-heading strong {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5362D5;
  }
  html.sx-phone-webapp .tactics-bench-heading span {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.35;
  }
  html.sx-phone-webapp .tactics-player-size-inline {
    display: grid !important;
    gap: 10px !important;
  }
  html.sx-phone-webapp .tactics-player-size-inline > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--text-main);
  }
  html.sx-phone-webapp .tactics-player-size-inline input[type="range"] {
    width: 100%;
  }
  html.sx-phone-webapp .tactics-standalone-switch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    padding: 4px;
    border-radius: 18px;
    background: rgba(15,23,42,.06);
  }
  html.sx-phone-webapp .tactics-standalone-switch button {
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
  }
  html.sx-phone-webapp .tactics-standalone-switch button.is-active {
    background: rgba(83, 98, 213, .14);
    color: #5362D5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
  }
  html.sx-phone-webapp .tactics-group-content,
  html.sx-phone-webapp .tactics-tool-group > div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px !important;
  }
  html.sx-phone-webapp .tactics-group-content .form-group,
  html.sx-phone-webapp .tactics-group-content label,
  html.sx-phone-webapp .tactics-group-content > span,
  html.sx-phone-webapp .tactics-tool-group > div > span {
    flex: 1 1 100%;
    min-width: 0;
  }
  html.sx-phone-webapp .tactics-group-content select,
  html.sx-phone-webapp .tactics-group-content input[type="number"],
  html.sx-phone-webapp .tactics-group-content input[type="range"],
  html.sx-phone-webapp .tactics-group-content .btn,
  html.sx-phone-webapp .tactics-tool-group .btn,
  html.sx-phone-webapp .tactics-fs-options button {
    min-height: 40px;
    border-radius: 15px !important;
  }
  html.sx-phone-webapp .tactics-tool-group .btn,
  html.sx-phone-webapp .tactics-group-content .btn {
    padding-inline: 12px !important;
  }
  html.sx-phone-webapp .tactics-score,
  html.sx-phone-webapp .tactics-phase,
  html.sx-phone-webapp .tactics-timer {
    width: 100%;
  }
  html.sx-phone-webapp .tactics-timer {
    align-items: flex-start !important;
    gap: 10px !important;
    flex-direction: column !important;
  }
  html.sx-phone-webapp .tactics-timer-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  html.sx-phone-webapp .tactics-score {
    justify-content: space-between;
  }
  html.sx-phone-webapp .tactics-score input {
    width: 64px;
    min-height: 40px;
    border-radius: 14px;
  }
  html.sx-phone-webapp .tactics-bench {
    display: grid !important;
    gap: 12px !important;
  }
  html.sx-phone-webapp .tactics-bench-heading {
    margin: 0;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(83, 98, 213, .08);
    border: 1px solid rgba(83, 98, 213, .12);
  }
  html.sx-phone-webapp .bench-side {
    padding: 12px;
    border-radius: 22px;
  }
  html.sx-phone-webapp .marker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  html.sx-phone-webapp .marker-tile {
    width: 100% !important;
    padding: 10px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
  }
  html.sx-phone-webapp .marker-tile-photo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    clip-path: polygon(18% 10%, 35% 0, 44% 10%, 56% 10%, 65% 0, 82% 10%, 100% 26%, 84% 38%, 76% 100%, 24% 100%, 16% 38%, 0 26%);
    background: linear-gradient(180deg, rgba(83, 98, 213, .22), rgba(83, 98, 213, .12)) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 8px 18px rgba(15,23,42,.10);
  }
  html.sx-phone-webapp .marker-tile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html.sx-phone-webapp .marker-tile-photo span {
    color: #5362D5 !important;
  }
  html.sx-phone-webapp .marker-tile-name {
    margin: 0;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html.sx-phone-webapp .marker-tile-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html.sx-phone-webapp .marker-tile .marker-move {
    background: rgba(83, 98, 213, .10) !important;
    border: 1px solid rgba(83, 98, 213, .12) !important;
    color: #5362D5 !important;
  }
  html.sx-phone-webapp .marker-tile.selected {
    outline: 0 !important;
    border-color: rgba(83, 98, 213, .34) !important;
    box-shadow:
      0 0 0 1px rgba(83, 98, 213, .18),
      0 14px 26px rgba(83, 98, 213, .14),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }
  html.sx-phone-webapp .tactics-pitch {
    --player-size: 44px !important;
  }
  html.sx-phone-webapp .player-token-inner {
    border-radius: 0 !important;
    clip-path: polygon(18% 10%, 35% 0, 44% 10%, 56% 10%, 65% 0, 82% 10%, 100% 26%, 84% 38%, 76% 100%, 24% 100%, 16% 38%, 0 26%);
    background: linear-gradient(180deg, #7a88ea 0%, #5362D5 56%, #3343b9 100%) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.34), inset 0 1px 0 rgba(255,255,255,.32) !important;
  }
  html.sx-phone-webapp .player-token-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html.sx-phone-webapp .player-token-initials {
    color: #fff !important;
    font-size: clamp(10px, calc(var(--player-size, 44px) * .28), 14px) !important;
  }
  html.sx-phone-webapp .player-token-label {
    margin-top: 5px !important;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(2,6,23,.36);
    color: #f8fafc !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }

  /* --- Training / exercises on mobile --- */
  html.sx-phone-webapp .training-editor-head {
    gap: 12px !important;
  }
  html.sx-phone-webapp .training-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    align-items: stretch !important;
  }
  html.sx-phone-webapp .training-meta .meta {
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(148,163,184,.18);
  }
  html.sx-phone-webapp [data-theme="dark"] .training-meta .meta,
  html.sx-phone-webapp.dark .training-meta .meta {
    background: rgba(15,23,42,.52);
    border-color: rgba(148,163,184,.14);
  }
  html.sx-phone-webapp .training-tools {
    display: grid !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }
  html.sx-phone-webapp .tool-accordion {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.60)) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    box-shadow: 0 14px 28px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.70) !important;
  }
  html.sx-phone-webapp [data-theme="dark"] .tool-accordion,
  html.sx-phone-webapp.dark .tool-accordion {
    background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.58)) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow: 0 20px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html.sx-phone-webapp .tool-accordion .acc-head {
    min-height: 52px;
    padding: 14px 14px 12px !important;
    background: transparent !important;
  }
  html.sx-phone-webapp .tool-accordion .acc-body {
    padding: 0 14px 14px !important;
    gap: 8px !important;
  }
  html.sx-phone-webapp .tool-accordion .acc-body .btn,
  html.sx-phone-webapp .tool-accordion .acc-body select,
  html.sx-phone-webapp .tool-accordion .acc-body .select,
  html.sx-phone-webapp .tool-accordion .acc-body .range,
  html.sx-phone-webapp .training-palette-item {
    min-height: 40px;
    border-radius: 14px !important;
  }
  html.sx-phone-webapp .training-palette-item {
    background: rgba(83, 98, 213, .08) !important;
    border: 1px solid rgba(83, 98, 213, .12) !important;
    color: #5362D5 !important;
    font-weight: 800 !important;
    padding: 7px 11px !important;
  }
  html.sx-phone-webapp .training-board-wrap {
    margin-top: 8px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52)) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.08) !important;
  }
  html.sx-phone-webapp [data-theme="dark"] .training-board-wrap,
  html.sx-phone-webapp.dark .training-board-wrap {
    background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.54)) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow: 0 22px 40px rgba(0,0,0,.30) !important;
  }
  html.sx-phone-webapp .training-board {
    min-height: 290px !important;
    border-radius: 20px !important;
  }
  html.sx-phone-webapp .training-steps-panel,
  html.sx-phone-webapp .training-equip {
    border-radius: 20px !important;
    padding: 12px !important;
  }
  html.sx-phone-webapp .equip-grid.equip-grid-inline {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  html.sx-phone-webapp .equip-grid.equip-grid-inline::-webkit-scrollbar {
    display: none;
  }
  html.sx-phone-webapp .equip-chip {
    min-width: 164px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.64) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66) !important;
  }
  html.sx-phone-webapp [data-theme="dark"] .equip-chip,
  html.sx-phone-webapp.dark .equip-chip {
    background: rgba(15,23,42,.52) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  /* The oefenveld should stay horizontal in the normal editor. Only fullscreen
     focus keeps the rotated presentation on portrait phones. */
  body:not(.training-field-focus-body) .training-board.rotated {
    transform: none !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 5 / 4 !important;
  }
  body:not(.training-field-focus-body) .training-board-col.rotated-wrap {
    display: block !important;
  }
}

@media (max-width: 640px), (pointer: coarse) {
  html.sx-phone-webapp .training-meta {
    grid-template-columns: 1fr !important;
  }
  html.sx-phone-webapp .marker-list {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 1025px) {
  /* A small tidy-up for desktop oefening so the board and controls feel like
     one app surface. */
  .training-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .training-board-wrap {
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.54));
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 18px 36px rgba(15,23,42,.07);
  }
  [data-theme="dark"] .training-board-wrap,
  .dark .training-board-wrap {
    background: linear-gradient(180deg, rgba(15,23,42,.68), rgba(15,23,42,.54));
    border-color: rgba(148,163,184,.14);
    box-shadow: 0 26px 44px rgba(0,0,0,.28);
  }
  .training-board {
    min-height: min(66vh, 820px);
  }
}

/* ===========================================================================
 * v122 — extra focused round
 * requested follow-up:
 * 1) tactics board mobile only
 * 2) exercises / tools mobile (plus cleaner desktop app-surface feel)
 * ======================================================================== */

/* ---------------------------
   1) TACTIEKBORD MOBILE ONLY
---------------------------- */
@media (max-width: 768px) {
  html.sx-phone-webapp .tactics-toolbar-group {
    position: relative;
    overflow: hidden;
  }
  html.sx-phone-webapp .tactics-toolbar-group > .tactics-group-label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    color: #1e2d6b;
    cursor: pointer;
    user-select: none;
  }
  html.sx-phone-webapp .tactics-toolbar-group > .tactics-group-label::after {
    content: '';
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
    transition: transform .24s ease, opacity .24s ease;
  }
  html.sx-phone-webapp .tactics-toolbar-group.is-open > .tactics-group-label::after {
    transform: rotate(-135deg);
    opacity: .95;
  }
  html.sx-phone-webapp .tactics-toolbar-group > .tactics-group-content {
    display: none !important;
    margin-top: 12px;
  }
  html.sx-phone-webapp .tactics-toolbar-group.is-open > .tactics-group-content {
    display: flex !important;
    animation: fadeInBottom .18s ease;
  }

  html.sx-phone-webapp .tactics-match-group.is-open .tactics-group-content,
  html.sx-phone-webapp .tactics-context-group.is-open .tactics-group-content {
    display: grid !important;
    gap: 10px !important;
  }

  html.sx-phone-webapp .tactics-match-group .btn-group {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }
  html.sx-phone-webapp .tactics-match-group .btn-group .btn {
    min-width: 0;
    padding-inline: 0;
    font-size: 12px;
  }

  html.sx-phone-webapp .tactics-tool-group {
    display: grid !important;
    gap: 10px !important;
  }
  html.sx-phone-webapp .tactics-tool-group > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  html.sx-phone-webapp .tactics-tool-group > div .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
    font-size: 12px;
  }
  html.sx-phone-webapp .tactics-tool-group > div .btn.primary {
    box-shadow: 0 10px 20px rgba(83,98,213,.18);
  }

  /* Weergave area cleaner as chips/rows */
  html.sx-phone-webapp .tactics-view-group .tactics-display {
    display: grid !important;
    gap: 10px !important;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-display > span {
    font-weight: 700;
    color: var(--text-main);
  }
  html.sx-phone-webapp .tactics-view-group .tactics-display label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(83,98,213,.08);
    border: 1px solid rgba(83,98,213,.10);
    font-size: 13px;
    font-weight: 600;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-display .tactics-control {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(148,163,184,.14);
  }

  /* Bench / placing players feels more app-like */
  html.sx-phone-webapp .marker-empty {
    padding: 14px;
    border-radius: 16px;
    text-align: center;
    color: var(--text-muted);
    background: rgba(15,23,42,.04);
    border: 1px dashed rgba(148,163,184,.22);
  }
  html.sx-phone-webapp .marker-tile {
    grid-template-columns: 46px minmax(0,1fr) 40px 40px !important;
  }
  html.sx-phone-webapp .marker-tile-btn.btn.xs {
    width: 40px !important;
  }
  html.sx-phone-webapp .marker-tile .btn svg,
  html.sx-phone-webapp .marker-tile .marker-tile-btn svg {
    width: 17px;
    height: 17px;
  }

  /* Fullscreen options / floating actions cleaner */
  html.sx-phone-webapp .tactics-fs-options {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  html.sx-phone-webapp .tactics-fs-options-toggle,
  html.sx-phone-webapp .tactics-exit-focus {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(7,12,22,.42);
    color: #fff;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 18px 34px rgba(0,0,0,.22);
  }
  html.sx-phone-webapp .tactics-exit-focus {
    left: 12px;
    right: auto;
  }
  html.sx-phone-webapp .tactics-fs-options-menu {
    min-width: 180px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(7,12,22,.52);
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 24px 48px rgba(0,0,0,.24);
  }
  html.sx-phone-webapp .tactics-fs-options-menu button {
    width: 100%;
    justify-content: flex-start;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    min-height: 40px;
    padding: 10px 12px !important;
  }
  html.sx-phone-webapp .tactics-fs-options-menu button + button {
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Keep player labels compact on small phones */
  html.sx-phone-webapp .tactics-pitch {
    --player-size: 42px !important;
  }
  html.sx-phone-webapp .player-token-label {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  html.sx-phone-webapp .tactics-tool-group > div {
    grid-template-columns: 1fr !important;
  }
  html.sx-phone-webapp .marker-tile {
    grid-template-columns: 42px minmax(0,1fr) 36px 36px !important;
    padding: 9px !important;
  }
  html.sx-phone-webapp .marker-tile-btn,
  html.sx-phone-webapp .marker-tile-btn.btn.xs {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
  }
}

/* ----------------------------------------
   2) OEFENING / TOOLS MOBILE + DESKTOP
----------------------------------------- */
@media (max-width: 860px) {
  html.sx-phone-webapp .training-editor {
    padding: 12px !important;
  }
  html.sx-phone-webapp .tool-accordion .acc-head {
    font-size: 13px;
    font-weight: 800;
  }
  html.sx-phone-webapp .tool-accordion .acc-body > .tool-label {
    color: #5362D5 !important;
    letter-spacing: .06em;
  }

  /* Palette tools more like a mobile app dashboard */
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body,
  html.sx-phone-webapp .tool-accordion[data-acc="lines"] .acc-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html.sx-phone-webapp .training-palette-item {
    min-width: calc(50% - 4px);
    justify-content: flex-start !important;
    gap: 8px;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }
  html.sx-phone-webapp .training-palette-item .btn-ico,
  html.sx-phone-webapp .training-palette-item svg {
    width: 18px;
    height: 18px;
  }

  html.sx-phone-webapp .training-board-wrap {
    position: relative;
  }
  html.sx-phone-webapp #training-fullscreen-mobile {
    min-height: 42px;
    padding-inline: 12px !important;
    border-radius: 15px !important;
  }

  html.sx-phone-webapp .steps-panel-head,
  html.sx-phone-webapp .training-equip .equip-title {
    margin-bottom: 10px;
  }
  html.sx-phone-webapp .steps-panel-list {
    display: grid;
    gap: 8px;
  }
  html.sx-phone-webapp .step-row {
    margin-bottom: 0 !important;
    padding: 8px;
    border-radius: 14px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(148,163,184,.14);
  }
  html.sx-phone-webapp .step-badge {
    width: 28px;
    height: 28px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  }

  html.sx-phone-webapp .goal-rot {
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(83,98,213,.08);
    border: 1px solid rgba(83,98,213,.10);
  }
  html.sx-phone-webapp .goal-rot .btn {
    min-width: 52px;
  }
  html.sx-phone-webapp .range.small,
  html.sx-phone-webapp #training-rot-range {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Horizontal board in normal editor, a little larger and cleaner */
  html.sx-phone-webapp .training-board {
    aspect-ratio: 5 / 4 !important;
    min-height: 320px !important;
  }
}

@media (max-width: 520px) {
  html.sx-phone-webapp .training-palette-item {
    min-width: 100%;
  }
}

@media (min-width: 1025px) {
  /* Desktop exercise editor: more app dashboard feel */
  .training-editor {
    padding: 14px;
    border-radius: 20px;
  }
  .training-editor-head {
    gap: 14px;
  }
  .training-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    align-items: stretch;
  }
  .training-meta .meta {
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  }
  [data-theme="dark"] .training-meta .meta,
  .dark .training-meta .meta {
    background: linear-gradient(180deg, rgba(15,23,42,.70), rgba(15,23,42,.58));
    border-color: rgba(148,163,184,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  .tool-accordion {
    border-radius: 20px;
  }
  .tool-accordion .acc-head {
    padding: 14px 14px 12px;
    font-size: 13px;
  }
  .tool-accordion .acc-body {
    padding: 0 14px 14px;
  }
  .training-palette-item {
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 14px;
  }
  .training-steps-panel,
  .training-equip {
    border-radius: 18px;
    padding: 14px;
  }
}

/* ===========================================================================
 * v123 — mobile tactics follow-up
 * - less vertical scrolling on mobile
 * - some buttons next to each other again
 * - tactics top field options only in mobile fullscreen
 * - fullscreen overlay must not create white scroll / block moving players
 * ======================================================================== */

/* Make mobile sections more compact so you don't have to scroll forever. */
@media (max-width: 768px) {
  html.sx-phone-webapp .tactics-toolbar-group,
  html.sx-phone-webapp .tactics-tool-group,
  html.sx-phone-webapp .tactics-player-size-inline,
  html.sx-phone-webapp .tactics-standalone-bar,
  html.sx-phone-webapp .bench-side,
  html.sx-phone-webapp .training-board-wrap,
  html.sx-phone-webapp .training-steps-panel,
  html.sx-phone-webapp .training-equip {
    padding: 10px 11px !important;
    border-radius: 18px !important;
  }

  html.sx-phone-webapp .tactics-toolbar {
    gap: 10px !important;
  }

  html.sx-phone-webapp .tactics-group-label,
  html.sx-phone-webapp .tactics-tool-group > span,
  html.sx-phone-webapp .bench-title,
  html.sx-phone-webapp .tactics-bench-heading strong {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  html.sx-phone-webapp .tactics-match-group .btn-group,
  html.sx-phone-webapp .tactics-tool-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.sx-phone-webapp .tactics-tool-group > div .btn,
  html.sx-phone-webapp .tactics-match-group .btn-group .btn,
  html.sx-phone-webapp .training-palette-item,
  html.sx-phone-webapp .tool-accordion .acc-body .btn,
  html.sx-phone-webapp .tool-accordion .acc-body select {
    min-height: 36px !important;
    font-size: 11.5px !important;
    padding: 8px 10px !important;
  }

  /* Keep more items side by side instead of one long vertical stack. */
  html.sx-phone-webapp .marker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html.sx-phone-webapp .marker-tile {
    grid-template-columns: 42px minmax(0,1fr) 36px 36px !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  html.sx-phone-webapp .marker-tile-photo {
    width: 42px !important;
    height: 42px !important;
  }
  html.sx-phone-webapp .marker-tile-name {
    font-size: 11px !important;
  }
  html.sx-phone-webapp .marker-tile-btn,
  html.sx-phone-webapp .marker-tile-btn.btn.xs {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
  }

  /* Exercise/tools: allow 2-up again on phones, to cut the long scroll. */
  html.sx-phone-webapp .training-palette-item {
    min-width: calc(50% - 4px) !important;
    justify-content: flex-start !important;
  }
  html.sx-phone-webapp .tool-accordion .acc-body {
    gap: 7px !important;
  }
  html.sx-phone-webapp .step-row {
    padding: 7px !important;
  }
}

@media (max-width: 390px) {
  /* Only on really narrow phones do we stack some controls. */
  html.sx-phone-webapp .tactics-match-group .btn-group,
  html.sx-phone-webapp .tactics-tool-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.sx-phone-webapp .training-palette-item {
    min-width: 100% !important;
  }
}

/* -------------------------------------------------------------------------
   TACTIEKBORD: the little options overlay above the pitch should ONLY be
   visible in mobile fullscreen / field focus. Outside that, hide it.
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  html.sx-phone-webapp .tactics-fs-options {
    display: none !important;
  }

  body.tactics-field-focus-body .tactics-fs-options,
  #tactics-pitch-fs:fullscreen .tactics-fs-options,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options {
    display: flex !important;
  }
}

/* -------------------------------------------------------------------------
   FULLSCREEN TACTICS FIXES
   Stop the white scroll / extra strip, keep the pitch movable, and make the
   overlay float above the field instead of taking layout space.
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.tactics-field-focus-body,
  body.tactics-field-focus-body .main,
  body.tactics-field-focus-body .tactics-view,
  body.tactics-field-focus-body .tactics-view .card,
  body.tactics-field-focus-body .tactics-view .card-body,
  body.tactics-field-focus-body .tactics-layout,
  body.tactics-field-focus-body .tactics-pitch-card,
  body.tactics-field-focus-body #tactics-pitch-fs,
  #tactics-pitch-fs:fullscreen,
  #tactics-pitch-fs:-webkit-full-screen {
    overflow: hidden !important;
  }

  body.tactics-field-focus-body .tactics-pitch-card,
  body.tactics-field-focus-body #tactics-pitch-fs,
  #tactics-pitch-fs:fullscreen,
  #tactics-pitch-fs:-webkit-full-screen {
    background: #020617 !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: none !important;
  }

  /* The overlay container should not block dragging on the field. Only its
     actual buttons/menu may receive taps. */
  body.tactics-field-focus-body .tactics-fs-options,
  #tactics-pitch-fs:fullscreen .tactics-fs-options,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 120 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    pointer-events: none !important;
  }
  body.tactics-field-focus-body .tactics-fs-options > *,
  #tactics-pitch-fs:fullscreen .tactics-fs-options > *,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options > * {
    pointer-events: auto !important;
  }

  body.tactics-field-focus-body .tactics-fs-options-toggle,
  body.tactics-field-focus-body .tactics-exit-focus,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-toggle,
  #tactics-pitch-fs:fullscreen .tactics-exit-focus,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-toggle,
  #tactics-pitch-fs:-webkit-full-screen .tactics-exit-focus {
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(7,12,22,.42) !important;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.24) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
  }

  body.tactics-field-focus-body .tactics-exit-focus,
  #tactics-pitch-fs:fullscreen .tactics-exit-focus,
  #tactics-pitch-fs:-webkit-full-screen .tactics-exit-focus {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: auto !important;
    z-index: 121 !important;
  }

  body.tactics-field-focus-body .tactics-fs-options-menu,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 174px !important;
    max-width: 210px !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(7,12,22,.58) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 44px rgba(0,0,0,.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
  }
  body.tactics-field-focus-body .tactics-fs-options-menu[aria-hidden="true"],
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu[aria-hidden="true"],
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu[aria-hidden="true"] {
    display: none !important;
  }
  body.tactics-field-focus-body .tactics-fs-options-menu[aria-hidden="false"],
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu[aria-hidden="false"],
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu[aria-hidden="false"] {
    display: block !important;
  }
  body.tactics-field-focus-body .tactics-fs-options-menu button,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu button,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.tactics-field-focus-body .tactics-fs-options-menu button + button,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu button + button,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu button + button {
    margin-top: 2px !important;
  }
  body.tactics-field-focus-body .tactics-fs-options-menu button:hover,
  body.tactics-field-focus-body .tactics-fs-options-menu button:active,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu button:hover,
  #tactics-pitch-fs:fullscreen .tactics-fs-options-menu button:active,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu button:hover,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-options-menu button:active {
    background: rgba(255,255,255,.08) !important;
  }

  /* Remove any extra white strip / spacing below the pitch in fullscreen. */
  body.tactics-field-focus-body .tactics-pitch-card,
  body.tactics-field-focus-body #tactics-pitch-fs,
  #tactics-pitch-fs:fullscreen,
  #tactics-pitch-fs:-webkit-full-screen {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ===========================================================================
 * v124 — repair round after screenshots
 * Fixes:
 * - page scroll should work again
 * - weergave section readable
 * - hide ugly floating tactics tools outside fullscreen on mobile
 * - fullscreen player picker becomes a small bottom sheet, not a giant block
 * - bench/team area cleaner and readable
 * ======================================================================== */

/* --- Scroll repair ------------------------------------------------------ */
@media (max-width: 860px) {
  /* Outside mobile field-focus/fullscreen the page must stay normally scrollable. */
  html.sx-phone-webapp body:not(.tactics-field-focus-body),
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .main,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .page,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .card,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .card-body,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .tactics-view,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .tactics-layout,
  html.sx-phone-webapp body:not(.tactics-field-focus-body) .tactics-pitch-card {
    overflow: visible !important;
    touch-action: auto !important;
  }

  /* Even in field focus the wrapper itself should not kill all touch scrolling
     logic; only the pitch should keep its drag behaviour. */
  body.tactics-field-focus-body .tactics-pitch-card,
  body.tactics-field-focus-body #tactics-pitch-fs,
  #tactics-pitch-fs:fullscreen,
  #tactics-pitch-fs:-webkit-full-screen {
    touch-action: auto !important;
  }
  body.tactics-field-focus-body .tactics-pitch,
  #tactics-pitch-fs:fullscreen .tactics-pitch,
  #tactics-pitch-fs:-webkit-full-screen .tactics-pitch {
    touch-action: none !important;
  }
}

/* --- Weergave block readability ---------------------------------------- */
@media (max-width: 860px) {
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    align-items: stretch !important;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display > span,
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display > .tactics-control {
    grid-column: 1 / -1;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display > span {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display label {
    min-width: 0 !important;
    min-height: 56px;
    padding: 12px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    color: var(--text-main) !important;
    border-radius: 16px !important;
    background: rgba(83,98,213,.08) !important;
    border: 1px solid rgba(83,98,213,.12) !important;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-group-content.tactics-display label input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 !important;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-control.tactics-range {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(15,23,42,.04) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
  }
  html.sx-phone-webapp .tactics-view-group .tactics-control.tactics-range label {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
}

/* --- Hide extra mobile tactics overlays outside fullscreen -------------- */
@media (max-width: 860px) {
  html.sx-phone-webapp [data-sx-board-tools="tactics"],
  html.sx-phone-webapp .tactics-fs-players {
    display: none !important;
  }

  body.tactics-field-focus-body [data-sx-board-tools="tactics"],
  body.tactics-field-focus-body .tactics-fs-players,
  #tactics-pitch-fs:fullscreen [data-sx-board-tools="tactics"],
  #tactics-pitch-fs:fullscreen .tactics-fs-players,
  #tactics-pitch-fs:-webkit-full-screen [data-sx-board-tools="tactics"],
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players {
    display: block !important;
  }

  /* In focus mode the board-tools island should feel like a compact glass
     overlay instead of a huge dark panel. */
  body.tactics-field-focus-body [data-sx-board-tools="tactics"],
  #tactics-pitch-fs:fullscreen [data-sx-board-tools="tactics"],
  #tactics-pitch-fs:-webkit-full-screen [data-sx-board-tools="tactics"] {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top) + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 118 !important;
    width: min(calc(100% - 88px), 320px) !important;
    pointer-events: none !important;
  }
  body.tactics-field-focus-body [data-sx-board-tools="tactics"] > *,
  #tactics-pitch-fs:fullscreen [data-sx-board-tools="tactics"] > *,
  #tactics-pitch-fs:-webkit-full-screen [data-sx-board-tools="tactics"] > * {
    pointer-events: auto !important;
    border-radius: 22px !important;
    background: rgba(7,12,22,.44) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 20px 42px rgba(0,0,0,.26) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }
}

/* --- Fullscreen player picker redesign --------------------------------- */
@media (max-width: 860px) {
  body.tactics-field-focus-body .tactics-fs-players,
  #tactics-pitch-fs:fullscreen .tactics-fs-players,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players {
    position: absolute !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 119 !important;
    pointer-events: none !important;
  }
  body.tactics-field-focus-body .tactics-fs-players > *,
  #tactics-pitch-fs:fullscreen .tactics-fs-players > *,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players > * {
    pointer-events: auto !important;
  }
  body.tactics-field-focus-body .tactics-fs-players-toggle,
  #tactics-pitch-fs:fullscreen .tactics-fs-players-toggle,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players-toggle {
    width: min(100%, 320px) !important;
    margin: 0 auto !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(7,12,22,.48) !important;
    color: #fff !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.26) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }
  body.tactics-field-focus-body .tactics-fs-players-menu,
  #tactics-pitch-fs:fullscreen .tactics-fs-players-menu,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players-menu {
    display: none;
    width: 100% !important;
    max-height: min(44vh, 340px) !important;
    margin-top: 8px !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 22px !important;
    background: rgba(7,12,22,.56) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 24px 44px rgba(0,0,0,.28) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
  }
  body.tactics-field-focus-body .tactics-fs-players.is-open .tactics-fs-players-menu,
  #tactics-pitch-fs:fullscreen .tactics-fs-players.is-open .tactics-fs-players-menu,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players.is-open .tactics-fs-players-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.tactics-field-focus-body .tactics-fs-players-menu button,
  #tactics-pitch-fs:fullscreen .tactics-fs-players-menu button,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-players-menu button {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
    text-align: left !important;
    min-height: 48px !important;
  }
  body.tactics-field-focus-body .tactics-fs-player-avatar,
  #tactics-pitch-fs:fullscreen .tactics-fs-player-avatar,
  #tactics-pitch-fs:-webkit-full-screen .tactics-fs-player-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(83,98,213,.18) !important;
    color: #fff !important;
    font-weight: 800 !important;
  }
}

/* --- Bench/team area cleanup ------------------------------------------- */
@media (max-width: 860px) {
  html.sx-phone-webapp .tactics-bench-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  html.sx-phone-webapp .tactics-bench-heading strong {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  html.sx-phone-webapp .tactics-bench-heading span {
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  html.sx-phone-webapp .bench-side {
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.62)) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.08) !important;
  }
  html.sx-phone-webapp [data-theme="dark"] .bench-side,
  html.sx-phone-webapp.dark .bench-side {
    background: linear-gradient(180deg, rgba(7,18,43,.96), rgba(5,15,36,.90)) !important;
    border-color: rgba(148,163,184,.14) !important;
  }
  html.sx-phone-webapp .bench-side .marker-list {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x proximity;
  }
  html.sx-phone-webapp .bench-side .marker-list .marker-tile {
    flex: 0 0 180px !important;
    scroll-snap-align: start;
  }
  html.sx-phone-webapp #onfield-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===========================================================================
 * v126 — oefening items buttons polish
 * - larger icons in add-item buttons
 * - labels clearly underneath icons
 * - white shirt icon visible
 * - works on desktop and mobile
 * ======================================================================== */

/* Training item picker: make the add buttons feel like proper tiles instead
   of tiny pills, so icon + label are immediately readable. */
.tool-accordion[data-acc="items"] .acc-body{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px !important;
  align-items: stretch !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 12px 10px !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-align: center !important;
  line-height: 1.14 !important;
  white-space: normal !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual > span,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual > span{
  display:block !important;
  width:100%;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: var(--text-main) !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual svg,
.tool-accordion[data-acc="items"] .acc-body .tool-visual .btn-ico,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual svg,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual .btn-ico{
  flex: 0 0 auto !important;
  display:block !important;
  margin: 0 auto !important;
  width: 36px !important;
  height: 36px !important;
}

/* Different objects need slightly tailored icon boxes for a balanced visual. */
.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
  width: 44px !important;
  height: 28px !important;
}
.tool-accordion[data-acc="items"] .acc-body [data-training-add="cone"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="cone_big"] svg{
  width: 34px !important;
  height: 34px !important;
}
.tool-accordion[data-acc="items"] .acc-body [data-training-add="ball"] svg{
  width: 32px !important;
  height: 32px !important;
}
.tool-accordion[data-acc="items"] .acc-body [data-training-add="step"] .btn-ico{
  width: 28px !important;
  height: 28px !important;
}

/* White shirt needs visible edge on light backgrounds. */
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_white"] svg{
  filter: drop-shadow(0 0 1px rgba(15,23,42,.70)) drop-shadow(0 2px 5px rgba(15,23,42,.14)) !important;
}
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_black"] svg{
  filter: drop-shadow(0 2px 5px rgba(15,23,42,.10)) !important;
}

/* On mobile keep them roomy but still efficient. */
@media (max-width: 860px){
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual{
    min-height: 82px !important;
    padding: 10px 8px !important;
    border-radius: 18px !important;
    gap: 7px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual > span,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual > span{
    font-size: 12px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual .btn-ico,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual .btn-ico{
    width: 30px !important;
    height: 30px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
    width: 40px !important;
    height: 24px !important;
  }
}

@media (max-width: 560px){
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===========================================================================
 * v127 — exercise item drawing + keyboard shortcut correction
 * - palette SVGs are now fully inline (no fragile <use> dependency)
 * - shirt/goal icons render clearly on light and dark UI
 * - Backspace is never an exercise-board undo/delete shortcut
 * - Undo is Ctrl+Z / Cmd+Z only
 * ======================================================================== */

.tool-accordion[data-acc="items"] .acc-body .tool-visual svg{
  overflow: visible !important;
  opacity: 1 !important;
  color: inherit;
}

.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_home"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_away"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_white"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_black"] svg{
  width: 40px !important;
  height: 36px !important;
}

.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
  width: 50px !important;
  height: 34px !important;
}

@media (max-width: 860px){
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_home"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_away"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_white"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_black"] svg{
    width: 36px !important;
    height: 32px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
    width: 44px !important;
    height: 30px !important;
  }
}

/* ===========================================================================
 * v128 — items knoppen iets kleiner
 * - item tiles slightly smaller while keeping readability
 * ======================================================================== */

.tool-accordion[data-acc="items"] .acc-body{
  grid-template-columns: repeat(auto-fit, minmax(114px, 1fr)) !important;
  gap: 9px !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual{
  min-height: 78px !important;
  padding: 10px 8px !important;
  border-radius: 18px !important;
  gap: 7px !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual > span,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual > span{
  font-size: 12px !important;
}

.tool-accordion[data-acc="items"] .acc-body .tool-visual svg,
.tool-accordion[data-acc="items"] .acc-body .tool-visual .btn-ico,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual svg,
.tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual .btn-ico{
  width: 34px !important;
  height: 34px !important;
}

.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_home"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_away"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_white"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_black"] svg{
  width: 36px !important;
  height: 32px !important;
}

.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
.tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
  width: 44px !important;
  height: 28px !important;
}

@media (max-width: 860px){
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body{
    gap: 8px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual{
    min-height: 74px !important;
    padding: 9px 7px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual > span,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual > span{
    font-size: 11.5px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .tool-visual .btn-ico,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body .training-palette-item.tool-visual .btn-ico{
    width: 28px !important;
    height: 28px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_home"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_away"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_white"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="shirt_black"] svg{
    width: 32px !important;
    height: 28px !important;
  }
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_small"] svg,
  html.sx-phone-webapp .tool-accordion[data-acc="items"] .acc-body [data-training-add="goal_big"] svg{
    width: 40px !important;
    height: 26px !important;
  }
}