/* ==========================================================================
   tip-details.css — 2026 redesign of the tip / analysis detail page (handoff 6a).
   Self-contained page sheet (loaded with design-tokens.css). Every class is
   uniquely prefixed `tdn-` (no generic names). Values are the literal px/hex
   from handoff/reference/mobile/6a.html — that reference is the ground truth.
   Fonts: Red Hat Display (display/numbers) + Inter (UI/body).
   ========================================================================== */

/* --- reset (scoped to .tdn-screen so it never touches the site shell
   header/footer, which are styled by global.css) --- */
.tdn-screen, .tdn-screen *, .tdn-screen *::before, .tdn-screen *::after { box-sizing: border-box; }
.tdn-screen {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--kl-surface);
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* full-bleed hero/bands (-20 margin vs 16 content padding) don't scroll */
}
.tdn-screen img { display: block; }
.tdn-screen a { text-decoration: none; color: inherit; }

/* --- match-header nav row (mirrors bet-centar .ut-mh-nav) ---------------- */
/* Fixed side columns so the league name is centred on the header, not pushed
   left when the back button is hidden (desktop). */
.tdn-mh-nav {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin: 0 -6px 6px -6px;
}
.tdn-mh-league {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.tdn-mh-nav > .tdn-share { justify-self: end; }
.tdn-mh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-3);
  margin-top: 2px;
}
.tdn-mh-venue { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tdn-mh-venue svg { width: 13px; height: 13px; stroke: var(--kl-text-disabled); flex-shrink: 0; }
.tdn-mh-league-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.tdn-mh-league-name {
  font: 600 13px Inter, sans-serif;
  color: var(--kl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdn-back, .tdn-share {
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kl-ink);
  border-radius: 10px;
  background: var(--kl-surface-3);
}
/* one icon colour for both — they are a matched pair in the same row */
.tdn-back svg, .tdn-share svg { width: 18px; height: 18px; stroke: var(--kl-text-2); }
.tdn-crumbs {
  /* global.css hides bare <nav> under its mobile query; this trail is content,
     not site navigation, so the page sheet asserts it back. */
  display: block;
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdn-crumb-sep { color: var(--kl-text-disabled); }
.tdn-crumb-link { color: inherit; text-decoration: none; }
.tdn-crumb-link:hover,
.tdn-crumb-link:focus-visible { color: var(--kl-ink); text-decoration: underline; }
.tdn-crumb-current { color: var(--kl-ink); font-weight: 600; }

/* --- match header (mobile: full-bleed hero, now first child of content) -- */
.tdn-matchhead {
  padding: 8px 16px 16px 16px;
  margin: -20px -20px 0;
  box-shadow: 0 1px 4px var(--kl-scrim-10);
}
.tdn-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}
.tdn-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tdn-team-badge {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.tdn-team-name {
  font: 700 13px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  text-align: center;
}
.tdn-form { display: flex; gap: 3px; }
.tdn-form-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--kl-amber); }
.tdn-form-dot--w { background: var(--kl-green); }
.tdn-form-dot--d { background: var(--kl-amber); }
.tdn-form-dot--l { background: var(--kl-red); }
.tdn-team-txt { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tdn-kickoff { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 4px; }
.tdn-time { font: 800 26px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-when { font: 400 12px Inter, sans-serif; color: var(--kl-text-3); }
/* --- goal scorers under the scoreline (finished / live) ------------------ */
.tdn-goals {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  gap: 3px 12px;
  margin-top: 12px;
}
.tdn-goals-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tdn-goals-col--home { align-items: flex-end; text-align: right; }
.tdn-goals-col--away { align-items: flex-start; text-align: left; }
.tdn-goals-ic { display: flex; align-items: center; justify-content: center; color: var(--kl-text); }
/* Same goal marker as bet-centar's timeline (.mtl-icon.is-goal): the standard
   ball SVG from /img/sports. */
.tdn-goals-ic .mtl-icon.is-goal { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.tdn-goals-ic .mtl-icon.is-goal img { width: 100%; height: 100%; display: block; }
.tdn-goal { font: 400 12px Inter, sans-serif; color: var(--kl-text-2); white-space: nowrap; }
.tdn-goal-min { font-weight: 700; color: var(--kl-ink); }
/* Bet-Centar link + right rail: desktop-only affordances (hidden / passthrough on mobile) */
.tdn-bc-wrap { display: none; }
.tdn-rail { display: contents; }

/* Crumbs + Bet-centar affordance share one row on a phone: the trail can
   ellipsis-shrink, the link stays pinned right (space-between). On desktop the
   link is hidden and .tdn-bc-wrap's button takes over. */
.tdn-crumbs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tdn-crumbs-row .tdn-crumbs { min-width: 0; flex: 0 1 auto; }
/* The chip look comes from .bet-card-cta; this only keeps it pinned right in
   the crumb row (and, in the desktop query below, hides it). */
.tdn-bc-crumb { flex: none; }

/* --- content column ------------------------------------------------------ */
/* Cards on a canvas (owner 2026-08-12), the match page's treatment: on a phone
   the column is grey and each card is full-bleed white with a 4px gap; on desktop
   the page goes white and the cards take a border + radius instead. The old
   .tdn-band separator strips are gone — the canvas showing through IS the gap. */
.tdn-content { padding: 0 0 20px; display: flex; flex-direction: column; gap: 4px; background: var(--kl-bg); }
/* main / mainb are column wrappers (real grid columns on desktop); on mobile
   they're transparent flex passthroughs so the cards flow as one stack. */
.tdn-main, .tdn-mainb { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tdn-card { background: var(--kl-surface); padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.tdn-head { background: var(--kl-surface); padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; }

/* --- title + meta + author ---------------------------------------------- */
.tdn-titlegroup { display: flex; flex-direction: column; gap: 12px; }
.tdn-title {
  margin: 0;
  font: 800 20px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  line-height: 1.25;
}
.tdn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-2);
}
.tdn-meta-item { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.tdn-meta-item svg { width: 15px; height: 15px; stroke: var(--kl-text-4); flex-shrink: 0; }
.tdn-meta-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tdn-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kl-surface-3);
}
.tdn-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kl-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 13px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  flex-shrink: 0;
}
/* real photo overlays the letter; on load-error the <img> is removed and the
   letter shows through (letter is the fallback, not the default) */
.tdn-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tdn-author-main { flex: 1; min-width: 0; }
.tdn-author-name { font: 700 14px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-author-name a { color: inherit; text-decoration: none; }
.tdn-author-name a:hover { text-decoration: underline; }
.tdn-author-stats { font: 400 12px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-follow {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 12px Inter, sans-serif;
  color: var(--kl-blue);
  background: none;
  border: 1px solid var(--kl-blue-soft);
  border-radius: 10px;
  padding: 7px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.tdn-follow-plus { font-size: 14px; line-height: 1; }
/* Following = state reached, so the control steps back visually. */
.tdn-follow.is-following {
  color: var(--kl-text-2);
  border-color: var(--kl-border-strong);
  background: var(--kl-surface-2);
}

/* --- analysis body (stored as HTML: <p> paragraphs) ---------------------- */
.tdn-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 400 13px Inter, sans-serif;
  color: var(--kl-text);
  line-height: 1.65;
}
/* authored HTML lives in its own block wrapper so it's a single flex item;
   inline nodes (bolded team names, <br>, bare text) then flow normally inside
   it instead of each blockifying into its own flex row */
.tdn-analysis-body { min-width: 0; }
.tdn-analysis-body p { margin: 0 0 12px; }
.tdn-analysis-body p:last-child { margin-bottom: 0; }
.tdn-analysis-body > :first-child { margin-top: 0; }
.tdn-analysis strong { font-weight: 600; color: var(--kl-ink); }

/* --- tip box (Prognoza) -------------------------------------------------- */
.tdn-tip { border: 1px solid var(--kl-border); border-radius: 16px; overflow: hidden; }
/* Settlement accent — same w/l/v vocabulary as the community cards below. */
.tdn-tip.is-won { border-left: 3px solid var(--kl-green); }
.tdn-tip.is-lost { border-left: 3px solid var(--kl-red); }
.tdn-tip.is-void { border-left: 3px solid var(--kl-amber); }
.tdn-tip-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.tdn-tip-info { min-width: 0; }
.tdn-tip-pick { font: 800 16px 'Red Hat Display', sans-serif; color: var(--kl-ink); margin-top: 3px; }
.tdn-tip-ulog { font: 500 12px Inter, sans-serif; color: var(--kl-text-2); margin-top: 3px; }
.tdn-tip-ulog b { font-weight: 800; color: var(--kl-ink); }
.tdn-tip-odds { display: flex; align-items: center; gap: 11px; flex-shrink: 0; padding: 6px 8px; border-radius: 6px; background: var(--kl-surface-3); }
.tdn-tip-odds-inner { text-align: right; }
.tdn-tip-odds-row { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.tdn-book {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px 'Red Hat Display', sans-serif;
  letter-spacing: -0.01em;
  color: var(--kl-on-dark);
}
.tdn-odds-val { font: 800 18px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-odds-label { font: 500 10px Inter, sans-serif; color: var(--kl-text-4); }
/* bonus row (replaces the plain "Igraj na …" CTA) */
.tdn-tip-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--kl-divider);
  background: var(--kl-surface-2);
  padding: 12px 16px;
}
.tdn-tip-bonus-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tdn-tip-bonus-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: contain;
  flex-shrink: 0;
}
.tdn-tip-bonus-txt { min-width: 0; }
.tdn-tip-bonus-title { font: 800 13px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-tip-bonus-sub { font: 500 10px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-tip-bonus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--kl-blue);
  border-radius: 10px;
  padding: 10px 22px;
  flex-shrink: 0;
}
.tdn-tip-bonus-btn-text { font: 700 12px 'Red Hat Display', sans-serif; color: var(--kl-on-dark); }
.tdn-tip-bonus-btn-arrow { font: 700 13px Inter, sans-serif; color: var(--kl-on-dark); }

/* --- publish meta line --------------------------------------------------- */
.tdn-tipmeta { font: 400 11px Inter, sans-serif; color: var(--kl-text-disabled); margin: -12px 8px 0; }

/* --- poll ---------------------------------------------------------------- */
.tdn-poll { display: flex; flex-direction: column; gap: 12px; }
.tdn-poll-opts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tdn-poll-opt {
  border: 1px solid var(--kl-border);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.tdn-poll-opt:hover, .tdn-poll-opt:focus-visible { border-color: var(--kl-text-disabled); background: var(--kl-surface-2); }
/* key is now only used for the draw "X"; team options show the badge instead */
.tdn-poll-key { font: 800 15px 'Red Hat Display', sans-serif; color: var(--kl-ink); height: 28px; display: flex; align-items: center; }
.tdn-poll-key--draw { color: var(--kl-text-4); }
.tdn-poll-badge {
  width: 28px;
  height: 28px;
  object-fit: cover;
  flex-shrink: 0;
}
.tdn-poll-name { font: 500 11px Inter, sans-serif; color: var(--kl-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tdn-poll-name--draw { color: var(--kl-text-4); }
.tdn-poll-cta { font: 500 12px Inter, sans-serif; color: var(--kl-text-2); text-align: center; }
.tdn-poll-cta a { font-weight: 700; color: var(--kl-ink); text-decoration: underline; }

/* --- community tips ------------------------------------------------------ */
.tdn-community { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.tdn-member {
  border: 1px solid var(--kl-border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Settlement accent — same w/l/v vocabulary as the bet cards on /tipovi. */
.tdn-member.is-won { border-left: 3px solid var(--kl-green); }
.tdn-member.is-lost { border-left: 3px solid var(--kl-red); }
.tdn-member.is-void { border-left: 3px solid var(--kl-amber); }
/* identity + pick side by side; wraps on narrow screens rather than squashing */
.tdn-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tdn-member-row .tdn-member-head { flex: 1 1 190px; }
.tdn-member-row .tdn-member-tip { flex: 0 1 auto; }
.tdn-member-head { display: flex; align-items: center; gap: 10px; }
.tdn-member-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  flex-shrink: 0;
}
.tdn-member-main { flex: 1; min-width: 0; }
.tdn-member-name { font: 700 12px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-member-name a { color: inherit; text-decoration: none; }
.tdn-member-name a:hover { text-decoration: underline; }
.tdn-member-stats { font: 400 11px Inter, sans-serif; color: var(--kl-text-4); }
/* Contribution text — these cards carry an analysis, not just a pick. */
.tdn-member-analysis p {
  margin: 0;
  font: 400 12px Inter, sans-serif;
  color: var(--kl-text);
  line-height: 1.6;
}
.tdn-member-more {
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  font: 700 12px Inter, sans-serif;
  color: var(--kl-blue);
  cursor: pointer;
}
.tdn-member-more:hover { text-decoration: underline; }
.tdn-member-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;               /* pick and odds must not collide when it wraps */
  background: var(--kl-surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.tdn-member-tip > div:first-child { min-width: 0; }
.tdn-member-pickval { font: 800 13px 'Red Hat Display', sans-serif; color: var(--kl-ink); margin-top: 2px; }
.tdn-member-odds { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
a.tdn-member-odds:hover { opacity: .85; }
.tdn-member-book {
  width: 40px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 9px 'Red Hat Display', sans-serif;
  color: var(--kl-on-dark);
  letter-spacing: 0.02em;
}
.tdn-member-oddval { font: 800 15px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-member-support { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tdn-support-label { font: 500 12px Inter, sans-serif; color: var(--kl-text-2); }
.tdn-support-count {
  font: 800 12px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  background: var(--kl-surface-3);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ==========================================================================
   6b — Najbolje kvote / Forma i tabela / Povrede / Komentari
   6c — Međusobni susreti (filled) + 6b empty state
   Values are the literals from handoff/reference/mobile/6b.html + 6c.html.
   ========================================================================== */

/* --- shared section title ------------------------------------------------ */
.tdn-sec-title { font: 700 18px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
/* ONE uppercase label for this page, same recipe as the match page's .ut-eyebrow
   (owner 2026-08-12) so a tip page and a match page speak one visual language.
   It replaced .tdn-tip-kicker, .tdn-member-kicker, .tdn-odds-hk, .tdn-forma-h and
   .tdn-h2h-eyebrow — five names for one identical 10px label. */
.tdn-eyebrow { font: 600 12px Inter, sans-serif; color: var(--kl-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
/* ONE class for "a label plus the thing it labels": 8px inside the group, so the
   section's own gap is what the eye reads as the separation between groups. */
.tdn-subblock { display: flex; flex-direction: column; gap: 8px; }

/* --- Najbolje kvote ------------------------------------------------------ */
.tdn-odds { display: flex; flex-direction: column; gap: 12px; }
.tdn-odds-chips { display: flex; gap: 6px; margin-bottom: 12px; align-items: center; }
/* period dropdown */
.tdn-perdd { position: relative; flex-shrink: 0; }
.tdn-perdd[hidden] { display: none; }
.tdn-perdd-btn {
  font: 600 12px Inter, sans-serif; color: var(--kl-text-2); background: var(--kl-surface-3);
  border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.tdn-perdd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 108px;
  background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20,23,28,0.12); padding: 4px;
}
.tdn-perdd-menu[hidden] { display: none; }
.tdn-perdd-opt {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 0;
  font: 600 12px Inter, sans-serif; color: var(--kl-text-2); background: none;
  border-radius: 7px; padding: 7px 10px;
}
.tdn-perdd-opt.is-sel { color: var(--kl-ink); background: var(--kl-surface-3); }
/* market / period panels */
.tdn-odds-market { display: none; flex-direction: column; gap: 6px; }
.tdn-odds-market.is-active { display: flex; }
.tdn-odds-panel { display: none; flex-direction: column; gap: 6px; }
.tdn-odds-panel.is-active { display: flex; }
.tdn-odds-row {
  display: grid;
  grid-template-columns: 1fr repeat(var(--tdn-oc, 3), 64px);
  gap: 6px;
  align-items: center;
}
.tdn-odds-hc { font: 600 11px Inter, sans-serif; color: var(--kl-text-3); text-align: center; }
.tdn-odds-bk { color: var(--kl-ink); text-decoration: none; }
.tdn-odds-book { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tdn-odds-logo { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; object-fit: contain; }
.tdn-odds-logo--ph { background: var(--kl-border); }
.tdn-odds-bookname { font: 700 12px 'Red Hat Display', sans-serif; color: var(--kl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdn-odds-cell {
  font: 600 13px Inter, sans-serif;
  color: var(--kl-text-2);
  border: 1px solid var(--kl-border);
  border-radius: 8px;
  padding: 8px 0;
  text-align: center;
}
.tdn-odds-cell--best { font-weight: 700; color: var(--kl-ink); border-color: var(--kl-ink); }
/* IA-1: bookmaker name + price cells are affiliate anchors — they must read as
   table cells, not as blue links, and stay tappable at the row height. */
.tdn-odds-bk, a.tdn-odds-cell { text-decoration: none; }
a.tdn-odds-cell { display: block; }
.tdn-odds-bk:hover, a.tdn-odds-cell:hover { color: var(--kl-blue); }
a.tdn-odds-cell:hover { border-color: var(--kl-blue); }

/* --- Forma i tabela ------------------------------------------------------ */
.tdn-forma { display: flex; flex-direction: column; gap: 12px; }
.tdn-forma-head, .tdn-forma-row {
  display: grid;
  grid-template-columns: 18px 1fr 52px 24px 24px 24px 34px 26px;
  gap: 4px;
  align-items: center;
}
.tdn-forma-head { padding: 0 4px; }
.tdn-forma-row { border: 1px solid var(--kl-border); border-radius: 10px; padding: 10px 4px; }
.tdn-forma-h--c { text-align: center; letter-spacing: 0; }
.tdn-forma-rank { font: 700 11px Inter, sans-serif; color: var(--kl-text-4); text-align: center; }
.tdn-forma-name {
  font: 700 12px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdn-forma-form { display: flex; gap: 3px; }
.tdn-fmt-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--kl-amber); }
.tdn-fmt-dot--w { background: var(--kl-green); }
.tdn-fmt-dot--d { background: var(--kl-amber); }
.tdn-fmt-dot--l { background: var(--kl-red); }
.tdn-forma-c { font: 500 12px Inter, sans-serif; color: var(--kl-text); text-align: center; }
.tdn-forma-b { font: 800 13px 'Red Hat Display', sans-serif; color: var(--kl-ink); text-align: center; }

/* --- Shared empty state (6b h2h, lineups) -------------------------------- */
.tdn-empty-state {
  border: 1px dashed var(--kl-border-strong);
  border-radius: 14px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.tdn-empty-state-title { font: 600 13px Inter, sans-serif; color: var(--kl-text-2); }
.tdn-empty-state-body { font: 400 12px Inter, sans-serif; color: var(--kl-text-4); text-align: center; line-height: 1.5; }

/* --- Međusobni susreti — filled (6c) ------------------------------------- */
.tdn-h2h { display: flex; flex-direction: column; gap: 16px; }
.tdn-h2h-head {   /* type comes from .tdn-sec-title on the same element */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tdn-h2h-count { font: 400 12px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-h2h-dist { display: flex; flex-direction: column; gap: 6px; }
/* team-names head above the W/D/L bar (matches utakmica ut-h2h-wdl) */
.tdn-h2h-wdl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tdn-h2h-wdl-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tdn-h2h-wdl-team.is-right { justify-content: flex-end; }
.tdn-h2h-wdl-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.tdn-h2h-wdl-name { font: 600 13px Inter, sans-serif; color: var(--kl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdn-h2h-labels { display: flex; justify-content: space-between; }
.tdn-h2h-lh { font: 600 12px Inter, sans-serif; color: var(--kl-ink); }
.tdn-h2h-ld { font: 600 12px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-h2h-la { font: 600 12px Inter, sans-serif; color: var(--kl-text-2); }
.tdn-h2h-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.tdn-h2h-seg-h { background: var(--kl-navy); }
.tdn-h2h-seg-d { background: var(--kl-bar-empty); }
.tdn-h2h-seg-a { background: var(--kl-navy-text-2); }
.tdn-h2h-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.tdn-h2h-chip {
  font: 600 11px Inter, sans-serif;
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border-radius: 999px;
  padding: 5px 11px;
}
.tdn-h2h-chip b { font-weight: 800; color: var(--kl-ink); }
.tdn-h2h-splits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tdn-h2h-split { border: 1px solid var(--kl-border); border-radius: 12px; padding: 10px 12px; }
.tdn-h2h-split-l { font: 400 10px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-h2h-split-v { font: 800 14px 'Red Hat Display', sans-serif; color: var(--kl-ink); margin-top: 3px; }
.tdn-h2h-mode { font: 400 12px Inter, sans-serif; color: var(--kl-text-2); }
.tdn-h2h-mode b { font-weight: 800; color: var(--kl-ink); }
.tdn-h2h-sub { font: 400 12px Inter, sans-serif; color: var(--kl-text-4); }
/* "Posljednji susreti" list — the shared bet-centar match card
   (includes/bc-detailed-card.php), score-only mode. Ported from the ut-* sheet
   with --ut-* aliases resolved to their --kl-* tokens so both pages render the
   same card; here the grid drops the KR/ŽK/1P/2P columns (--score modifier). */
.ut-fxd-list { display: flex; flex-direction: column; padding: 0 12px; border: 1px solid var(--kl-border); border-radius: var(--kl-r-14); }
.ut-fxd-card { display: flex; flex-direction: column; gap: 11px; padding: 11px 0; }
.ut-fxd-card:not(:first-child) { border-top: 1px solid var(--kl-divider); }
.ut-fxd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18px 18px 18px 18px 28px; column-gap: 6px; align-items: stretch; }
.ut-fxd-grid--score { grid-template-columns: minmax(0, 1fr) 28px; }
.ut-fxd-head { display: flex; align-items: baseline; gap: 6px; padding: 5px 0 6px; min-width: 0; }
.ut-fxd-date { font: 700 11px Inter, sans-serif; color: var(--kl-ink); white-space: nowrap; flex-shrink: 0; }
.ut-fxd-league { font: 500 11px Inter, sans-serif; color: var(--kl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ut-fxd-col { font: 600 8px Inter, sans-serif; color: var(--kl-text-4); letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; padding: 5px 0 6px; }
.ut-fxd-team { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 0; }
.ut-fxd-team img { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; flex-shrink: 0; background: var(--kl-surface-3); }
.ut-fxd-team-name { font: 600 12px Inter, sans-serif; color: var(--kl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ut-fxd-team-name.is-win { font-weight: 800; }
.ut-fxd-cell { font: 700 12px 'Red Hat Display', sans-serif; color: var(--kl-ink); display: flex; align-items: center; justify-content: center; padding: 7px 0; }
.ut-fxd-cell.is-half, .ut-fxd-cell.is-count { color: var(--kl-text-2); }
.ut-fxd-cell.is-score { background: var(--kl-surface-3); }
.ut-fxd-cell.is-score.is-win { font-weight: 800; }
.ut-fxd-cell.is-score.is-top { border-radius: var(--kl-r-6) var(--kl-r-6) 0 0; }
.ut-fxd-cell.is-score.is-bottom { border-radius: 0 0 var(--kl-r-6) var(--kl-r-6); }
.ut-fxd-reds { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ut-fxd-reds .ut-ev.is-red { display: inline-flex; width: 9px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.15); background: var(--kl-red); }

/* --- Povrede i izostanci ------------------------------------------------- */
.tdn-inj { display: flex; flex-direction: column; gap: 12px; }
/* Two teams side by side (owner 2026-08-17), like the bet-centar injuries grid. */
.tdn-inj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.tdn-inj-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tdn-inj-team { font: 600 10px Inter, sans-serif; color: var(--kl-text-3); letter-spacing: 0.08em; }
.tdn-inj-team + .tdn-inj-list { margin-top: 0; }
.tdn-inj-list { display: flex; flex-direction: column; }
.tdn-inj-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kl-divider); }
.tdn-inj-row:last-child { border-bottom: 0; }
.tdn-inj-main { flex: 1; min-width: 0; }
.tdn-inj-name { font: 600 12px Inter, sans-serif; color: var(--kl-ink); }
.tdn-inj-reason { font: 400 11px Inter, sans-serif; color: var(--kl-text-4); }
/* Reason badge: the handoff shipped an empty tinted square; it now carries the
   reason icon (injury / red / yellow card), the same set as the utakmica page. */
.tdn-inj-badge {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tdn-inj-badge img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* --- Komentari ----------------------------------------------------------- */
.tdn-com { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.tdn-com-head { display: flex; align-items: baseline; justify-content: space-between; }
.tdn-com-count { font: 500 12px Inter, sans-serif; color: var(--kl-text-3); }
.tdn-com-row { display: flex; gap: 10px; padding: 4px 0; }
.tdn-com-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kl-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 11px 'Red Hat Display', sans-serif;
  color: var(--kl-ink);
  flex-shrink: 0;
}
.tdn-com-body { flex: 1; min-width: 0; }
.tdn-com-meta { display: flex; align-items: baseline; gap: 6px; }
/* Real avatar when the commenter has one; the initial box is the fallback. */
.tdn-com-avatar--img { object-fit: cover; display: block; }
.tdn-com-name { font: 700 12px Inter, sans-serif; color: var(--kl-ink); }
.tdn-com-name a { color: inherit; text-decoration: none; }
.tdn-com-name a:hover { text-decoration: underline; }
.tdn-com-time { font: 400 10px Inter, sans-serif; color: var(--kl-text-disabled); }
.tdn-com-text { font: 400 12px Inter, sans-serif; color: var(--kl-text); line-height: 1.5; margin-top: 3px; }
/* comment composer — the shared kl-composer (chat / messages / wall comments):
   contained grey box with a textarea + rounded-square send button. */
.tdn-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
  background: var(--kl-surface-3);
  border-radius: 14px;
  padding: 6px 6px 6px 12px;
}
.tdn-composer-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  outline: none;
  resize: none;
  font: 400 14px Inter, sans-serif;
  line-height: 20px;
  color: var(--kl-ink);
  padding: 8px 0;
  max-height: 120px;
  overflow-y: auto;
}
.tdn-composer-input::placeholder { color: var(--kl-text-4); }
/* Hold the tip-comment field at 16px on phones so iOS doesn't zoom on focus
   (this class outranks the global input rule). Desktop keeps the tighter 14px. */
@media (max-width: 767px) {
  .tdn-composer-input { font-size: var(--kl-fs-16); }
}
.tdn-composer-send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--kl-blue);
  color: var(--kl-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tdn-composer-send svg { width: 18px; height: 18px; display: block; }

/* ==========================================================================
   4d/4e/4f/4g — POST-MATCH (finished) + status-aware hero
   Values from handoff/reference/mobile/4d.html · 4e · 4f · 4g.
   ========================================================================== */

/* --- status hero (score + KRAJ / minute) --------------------------------- */
.tdn-score { font: 800 32px 'Red Hat Display', sans-serif; color: var(--kl-ink); letter-spacing: 0.02em; }
.tdn-status { font: 600 11px Inter, sans-serif; color: var(--kl-text-3); letter-spacing: 0.06em; }
/* Live minute + dot: the red LIVE pulse; bet-centar's .ut-mh-sb-live matches
   this exactly (owner 2026-08-15). */
.tdn-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 12px Inter, sans-serif;
  color: var(--kl-red);
}
.tdn-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kl-red-light);
  animation: tdnPulse 1.6s ease-in-out infinite;
}
@keyframes tdnPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- 4e Statistike meča --------------------------------------------------- */
.tdn-mstats { display: flex; flex-direction: column; gap: 12px; }
/* .tdn-mstats-head is declared once, further down (search "flex-wrap: wrap") —
   the earlier copy that lived here repeated the same four values and was dead. */
/* Legend renders after .tdn-mstats-list (owner 2026-08-02) — centred under the
   bars rather than crowded next to the section title. */
.tdn-mstats-legend { display: flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; }
.tdn-mstats-leg { display: flex; align-items: center; gap: 5px; font: 500 10px Inter, sans-serif; color: var(--kl-text-3); }
.tdn-mstats-dot { width: 9px; height: 9px; border-radius: 2px; }
.tdn-mstats-dot--h { background: var(--kl-navy); }
.tdn-mstats-dot--a { background: var(--kl-navy-text); }
.tdn-mstats-list { display: flex; flex-direction: column; gap: 12px; }
/* display:flex above beats the UA [hidden] rule — restate it, or every period
   pane renders at once and the Meč/1.pol/2.pol chips appear to do nothing. */
.tdn-mstats-list[hidden] { display: none; }
.tdn-mstat { display: flex; flex-direction: column; gap: 5px; }
.tdn-mstat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tdn-mstat-v { font: 800 14px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-mstat-l { font: 500 12px Inter, sans-serif; color: var(--kl-text-2); text-align: center; }
.tdn-mstat-bar { display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; }
.tdn-mstat-seg--h { background: var(--kl-navy); }
.tdn-mstat-seg--a { background: var(--kl-navy-text); }
.tdn-mstat-seg--empty { background: var(--kl-bar-empty); }

/* --- shared player rating chips ------------------------------------------ */
.tdn-pchip { font: 600 10px Inter, sans-serif; color: var(--kl-text-2); background: var(--kl-surface-4); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.tdn-pchip--g { color: var(--kl-green); background: var(--kl-green-tint); }
.tdn-pchip--a { color: var(--kl-blue); background: var(--kl-blue-tint); }
.tdn-pchip--y { color: var(--kl-amber-notice-text); background: var(--kl-amber-tint); }
.tdn-pchip--r { color: var(--kl-red); background: var(--kl-red-tint); }

/* --- Rezime utakmice (post-match recap) ---------------------------------- */
.tdn-recap { display: flex; flex-direction: column; gap: 10px; }
.tdn-recap-text { margin: 0; font: 400 14px/1.7 Inter, sans-serif; color: var(--kl-text-2); }

/* --- 4d Najbolji igrači --------------------------------------------------- */
.tdn-best { display: flex; flex-direction: column; gap: 12px; }
.tdn-best-list { display: flex; flex-direction: column; gap: 8px; }
.tdn-best-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--kl-border); border-radius: 12px; padding: 10px 12px; }
.tdn-best-row { display: flex; align-items: center; gap: 12px; }
.tdn-best-photo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--kl-surface-4); }
/* fallback when the API has no headshot / the image fails: plain neutral circle
   (the diagonal-stripe fill was only a design-mockup placeholder, not final) */
.tdn-best-photo--empty { background: var(--kl-surface-4); }
.tdn-best-main { flex: 1; min-width: 0; }
.tdn-best-name { font: 700 13px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-best-sub { font: 400 11px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-best-rating { font: 800 13px 'Red Hat Display', sans-serif; color: var(--kl-on-dark); background: var(--kl-navy); border-radius: 7px; padding: 3px 7px; flex-shrink: 0; }
.tdn-best-chips { display: flex; flex-wrap: wrap; gap: 3px; }

/* The 4g "Tok utakmice" component (.tdn-tok*, 17 rules) was styled but never
   built — no template or script emits any of its classes. The play-by-play the
   tip page actually renders uses the mtl-c-* timeline instead. Removed. */

/* ==========================================================================
   Sastavi (lineups pitch + coaches) — PORTED verbatim from the original
   tip-details / kl-tip-details.css (owner: keep this section as-is). Legacy
   CSS vars resolved to literals since this sheet loads standalone.
   ========================================================================== */
/* .lineups-container is set to display:block a few rules below; the flex/gap
   pair that used to open this section never applied. */

/* Coach block — owner 2026-08-13 picked this card treatment for both the match
   page and the tip page, and asked for the career panel (previously tip-page
   only) on both. Kept in each page sheet rather than promoted to global.css:
   sp2026.css and kl-tip-details.css style the same .sastav__trener names for
   the World Cup pages, so an unscoped global rule would leak a card border onto
   them. Those two copies are flagged for the site-wide pass. */
.lineups-coaches { display: flex; gap: var(--kl-sp-12); margin-top: 0; padding: 0; }
.lineups-coaches .sastav__trener {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--kl-sp-8);
  padding: var(--kl-sp-8); border: 1px solid var(--kl-border); border-radius: var(--kl-r-10);
  background: var(--kl-surface); font-family: "Red Hat Display", sans-serif;
  /* anchors the career panel below */
  position: relative; outline: none;
}
.lineups-coaches .sastav__trener:focus-visible { box-shadow: var(--kl-focus-ring); }
.sastav__trenerImg { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.sastav__trenerMain { display: flex; flex-direction: column; min-width: 0; }
.sastav__trenerMain span { font-size: var(--kl-fs-11); color: var(--kl-text-3); }
.sastav__trenerMain strong { font-size: var(--kl-fs-13); color: var(--kl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Career panel: opens on hover and on keyboard focus (the card is tabbable). */
.sastav__trenerCareer {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--kl-sp-8)); z-index: 5;
  display: grid; gap: var(--kl-sp-8); padding: var(--kl-sp-12);
  border: 1px solid var(--kl-border); border-radius: var(--kl-r-8);
  background: var(--kl-surface); box-shadow: var(--kl-shadow-card);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--kl-dur-medium) var(--kl-ease), transform var(--kl-dur-medium) var(--kl-ease);
}
.sastav__trenerCareer ul { display: grid; gap: var(--kl-sp-6); margin: 0; padding: 0; list-style: none; }
.sastav__trenerCareer li { display: flex; justify-content: space-between; gap: var(--kl-sp-8); min-width: 0; font: 500 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text); }
.sastav__trenerCareer li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sastav__trener:hover .sastav__trenerCareer,
.sastav__trener:focus-within .sastav__trenerCareer { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sastav__trenerCareer > strong { font: 700 var(--kl-fs-12) var(--kl-font-display); color: var(--kl-ink); }
.sastav__trenerCareer li small { color: var(--kl-text-4); white-space: nowrap; flex: 0 0 auto; }
.sastav__trenerCareer p { margin: 0; font: 400 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text-3); }
@media (prefers-reduced-motion: reduce) { .sastav__trenerCareer { transition: none; } }

.lineups-container { display: block; }

.lineups-field { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0px; min-width: 0px; max-width: 100%; }

.lineups-team { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; color: var(--kl-ink); border: 1px solid var(--kl-border); box-sizing: border-box; }

.lineups-team__logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }

.lineups-team__name { font-weight: 500; font-size: 14px; }

.lineups-team__formation { margin-left: auto; font-size: 13px; opacity: 0.85; }

.lineups-team--home { flex: 1 1 50%; order: 1; border-radius: 8px 0px 0px; }

.lineups-team--away { flex: 1 1 50%; order: 2; border-radius: 0px 8px 0px 0px; flex-direction: row-reverse; text-align: right; }

.lineups-team--away .lineups-team__formation { margin-left: 0px; margin-right: auto; }

.pitch { flex: 1 1 100%; order: 3; display: flex; flex-direction: row; min-width: 0px; max-width: 100%; min-height: 360px; padding: 12px 0px; box-sizing: border-box; border-radius: 0px 0px 8px 8px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, var(--kl-pitch-green) 0px, var(--kl-pitch-green) 48px, var(--kl-pitch-green-2) 48px, var(--kl-pitch-green-2) 96px); }

.pitch::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 2px; background: var(--kl-on-dark-30); }

.pitch::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border: 2px solid var(--kl-on-dark-30); border-radius: 50%; transform: translate(-50%, -50%); }

.pitch__half { flex: 1 1 0px; display: flex; min-width: 0px; position: relative; z-index: 1; }

.pitch__half--home { flex-direction: row; }

.pitch__half--away { flex-direction: row-reverse; }

.pitch__half--home::before, .pitch__half--away::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 58%; border: 2px solid var(--kl-on-dark-30); pointer-events: none; }

.pitch__half--home::before { left: 0px; border-left: 0px; border-radius: 0px 6px 6px 0px; }

.pitch__half--away::before { right: 0px; border-right: 0px; border-radius: 6px 0px 0px 6px; }

.pitch__half--home::after, .pitch__half--away::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 30%; border: 2px solid var(--kl-on-dark-30); pointer-events: none; }

.pitch__half--home::after { left: 0px; border-left: 0px; border-radius: 0px 4px 4px 0px; }

.pitch__half--away::after { right: 0px; border-right: 0px; border-radius: 4px 0px 0px 4px; }



.pitch__line { flex: 1 1 0px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 6px; min-width: 0px; }

.pitch__player { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; max-width: 100%; text-align: center; }

.pitch__avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }

.pitch__photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kl-on-dark); background: var(--kl-surface); }

.pitch__num { font-weight: 700; color: rgba(255, 255, 255, 0.75); }

.pitch__name { max-width: 74px; font-size: 10px; color: var(--kl-on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--kl-scrim-50) 0px 1px 2px; }

/* Fallback when the API lineup has no grid/pos data (see tip-details.php
   lineupHasPositions): wrap each team's players into a readable grid instead of
   one overflowing column, and drop the markings that imply a real formation.
   The centre line stays so home vs away is still clear. */
.pitch--flat { min-height: auto; }
.pitch--flat::after,
.pitch--flat .pitch__half--home::before, .pitch--flat .pitch__half--away::before,
.pitch--flat .pitch__half--home::after, .pitch--flat .pitch__half--away::after { display: none; }
.pitch--flat .pitch__line { flex-flow: row wrap; align-content: center; justify-content: center; gap: 14px 6px; padding: 10px 6px; }

/* --- Ostali aktivni tipovi (full-width band; cards = shared .kl-betcards) -- */
.tdn-otips { padding: 20px 16px 32px; border-top: 1px solid var(--kl-surface-4); }
.tdn-otips-title { margin: 0 0 14px; }   /* type comes from .tdn-sec-title */
.tdn-otips-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tdn-otips-grid .bet-card { margin: 0; height: 100%; }

@media (max-width: 768px) {
  .lineups-field { flex-direction: column; }

  .lineups-team--home { flex: 1 1 100%; border-radius: 8px 8px 0px 0px; }

  .lineups-team--away { flex: 1 1 100%; order: 3; border-radius: 0px 0px 8px 8px; flex-direction: row; text-align: left; }

  .lineups-team--away .lineups-team__formation { margin-left: auto; margin-right: 0px; }

  .pitch { order: 2; flex-direction: column; border-radius: 0px; min-height: 540px; padding: 0px 12px; background: repeating-linear-gradient(var(--kl-pitch-green) 0px, var(--kl-pitch-green) 48px, var(--kl-pitch-green-2) 48px, var(--kl-pitch-green-2) 96px); }

  .pitch::before { inset: 50% 0px auto; width: auto; height: 2px; }

  .pitch__half--home { flex-direction: column; }

  .pitch__half--away { flex-direction: column-reverse; }

  .pitch__line { flex-direction: row; }

  .pitch__line .pitch__player { width: auto; flex: 1 1 0px; min-width: 0px; }

  .pitch__line .pitch__name { max-width: 100%; }

  .pitch__half--home::before, .pitch__half--away::before { inset: auto auto auto 50%; transform: translateX(-50%); width: 58%; height: 34px; }

  .pitch__half--home::before { top: 0px; border-width: 0px 2px 2px; border-style: none solid solid; border-color: currentcolor var(--kl-on-dark-30) var(--kl-on-dark-30); border-image: none; border-radius: 0px 0px 6px 6px; }

  .pitch__half--away::before { bottom: 0px; border-width: 2px 2px 0px; border-style: solid solid none; border-color: var(--kl-on-dark-30) var(--kl-on-dark-30) currentcolor; border-image: none; border-radius: 6px 6px 0px 0px; }

  .pitch__half--home::after, .pitch__half--away::after { inset: auto auto auto 50%; transform: translateX(-50%); width: 30%; height: 16px; }

  .pitch__half--home::after { top: 0px; border-width: 0px 2px 2px; border-style: none solid solid; border-color: currentcolor var(--kl-on-dark-30) var(--kl-on-dark-30); border-image: none; border-radius: 0px 0px 4px 4px; }

  .pitch__half--away::after { bottom: 0px; border-width: 2px 2px 0px; border-style: solid solid none; border-color: var(--kl-on-dark-30) var(--kl-on-dark-30) currentcolor; border-image: none; border-radius: 4px 4px 0px 0px; }
}













/* Sastavi section wrapper (new-page band; inner pitch uses the ported classes) */
.tdn-sastavi { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   DESKTOP (>=1024px) — handoff/reference/desktop/6a.html
   Two-column layout (main 1fr + 380px rail), bordered cards instead of the
   mobile full-bleed bands, wider type. Mobile rules above are the base.
   ========================================================================== */
@media (min-width: 1024px) {
  .tdn-screen { max-width: 1360px; }

  /* desktop has the site header for back-navigation, so the in-header arrow
     is mobile-only. visibility (not display) keeps its grid cell, which is what
     balances the share button and keeps the league name centred. */
  .tdn-back { visibility: hidden; }
  .tdn-crumbs { font-size: 12px; }

  /* two-column grid; rail spans column 2, everything else stacks in column 1 */
  .tdn-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px 36px;
    padding: 28px 40px 40px 40px;
    align-content: start;
    background: var(--kl-surface);
  }
  .tdn-main  { grid-column: 1; grid-row: 1; gap: 20px; }
  .tdn-mainb { grid-column: 1; grid-row: 2; gap: 20px; }
  .tdn-card { border: 1px solid var(--kl-border); border-radius: 14px; padding: 18px 20px; }
  .tdn-head { background: transparent; padding: 0; gap: 20px; }
  .tdn-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  /* ---- match header → card in the main column ---- */
  .tdn-matchhead {
    margin: 0;
    border: 1px solid var(--kl-border);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }

  /* title group hugs the analysis divider below it */
  .tdn-titlegroup { margin-bottom: -8px; }

  /* author strip: no divider on desktop (band is hidden here) */
  .tdn-author {
    padding-bottom: 0;
    border-bottom: none;
  }
  .tdn-teams { max-width: 620px; margin: 14px auto 0; gap: 24px; align-items: center; }
  .tdn-team { flex-direction: column; align-items: center; gap: 12px; justify-content: center; }
  .tdn-team--home .tdn-team-txt { align-items: center; }
  .tdn-team--away .tdn-team-txt { align-items: center; }
  .tdn-team-txt { gap: 5px; }
  .tdn-team-badge { width: 44px; height: 44px; }
  .tdn-team-name { font-size: 18px; text-align: center; }
  .tdn-time, .tdn-score { font-size: 30px; }
  .tdn-when { font-size: 12px; }

  .tdn-bc-wrap {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--kl-divider);
    margin-top: 18px;
    padding-top: 16px;
  }
  /* Desktop uses the bordered button above; the crumb-row chip is phone-only. */
  .tdn-bc-crumb { display: none; }
  .tdn-bc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--kl-border-strong);
    border-radius: 10px;
    padding: 9px 18px;
  }
  .tdn-bc-link-text { font: 700 12px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
  .tdn-bc-link-arrow { font: 700 13px Inter, sans-serif; color: var(--kl-ink); }

  /* the publish line + its actions live under the tip box on every width now */

  /* ---- main column type bumps ---- */
  .tdn-title { font-size: 28px; }
  .tdn-analysis { font-size: 14px; line-height: 1.7; }

  /* community member: identity + pick share the top row, analysis underneath */
  .tdn-member-main { flex: unset; min-width: 0; }
  .tdn-member-tip { gap: 16px; }
  .tdn-member-book { width: 30px; height: 30px; }

  /* ---- rail sections → bordered cards with a header divider ---- */
  .tdn-rail > .tdn-odds,
  .tdn-rail > .tdn-forma,
  .tdn-rail > .tdn-mstats,
  .tdn-rail > .tdn-h2h {
    border: 1px solid var(--kl-border);
    border-radius: 16px;
    padding: 0 16px 16px;
  }
  .tdn-rail > .tdn-odds { gap: 10px; }
  .tdn-rail > .tdn-forma { gap: 8px; }
  .tdn-rail > .tdn-h2h { gap: 14px; }
  .tdn-rail > .tdn-mstats { gap: 10px; }
  .tdn-rail > .tdn-odds > .tdn-sec-title,
  .tdn-rail > .tdn-forma > .tdn-sec-title,
  .tdn-rail > .tdn-mstats > .tdn-mstats-head,
  .tdn-rail > .tdn-h2h > .tdn-h2h-head {
    margin: 0 -16px 4px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--kl-divider);
    font-size: 14px;
    font-weight: 700;
  }
  .tdn-rail > .tdn-h2h > .tdn-h2h-head { margin-bottom: 0; }
  /* stat bars in a 380px column: labels stay on one line, numbers keep width */
  .tdn-rail > .tdn-mstats .tdn-mstat-head { font-size: 12px; }
  .tdn-rail > .tdn-mstats .tdn-mstat-l { font-size: 12px; }
  /* tighter rail grids (reference desktop cell widths) */
  .tdn-rail .tdn-odds-row { grid-template-columns: 1fr repeat(var(--tdn-oc, 3), 54px); }
  .tdn-rail .tdn-forma-head,
  .tdn-rail .tdn-forma-row { grid-template-columns: 18px 1fr 66px 20px 20px 20px 30px 24px; }

  /* Ostali aktivni tipovi → 3-up grid, aligned to the appbar/content gutter */
  .tdn-otips { padding: 28px 40px 48px; }
  .tdn-otips-title { font-size: 22px; margin-bottom: 18px; }
  .tdn-otips-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* --- XBET-3: advanced-stat tooltips (Statistike meča). The period toggle that
       used to sit here is bet-centar-only (owner 2026-08-17). ---------------- */
.tdn-mstats-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* The .tdn-lu-xb-* block that used to sit here was removed 2026-08-25 for the
   same reason as its .ut-lu-xb-* twin: the lineup is always a pitch and the
   missing-players strip moved to its own section (includes/bc-lineups.php). */
.tdn-meta-wicon { flex: 0 0 auto; }

/* --- Toast (follow feedback) --------------------------------------------- */
.tdn-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--kl-ink);
  color: var(--kl-on-dark);
  font: 600 12px Inter, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* --- Comments: guest / blocked note + login affordance ------------------- */
.tdn-com-note {
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-2);
  padding: 10px 0 2px;
}
.tdn-com-login {
  padding: 0;
  background: none;
  border: 0;
  font: 700 12px Inter, sans-serif;
  color: var(--kl-blue);
  cursor: pointer;
}
.tdn-com-login:hover { text-decoration: underline; }

/* --- Tip meta actions: Podrži (like) + Prijavi (report) ------------------ */
.tdn-tipmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tdn-tipmeta-pub { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.tdn-tipmeta-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tdn-like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-2);
  cursor: pointer;
}
.tdn-like .like-icon img { width: 14px; height: 14px; }
.tdn-like.active { color: var(--kl-ink); }
.tdn-like .like-count { font-weight: 700; }
.tdn-report {
  padding: 0;
  background: none;
  border: 0;
  font: 500 12px Inter, sans-serif;
  color: var(--kl-text-disabled);
  cursor: pointer;
}
.tdn-report:hover { color: var(--kl-text-2); text-decoration: underline; }

/* --- Author's edit dialog ------------------------------------------------ */
.tdn-edit-open {
  padding: 0;
  background: none;
  border: 0;
  font: 700 12px Inter, sans-serif;
  color: var(--kl-blue);
  cursor: pointer;
}
.tdn-edit-open:hover { text-decoration: underline; }
.tdn-edit {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20, 23, 28, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tdn-edit[hidden] { display: none; }
.tdn-edit-box {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--kl-surface);
  border-radius: 14px;
  padding: 16px;
}
.tdn-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tdn-edit-title { margin: 0; font: 800 16px 'Red Hat Display', sans-serif; color: var(--kl-ink); }
.tdn-edit-x {
  width: 30px; height: 30px;
  background: var(--kl-surface-3); border: 0; border-radius: 8px;
  font-size: 18px; line-height: 1; color: var(--kl-ink); cursor: pointer;
}
.tdn-edit-text {
  width: 100%;
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--kl-border-strong);
  border-radius: 10px;
  font: 400 13px Inter, sans-serif;
  color: var(--kl-text);
  line-height: 1.6;
  resize: vertical;
}
.tdn-edit-count { margin-top: 6px; font: 500 12px Inter, sans-serif; color: var(--kl-text-4); }
.tdn-edit-n.is-short { color: var(--kl-red); font-weight: 700; }
.tdn-edit-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tdn-edit-cancel, .tdn-edit-save {
  padding: 9px 16px;
  border-radius: 10px;
  font: 700 12px Inter, sans-serif;
  cursor: pointer;
}
.tdn-edit-cancel { background: none; border: 1px solid var(--kl-border-strong); color: var(--kl-text-2); }
.tdn-edit-save { background: var(--kl-blue); border: 1px solid var(--kl-blue); color: var(--kl-on-dark); }
.tdn-edit-save:disabled { background: var(--kl-text-disabled); border-color: var(--kl-text-disabled); cursor: not-allowed; }
.tdn-editmsg {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kl-online-tint);
  color: var(--kl-green);
  font: 600 12px Inter, sans-serif;
}
.tdn-editmsg.is-error { background: var(--kl-red-tint); color: var(--kl-red); }

/* --- Verified tick + tipster badge beside a name ------------------------- */
.tdn-verified, .tdn-author-name .tipster-badge-icon, .tdn-member-name .tipster-badge-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 3px;
}

/* --- Community card actions (IA-5) --------------------------------------- */
/* Same two controls as the main tip, quieter: these cards are secondary. */
.tdn-member-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
  padding-top: var(--kl-sp-8);
  border-top: 1px solid var(--kl-divider);
}
.tdn-member-report {
  padding: 0;
  background: none;
  border: 0;
  font: 500 12px var(--kl-font-ui);
  color: var(--kl-text-disabled);
  cursor: pointer;
}
.tdn-member-report:hover { color: var(--kl-text-2); text-decoration: underline; }
.tdn-member-like {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-4);
  padding: 0;
  background: none;
  border: 0;
  font: 500 12px var(--kl-font-ui);
  color: var(--kl-text-2);
  cursor: pointer;
}
.tdn-member-like .like-icon img { width: 14px; height: 14px; }
.tdn-member-like.active { color: var(--kl-ink); }
.tdn-member-like .like-count { font-weight: 700; }

/* --- Report form loaded into .pr-sub (IA-8B) ----------------------------- */
/* Markup comes from includes/prijava-analize.php, which predates the redesign;
   these rules dress it in the page's own language. */
.pr-sub:empty { display: none; }
.pr-sub .prijavi {
  position: relative;
  margin-top: var(--kl-sp-10);
  padding: var(--kl-sp-12);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  background: var(--kl-surface-2);
}
.pr-sub .prijavi .fa-times {
  position: absolute;
  top: var(--kl-sp-8);
  right: var(--kl-sp-10);
  color: var(--kl-text-4);
  cursor: pointer;
}
.pr-sub .prijavi .fa-times:hover { color: var(--kl-text-2); }
.pr-sub .prijavi textarea {
  width: 100%;
  min-height: 76px;
  padding: var(--kl-sp-10);
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-10);
  background: var(--kl-surface);
  font: 400 13px var(--kl-font-ui);
  color: var(--kl-text);
  resize: vertical;
}
.pr-sub .prijavi textarea:focus { outline: none; border-color: var(--kl-blue); }
.pr-sub .prijavi .popuni {
  margin-bottom: var(--kl-sp-8);
  font: 500 12px var(--kl-font-ui);
  color: var(--kl-red);
}
.pr-sub .prijavi .submit {
  display: inline-block;
  margin-top: var(--kl-sp-8);
  padding: 8px 16px;
  border-radius: var(--kl-r-10);
  background: var(--kl-blue);
  color: var(--kl-on-dark);
  font: 600 12px var(--kl-font-ui);
  cursor: pointer;
}
.pr-sub .poslato {
  margin-top: var(--kl-sp-10);
  padding: var(--kl-sp-12);
  border-radius: var(--kl-r-12);
  background: var(--kl-green-tint);
  font: 500 12px var(--kl-font-ui);
  color: var(--kl-green);
}