/* =====================================================================================================
   B22: the online screens -- sign-in, the hub, create / join / quick join, the club pick, the lobby's
   kick-off vote, the profile and ranking, the countdown in the career, the league sheet, the account.
   Built from the game's own tokens (gameplan.css) and parts (game.css, settings.css, profile.css):
   sharp edges, the frosted plate on the stadium, Barlow Condensed for names and numbers, blue only for
   what is selected. Phones are landscape only (max-height: 520px).
   ===================================================================================================== */

/* --- the online screen's content rises in when its view changes (the screen itself slides, as B11) --- */
.ol-screen > * { transition: opacity 260ms var(--ease-std), transform 340ms var(--ease-out); }
.ol-screen[data-screen="online"]:not(.is-shown) > :not(.screen-head) { opacity: 0; transform: translateY(10px); }

/* the person button beside the gear: the manager's name on the frosted glass */
.ol-me { gap: 8px; padding: 0 14px 0 12px; max-width: 240px; }
.ol-me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-me:hover { transform: translateY(-1px); }

/* --- shared plate parts --- */
.ol-plate { padding: clamp(18px, 2.2vh, 30px) clamp(20px, 2vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.ol-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.5vw, 46px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; color: var(--ink-900); }
.ol-line { margin: 0; font-size: clamp(14px, 1vw, 17px); font-weight: 500; color: var(--ink-500); }
.ol-line b { color: var(--ink-900); font-weight: 600; }
.ol-fine { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-500); }
.ol-error { margin: 0; min-height: 1.2em; font-size: 14px; font-weight: 600; color: var(--form-loss, #c43d3d); }
.ol-error:empty { min-height: 0; }
.ol-k { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.ol-field { display: grid; gap: 6px; }
.ol-input {
  height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--line-strong);
  font: 600 17px/1 var(--font-ui); color: var(--ink-900); outline: none; width: 100%; box-sizing: border-box;
  transition: box-shadow var(--t-fast) var(--ease-std), background var(--t-fast);
}
.ol-input::placeholder { color: #6a7685; font-weight: 500; } /* clearly lighter than a typed value (ink-900), still 4.5:1 on the field */
.ol-input:focus { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 0 0 1px var(--line); }
.ol-field.is-wrong .ol-input { box-shadow: inset 0 -3px 0 var(--form-loss, #c43d3d); }
.ol-btn { height: 48px; padding: 0 22px; justify-content: center; white-space: nowrap; }
.ol-btn:disabled { background: var(--ink-500); cursor: default; transform: none; }
.ol-btn.is-sent { background: var(--ink-700); }
.ol-link { all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); padding: 10px 2px; min-height: 24px; }
.ol-link:hover { color: var(--ink-900); box-shadow: inset 0 -2px 0 var(--ink-900); }
.ol-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-links { display: flex; gap: 22px; }
.ol-actions-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.ol-center { position: absolute; inset: calc(var(--pad) + 64px) var(--pad) var(--pad); display: grid; place-items: center; }
.ol-message { width: min(620px, 100%); }
.ol-big-hour { font-size: clamp(40px, 4vw, 72px); }
.ol-big-hour b { color: var(--ink-900); }

/* the career bar with the kick-off chip is wider than the offline one: below ~1400 px the club's name was cut mid-letter
   ("FC MILAN"); as on a phone, the crest alone names the club (the Club tab is beside it) */
@media (max-width: 1400px) { .career-bar:has(.bar-kick:not([hidden])) .bar-club-text { display: none; } }

/* --- sign-in: the emblem on the stadium, the plate beside it --- */
.ol-signin { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); align-items: center; gap: clamp(24px, 4vw, 90px); padding: var(--pad) clamp(28px, 6vw, 140px); }
.ol-signin-brand { display: grid; justify-items: center; gap: 10px; }
.ol-signin-brand .brand-mark { width: min(36vw, 54vh, 560px); height: auto; filter: drop-shadow(0 12px 28px rgba(6, 26, 14, 0.35)); }
.ol-signin-brand .start-tagline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.3vw, 24px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 20, 8, 0.55); }
.ol-signin-plate.is-rising { animation: card-in 620ms var(--ease-out) 300ms backwards; }
.ol-google { min-height: 48px; display: flex; }
.ol-google > * { flex: 1; }
/* no Google button (not configured, or still loading): no empty band and no orphaned "or" divider */
.ol-google:empty, .ol-google:empty + .ol-or { display: none; }
.ol-google-fake {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(16, 24, 40, 0.08);
  font: 600 16px/1 var(--font-ui); color: var(--ink-900); transition: background var(--t-micro), box-shadow var(--t-micro);
}
.ol-google-fake svg { width: 20px; height: 20px; }
.ol-google-fake:hover { background: var(--paper-2); }
.ol-google-fake:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-or { display: flex; align-items: center; gap: 12px; color: var(--ink-500); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.ol-or::before, .ol-or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.ol-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.ol-form-row.is-code { grid-template-columns: auto auto; justify-content: start; align-items: center; }

/* six boxes over one real input: paste, autofill and the keyboard all work */
.ol-code { position: relative; display: grid; grid-template-columns: repeat(var(--n), 46px); gap: 6px; cursor: text; }
.ol-code-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; font-size: 16px; caret-color: transparent; }
.ol-box {
  height: 56px; display: grid; place-items: center; background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--line-strong);
  font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink-900); font-variant-numeric: tabular-nums;
  transition: box-shadow var(--t-fast) var(--ease-std), background var(--t-fast);
}
.ol-box.is-filled { background: var(--paper); }
.ol-box.is-next { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 0 0 1px var(--line); }

/* --- the hub: three league cards, the actions beside them --- */
.ol-hub { position: absolute; left: 50%; top: calc(50% + 24px); transform: translate(-50%, -50%); display: flex; gap: clamp(18px, 2vw, 40px); align-items: stretch; }
.ol-leagues { display: flex; gap: clamp(14px, 1.4vw, 28px); }
.ol-league.slot-card { width: clamp(220px, 17.5vw, 440px); height: min(62vh, 820px); }
.ol-league.is-free { cursor: default; background: rgba(255, 255, 255, 0.42); box-shadow: none; outline: 2px dashed rgba(255, 255, 255, 0.75); outline-offset: -2px; }
.ol-league.is-free .slot-plus svg { color: var(--ink-500); }
.ol-league.is-free .slot-body b { color: var(--ink-700); }
.ol-league:not(.is-free):hover { background: var(--paper); transform: translateY(-8px); box-shadow: var(--shadow-2); }
.ol-league:not(.is-free):hover::after, .ol-league:not(.is-free):focus-visible::after { transform: scaleX(1); }
.ol-league .slot-label { color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.ol-league.is-free .slot-label, .ol-league .ol-outofwork ~ .slot-label { color: var(--ink-500); text-shadow: none; }
.ol-outofwork { background: var(--surface-ink); }
.ol-outofwork svg { width: 64px; height: 64px; color: var(--ink-500); }
.ol-league .slot-manager { font-size: 14px; font-weight: 600; color: var(--ink-500); }
.ol-league .slot-body b { font-size: clamp(24px, 1.8vw, 36px); }
.ol-when { display: grid; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ol-when small { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.ol-when strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.6vw, 30px); letter-spacing: 0.03em; color: var(--ink-900); line-height: 1; }
.ol-unread { position: absolute; right: 12px; top: 12px; z-index: 3; min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 17px; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.3); }

.ol-side { width: clamp(300px, 23vw, 480px); display: flex; flex-direction: column; gap: 10px; }
.ol-side-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px; background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-1); }
.ol-side-head b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.ol-action {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 92px; padding: 14px 16px; background: var(--surface-2); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-1); border-left: 4px solid transparent;
  transition: background var(--t-micro) var(--ease-std), border-color var(--t-fast), transform var(--t-micro);
}
.screen.is-active .ol-action { animation: card-in 560ms var(--ease-out) calc(260ms + var(--i, 0) * 80ms) backwards; }
.ol-action:hover:not([disabled]), .ol-action:focus-visible { background: var(--paper); border-left-color: var(--accent); }
.ol-action:active:not([disabled]) { transform: scale(0.985); }
.ol-action[disabled] { cursor: default; opacity: 0.55; }
.ol-action > svg { width: 18px; height: 18px; color: var(--ink-500); }
.ol-action-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--dark); color: var(--paper); flex: none; }
.ol-action-icon svg { width: 24px; height: 24px; }
.ol-action-text { display: grid; gap: 3px; min-width: 0; }
.ol-action-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.5vw, 26px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-900); line-height: 1; }
.ol-action-text span { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.ol-limit, .ol-side-note { margin: 2px 0 0; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink-700); background: var(--surface); box-shadow: var(--shadow-1); }
.ol-limit { border-left: 4px solid var(--warn); }
.ol-side-note { font-weight: 500; color: var(--ink-500); }

/* --- the club pick: the offline carousel and club panel (the user, 12 Oct); the league's line beside the button --- */
.ol-pick .info-action { justify-self: stretch; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; }
.ol-pick .info-action .ol-error { margin: 0; }
.ol-pick .info-action .ol-error:empty { display: none; }
.club-card.is-taken { cursor: not-allowed; opacity: 0.62; }
.club-card.is-taken .kit-field { filter: grayscale(0.7) brightness(0.92); }
.club-card.is-taken.is-on { opacity: 0.92; }
.club-card.is-taken .card-nick { color: var(--ink-700); font-weight: 600; }
.ol-taken { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-80%); z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; background: rgba(16, 21, 31, 0.78); color: var(--paper); }
.ol-taken small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.ol-taken b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.15vw, 20px); letter-spacing: 0.04em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-pick-text { display: grid; gap: 4px; min-width: 0; }
.ol-pick-line { font-size: 15px; font-weight: 600; color: var(--ink-700); }

/* --- the hour chips (create's kick-off, the lobby's vote): four parts of the day, six hours each; one tap --- */
.hc { display: grid; gap: 6px; }
.hc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.hc-part { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.hc-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hc-chip { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 40px; padding: 4px 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.08); transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-micro); }
.hc-chip b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.03em; color: var(--ink-900); }
.hc-chip small { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.hc-chip:hover { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.2); }
.hc-chip.is-leading { box-shadow: inset 0 0 0 2px var(--accent); }
.hc-chip.is-on { background: var(--dark); box-shadow: none; }
.hc-chip.is-on b, .hc-chip.is-on small { color: var(--paper); }
.hc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a press answers at once, on the way down (as every other control in the game) */
.hc-chip:active { transform: scale(0.95); }
.ol-link:active, .ac-del-link:active { transform: scale(0.96); }
.hc-summary { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-500); }
.hc-summary b { font-family: var(--font-display); font-weight: 700; font-size: 1.25em; letter-spacing: 0.03em; color: var(--ink-900); }

/* --- create: the details plate --- */
.ol-create { width: min(640px, 100%); position: relative; }
.ol-create::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--k1) 0 70%, var(--k2) 70%); }
.ol-create-club { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ol-create-club .crest { width: 44px; height: auto; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.25)); }
.ol-create-club div { display: grid; gap: 2px; flex: 1; }
.ol-create-club b { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }

/* --- share: the code, big --- */
.ol-share { width: min(660px, 100%); }
.ol-share-code { display: flex; gap: 8px; margin: 6px 0; }
.ol-share-code span { width: clamp(52px, 4.4vw, 72px); height: clamp(64px, 5.4vw, 88px); display: grid; place-items: center; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 3.2vw, 56px); }
.ol-share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.ol-share-url { height: 44px; display: flex; align-items: center; padding: 0 12px; background: var(--paper-2); font-size: 14px; font-weight: 600; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-share-link .back-btn { box-shadow: none; background: var(--paper-2); }
.ol-share-link .back-btn:hover { transform: none; background: var(--paper); box-shadow: var(--shadow-1); }
.ol-share-link svg { width: 18px; height: 18px; }

/* --- invite friends (the League sheet's block and the pause menu's sheet) --- */
.tr-modal.is-invite .tr-sheet { width: min(560px, 100%); }
.lg-invite { display: flex; flex-direction: column; gap: 10px; }
.lg-invite-line b { color: var(--ink-900); font-weight: 700; }
.lg-invite-line.is-full b { color: var(--ink-500); font-weight: 600; }
.lg-invite-code span { width: clamp(40px, 11vw, 56px); height: clamp(52px, 14vw, 68px); font-size: clamp(30px, 8vw, 42px); }
.lg-invite .ol-share-link { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 520px) { .lg-invite .ol-share-link { grid-template-columns: 1fr 1fr; } .lg-invite .ol-share-url { grid-column: 1 / -1; } }

/* --- join with a code --- */
.ol-join { width: min(560px, 100%); }
.ol-join .ol-code { grid-template-columns: repeat(var(--n), 56px); margin: 6px 0; }
.ol-join .ol-box { height: 66px; font-size: 36px; }

/* --- the lobby: the kick-off vote --- */
.ol-lobby { position: absolute; inset: calc(var(--pad) + 64px) var(--pad) var(--pad); display: grid; place-items: center; }
.ol-lobby-plate { width: min(1180px, 100%); gap: 12px; }
.ol-lobby-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.ol-lobby-head > div:first-child { display: grid; gap: 8px; }
.ol-lobby-close { display: grid; justify-items: end; gap: 2px; text-align: right; }
.ol-lobby-close small { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.ol-lobby-close b { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.2vw, 40px); line-height: 0.9; }
.ol-lobby-close span { font-size: 13px; font-weight: 500; color: var(--ink-500); }
.ol-tally { display: flex; align-items: baseline; gap: 14px; padding: 10px 14px; background: var(--paper-2); border-left: 4px solid var(--ink-900); }
.ol-tally-k { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); flex: none; }
.ol-tally b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px); letter-spacing: 0.03em; color: var(--ink-900); }
.ol-lobby-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; }
.ol-lobby-foot .ol-error { grid-column: 1; }
.ol-lobby-foot .ol-btn { grid-column: 2; grid-row: 1 / 3; min-width: 220px; }

/* the strip: who can make each hour (bars), the window, the handles */
.ks { position: relative; padding: 0 24px; user-select: none; -webkit-user-select: none; }

/* --- profile and the global ranking --- */
.ol-profile { position: absolute; inset: calc(var(--pad) + 64px) var(--pad) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 2vw, 36px); align-items: start; align-content: center; max-width: 1400px; margin: 0 auto; }
.ol-record { align-self: stretch; }
.ol-record .ol-actions-row { margin-top: auto; }
.ol-name { font-size: clamp(38px, 3.4vw, 64px); }
.ol-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.ol-tile { display: grid; gap: 4px; padding: 14px 10px 12px; background: var(--paper-2); text-align: center; }
.ol-tile b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.6vw, 48px); line-height: 0.86; color: var(--ink-900); }
.ol-tile small { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.ol-ranking { max-height: 100%; min-height: 0; }
.ol-ranking-head { display: flex; align-items: center; gap: 14px; }
.ol-ranking-head div { display: grid; gap: 2px; }
.ol-rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; overflow-y: auto; min-height: 0; }
.ol-rank-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 70px; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; background: var(--paper-2); border-left: 4px solid transparent; }
.ol-rank-row:nth-child(-n + 3) .ol-rank-n { color: var(--ink-900); }
.ol-rank-n { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-500); }
.ol-rank-name { font-weight: 600; font-size: 15px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.ol-rank-name small, .lg-who small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 6px; background: var(--dark); color: var(--paper); }
.ol-rank-detail { font-size: 13px; font-weight: 500; color: var(--ink-500); white-space: nowrap; }
.ol-rank-score { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-align: right; }
.ol-rank-row.is-me { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); }
.ol-rank-gap { text-align: center; color: var(--ink-500); font-weight: 700; letter-spacing: 0.3em; line-height: 1; padding: 2px 0; }

/* --- a toast at the top --- */
.ol-toast { position: fixed; z-index: 70; left: 50%; top: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-weight: 600; font-size: 15px; color: var(--ink-900); background: var(--surface-strong); animation: ol-toast-in 420ms var(--ease-out) both; }
.ol-toast.is-leaving { animation: ol-toast-out 320ms var(--ease-std) both; }
.ol-toast-dot { width: 10px; height: 10px; background: var(--ok); flex: none; }
@keyframes ol-toast-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ol-toast-out { to { opacity: 0; transform: translate(-50%, -10px); } }

/* =====================================================================================================
   In the career: the countdown chip in the bar, the countdown on the Dashboard's cards
   ===================================================================================================== */
.bar-kick {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 clamp(12px, 1vw, 18px) 0 clamp(10px, 0.8vw, 14px);
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
  transition: background var(--t-fast) var(--ease-std), transform var(--t-micro);
}
.bar-kick:hover { background: var(--paper); }
.bar-kick:active { transform: scale(0.97); }
.bar-kick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar-kick-icon { display: grid; place-items: center; width: 22px; color: var(--ink-700); }
.bar-kick-icon svg { width: 22px; height: 22px; }
.bar-kick-text { display: flex; flex-direction: column; line-height: 1; }
.bar-kick-text small { font-family: var(--font-display); font-weight: 600; font-size: clamp(10.5px, 0.66vw, 12.5px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.bar-kick-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.35vw, 26px); color: var(--ink-900); margin-top: 3px; white-space: nowrap; }
.bar-kick.is-sheet-soon .bar-kick-text small, .bar-kick.is-locked .bar-kick-text small { color: var(--warn); }
.bar-kick.is-live { background: var(--dark); }
.bar-kick.is-live .bar-kick-text small { color: rgba(255, 255, 255, 0.72); }
.bar-kick.is-live .bar-kick-text b { color: var(--paper); }
.bar-kick-icon i { width: 10px; height: 10px; background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.28); }
.bar-kick-watch { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px 5px; background: var(--paper); color: var(--ink-900); }

@media (max-width: 1600px) and (min-height: 521px) {
  .bar-kick-icon:not(:has(i)) { display: none; }
  .bar-kick-watch { display: none; }
  .bar-kick { padding: 0 12px; }
}

/* the Dashboard: where offline stands Continue / Play, online stands the countdown */
.ol-cd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 22px 9px; background: var(--dark); color: var(--paper); min-width: min(100%, 360px); max-width: 100%; box-sizing: border-box; box-shadow: var(--shadow-1); text-align: center; }
.ol-cd-text { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 10px; max-width: 100%; }
.ol-cd-label, .ol-cd-clock { flex: 0 0 100%; justify-content: center; }
.ol-cd-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.ol-cd-clock { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, min(4vw, 6.6vh), 60px); letter-spacing: 0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.ol-cd-clock.is-word { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: 0.06em; text-transform: uppercase; }
.ol-cd-when { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.ol-cd-note { margin: 0; padding: 3px 10px; font-size: 12px; font-weight: 700; color: #3a2606; background: #f3c27a; white-space: nowrap; }
.ol-cd.is-locked .ol-cd-note { color: var(--paper); background: rgba(255, 255, 255, 0.14); }
.ol-cd.is-live { background: #b8282d; }
.ol-cd-dot { width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--paper); animation: ol-cd-pulse 1.4s ease-in-out infinite; }
@keyframes ol-cd-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .ol-cd-dot { animation: none; } }
.ol-cd-text-host { display: contents; }
.ol-cd-watch.btn { background: var(--paper); color: var(--ink-900); height: 44px; min-width: 150px; justify-content: center; font-size: 16px; }
.ol-cd-watch.btn:hover { background: var(--paper-2); }
.mc-play .ol-cd, .mc-cta .ol-cd { pointer-events: auto; }
.mc-cta:has(.ol-cd) { opacity: 1; }
.sd-next-count.is-online b { font-size: 0.86em; white-space: nowrap; }
.sd-next-count.is-online small { white-space: nowrap; }

/* the market is frozen from kick-off to the final whistle: said on the Transfers page */
:root[data-market-frozen] .career-page[data-page="transfers"]::before {
  content: "Market frozen until full time · offers wait, their timers paused"; position: fixed; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 10px 16px; background: var(--dark); color: var(--paper); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-2); white-space: nowrap;
}

/* =====================================================================================================
   The league sheet (people, host, claim, reactions, feed)
   ===================================================================================================== */
.tr-modal.is-league .tr-sheet { width: min(1120px, 100%); }
.lg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.lg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lg-block { display: flex; flex-direction: column; gap: 8px; }
.lg-block h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.lg-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-person { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 4px 12px 4px 8px; background: var(--paper-2); border-left: 4px solid transparent; }
.lg-person.is-me { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); }
.lg-crest { display: grid; place-items: center; }
.lg-crest .crest { width: 30px; height: auto; }
.lg-crest > svg:not(.crest) { width: 24px; height: 24px; color: var(--ink-500); }
.lg-who { display: grid; gap: 2px; min-width: 0; }
.lg-who b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink-900); white-space: nowrap; overflow: hidden; }
.lg-who small.is-host { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.lg-who > span { font-size: 13px; font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-seen { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-500); white-space: nowrap; }
.lg-seen i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); opacity: 0.5; }
.lg-seen.is-online i { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px rgba(47, 158, 99, 0.2); }
.lg-seen.is-online { color: var(--ink-900); font-weight: 600; }
.lg-seen.is-today i { background: var(--ok); opacity: 0.45; }
.lg-note { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-500); }
.lg-note.is-msg { padding: 10px 12px; background: var(--paper-2); border-left: 4px solid var(--ok); color: var(--ink-900); font-weight: 600; }
.lg-fine { margin: 0; font-size: 13px; color: var(--ink-500); }
.lg-host-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-host-row .back-btn { box-shadow: none; background: var(--paper-2); }
.lg-host-row .back-btn:hover { transform: none; background: var(--paper); box-shadow: var(--shadow-1); }
.lg-pause { display: grid; gap: 10px; padding: 12px; background: var(--paper-2); }
.lg-field { display: grid; gap: 6px; }
.lg-k { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.lg-days { flex-wrap: wrap; }
.lg-days button { min-width: 0; padding: 0 10px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chip { all: unset; box-sizing: border-box; cursor: pointer; min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--paper-2); font-weight: 600; font-size: 14px; color: var(--ink-700); transition: background var(--t-micro), box-shadow var(--t-micro); }
.lg-pause .lg-chip { background: var(--paper); }
.lg-chip:hover { background: var(--paper); box-shadow: var(--shadow-1); color: var(--ink-900); }
.lg-chip.is-on { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 -3px 0 var(--accent), 0 2px 8px rgba(16, 24, 40, 0.1); }
.lg-chip:active { transform: scale(0.97); }
.lg-chip:focus-visible, .lg-em:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-ai { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-ai li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 6px 5px 10px; background: var(--paper-2); }
.lg-ai .crest { width: 28px; height: auto; }
.lg-ai b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.lg-ai .btn { height: 38px; padding: 0 16px; }
.lg-result { display: grid; gap: 10px; padding: 12px; background: var(--paper-2); }
.lg-score { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr) 30px; align-items: center; gap: 10px; }
.lg-score .crest { width: 30px; height: auto; }
.lg-score b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-score b:nth-of-type(2) { text-align: right; }
.lg-score strong { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 0.9; padding: 4px 10px; background: var(--dark); color: var(--paper); }
.lg-score strong i { font-style: normal; opacity: 0.6; margin: 0 2px; }
.lg-emoji { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.lg-em { all: unset; box-sizing: border-box; cursor: pointer; position: relative; height: 46px; display: grid; place-items: center; background: var(--paper); transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro); }
.lg-em span { font-size: 22px; line-height: 1; }
.lg-em small { position: absolute; right: 3px; bottom: 2px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink-500); }
.lg-em:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.lg-em:active { transform: scale(0.94); }
.lg-em.is-on { box-shadow: inset 0 -3px 0 var(--accent); }
.lg-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.lg-feed li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 42px; padding: 2px 10px 2px 8px; background: var(--paper-2); }
.lg-feed li.is-me { background: var(--paper); box-shadow: inset 4px 0 0 var(--accent); }
.lg-feed-crest .crest { width: 24px; height: auto; }
.lg-feed-text { display: grid; gap: 1px; min-width: 0; }
.lg-feed-text b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-feed-text small { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-feed-what { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.03em; color: var(--ink-900); white-space: nowrap; }
.lg-feed-what.is-emoji { font-family: inherit; font-size: 22px; }
.lg-feed-ago { font-size: 12px; color: var(--ink-500); white-space: nowrap; }



/* --- the account sheet and the notifications prompt --- */
.tr-modal.is-account .tr-sheet { width: min(760px, 100%); }
.ac-name-field { display: flex; gap: 8px; }
.ac-name-field .ol-input { width: 220px; }
.ac-name-field .btn { height: 48px; }
.st-row .btn svg { width: 18px; height: 18px; }
.ac-pref.is-off .st-head { opacity: 0.55; }
.st-seg button:disabled { cursor: default; opacity: 0.55; }
.ac-out.back-btn { box-shadow: none; background: var(--paper-2); }
.ac-out.is-confirm { background: var(--warn); color: var(--paper); }
.st-msg { margin: 6px 0 0; padding: 10px 12px; background: var(--paper-2); border-left: 4px solid var(--ok); font-weight: 600; font-size: 14px; }
.st-msg.is-error { border-left-color: var(--form-loss, #c43d3d); }
/* "Delete my account": a quiet link at the foot of the sheet, then a confirmation step with one red button */
.ac-del-row { display: flex; justify-content: flex-end; margin-top: 2px; }
.ac-del-link { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 2px; font-size: 13px; font-weight: 500; color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-micro) var(--ease-std); }
.ac-del-link:hover { color: var(--form-loss, #c43d3d); }
.ac-del-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-del-list li:first-child { border-left-color: var(--form-loss, #c43d3d); }
.ac-del-confirm .ol-input { width: 260px; }
.tr-modal.is-account .pp-sheet-foot { gap: 8px; }
.tr-modal.is-account .pp-sheet-foot .back-btn { box-shadow: none; background: var(--paper-2); }
.ac-del-go.btn { background: var(--form-loss, #c43d3d); color: var(--paper); }
.ac-del-go.btn:disabled { background: var(--paper-2); color: var(--ink-300); cursor: default; box-shadow: none; }
.tr-modal.is-notify .tr-sheet { width: min(560px, 100%); }
.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nt-list li { display: grid; gap: 2px; padding: 10px 12px; background: var(--paper-2); border-left: 4px solid var(--ink-900); }
.nt-list b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; }
.nt-list span { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.nt-fine { margin: 0; font-size: 13px; color: var(--ink-500); }
.tr-modal.is-notify .pp-sheet-foot { gap: 8px; }
.tr-modal.is-notify .pp-sheet-foot .back-btn { box-shadow: none; background: var(--paper-2); }
.tr-modal.is-notify .pp-sheet-foot .btn { gap: 8px; }

/* =====================================================================================================
   Laptops (short screens) and landscape phones
   ===================================================================================================== */
@media (max-height: 820px) and (min-height: 521px) {
  .ol-league.slot-card { height: min(64vh, 560px); }
  .ol-action { min-height: 80px; }
}

@media (max-height: 520px) {
  .ol-me span { display: none; }
  .ol-me { width: 44px; padding: 0; justify-content: center; }
  .ol-plate { padding: 12px 16px; gap: 6px; }
  .ol-title { font-size: 24px; }
  .ol-line { font-size: 13px; }
  .ol-fine { font-size: 11.5px; }
  .ol-error { font-size: 12.5px; }
  .ol-input { height: 44px; font-size: 16px; }
  .ol-btn { height: 44px; padding: 0 16px; }
  .ol-center, .ol-lobby, .ol-profile { inset: 62px 14px calc(8px + var(--shell-safe-bottom, 0px)); }
  .ol-actions-row { margin-top: 2px; }

  .ol-signin { grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr); padding: 10px 18px; gap: 18px; }
  .ol-signin-brand .brand-mark { width: min(34vw, 62vh); }
  .ol-signin-brand .start-tagline { font-size: 13px; letter-spacing: 0.24em; }
  .ol-signin-plate { max-height: calc(100vh - 20px); overflow-y: auto; }
  .ol-signin-plate .ol-fine { display: none; }
  .ol-or { font-size: 11px; }
  .ol-code { grid-template-columns: repeat(var(--n), 40px); gap: 5px; }
  .ol-box { height: 48px; font-size: 26px; }

  /* (the playtest) under the head's Back, title and tools (they end at 54px), never centred into them */
  .ol-hub { top: 62px; transform: translate(-50%, 0); gap: 10px; }
  .ol-leagues { gap: 8px; }
  .ol-league.slot-card { width: min(19vw, 170px); height: calc(100vh - 70px); }
  .ol-league .slot-label { left: 10px; top: 8px; font-size: 11px; }
  .ol-league .slot-body { padding: 8px 10px 10px; gap: 1px; }
  .ol-league .slot-body b { font-size: 18px; }
  .ol-league .slot-manager { font-size: 11.5px; }
  .ol-league .slot-line { font-size: 11.5px; }
  .ol-when { margin-top: 4px; padding-top: 5px; }
  .ol-when small { font-size: 10.5px; }
  .ol-when strong { font-size: 17px; }
  .ol-unread { min-width: 24px; height: 24px; font-size: 14px; right: 8px; top: 8px; }
  .ol-league .slot-plus svg { width: 44px; }
  .ol-outofwork svg { width: 40px; height: 40px; }
  /* the right column keeps clear of the Report corner beneath it */
  .ol-side { width: min(34vw, 300px); gap: 6px; align-self: flex-start; max-height: calc(100vh - 70px - var(--shell-safe-bottom, 0px)); }
  .ol-side-head { padding: 6px 10px; }
  .ol-side-head b { font-size: 14px; }
  .ol-action { min-height: 56px; padding: 6px 10px; gap: 10px; }
  .ol-action-icon { width: 36px; height: 36px; }
  .ol-action-icon svg { width: 20px; height: 20px; }
  .ol-action-text b { font-size: 17px; }
  .ol-action-text span { font-size: 11.5px; }
  .ol-limit, .ol-side-note { padding: 6px 10px; font-size: 11.5px; }

  .ol-pick-line { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ol-pick .info-action { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 0; }
  /* the club panel fits the screen with its button whole (scrolling inside only if a story runs long) */
  .ol-pick .club-info.is-open { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); row-gap: 4px; padding: 8px 22px 8px; }
  .ol-pick .info-action .btn { height: 40px; font-size: 15px; letter-spacing: 0.04em; padding: 0 10px; white-space: normal; line-height: 1.05; }
  .ol-pick .info-action .eyebrow { font-size: 11px; }
  .ol-taken { padding: 5px 4px; }

  /* the phone: the club and the name on the left, the hour on the right, the button beneath both */
  .ol-create { width: min(800px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-content: start; column-gap: 20px; row-gap: 8px; }
  .ol-create > * { grid-column: 1; }
  .ol-create > .ol-create-hour { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
  /* the button stays in the left column, clear of the Report corner */
  .ol-create > .ol-error, .ol-create > .ol-actions-row { grid-column: 1; }
  .ol-create > .ol-actions-row { align-self: end; justify-content: stretch; }
  .ol-create > .ol-actions-row .ol-btn { width: 100%; }
  .hc { gap: 4px; }
  .hc-row { grid-template-columns: 66px minmax(0, 1fr); gap: 6px; }
  .hc-part { font-size: 10.5px; letter-spacing: 0.1em; }
  .hc-chips { gap: 4px; }
  .hc-chip { min-height: 40px; }
  .hc-chip b { font-size: 14px; letter-spacing: 0.01em; }
  .hc-chip small { font-size: 8.5px; }
  .hc-summary { font-size: 12.5px; }
  .ol-create-club { padding-bottom: 6px; }
  .ol-create-club .crest { width: 32px; }
  .ol-create-club b { font-size: 19px; }
  .ol-create .ol-fine { display: none; }

  .ol-share-code span { width: 46px; height: 56px; font-size: 34px; }
  .ol-share-code { margin: 2px 0; }
  .ol-join .ol-code { grid-template-columns: repeat(var(--n), 46px); }
  .ol-join .ol-box { height: 54px; font-size: 30px; }

  .ol-lobby-plate { gap: 6px; max-height: 100%; overflow-y: auto; }
  .ol-lobby-head .ol-line { display: none; }
  .ol-lobby-close b { font-size: 24px; }
  .ol-tally { padding: 6px 10px; }
  .ol-tally b { font-size: 17px; }
  .ol-lobby-foot .ol-btn { min-width: 170px; }
  .ol-lobby-plate > .ol-fine { display: none; }

  .ol-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
  .ol-record, .ol-ranking { overflow-y: auto; }
  .ol-name { font-size: 30px; }
  .ol-tiles { gap: 4px; margin: 4px 0; }
  .ol-tile { padding: 8px 6px; }
  .ol-tile b { font-size: 26px; }
  .ol-tile small { font-size: 9.5px; letter-spacing: 0.06em; }
  .ol-record .ol-fine { display: none; }
  .ol-rank-row { min-height: 34px; grid-template-columns: 28px minmax(0, 1fr) 56px; padding: 0 8px; gap: 8px; }
  .ol-rank-detail { display: none; }
  .ol-rank-n, .ol-rank-score { font-size: 17px; }
  .ol-rank-name { font-size: 13px; }
  .ol-ranking .ol-action-icon { display: none; }

  .bar-kick { padding: 0 10px; gap: 6px; }
  /* the page's Report / full-screen buttons sit bottom right: the quiet link goes to the left, clear of them */
  .ac-del-row { justify-content: flex-start; }
  .ac-del-link { padding: 12px 2px; }
  /* 844 px: with the kick-off chip the bar overflows and the club crest was squashed to a sliver; the Club tab names the club */
  .career-bar:has(.bar-kick:not([hidden])) .bar-club { display: none; }
  .bar-kick-icon { display: none; }
  .bar-kick-text small { font-size: 9.5px; }
  .bar-kick-text b { font-size: 17px; margin-top: 2px; }
  .bar-kick-watch { display: none; }
  .ol-cd { padding: 4px 12px 5px; gap: 8px; min-width: 0; flex-direction: row; }
  .ol-cd-text { display: grid; grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: 12px; row-gap: 0; }
  .ol-cd-label { grid-column: 1; font-size: 9px; letter-spacing: 0.18em; flex: none; }
  .ol-cd-clock { grid-column: 1; grid-row: 2; font-size: 28px; flex: none; }
  .ol-cd-clock.is-word { font-size: 20px; }
  .ol-cd-when { display: none; }
  .ol-cd-note { grid-column: 2; grid-row: 1 / span 2; padding: 2px 7px; font-size: 10.5px; white-space: normal; max-width: 92px; text-align: center; }
  .ol-cd-watch.btn { height: 36px; min-width: 96px; font-size: 14px; }

  .tr-modal.is-league .tr-sheet { width: 100%; }
  .lg-cols { gap: 12px; }
  .lg-person { min-height: 42px; }
  .lg-emoji { gap: 3px; }
  .lg-em { height: 40px; }
  .lg-em span { font-size: 19px; }
  .lg-chip { min-height: 34px; padding: 0 10px; font-size: 12.5px; }
  .ac-name-field .ol-input { width: 180px; }
  .ac-del-confirm .ol-input { width: 180px; }
  .ac-del-link { padding: 4px 2px; font-size: 12px; }
  /* the four lines as one compact table, so the name field shows without scrolling */
  .ac-del-list li { grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 4px 10px; }
  .ac-del-list b { font-size: 14px; }
  .ac-del-list span { font-size: 12px; }
  .nt-list li { padding: 6px 10px; }
  .nt-list b { font-size: 15px; }
  .nt-list span { font-size: 12px; }
}

@media (min-width: 2200px) {
  .ol-plate { padding: 36px 44px; gap: 14px; }
  .ol-line, .ol-pick-line, .ol-action-text span { font-size: 19px; }
  .ol-input { height: 58px; font-size: 20px; }
  .ol-btn { height: 56px; font-size: 20px; }
}

/* Apple review: frosted plates turn solid when the device asks for less transparency */
@media (prefers-reduced-transparency: reduce) {
  .ol-plate, .ol-action, .ol-side-head, .ol-limit, .ol-side-note, .bar-kick, .ol-league.slot-card { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ol-screen > *, .hc-chip { transition-duration: 1ms !important; }
  .ol-toast, .ol-signin-plate.is-rising, .ol-action { animation-duration: 1ms !important; }
}

/* the clock is the card's hero: on a short laptop screen the crests give it a little room */
@media (min-width: 1025px) and (max-height: 820px) {
  .match-card.is-matchday:has(.ol-cd) .mc-crest .crest { width: clamp(50px, 4.6vw, 84px); }
  .match-card.is-matchday:has(.ol-cd) .mc-name { font-size: clamp(18px, 1.7vw, 30px); margin-top: 4px; }
}

/* the league-name counter ("23/28") and the name hint */
.ol-count { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: 0; text-transform: none; }
.ol-count.is-full { color: var(--ink-900, currentColor); }
.ol-name-hint { margin-top: 6px; }

/* --- (the playtest) a press answers at once: the button works, a line runs at the top until the server has answered --- */
.is-pending { pointer-events: none; cursor: progress; opacity: 0.72; transition: opacity 120ms ease; }
.is-pending.btn, button.is-pending { background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%); background-size: 200% 100%; animation: mc-pending 900ms linear infinite; }
@keyframes mc-pending { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.mc-sending { position: fixed; z-index: 2147483000; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity 160ms ease;
  background: linear-gradient(90deg, transparent, var(--accent, #2d6fd6), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
.mc-sending.is-on { opacity: 1; animation: mc-sending 1.1s ease-in-out infinite; }
@keyframes mc-sending { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .is-pending.btn, button.is-pending, .mc-sending.is-on { animation: none; } }

/* 13 Oct (the hands-on pass): the countdown is taller than the offline Play button it replaces, and the card's height is
   fixed -- on short windows (a 1366x620 laptop, a 1920x900 desktop browser, a 360-high phone) the teams row was squeezed
   and the club names cut off. The crests now take the room the row has (a size container), the Home/Away line goes when
   the row is short (the footer says it), and on a short laptop the countdown is one row. */
@media (min-height: 521px) and (max-height: 820px) {
  .mc-play .ol-cd { flex-direction: row; gap: 16px; padding: 6px 18px 7px; }
  .mc-play .ol-cd-text { display: grid; grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: 18px; row-gap: 0; }
  .mc-play .ol-cd-label { grid-column: 1; flex: none; font-size: 10px; }
  .mc-play .ol-cd-clock { grid-column: 1; grid-row: 2; flex: none; font-size: clamp(30px, 5.6vh, 44px); }
  .mc-play .ol-cd-when { grid-column: 2; grid-row: 1; }
  .mc-play .ol-cd-note { grid-column: 2; grid-row: 2; }
}
@media (min-height: 521px) {
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-teams { container-type: size; padding: 0; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-crest .crest { width: clamp(36px, min(7.4vw, 100cqh - 52px - clamp(26px, 2.6vw, 52px)), 150px); }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-name { margin-top: clamp(2px, 4cqh, 18px); }
}
@container (min-height: 65px) and (max-height: 200px) {
  .dash-match .match-card.is-matchday .mc-place { display: none; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-crest .crest { width: clamp(30px, min(7.4vw, 100cqh - 22px - clamp(26px, 2.6vw, 52px)), 150px); }
}
@media (max-height: 520px) {
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-teams { container-type: size; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-crest .crest { width: clamp(18px, 100cqh - 36px, 26px); }
}
/* a 360-high phone: each crest beside its name */
@container (max-height: 64px) {
  .dash-match .match-card.is-matchday .mc-place { display: none; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-side { flex-direction: row; align-items: center; justify-content: center; gap: 7px; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-side:not(.is-ours) { flex-direction: row-reverse; }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-crest .crest { width: clamp(18px, 100cqh - 10px, 30px); }
  .dash-match .match-card.is-matchday:has(.ol-cd) .mc-name { margin-top: 0; }
}

/* 13 Oct: with the kick-off chip the bar ran off the right edge below ~1180 px (the menu out of reach on a 740-wide
   phone; the club chip a 20 px sliver on a 1024 laptop): words give way to their icons, step by step */
@media (max-width: 1180px) {
  .career-bar:has(.bar-kick:not([hidden])) .bar-notes-label { display: none; }
  .career-bar:has(.bar-kick:not([hidden])) .bar-club { display: none; }
}
@media (max-width: 900px) {
  .career-bar:has(.bar-kick:not([hidden])) .bar-room .room-text { display: none; }
  .career-bar:has(.bar-kick:not([hidden])) .bar-room { padding: 0 8px; }
}
@media (max-width: 820px) {
  .career-bar:has(.bar-kick:not([hidden])) { gap: 4px; }
  .career-bar:has(.bar-kick:not([hidden])) .bar-nav > .bar-tab { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 700px) {
  .career-bar:has(.bar-kick:not([hidden])) .bar-budget .cur-plus { display: none; }
  .career-bar:has(.bar-kick:not([hidden])) .bar-nav > .bar-tab { padding-left: 5px; padding-right: 5px; font-size: 13px; letter-spacing: 0.02em; }
}

/* 13 Oct: the half-time Game Plan on a phone -- the break's time left over the pitch (the back arrow has no room for it) */
.gp-break-pill { display: none; }
@media (max-height: 520px) {
  .gp-break-pill:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 31; top: 6px; left: var(--pad); height: 24px; padding: 0 10px;
    background: #f3c27a; color: #3a2606; font: 700 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: var(--shadow-1); pointer-events: none; }
  .gp-break-pill b { font-size: 13px; letter-spacing: 0.02em; }
}

/* 13 Oct (the user: "redesign the clock and Watch, blend in the press conference; Apple design -- drift a bit from the
   game's"): the match-day strip on the next-match card -- one glass panel: the state and the clock, the day's actions,
   the day's three moments. Rounded, translucent, quiet; one filled action. */
.mc-play .ol-cd {
  position: relative; flex-wrap: wrap; justify-content: center; gap: 10px 14px;
  background: rgba(255, 255, 255, 0.72); color: var(--ink-900);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(16, 24, 40, 0.08), 0 14px 34px rgba(16, 24, 40, 0.16);
  padding: 12px 16px 12px;
}
.mc-play .ol-cd .ol-cd-label { color: var(--ink-500); letter-spacing: 0.08em; font-weight: 700; }
.mc-play .ol-cd .ol-cd-clock { color: var(--ink-900); letter-spacing: -0.02em; }
.mc-play .ol-cd .ol-cd-clock.is-word { letter-spacing: 0.01em; }
.mc-play .ol-cd .ol-cd-when { color: var(--ink-500); }
.mc-play .ol-cd .ol-cd-note { border-radius: 999px; padding: 3px 10px; background: rgba(217, 137, 31, 0.15); color: #7a4700; }
.mc-play .ol-cd.is-locked .ol-cd-note { background: rgba(16, 21, 31, 0.07); color: var(--ink-700); }
.mc-play .ol-cd.is-live { background: rgba(255, 255, 255, 0.78); }
.mc-play .ol-cd.is-live .ol-cd-clock { color: #c4262b; }
.mc-play .ol-cd.is-live .ol-cd-dot { background: #c4262b; }
.mc-play .ol-cd.is-full-time .ol-cd-clock { letter-spacing: -0.01em; }

.ol-md-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ol-md-act.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: var(--ink-900); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
  transition: transform 100ms ease-out, background-color 130ms ease-out;
}
.ol-md-act.btn:active { transform: scale(0.97); }
.ol-md-act.btn.is-ghost { background: rgba(16, 21, 31, 0.07); color: var(--ink-900); box-shadow: none; }
.ol-md-act.btn.is-ghost:hover { background: rgba(16, 21, 31, 0.11); }
.ol-md-act svg { width: 18px; height: 18px; flex: none; }
.ol-md-act span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.ol-md-act small { font: 500 11px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; opacity: 0.72; margin-top: 2px; }

.ol-md-rail { flex: 1 1 100%; display: flex; list-style: none; margin: 2px 0 0; padding: 0; }
.ol-md-rail li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 12px; color: var(--ink-500); font: 500 11px/1.2 var(--font-ui); }
.ol-md-rail li::before { content: ""; position: absolute; top: 2px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(16, 21, 31, 0.35); background: rgba(255, 255, 255, 0.9); z-index: 1; }
.ol-md-rail li + li::after { content: ""; position: absolute; top: 5.5px; right: 50%; width: 100%; height: 1.5px; background: rgba(16, 21, 31, 0.14); }
.ol-md-rail li.is-done { color: var(--ink-700); }
.ol-md-rail li.is-done::before { background: var(--ink-900); border-color: var(--ink-900); }
.ol-md-rail li.is-done + li::after, .ol-md-rail li.is-done::after { background: rgba(16, 21, 31, 0.45); }
.ol-md-rail b { font: 700 13px/1 var(--font-display); letter-spacing: 0.02em; color: inherit; }

/* a short laptop: clock and actions side by side, the rail beneath */
@media (min-height: 521px) and (max-height: 820px) {
  .mc-play .ol-cd { padding: 8px 14px 9px; gap: 6px 14px; }
}
/* a phone: the actions only (their second lines and the rail go -- the card has no room) */
@media (max-height: 520px) {
  .mc-play .ol-cd { border-radius: 14px; padding: 5px 10px; gap: 6px 10px; }
  .ol-md-rail, .ol-md-act small { display: none; }
  .ol-md-act.btn { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
  .ol-md-act svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-transparency: reduce) {
  .mc-play .ol-cd { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .ol-md-act.btn { transition: none; } }
/* the strip's layout: the state and clock on the left, the actions on the right, the day's rail beneath */
.mc-play .ol-cd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text actions" "rail rail";
  align-items: center; justify-items: start; text-align: left; width: min(100%, 560px); min-width: 0;
}
.mc-play .ol-cd:not(:has(> .ol-md-actions)) { grid-template-areas: "text text" "rail rail"; }
.mc-play .ol-cd > .ol-cd-text-host { display: block; grid-area: text; min-width: 0; }
.mc-play .ol-cd .ol-cd-text { justify-content: flex-start; }
.mc-play .ol-cd .ol-cd-label, .mc-play .ol-cd .ol-cd-clock { justify-content: flex-start; }
.mc-play .ol-cd > .ol-md-actions { grid-area: actions; justify-content: flex-end; justify-self: end; }
.mc-play .ol-cd > .ol-md-rail { grid-area: rail; justify-self: stretch; padding-top: 4px; border-top: 1px solid rgba(16, 21, 31, 0.08); }
@media (max-height: 520px) {
  .mc-play .ol-cd { width: 100%; grid-template-areas: "text actions"; }
  .mc-play .ol-cd:not(:has(> .ol-md-actions)) { grid-template-areas: "text text"; }
}
/* a short window: the rail goes (the teams row needs the room; the countdown's note still says when the sheet locks) */
@media (max-height: 700px) { .mc-play .ol-cd > .ol-md-rail { display: none; } }

/* ===================================================================================================================
   13 Oct (the user: "redesign the whole card -- immaculate, with taste and structure; Apple-like but no rounded
   corners; the match and the press conference reachable from it"). The online next-match card, in four rows: the
   competition and the state; the two clubs in columns under a rule of their colour, the kick-off between; the match
   day's band (the clock, the actions, the day's moments); the ground. Sharp edges, one filled action.
   =================================================================================================================== */
.match-card.is-ol .card-face {
  container: olm / size; padding: 0; gap: 0; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.97));
}
.olm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 0;
  font: 700 11px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500);
}
.olm-comp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-comp .cup-tile { width: 16px; height: 16px; }
.olm-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-900); white-space: nowrap; }
.match-card.is-ol:has(.ol-cd.is-live, .ol-cd.is-half-time) .olm-state { color: #c4262b; }
.match-card.is-ol:has(.ol-cd.is-live, .ol-cd.is-half-time) .olm-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c4262b; }

.olm-fixture { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; padding: 14px 24px 16px; min-height: 0; }
.olm-team { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding-top: 16px; }
.olm-team::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--home); }
.olm-team.is-away::before { background: var(--away); }
.olm-crest { display: grid; place-items: center; }
.olm-crest .crest { width: clamp(38px, 26cqh, 92px); height: auto; filter: drop-shadow(0 4px 10px rgba(16, 24, 40, 0.16)); }
.olm-id { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; text-align: center; }
.olm-name { font: 700 clamp(17px, 1.55vw, 28px)/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.olm-id small { font: 500 12px/1.2 var(--font-ui); color: var(--ink-500); }
.olm-team.is-ours .olm-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 0.18em 0.45em; vertical-align: middle; background: var(--ink-900); }
.olm-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px clamp(14px, 2.2vw, 36px) 0; }
.olm-time { font: 700 clamp(30px, 3.1vw, 52px)/0.86 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); font-variant-numeric: tabular-nums lining-nums; }
.olm-v { font: 700 clamp(22px, 2vw, 34px)/1 var(--font-display); color: var(--ink-300); }
.olm-mid small { font: 600 11px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }

/* the band: the match day's clock and actions, on a quiet inset, ruled above and below */
.match-card.is-ol .ol-cd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text actions" "rail rail";
  align-items: center; justify-items: stretch; gap: 10px 18px; margin: 0 24px; padding: 12px 18px; min-width: 0; width: auto;
  background: rgba(16, 21, 31, 0.035); color: var(--ink-900); text-align: left;
  border: 0; border-top: 1px solid rgba(16, 21, 31, 0.09); border-bottom: 1px solid rgba(16, 21, 31, 0.09);
  border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.match-card.is-ol .ol-cd:not(:has(> .ol-md-actions)) { grid-template-areas: "text text" "rail rail"; }
/* (14 Oct, a 1536x682 window: the note ran under the button) with an action in the band its button carries the deadline */
.match-card.is-ol .ol-cd:has(> .ol-md-actions) .ol-cd-note { display: none; }
.match-card.is-ol .ol-cd > .ol-cd-text-host { display: block; grid-area: text; min-width: 0; }
.match-card.is-ol .ol-cd .ol-cd-text { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 14px; row-gap: 3px; }
.match-card.is-ol .ol-cd .ol-cd-label { grid-column: 1 / -1; flex: none; justify-content: flex-start; font: 700 10px/1 var(--font-display); letter-spacing: 0.16em; color: var(--ink-500); }
.match-card.is-ol .ol-cd .ol-cd-clock { grid-column: 1; flex: none; justify-content: flex-start; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.01em; color: var(--ink-900); }
.match-card.is-ol .ol-cd .ol-cd-clock.is-word { font-size: clamp(22px, 2vw, 32px); letter-spacing: 0.02em; }
.match-card.is-ol .ol-cd .ol-cd-when { display: none; }
.match-card.is-ol .ol-cd .ol-cd-note { grid-column: 2; border-radius: 0; padding: 4px 9px; font-size: 11.5px; background: rgba(217, 137, 31, 0.14); color: #6e4000; white-space: nowrap; max-width: none; }
.match-card.is-ol .ol-cd.is-locked .ol-cd-note { background: rgba(16, 21, 31, 0.07); color: var(--ink-700); }
.match-card.is-ol .ol-cd.is-live, .match-card.is-ol .ol-cd.is-half-time { background: rgba(196, 38, 43, 0.06); }
.match-card.is-ol .ol-cd.is-live .ol-cd-clock { color: #c4262b; }
.match-card.is-ol .ol-cd.is-live .ol-cd-dot { background: #c4262b; }
.match-card.is-ol .ol-cd > .ol-md-actions { grid-area: actions; justify-self: end; justify-content: flex-end; flex-wrap: nowrap; }
.match-card.is-ol .ol-md-act.btn { border-radius: 0; min-height: 44px; padding: 0 18px; }
.match-card.is-ol .ol-md-act.btn.is-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.2); }
.match-card.is-ol .ol-md-act.btn.is-ghost:hover { background: rgba(16, 21, 31, 0.05); }
.match-card.is-ol .ol-cd > .ol-md-rail { grid-area: rail; padding-top: 6px; border-top: 1px solid rgba(16, 21, 31, 0.07); }

.olm-foot { display: flex; justify-content: space-between; gap: 12px; padding: 11px 24px 15px; font: 500 12px/1 var(--font-ui); color: var(--ink-500); }
.olm-foot span:first-child { color: var(--ink-700); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* less room (the content stacked needs ~380 px: 14 Oct, a 1536x682 laptop window ran the names into the band): the clubs
   side by side with their crests, the band tighter; below 270 px the day's rail goes too */
@container olm (max-height: 400px) {
  .olm-head { padding: 12px 18px 0; }
  .olm-fixture { padding: 8px 18px 10px; align-items: center; }
  .olm-team { flex-direction: row; justify-content: flex-start; gap: 10px; padding-top: 10px; }
  .olm-team.is-away { flex-direction: row-reverse; }
  .olm-team::before { left: 0; right: 0; }
  .olm-team .olm-id { align-items: flex-start; text-align: left; }
  .olm-team.is-away .olm-id { align-items: flex-end; text-align: right; }
  .olm-crest .crest { width: clamp(28px, 16cqh, 52px); }
  .olm-name { font-size: clamp(15px, 3.6cqw, 22px); line-height: 1.02; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .olm-mid { padding: 8px 14px 0; }
  .olm-time { font-size: clamp(24px, 2.4vw, 38px); }
  .match-card.is-ol .ol-cd { margin: 0 18px; padding: 8px 14px; }
  .olm-foot { padding: 8px 18px 11px; }
}
@container olm (max-height: 270px) {
  .match-card.is-ol .ol-cd > .ol-md-rail { display: none; }
}
@container olm (max-height: 200px) {
  .olm-head { padding: 8px 12px 0; font-size: 10px; }
  .olm-fixture { padding: 4px 12px 6px; }
  .olm-team { gap: 7px; padding-top: 7px; }
  .olm-name { font-size: 15px; }
  .olm-id small { display: none; }
  .olm-crest .crest { width: 26px; }
  .olm-mid { padding: 6px 10px 0; gap: 3px; }
  .olm-time { font-size: 22px; }
  .olm-mid small { font-size: 9.5px; }
  .match-card.is-ol .ol-cd { margin: 0 12px; padding: 5px 10px; gap: 6px 10px; }
  .match-card.is-ol .ol-cd .ol-cd-label { font-size: 9px; }
  .match-card.is-ol .ol-cd .ol-cd-clock { font-size: 22px; }
  .match-card.is-ol .ol-cd .ol-cd-note { font-size: 10px; padding: 3px 6px; white-space: normal; max-width: 110px; }
  .match-card.is-ol .ol-md-act.btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .match-card.is-ol .ol-md-act small { display: none; }
  .olm-foot { display: none; }
}
/* a narrow card (a landscape phone's dashboard column): the names may take two lines beside their crests, the kick-off
   smaller; with an action in the band its button carries the deadline, so the note gives way to it */
@container olm (max-width: 520px) {
  .olm-fixture { padding-left: 14px; padding-right: 14px; }
  .olm-team { gap: 8px; }
  .olm-name { font-size: 15px; line-height: 1.02; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .olm-id small { display: none; }
  .olm-mid { padding-left: 10px; padding-right: 10px; }
  .olm-time { font-size: clamp(23px, 6cqw, 40px); }
  .match-card.is-ol .ol-cd { margin: 0 14px; padding: 7px 12px; column-gap: 10px; }
  .match-card.is-ol .ol-cd:has(> .ol-md-actions) .ol-cd-note { display: none; }
  .match-card.is-ol .ol-cd .ol-cd-clock { font-size: 24px; }
  .match-card.is-ol .ol-md-act.btn { padding: 0 14px; }
  .olm-head, .olm-foot { padding-left: 14px; padding-right: 14px; }
}
/* the band's text in fixed rows whatever the state's markup order: the caption, then the clock with its note */
.match-card.is-ol .ol-cd .ol-cd-label { grid-row: 1; order: 0; }
.match-card.is-ol .ol-cd .ol-cd-clock { grid-row: 2; order: 0; }
.match-card.is-ol .ol-cd .ol-cd-note { grid-row: 2; order: 0; }
/* a large card (1920 and up): the caption, the band and its button grow with it */
@container olm (min-width: 640px) and (min-height: 420px) {
  .olm-head { padding: 22px 32px 0; font-size: 13px; }
  .olm-fixture, .olm-foot { padding-left: 32px; padding-right: 32px; }
  .match-card.is-ol .ol-cd { margin: 0 32px; padding: 16px 24px; }
  .match-card.is-ol .ol-cd .ol-cd-label { font-size: 12px; }
  .match-card.is-ol .ol-cd .ol-cd-clock { font-size: 44px; }
  .match-card.is-ol .ol-md-act.btn { min-height: 52px; padding: 0 26px; font-size: 17px; }
  .olm-id small, .olm-mid small { font-size: 13px; }
  .olm-foot { font-size: 14px; padding-bottom: 20px; }
}