/* Shared language control, translated-text resilience, and targeted RTL support. */
.site-language-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 12px 0 16px;
  padding: 16px 18px;
  border: 1px solid #27354a;
  border-radius: 8px;
  background: #121a26;
}

.site-language-setting .settings-option-copy {
  min-width: 0;
  text-align: start;
}

.site-language-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.site-language-select-wrap::after {
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  color: #8fa0b9;
  content: "\2304";
  font-size: 14px;
  pointer-events: none;
  transform: translateY(-56%);
}

.site-language-select {
  width: 100%;
  min-height: 44px;
  padding: 0 38px 0 13px;
  border: 1px solid #3a4d68;
  border-radius: 7px;
  outline: 0;
  color: #f4f7fb;
  background: #0d141f;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  appearance: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.site-language-select:hover {
  border-color: #59749a;
  background: #111b29;
}

.site-language-select:focus-visible {
  border-color: #76a2ff;
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.2);
}

.site-language-select:active {
  transform: scale(0.985);
}

html.light-mode .site-language-setting {
  border-color: #dfe4ec;
  background: #f5f7fa;
}

html.light-mode .site-language-select {
  border-color: #cbd4e1;
  color: #172033;
  background: #ffffff;
}

html.light-mode .site-language-select:hover {
  border-color: #9cabc0;
  background: #f8faff;
}

html.light-mode .site-language-select-wrap::after {
  color: #68758a;
}

/* Preserve the legacy two-span button shape so responsive rules continue to
   target the label rather than the gear. The accessible name lives on the
   button and stays synchronized with the selected language. */
[data-site-settings-trigger] > .site-settings-label {
  display: none !important;
}

/* Translation expansion: copy should wrap before controls or cards overflow. */
:is(.career-screen, .settings-modal, .app-shell) :is(button, a, strong, small, p, span, label, h1, h2, h3) {
  overflow-wrap: break-word;
}

.career-decision-panel,
.career-decision-panel *,
.career-decision-option-title > *,
.career-decision-option-impact > span,
.career-decision-verdict > div {
  min-width: 0;
}

.career-decision-options > button {
  height: auto;
  min-height: 44px;
  text-align: start;
}

.career-decision-option-title {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.career-decision-option-title em {
  margin-inline-start: auto;
  white-space: nowrap;
}

.career-decision-option-impact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.career-season-tabs button,
.career-achievement-tabs button,
.settings-keybind-button {
  height: auto;
  min-height: 42px;
  white-space: normal;
}

/* German status values are longer; keep the compact hero readable without
   changing its height or forcing a second line into the metric row. */
html[data-locale="de"] .career-screen[data-career-dashboard="compact"] .career-dashboard-hero-metric strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}

html[data-locale="zh-CN"] body {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* Live commentary is authored as one compact line in English, but translated
   football phrasing often needs a second line. Let the existing box grow only
   as much as its content requires instead of clipping it at 36/42px. */
html[data-locale] body .match-commentary-feed,
html[data-locale] body .match-commentary-feed.is-goal {
  box-sizing: border-box;
  min-height: 36px;
  max-height: none !important;
  height: auto;
  padding-block: 7px;
}

html[data-locale]:not([data-locale="en"]) body .stage-round {
  max-width: min(100%, 280px);
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
}

html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", "Manrope", system-ui, sans-serif;
}

html[dir="rtl"] :is(.settings-option, .settings-keybind-row, .career-decision-options > button, .career-panel, .career-creation-section) {
  text-align: start;
}

html[dir="rtl"] .site-language-select {
  padding: 0 13px 0 38px;
}

html[dir="rtl"] .career-decision-panel.is-resolved {
  box-shadow: inset -4px 0 0 var(--career-decision-outcome-tone);
}

html[dir="rtl"] .career-decision-options > button {
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--career-decision-tone) 76%, transparent);
}

html[dir="rtl"] .career-decision-options > button:focus-visible {
  box-shadow: inset -3px 0 0 var(--career-decision-tone);
}

html[dir="rtl"] .career-decision-outcome-changes > span {
  border-right: 2px solid var(--career-line-strong);
  border-left: 0;
}

html[dir="rtl"] .career-decision-outcome-changes > span.is-positive {
  border-right-color: var(--career-positive);
}

html[dir="rtl"] .career-decision-outcome-changes > span.is-negative {
  border-right-color: var(--career-danger);
}

/* These surfaces represent physical match order or machine-readable values. */
html[dir="rtl"] :is(
  .brand-mark,
  .career-coin-balance,
  .career-matchup,
  .career-match-score,
  .career-match-clock,
  .career-live-clock,
  .career-player-card-rating,
  .career-league-table,
  .career-formation-pitch,
  .match-pitch-shell,
  .scoreboard,
  .scoreline,
  time,
  code,
  kbd
) {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] :is(.career-matchup-team strong, .career-table-club strong, [data-player-name], [data-team-name], [data-country-name], [data-i18n-user-content]) {
  unicode-bidi: isolate;
}

/* A match row always represents home on the physical left and away on the
   physical right. Keep that ordering in RTL while letting its label read RTL. */
html[dir="rtl"] :is(.match-stat-row, .online-match-stat-row, .retro-match-stats > div) {
  direction: ltr;
}

html[dir="rtl"] :is(.match-stat-row, .online-match-stat-row, .retro-match-stats > div) > span {
  direction: rtl;
  unicode-bidi: isolate;
}

html[data-locale]:not([data-locale="en"]) body .authored-action-preview-commentary {
  min-width: 0;
  max-height: none;
  height: auto;
  white-space: normal;
  overflow-wrap: break-word;
}

html[dir="rtl"] :is(.match-commentary-feed .commentary-line span, .authored-action-preview-commentary, [data-authored-action-commentary]) {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Longer translated legal/donation links must not widen the whole phone page. */
@media (max-width: 760px) {
  html[data-locale]:not([data-locale="en"]) .site-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-locale]:not([data-locale="en"]) :is(.site-footer-copy, .site-footer-meta, .site-footer-links) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  html[data-locale]:not([data-locale="en"]) .site-footer-links {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  html[data-locale]:not([data-locale="en"]) body #mainContent .stage-round {
    width: auto;
    max-width: calc(100% - 24px);
    white-space: normal;
  }

  .site-language-setting {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
  }

  html[data-locale="es"] .career-screen[data-career-dashboard="compact"] .career-dashboard-hero-details > span {
    letter-spacing: 0.02em;
  }

  .career-decision-option-impact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  html[data-locale]:not([data-locale="en"]) body.shared-live-match-layout-active .pl-pitch-management:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-locale]:not([data-locale="en"]) body.shared-live-match-layout-active .pl-pitch-allowances {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: center;
  }

  html[data-locale]:not([data-locale="en"]) body.shared-live-match-layout-active .pl-pitch-make-subs {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-language-select {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}