/* =========================================================================
   Danske Padel Klip — cinematic Nordic theme
   ========================================================================= */
:root {
  --bg:        #141011;   /* warm near-black */
  --bg-2:      #1b1618;
  --panel:     #1e1719;
  --panel-2:   #271e20;
  --line:      rgba(247, 235, 235, .10);
  --ink:       #f7efef;   /* logo white, warmed */
  --ink-soft:  #cbb6b8;
  --ink-dim:   #9a8587;
  --primary:   #e5484a;   /* brand red (logo) */
  --primary-d: #d13737;   /* logo deep red */
  --primary-l: #f2a0a0;   /* logo light coral */
  --accent:    #f2a0a0;   /* coral accent */
  --gold:      #f2a0a0;
  --radius:    0;
  --maxw:      1120px;
  --shadow:    none;
  font-synthesis: none;
}

/* Self-hosted Geist (SIL OFL). One variable file covers every weight; swap keeps
   text visible on first paint and falls back to the system stack for any glyph
   Geist lacks. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.1; margin: 0; letter-spacing: -.02em; }
img { max-width: 100%; }

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__logo { height: 36px; width: auto; display: block; }
.brand__name { color: var(--ink-soft); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.nav__links { display: flex; gap: 1.4rem; }
.nav__links a { color: var(--ink-soft); font-size: .92rem; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__social { display: flex; gap: .55rem; }
.nav__social a, .footer__social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: .2s;
}
.nav__social a:hover, .footer__social a:hover {
  color: var(--ink); border-color: var(--ink-soft);
}
.nav__social svg, .footer__social svg { width: 17px; height: 17px; }

/* Hide only a non-default (Danish) render until i18n.js swaps the chrome. */
html.i18n-pending body { visibility: hidden; }

/* ---- language switch (DA / EN) ---- */
.langswitch {
  display: inline-flex; border: 1px solid var(--line);
  overflow: hidden; background: var(--bg-2); flex: none;
}
.langswitch button {
  appearance: none; background: transparent; border: 0; color: var(--ink-soft);
  padding: .4rem .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; min-height: 40px; transition: color .2s, background .2s;
}
.langswitch button.is-active { background: var(--primary); color: #fff; }
.langswitch button:not(.is-active):hover { color: var(--ink); }

/* ---- mobile menu toggle (hidden on desktop, shown <=720px) ---- */
.nav__toggle {
  display: none; align-items: center; gap: .5rem; min-height: 44px;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  padding: .5rem .8rem; cursor: pointer; font-size: .9rem; font-weight: 600;
}
.nav__toggle:hover { border-color: var(--ink-soft); }
.nav__toggle-bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; transition: background .2s; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s, top .2s; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav--open .nav__toggle-bars { background: transparent; }
.nav--open .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav--open .nav__toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vh, 4rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
/* No featured clip -> collapse to a single, narrower text column. */
.hero__inner:has(#hero-featured[hidden]) { grid-template-columns: 1fr; max-width: 60rem; }
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }
.hero__title { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 800; line-height: 1.08; }
.hero__lead { max-width: 34rem; color: var(--ink-soft); font-size: 1.12rem; margin: 1.4rem 0 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .82rem 1.4rem; font-weight: 600; font-size: .96rem;
  cursor: pointer; border: 1px solid transparent; transition: .2s;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-d); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ---- hero featured clip (right column) ---- */
.hero__featured {
  position: relative; display: block; justify-self: center; cursor: pointer;
  width: 100%; max-width: 640px; aspect-ratio: 16 / 9; height: auto;
  overflow: hidden; border: 1px solid var(--line);
  background: var(--panel-2);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.hero__featured[hidden] { display: none; }
.hero__featured__thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.hero__featured__frame { width: 100%; height: 100%; border: 0; display: block; }
.hero__featured:hover { border-color: var(--ink-soft); }
.hero__featured:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.hero__featured__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid rgba(247,235,235,.35);
  transition: .3s;
}
.hero__featured:hover .hero__featured__play { border-color: var(--ink); }
.hero__featured__play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.hero__featured__badge {
  position: absolute; top: .8rem; left: .8rem; background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem;
}
.hero__featured__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem 1.1rem .8rem;
  background: var(--bg);
}
.hero__featured__ch { display: block; color: var(--ink-dim); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero__featured__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.3; margin-top: .25rem;
}

/* ---------------- sections ---------------- */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1rem, 4vw, 2.5rem);
}
.section--tint {
  max-width: none;
  background: var(--bg-2);
}
.section--tint > * { max-width: var(--maxw); margin-inline: auto; }
.section__head { margin-bottom: 2.2rem; }
.section__head h2 { display: inline-block; }
/* Progressive scroll reveal — only when the visitor hasn't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .reveal--in { opacity: 1; transform: none; }
}
.section__more { margin-top: 1.6rem; text-align: right; }
.section__more a { color: var(--ink); font-weight: 600; }
.section__more a:hover { text-decoration: underline; }
.section__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.section__head p { color: var(--ink-soft); max-width: 42rem; margin: .7rem 0 0; }

/* ---------------- channels ---------------- */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.channel {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.3rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); transition: .2s;
}
.channel:hover { border-color: var(--ink-soft); }
.channel__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0; flex: none; }
.channel__ico svg { width: 24px; height: 24px; }
.channel__name { font-weight: 700; }
.channel__handle { color: var(--ink-dim); font-size: .85rem; }
.channel__go { margin-left: auto; color: var(--ink-dim); transition: .2s; }
.channel:hover .channel__go { color: var(--ink); }

/* ---------------- latest clips: the newest reels (9:16) ---------------- */
.clips {
  display: grid; gap: 1.4rem; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 320px));
}
.clips[hidden] { display: none; }
.clip {
  position: relative; display: block; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.clip--video { aspect-ratio: 16 / 9; }
.clip--short { aspect-ratio: 9 / 16; }
.clip:hover { border-color: var(--ink-soft); }
.clip:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.clip__thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.clip__frame { width: 100%; height: 100%; border: 0; display: block; }
.clip__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid rgba(247,235,235,.35);
  transition: .3s;
}
.clip:hover .clip__play { border-color: var(--ink); }
.clip__play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.clip__badge {
  position: absolute; top: .8rem; left: .8rem; background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem;
}
.clip__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem 1.1rem .8rem;
  background: var(--bg);
}
.clip__ch { display: block; color: var(--ink-dim); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.clip__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #fff; font-size: .98rem; font-weight: 600; line-height: 1.3; margin-top: .25rem;
}
@media (max-width: 720px) {
  /* one row that scrolls sideways, a peek of the next reel at the edge */
  .clips {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .clips .clip { scroll-snap-align: start; }
}

/* ---------------- news ---------------- */
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.news-item { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; transition: .2s; }
.news-item:hover { border-color: var(--ink-soft); }
.news-item__top { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; font-size: .76rem; }
.news-item__src { color: var(--ink-soft); font-weight: 600; }
.news-item__date { color: var(--ink-dim); flex: none; }
.news-item__title { font-weight: 700; line-height: 1.3; margin-bottom: .35rem; }
.news-item__sum { color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }

/* EN / Original language toggle (news list, on /live and homepage #news) */
.newslang { display: inline-flex; border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; background: var(--bg-2); }
.newslang button { appearance: none; background: transparent; border: 0; color: var(--ink-soft);
  padding: .28rem .7rem; font-size: .78rem; letter-spacing: .02em; cursor: pointer; }
.newslang button.is-active { background: var(--primary); color: #fff; }
.newslang--section { margin-top: 1rem; }

/* ---------------- latest on YouTube (homepage #youtube) ---------------- */
#yt-tabs { margin-bottom: 1.2rem; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
@media (max-width: 560px) {
  .yt-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .yt-card__body { padding: .6rem .7rem .75rem; }
  .yt-card__title { font-size: .82rem; }
  .yt-card__top { font-size: .68rem; }
}
.yt-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .2s; }
.yt-card:hover { border-color: var(--ink-soft); }
.yt-card__thumb { aspect-ratio: 16 / 9; background: #000; }
.yt-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-card__body { padding: .9rem 1rem 1rem; }
.yt-card__top { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; font-size: .76rem; }
.yt-card__ch { color: var(--ink-soft); font-weight: 600; }
.yt-card__date { color: var(--ink-dim); flex: none; }
.yt-card__title { font-weight: 700; line-height: 1.3; font-size: .95rem; }

/* ---------------- still in the draw ---------------- */
.alive { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.alive-event { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.alive-event__name { font-size: 1rem; margin-bottom: .8rem; }
.alive-event__rows { display: grid; gap: .1rem; }
.alive-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .1rem; border-bottom: 1px solid var(--line); }
.alive-row:last-child { border-bottom: 0; }
.alive-row__players { font-weight: 600; font-size: .92rem; }
.alive-row__status { display: flex; align-items: center; gap: .5rem; flex: none; }
.alive-pill { background: var(--primary); color: #fff; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .45rem; border-radius: 0; }
.alive-row__round { color: var(--ink-dim); font-size: .78rem; white-space: nowrap; }
.alive-row--out { opacity: .5; }
.alive-row--out .alive-row__players { text-decoration: line-through; text-decoration-color: var(--ink-dim); font-weight: 500; }

/* ---------------- next up ---------------- */
.nextup { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.nextup-card { display: flex; align-items: center; gap: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.nextup-card__time { flex: none; min-width: 5rem; max-width: 8rem; text-align: center; font-weight: 800; font-size: .9rem; color: var(--ink); border-right: 1px solid var(--line); padding-right: 1rem; line-height: 1.2; }
.nextup-card__body { min-width: 0; }
.nextup-card__players { font-weight: 700; font-size: .96rem; }
.nextup-card__vs { color: var(--ink-soft); font-size: .85rem; margin-top: .12rem; }
.nextup-card__meta { color: var(--ink-dim); font-size: .76rem; margin-top: .3rem; }
.nextup-more { display: inline-block; margin-top: 1rem; color: var(--primary); font-weight: 600; font-size: .92rem; }
.nextup-more:hover { text-decoration: underline; }

/* ---------------- abroad ---------------- */
#abroad-tabs { margin: 0 0 1.4rem; }
.abroad-empty { color: var(--ink-dim); font-size: .95rem; padding: 2rem 0; }
.abroad { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }

/* ---- daily results: one flat list of matches per tournament, W/L dot + score ---- */
.results-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.3rem; display: flex; flex-direction: column; }
.result-row { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.result-row:last-child { border-bottom: none; }
.result-row__badge { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: .4rem; }
.result-row__badge.w { background: #37c98b; }
.result-row__badge.l { background: var(--ink-dim); }
.result-row__body { flex: 1; min-width: 0; }
.result-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.result-row__team { font-weight: 700; font-size: .95rem; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.result-row__player { color: var(--ink); }
.result-row__partner { color: var(--ink-soft); font-weight: 600; }
.result-row__partner::before { content: "/"; margin-right: .35rem; color: var(--ink-dim); font-weight: 400; }
.result-row__score { font-family: monospace; font-size: .85rem; color: var(--ink); flex: 0 0 auto; }
.result-row__opp { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-dim); }
.result-row__opp b { color: var(--ink-soft); font-weight: 600; }

/* ---- weekly preview: one block per country, tournament cards with photo + table ---- */
.abroad-country { margin-bottom: 2.6rem; }
.abroad-country:last-child { margin-bottom: 0; }
.abroad-country__head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.abroad-country__flag { font-size: 1.4rem; line-height: 1; }
.abroad-country__head h3 { font-size: 1.3rem; margin-right: auto; }
.abroad-country__stat { color: var(--ink-dim); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.abroad-tourns { display: grid; gap: 1rem; }

.abroad-tourn { display: grid; grid-template-columns: 130px 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.abroad-tourn--bronze .abroad-tourn__tier { color: #d9853d; border-color: #d9853d; }
.abroad-tourn--promises .abroad-tourn__tier { color: #4fbdba; border-color: #4fbdba; }
.abroad-tourn__photo {
  position: relative; background-size: cover; background-position: 50% 50%;
  padding: .8rem; display: flex; flex-direction: column; justify-content: space-between;
}
.abroad-tourn__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(20,16,17,.6);
}
.abroad-tourn__tier {
  position: relative; z-index: 1; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .5rem; border: 1px solid; border-radius: 0; background: rgba(20,16,17,.55);
}
.abroad-tourn__info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .1rem; }
.abroad-tourn__city { font-weight: 800; font-size: 1.05rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.abroad-tourn__meta { font-size: .7rem; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.abroad-tourn__live { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.abroad-tourn__table { width: 100%; border-collapse: collapse; }
.abroad-tourn__table th {
  text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-dim); padding: .8rem .9rem .5rem;
}
.abroad-tourn__table td { padding: .55rem .9rem; font-size: .88rem; border-top: 1px solid var(--line); }
.abroad-tourn__table tr:first-child td { border-top: none; }
.pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 0; }
.pill--md { background: rgba(55,201,139,.16); color: #37c98b; }
.pill--q { background: rgba(229,166,72,.18); color: #e5a648; }
.pill--cat { background: rgba(79,189,186,.16); color: #4fbdba; }

@media (max-width: 640px) {
  .abroad-tourn { grid-template-columns: 1fr; }
  .abroad-tourn__photo { min-height: 110px; }
}

/* compact abroad list (shown when the weekly snapshot is stale) */
.abroad-compact { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.abroad-compact li {
  display: flex; flex-wrap: wrap; gap: .3rem .55rem; align-items: baseline;
  padding: .55rem .2rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem;
}
.abroad-compact li:last-child { border-bottom: 0; }
.abroad-compact__t { color: var(--ink); font-weight: 600; }
.abroad-compact__d { color: var(--ink-dim); font-size: .8rem; }

.live-dot { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,74,.6);} 70%{ box-shadow:0 0 0 8px rgba(229,72,74,0);} 100%{box-shadow:0 0 0 0 rgba(229,72,74,0);} }

/* ---------------- explorer ---------------- */
.explorer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.explorer__bar {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.tabs {
  display: flex; gap: .3rem; background: var(--bg-2); padding: .25rem; border-radius: 0;
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: transparent; color: var(--ink-soft); padding: .5rem 1.1rem; border-radius: 0;
  cursor: pointer; font-size: .9rem; font-weight: 600; transition: .2s;
  white-space: nowrap; flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
}
.tab.is-active { background: var(--primary); color: #fff; }
.search {
  flex: 1; min-width: 180px; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); padding: .6rem .9rem; border-radius: 0; font-size: .92rem;
}
.search:focus { outline: none; border-color: var(--primary); }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); padding: .38rem .7rem; border-radius: 0; cursor: pointer; font-size: .82rem; transition: .2s; }
.chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.scope-toggle { margin-left: auto; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); padding: .4rem .8rem; border-radius: 0; cursor: pointer; font-size: .8rem; white-space: nowrap; transition: .2s; }
.scope-toggle:hover { color: var(--ink); border-color: var(--primary-l); }
.scope-toggle.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.scope-toggle:disabled { opacity: .6; cursor: default; }
.list-note { padding: .7rem 1.3rem; color: var(--ink-dim); font-size: .82rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.explorer__body { max-height: 620px; overflow-y: auto; }
.loading { padding: 2.5rem; text-align: center; color: var(--ink-dim); }

.row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.3rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.row:hover { background: var(--panel-2); }
.row:last-child { border-bottom: 0; }
.row__flag { font-size: 1.3rem; flex: none; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 600; }
.row__sub { color: var(--ink-dim); font-size: .82rem; }
.row__meta { text-align: right; flex: none; color: var(--ink-soft); font-size: .85rem; }
.row__meta b { color: var(--primary); }
.pill { display: inline-block; padding: .15rem .55rem; border-radius: 0; font-size: .72rem; background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--line); }

.detail { padding: 0; }
.detail__head { position: sticky; top: 0; z-index: 2; background: var(--panel-2); padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; }
.back { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; padding: .4rem .7rem; cursor: pointer; font-size: .82rem; }
.back:hover { border-color: var(--primary); color: var(--primary); }
.detail__title { font-weight: 700; }
.detail__title small { display: block; color: var(--ink-dim); font-weight: 400; font-size: .8rem; }

.match { padding: .8rem 1.3rem; border-bottom: 1px solid var(--line); }
.match:last-child { border-bottom: 0; }
.match--hl { background: rgba(229,72,74,.08); box-shadow: inset 3px 0 0 var(--primary); }
.side__names .me { color: var(--primary); font-weight: 700; }
.row__meta br + * { color: var(--ink-dim); font-size: .78rem; }
.match__top { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.match__round { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.side { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.side__names { flex: 1; min-width: 0; }
.side__names .nd { color: var(--primary); font-weight: 600; }
.side__score { display: inline-flex; gap: .45rem; flex: none; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 600; }
.side__score .set { min-width: 1.05ch; text-align: center; }
.side__score .set sup { font-size: .62em; color: var(--ink-dim); margin-left: 1px; font-weight: 700; }
.side--win .side__score { color: var(--ink); }
.side--win .side__names { color: var(--ink); }
.side--win::after { content: "W"; margin-left: .35rem; font-size: .68rem; font-weight: 800; color: #fff; background: var(--primary); border-radius: 0; padding: 0 .3rem; align-self: center; }
.empty { padding: 2.5rem; text-align: center; color: var(--ink-dim); }

/* ---------------- head-to-head ---------------- */
.h2h__pick { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.h2h__in { flex: 1; min-width: 0; }
.h2h__vs { color: var(--ink-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.h2h__summary { text-align: center; padding: 1.2rem 1.3rem 1.4rem; border-bottom: 1px solid var(--line); }
.h2h__score { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: 1.02rem; }
.h2h__score b { font-size: 1.7rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.h2h__meta { color: var(--ink-dim); font-size: .85rem; margin-top: .5rem; }
.match-tourn { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.3rem .15rem; }
.match-tourn__date { color: var(--ink-dim); font-size: .78rem; }

/* ---------------- submit ---------------- */
.submit-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; max-width: 560px; margin: 0 auto; }
.badge { display: inline-block; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); padding: .3rem .8rem; border-radius: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.signup { display: flex; gap: .7rem; justify-content: center; align-items: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }
.signup__field { display: flex; flex-direction: column; gap: .35rem; text-align: left; flex: 1 1 220px; min-width: 0; }
.signup__label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.signup__input {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  padding: .75rem 1rem; border-radius: 0; width: 100%; font-size: 1rem; min-height: 46px;
}
.signup__input:focus-visible { outline: 2px solid var(--primary-l); outline-offset: 2px; border-color: var(--primary); }
.signup .btn { min-height: 46px; }
.signup__consent { color: var(--ink-dim); font-size: .78rem; line-height: 1.5; margin: .7rem 0 0; }
.submit-note { font-size: .9rem; min-height: 1.2em; margin: .55rem 0 0; font-weight: 600; }
.submit-note[data-kind="ok"] { color: #37c98b; }
.submit-note[data-kind="err"] { color: var(--primary-l); }

/* stale / last-updated indicator (Nordics Abroad and any dated section) */
.section__updated { color: var(--ink-dim); font-size: .84rem; margin: .55rem 0 0; }
.section__updated a { color: var(--ink); font-weight: 600; }
.stale-badge {
  display: inline-block; background: rgba(229,166,72,.18); color: #e5a648;
  border: 1px solid rgba(229,166,72,.38); padding: .12rem .5rem; border-radius: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-right: .45rem;
}

/* quieter secondary hero action (text link, not a bordered button) */
.btn--link { background: transparent; border: 0; color: var(--ink-soft); padding: .82rem .4rem; }
.btn--link:hover { color: var(--primary); transform: none; }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid var(--line); padding: 2.5rem clamp(1rem,4vw,2.5rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; max-width: var(--maxw); margin: 3rem auto 0; }
.footer__brand { font-weight: 700; letter-spacing: .04em; }
.footer__social { display: flex; gap: .55rem; margin-left: auto; }
.footer__meta { width: 100%; color: var(--ink-dim); font-size: .8rem; margin: .5rem 0 0; }

/* Collapse to the hamburger menu below 1024px. The inline nav (7 items plus
   the language switch, and longer Danish labels) only fits comfortably on wide
   desktops, so tablets and narrow laptops get the clean disclosure menu. */
@media (max-width: 1024px) {
  .nav { gap: .7rem; }
  .nav__toggle { display: inline-flex; }
  .nav__social { display: none; }        /* socials live in the footer here */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
  }
  .nav--open .nav__links {
    max-height: 82vh; overflow-y: auto; visibility: visible;
    padding: .4rem clamp(1rem, 4vw, 2.5rem) 1rem;
    transition: max-height .25s ease;
  }
  .nav__links a {
    display: flex; align-items: center; min-height: 48px;
    padding: .4rem .1rem; font-size: 1.02rem; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  .hero__stats { gap: 1.5rem; }
  .row__sub { display: none; }
}
/* Very narrow screens: logo-only brand so nav + language switch + menu fit. */
@media (max-width: 460px) { .brand__name { display: none; } }

/* ============================ LIVE DASHBOARD ============================ */
.nav__links a.is-active { color: var(--ink); }
.nav__live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
/* The header's one red: the LIVE dot. Flat, no pulse ring. */
.nav__live .live-dot { background: var(--primary); box-shadow: none; animation: none; }
.nav__live .live-dot::before { display: none; }   /* the older pulse ring from .live-dot above */
/* Menu groups (nav_markup.py): <details name="dpk-nav">. Desktop = click-open
   dropdown under the label; below 1024px = accordion rows inside the hamburger. */
.nav__group { position: relative; }
.nav__group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-soft); font-size: .92rem; transition: color .2s;
}
.nav__group > summary::-webkit-details-marker { display: none; }
.nav__group > summary::after {
  content: ""; width: .38em; height: .38em; margin-top: -.2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.nav__group[open] > summary::after { transform: rotate(-135deg); margin-top: .2em; }
.nav__group > summary:hover, .nav__group[open] > summary, .nav__group[data-current] > summary { color: var(--ink); }
.nav__sub {
  position: absolute; top: calc(100% + .9rem); left: -1rem; min-width: 13rem;
  display: flex; flex-direction: column;
  background: rgb(20,16,17); border: 1px solid var(--line); padding: .35rem 0;
}
.nav__sub a { padding: .55rem 1rem; white-space: nowrap; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Desktop: an open group's pages are a sub-header row along the bottom of the
   bar, not a dropdown. The bar grows to hold it, so nothing is covered. */
@media (min-width: 1025px) {
  .nav:has(.nav__group[data-current]) { padding-bottom: 3.3rem; }
  .nav__group { position: static; }
  .nav__group > summary::after { display: none; }
  .nav__group[open] > summary { color: var(--ink); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: .55em; }
  .nav__sub {
    position: absolute; top: auto; bottom: 0; left: 0; right: 0; min-width: 0;
    flex-direction: row; align-items: center; gap: 1.6rem;
    height: 2.5rem; padding: 0 clamp(1rem, 4vw, 2.5rem);
    background: none; border: 0; border-top: 1px solid var(--line);
  }
  .nav__sub a { padding: 0; font-size: .86rem; }
  /* No section of its own (front page): the row drops down over the page
     instead of growing the bar, so hovering never shifts the content. */
  .nav:not(:has(.nav__group[data-current])) .nav__sub {
    top: 100%; bottom: auto; background: var(--bg); border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 1024px) {
  .nav__links { background: var(--bg); }   /* solid: the page showed through the open menu */
  .nav__group { border-bottom: 1px solid var(--line); }
  .nav__links > :last-child { border-bottom: 0; }
  .nav__group > summary {
    display: flex; justify-content: space-between; min-height: 48px;
    padding: .4rem .1rem; font-size: 1.02rem; color: var(--ink);
  }
  .nav__group > summary::after { margin-right: .35rem; }
  .nav__sub { position: static; min-width: 0; background: none; border: 0; padding: 0 0 .5rem .9rem; }
  .nav__links .nav__sub a {
    min-height: 42px; padding: .3rem .1rem; font-size: .96rem;
    color: var(--ink-soft); border-bottom: 0;
  }
}

.live-head { max-width: var(--maxw); margin: 0 auto; padding: 2.6rem clamp(1rem,4vw,2.5rem) .8rem; }
.live-head__title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; }
.live-head__lead { color: var(--ink-soft); max-width: 46rem; margin: .8rem 0 0; }
.live-head__status { color: var(--ink); font-size: .95rem; margin: .9rem 0 0; min-height: 1.2em; display: flex; align-items: center; gap: .5rem; }
.live-head__tv { margin-top: 1.1rem; font-size: .9rem; padding: .55rem 1rem; }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #37c98b; display: inline-block;
  box-shadow: 0 0 0 0 rgba(55,201,139,.6); animation: live-pulse 1.8s infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(55,201,139,.6); }
  70% { box-shadow: 0 0 0 7px rgba(55,201,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(55,201,139,0); }
}

/* --- on court (RacketScore point-by-point) --- */
.oncourt { max-width: var(--maxw); margin: 1.6rem auto 0; padding: 0 clamp(1rem,4vw,2.5rem); }
.oncourt[hidden] { display: none; }
.oncourt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oncourt__head h2 { font-size: 1.15rem; letter-spacing: .01em; }
.oncourt__sub { color: var(--ink-soft); font-size: .88rem; margin: .3rem 0 1rem; }
.oncourt__group { color: var(--ink-dim); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin: 1.3rem 0 .7rem; }
.courts { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.court { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.05rem; }
.court--live { border-color: rgba(55,201,139,.45); box-shadow: 0 0 0 1px rgba(55,201,139,.18) inset; }
.court--finished, .court--upcoming { opacity: .9; }
.court__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.court__where { font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.court__meta { color: var(--ink-dim); font-size: .76rem; margin: .2rem 0 .6rem; }
.court__teams { display: grid; gap: .35rem; }
.court__team { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .28rem 0; }
.court__players { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; font-size: .92rem; color: var(--ink-soft); }
.court__team--win .court__players { color: var(--ink); font-weight: 600; }
.court__player.is-nordic { color: var(--primary-l); }
.court__team--win .court__player.is-nordic { color: var(--ink); }
.court__flag { margin-right: .25rem; }
.court__amp { color: var(--ink-dim); }
.court__score { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.court__games { display: inline-flex; gap: .3rem; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 600; }
.court__g { min-width: 1.1ch; text-align: center; }
.court__g.is-set { color: var(--ink); }
.court__g sup { font-size: .62em; margin-left: 1px; color: var(--ink-dim); }
.court__pts { min-width: 2.1ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); background: rgba(154,133,135,.12); border-radius: 0; padding: .05rem .35rem; }
.court__pts.is-pt { color: #37c98b; background: rgba(55,201,139,.16); }

.dash { max-width: var(--maxw); margin: 1.4rem auto 0; padding: 0 clamp(1rem,4vw,2.5rem);
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.4rem; align-items: start; }
.dash__col { min-width: 0; }
.dash__colhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.dash__colhead h2 { font-size: 1.15rem; letter-spacing: .01em; }
.dash__meta { color: var(--ink-dim); font-size: .78rem; white-space: nowrap; }
.dash__group { color: var(--ink-dim); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 1.4rem 0 .7rem; }
.dash__group:first-child { margin-top: 0; }
.empty { color: var(--ink-dim); background: var(--panel); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 1.5rem; font-size: .92rem; }
.empty a { color: var(--primary); }

/* --- match card --- */
.match { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.1rem; margin-bottom: .8rem; }
.match--live { border-color: rgba(55,201,139,.45); box-shadow: 0 0 0 1px rgba(55,201,139,.18) inset; }
.match__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.match__event { font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.match__country { color: var(--ink-dim); }
.mbadge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: .22rem .55rem; border-radius: 0; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.mbadge--live { color: #37c98b; background: rgba(55,201,139,.13); border: 1px solid rgba(55,201,139,.4); }
.mbadge--win  { color: #37c98b; background: rgba(55,201,139,.13); border: 1px solid rgba(55,201,139,.35); }
.mbadge--loss { color: var(--ink-dim); background: rgba(154,133,135,.12); border: 1px solid var(--line); }
.mbadge--done, .mbadge--soon { color: var(--ink-soft); background: rgba(154,133,135,.12); border: 1px solid var(--line); }

.match__side { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .3rem 0; }
.match__side--opp { border-top: 1px solid var(--line); }
.side__names { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .96rem; min-width: 0; }
.side__player { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-soft); }
.side__player.is-subject { color: var(--ink); font-weight: 700; }
.side__flag { font-size: .95rem; }
.side__amp { color: var(--ink-dim); }
.setrow { display: flex; gap: .3rem; flex-shrink: 0; }
.setbox { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: .1rem .35rem; font-size: .92rem; }
.setbox sup { font-size: .62em; color: var(--ink-dim); margin-left: 1px; }
.match__meta { margin-top: .6rem; color: var(--ink-dim); font-size: .78rem; }

/* --- news (reuses homepage .news-item cards, stacked in the sidebar) --- */
.dash__news .news-item { margin-bottom: .7rem; }
.news-viewall { display: inline-block; margin-top: .3rem; color: var(--primary); font-weight: 600; font-size: .9rem; }
.news-viewall:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash__news { margin-top: 1rem; }
}

/* ===================== SECOND-SCREEN / TV KIOSK VIEW ===================== */
/* Everything scales off viewport height so it fills a 1080p (or any) screen. */
.tv {
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  font-size: clamp(13px, 1.55vh, 26px);
  background: var(--bg);
}
.tv--idle { cursor: none; }

.tv__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1em; padding: 1em 1.4em; border-bottom: 1px solid var(--line);
  background: rgba(20,16,17,.55);
}
.tv__brand { display: flex; align-items: center; gap: .6em; font-size: 1.5em; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; }
.tv__brand b { color: var(--primary); font-weight: 800; }
.tv__logo { height: 1.7em; width: auto; }
.tv__meta { display: flex; align-items: center; gap: 1.1em; }
.tv__week { color: var(--ink-dim); font-size: .95em; letter-spacing: .02em; }
.tv__state { display: inline-flex; align-items: center; gap: .45em; font-weight: 700;
  font-size: .95em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.tv__state--live { color: #37c98b; }
.tv__clock { font-size: 1.9em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.tv__main { flex: 1; min-height: 0; padding: 1.2em 1.4em; display: flex; flex-direction: column; overflow: hidden; }
/* Two feeds side by side: Danish domestic left, Nordics abroad right. A column
   whose feed is empty is [hidden] and flex hands its space to the other, so a
   quiet Danish day still fills the TV instead of showing half a blank board. */
.tv__cols { flex: 1; min-height: 0; display: flex; gap: 1.6em; }
.tv__col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tv__col[hidden] { display: none; }
.tv__colhdr { flex: none; display: flex; align-items: baseline; justify-content: space-between;
  gap: .6em; margin-bottom: .5em; padding-bottom: .35em; border-bottom: 2px solid var(--line);
  font-size: 1.05em; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tv__colcount { color: var(--ink-dim); font-size: .8em; font-weight: 700; letter-spacing: .02em; }
.tv__colcount.is-live { color: #37c98b; }
/* Half the width means the 24em card basis would force one card per row. Keep
   this in step with CARD_EM in screen.js — the paginator measures with it. */
.tv__cols .tvc { flex: 1 1 18em; }
/* A portrait screen (rotated TV) has no room for two columns side by side. */
@media (max-aspect-ratio: 4/3) { .tv__cols { flex-direction: column; gap: 1em; } }
.tv__pages { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tv__loading, .tv__empty { margin: auto; text-align: center; color: var(--ink-dim); font-size: 1.6em; }
.tv__empty span { color: var(--ink-dim); font-size: .7em; opacity: .8; }
.tv__grouphdr { color: var(--ink-dim); font-size: .82em; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin: .5em 0 .5em; }
.tv__grouphdr:first-child { margin-top: 0; }
.tv__grp { display: flex; flex-wrap: wrap; gap: 1em; margin-bottom: .3em; }

.tvc { flex: 1 1 24em; min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1em 1.15em; display: flex; flex-direction: column; gap: .15em; }
.tvc--live { border-color: rgba(55,201,139,.5); box-shadow: 0 0 0 2px rgba(55,201,139,.18) inset; }
.tvc__top { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .4em; }
.tvc__event { font-size: .82em; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.tvc__badge { font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2em .6em; border-radius: 0; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.tvc__badge--live { color: #37c98b; background: rgba(55,201,139,.14); border: 1px solid rgba(55,201,139,.45); }
.tvc__badge--win  { color: #37c98b; background: rgba(55,201,139,.14); border: 1px solid rgba(55,201,139,.4); }
.tvc__badge--loss, .tvc__badge--done, .tvc__badge--soon { color: var(--ink-soft); background: rgba(154,133,135,.14); border: 1px solid var(--line); }
.tvc__row { display: flex; align-items: center; justify-content: space-between; gap: .7em; padding: .18em 0; }
.tvc__row--subj .tvc__names { color: var(--ink); font-weight: 800; }
.tvc__names { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; font-size: 1.28em; color: var(--ink-soft); min-width: 0; }
.tvc__player { display: inline-flex; align-items: center; gap: .3em; }
.tvc__flag { font-size: 1em; }
.tvc__slash { color: var(--ink-dim); }
.tvc__sets { display: flex; gap: .28em; flex: none; }
.tvc__set { min-width: 1.5em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 1.35em; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: .05em .28em; }
.tvc__set sup { font-size: .55em; color: var(--ink-dim); }
.tvc__meta { margin-top: .35em; color: var(--ink-dim); font-size: .82em; }

/* Fixed height whether or not there are dots: the paginator measures the space
   left for cards, and a dots row that appears only after pagination would make
   that measurement wrong by its own height. */
.tv__dots { flex: none; display: flex; gap: .5em; justify-content: center; padding-top: .8em; height: .7em; }
.tv__dots span { width: .7em; height: .7em; border-radius: 50%; background: var(--line); }
.tv__dots span.is-on { background: var(--primary); }

/* news ticker */
.tv__ticker { flex: none; height: 3.4em; overflow: hidden; border-top: 1px solid var(--line);
  background: rgba(20,16,17,.6); display: flex; align-items: center; }
.tv__ticker-track { display: flex; white-space: nowrap; will-change: transform; animation: tv-marquee 60s linear infinite; }
.tv__tick-run { display: inline-flex; align-items: center; padding-right: 2em; }
.tv__tick { font-size: 1.1em; color: var(--ink-soft); padding: 0 1.1em; }
.tv__tick b { color: var(--primary); font-weight: 800; margin-right: .4em; text-transform: uppercase; font-size: .82em; letter-spacing: .03em; }
.tv__tick-sep { color: var(--ink-dim); }
@keyframes tv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tv__fs { position: fixed; bottom: 4.2em; right: 1em; z-index: 5;
  width: 2.2em; height: 2.2em; font-size: 1em; border-radius: 0; cursor: pointer;
  background: rgba(30,23,25,.7); color: var(--ink-soft); border: 1px solid var(--line); transition: .2s; }
.tv__fs:hover { color: var(--primary); border-color: var(--primary); }
.tv--idle .tv__fs { opacity: 0; }

/* ============================================================
   SEO pages (server-generated tournament / player / hub pages)
   ============================================================ */
.seo-main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.seo-crumbs { font-size: .82rem; color: var(--ink-dim); margin: 0 0 1.4rem; }
.seo-crumbs a { color: var(--ink-dim); }
.seo-crumbs a:hover { color: var(--primary); }
.seo-h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.12; margin: .2rem 0 .5rem; color: var(--ink); }
.seo-sub { color: var(--ink-dim); font-size: .95rem; margin: 0 0 1.2rem; letter-spacing: .01em; }
.seo-lead { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6rem; }
.seo-lead b { color: var(--ink); }
.seo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 0 0 1.6rem; }
.seo-stats > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; text-align: center; }
.seo-stats dt { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.seo-stats dd { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; }
.seo-tags { margin: 0 0 1.6rem; line-height: 2.1; }
.seo-tags__label { color: var(--ink-dim); font-size: .85rem; margin-right: .4rem; }
.seo-tag { display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: .25rem .7rem; margin: 0 .3rem .3rem 0; font-size: .85rem; color: var(--ink-soft); }
.seo-tag:hover { border-color: var(--primary); color: var(--ink); }
.seo-matches { display: flex; flex-direction: column; gap: .5rem; }
.seo-match { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: .7rem .9rem; }
.seo-match__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--ink-dim); font-size: .8rem; margin-bottom: .4rem; }
.seo-score { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.seo-pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: .1rem .55rem;
  font-size: .72rem; color: var(--ink-dim); }
.seo-side { display: flex; justify-content: space-between; padding: .18rem 0; color: var(--ink-soft); }
.seo-side--win { color: var(--ink); font-weight: 600; }
.seo-side--win .seo-side__names::after { content: "✓"; color: var(--primary); margin-left: .4rem; font-size: .85em; }
.seo-nm a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-dim); }
.seo-nm a:hover { color: var(--primary); border-color: var(--primary); }
.seo-nm--me a, .seo-nm--me { color: var(--primary); font-weight: 700; }
.seo-nm--nd { color: var(--ink); }
.seo-seed { color: var(--ink-dim); font-size: .75rem; }
.seo-tblock { margin: 1.4rem 0; }
.seo-tblock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.seo-tblock__head a { color: var(--ink); font-weight: 700; }
.seo-tblock__head a:hover { color: var(--primary); }
.seo-tblock__meta { color: var(--ink-dim); font-size: .82rem; }
.seo-back { margin: 2rem 0 0; }
.seo-back a { color: var(--primary); font-weight: 600; }
.seo-idx { margin: 1.8rem 0; }
.seo-idx h2 { font-size: 1.1rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.seo-idx__n { color: var(--ink-dim); font-weight: 400; font-size: .85rem; }
.seo-idx__list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .3rem .9rem; }
.seo-idx__list li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0;
  border-bottom: 1px solid var(--line); }
.seo-idx__list a { color: var(--ink-soft); }
.seo-idx__list a:hover { color: var(--primary); }
.seo-idx__meta { color: var(--ink-dim); font-size: .78rem; white-space: nowrap; }
@media (max-width: 560px) { .seo-stats { grid-template-columns: repeat(2, 1fr); } }
/* Player pages: server-rendered video section (thumbnail facades; the
   youtube-nocookie player loads on click). */
.seo-h2 { font-size: 1.25rem; color: var(--ink); margin: 2rem 0 .4rem; }
.seo-videos { margin: 0 0 1.6rem; }
.seo-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.seo-vid { display: flex; flex-direction: column; gap: .35rem; color: var(--ink-soft); text-decoration: none; }
.seo-vid:hover .seo-vid__title { color: var(--primary); }
.seo-vid__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 0; border: 1px solid var(--line); background: var(--panel); }
.seo-vid__thumb img, .seo-vid__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.seo-vid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem;
  border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.seo-vid__title { color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.35; }
.seo-vid__meta { color: var(--ink-dim); font-size: .78rem; }
.seo-vid--members .seo-vid__thumb img { opacity: .55; }
.seo-vid__badge { position: absolute; left: .5rem; top: .5rem; padding: .15rem .45rem; border-radius: 0;
  background: rgba(0, 0, 0, .75); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }

/* ============================ ACCESSIBILITY POLISH ============================
   Keep keyboard focus always visible. Several controls above set outline:none
   on :focus (fine for mouse, bad for keyboard); this restores a clear ring for
   keyboard users via :focus-visible, which wins by source order. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-l);
  outline-offset: 2px;
  border-radius: 0;
}
/* Comfortable touch targets for the smaller pill controls on touch screens. */
@media (max-width: 720px) {
  .chip, .scope-toggle { min-height: 40px; display: inline-flex; align-items: center; }
}
/* Respect reduced-motion for the remaining decorative animations. */
@media (prefers-reduced-motion: reduce) {
  .live-dot::before { animation: none; }
  .nav__links { transition: none; }
  .hero__featured, .btn, .news-item, .yt-card { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- upcoming teaser (front page -> /kommende) ---------------- */
.upn { display: flex; flex-direction: column; gap: .6rem; }
.upn-row { display: flex; gap: 1rem; align-items: center; padding: .85rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0; transition: .18s; }
.upn-row:hover { border-color: var(--ink-dim); }
.upn-when { color: var(--ink-dim); font-size: .8rem; min-width: 5.5rem; flex: none;
  font-variant-numeric: tabular-nums; }
.upn-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.upn-title { font-size: .95rem; font-weight: 560; display: flex; align-items: center; gap: .5rem;
  overflow-wrap: anywhere; }
.upn-tier { font-size: .66rem; font-weight: 680; letter-spacing: .06em; padding: .14rem .42rem;
  border-radius: 0; color: var(--primary-l); background: rgba(229,72,74,.13);
  border: 1px solid rgba(229,72,74,.32); flex: none; }
.upn-pair { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  color: var(--ink-soft); font-size: .85rem; }
.upn-p { display: inline-flex; align-items: center; gap: .35rem; }
.upn-p--top { color: var(--ink); font-weight: 540; }
.upn-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 1px solid var(--line); background: var(--panel-2); flex: none; }
.upn-amp { color: var(--ink-dim); }
.upn-more { color: var(--ink-dim); font-size: .78rem; }
@media (max-width: 520px) {
  .upn-row { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .upn-when { min-width: 0; }
}

/* ============ vertical live board (/live-vertical) — phone, full screen ======
   A one-column app shell: header + filter chips + the ONLY scrolling region
   (the match list) + a thin status foot. Sized in dvh so the iOS URL bar
   collapsing does not cut the board off, and padded for the notch/home bar. */
.vb {
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--bg);
  overscroll-behavior: none;
}
.vb__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: calc(.55rem + env(safe-area-inset-top)) .8rem .55rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.vb__back { font-size: 1.5rem; line-height: 1; color: var(--ink-dim); padding: 0 .35rem; }
.vb__title { display: flex; align-items: center; gap: .45rem; font-weight: 640; font-size: .95rem;
  letter-spacing: -.01em; margin-right: auto; min-width: 0; }
.vb__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb__logo { height: 22px; width: auto; flex: none; }
.vb__state { display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-size: .74rem; font-weight: 640; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vb__state--live { color: #37c98b; }
.vb__fs { flex: none; background: none; border: 0; color: var(--ink-dim); font-size: 1.05rem;
  padding: .3rem .2rem; cursor: pointer; }

/* filter chips — two horizontally scrolling rows, no wrap, no scrollbar */
.vb__filters:empty { display: none; }
.vchips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding: .5rem .8rem; -webkit-overflow-scrolling: touch; }
.vchips::-webkit-scrollbar { display: none; }
.vchips--tier { padding-top: 0; }
.vchip { flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .7rem; border-radius: 0; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-soft);
  font: inherit; font-size: .78rem; font-weight: 560; white-space: nowrap; }
.vchip.is-on { background: rgba(229,72,74,.16); border-color: rgba(229,72,74,.45); color: var(--ink); }
.vchip__dot { width: 6px; height: 6px; border-radius: 50%; background: #37c98b; }

/* the list is the only scroller */
.vb__list { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 .8rem calc(.8rem + env(safe-area-inset-bottom)); }
.vb__loading { color: var(--ink-dim); text-align: center; padding: 3rem 0; }
.vb__empty { text-align: center; color: var(--ink-dim); padding: 3.5rem 1rem; display: grid; gap: .5rem; }
.vb__empty b { color: var(--ink-soft); font-size: 1rem; font-weight: 600; }
.vb__empty span { font-size: .85rem; }

.vb__group { position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 -.8rem; padding: .7rem .8rem .45rem;
  background: var(--bg);
  font-size: .72rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); }
.vb__group span { font-size: .68rem; letter-spacing: .04em; color: var(--ink-dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: .04rem .38rem; }
.vb__group--live { color: #37c98b; }

/* match card */
.vcard { background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: .6rem .7rem; margin-bottom: .5rem; }
.vcard--live { border-color: rgba(55,201,139,.45); background: var(--panel); }
.vcard--scheduled { opacity: .82; }
.vcard__top { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.vcard__class { font-size: .7rem; color: var(--ink-dim); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.vcard__class b { color: var(--primary-l); font-weight: 700; }
.vbadge { flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .16rem .45rem; border-radius: 0; border: 1px solid var(--line); color: var(--ink-dim); }
.vbadge--live { color: #37c98b; border-color: rgba(55,201,139,.4); background: rgba(55,201,139,.12); }
.vbadge--soon { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vbadge--done { color: var(--ink-dim); }

/* team row: names left, set boxes right, winner emphasised */
.vt { display: flex; align-items: center; gap: .6rem; padding: .17rem 0; }
.vt__names { min-width: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.3; }
.vt--won .vt__names { color: var(--ink); font-weight: 640; }
.vt--lost .vt__names { color: var(--ink-dim); }
.vt__p { overflow-wrap: anywhere; }
.vt__flag { margin-right: .22rem; }
.vt__amp { color: var(--ink-dim); margin: 0 .28rem; }
.vt__sets { margin-left: auto; display: flex; gap: .22rem; flex: none; }
.vt__set { min-width: 1.45rem; text-align: center; border-radius: 0; padding: .06rem .18rem;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
  font-size: .86rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.vt__set.is-won { color: var(--ink); background: rgba(229,72,74,.16); border-color: rgba(229,72,74,.35); }

.vcard__foot { display: flex; gap: .5rem; align-items: baseline;
  margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--line);
  font-size: .7rem; color: var(--ink-dim); }
.vcard__event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__meta { margin-left: auto; flex: none; }

.vb__foot { display: flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem calc(.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(20,16,17,.92);
  font-size: .72rem; color: var(--ink-dim); }
.vb__refresh { margin-left: auto; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 0; padding: .3rem .8rem; font: inherit;
  font-size: .74rem; font-weight: 560; cursor: pointer; }
.vb__refresh.is-busy { opacity: .55; }

/* Wider screens (tablet held upright, or a desktop peek): centre the column
   rather than stretching a phone layout across the width. */
@media (min-width: 620px) {
  .vb__bar, .vb__filters, .vb__list, .vb__foot { max-width: 620px; margin-inline: auto; width: 100%; }
  .vb__group { margin-inline: -.8rem; }
}

/* ---------- Danish tournaments section on /live (same-day DPF scores) ------
   Shares the card styles above with the vertical board; only the section
   chrome and a multi-column grid for wide screens live here. */
.dpf { max-width: var(--maxw); margin: 1.6rem auto 0; padding: 0 clamp(1rem,4vw,2.5rem); }
.dpf[hidden] { display: none; }
.dpf__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.dpf__head h2 { font-size: 1.15rem; letter-spacing: .01em; }
.dpf__vertical { margin-left: auto; color: var(--ink-dim); font-size: .8rem;
  border: 1px solid var(--line); border-radius: 0; padding: .28rem .75rem; }
.dpf__vertical:hover { color: var(--ink); border-color: var(--ink-dim); }
.dpf__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.dpf__chips:empty { display: none; }
/* On a wide screen the single phone column would waste half the page. */
@media (min-width: 860px) {
  #dpf-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 0 .8rem; align-items: start; }
  #dpf-body .vb__group { grid-column: 1 / -1; position: static; background: none; }
}
/* Upstream feed has gone quiet — flag it instead of showing a frozen board. */
.is-stale { color: var(--primary-l); }

/* Nordics Abroad -> padelfip.com. The row keeps the page's own colours; only
   the hover state says it is a link, so the block reads as data, not navigation. */
.abroad-compact__link { color: inherit; text-decoration: none; }
.abroad-compact__link:hover,
.abroad-compact__link:focus-visible { text-decoration: underline; }
.abroad-tourn__link { display: block; color: inherit; text-decoration: none; }
.abroad-tourn__link:hover .abroad-tourn__city,
.abroad-tourn__link:focus-visible .abroad-tourn__city { text-decoration: underline; }

/* Entries table on a tournament page that has not been played yet. */
.seo-entries { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.seo-entries th { text-align: left; font-weight: 600; opacity: .7; padding: .4rem .6rem .4rem 0; }
.seo-entries td { padding: .45rem .6rem .45rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.seo-entries .pill { font-size: .78rem; padding: .1rem .5rem; border-radius: 0;
  background: rgba(255,255,255,.08); white-space: nowrap; }
.abroad-tourn__src { margin: .35rem .6rem 0; font-size: .78rem; opacity: .65; }
.abroad-tourn__src a { color: inherit; text-decoration: none; }
.abroad-tourn__src a:hover { text-decoration: underline; }
/* World Cup qualifier: Nordic groups, ties and the day's sheet. */
.wcq-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 1.2rem 0; }
.wcq-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 0; padding: .8rem 1rem; }
.wcq-card h3 { margin: 0 0 .5rem; font-size: .95rem; letter-spacing: .02em; }
.wcq-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wcq-table th { text-align: left; font-weight: 600; opacity: .6; font-size: .78rem; padding-bottom: .3rem; }
.wcq-table td { padding: .28rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.wcq-table .wcq-pos { opacity: .5; width: 1.6rem; }
.wcq-table .wcq-num { text-align: right; white-space: nowrap; }
.wcq-table tr.is-nordic td { font-weight: 700; }
.wcq-ties { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .85rem; display: grid; gap: .25rem; }
.wcq-ties li { opacity: .7; }
.wcq-ties li.is-nordic { opacity: 1; }
.wcq-v { opacity: .45; }
.wcq-when, .wcq-court { font-family: ui-monospace, monospace; font-size: .8rem; opacity: .7; margin-right: .4rem; }
.wcq-today { background: rgba(255,255,255,.04); border-radius: 0; padding: .8rem 1rem; margin: 1rem 0; }
.wcq-today h3 { margin: 0 0 .4rem; font-size: .95rem; }
.wcq-today--empty { opacity: .6; }