/* Padelistan v3 · the live tournament boards, in the site's language.
   Loaded after each board's own <style>: it redefines the board's tokens (colours, fonts) so everything
   tournament.js draws (groups, bracket, results) takes the new look, then restyles the frame around it.
   The board scripts are untouched. */

:root {
  --void: #050A08; --bg: #0A1D16; --surface: rgba(8, 24, 18, .82); --surface2: #0D2219;
  --line: rgba(244, 244, 238, .13); --line-soft: rgba(244, 244, 238, .08);
  --lime: #D7F54A; --lime-dim: #A9C51F; --lime-glow: rgba(215, 245, 74, .18);
  --teal: #5FD08F; --gold: #D9B23A; --red: #E5636B;
  --t-silver: #C3CCD6; --t-bronze: #C9844D; --t-gold: #D9B23A; --t-beginner: #93A79B;
  --text: #F4F4EE; --muted: rgba(244, 244, 238, .64); --muted-dim: rgba(244, 244, 238, .45);
  --radius: 14px; --maxw: 1240px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v3-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- The arena behind the board: concrete, dark slabs, stripes, grain ---------- */
body { background: var(--void) !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(-28deg, transparent 0 30%, rgba(3, 7, 5, .7) 30% 52%, transparent 52% 100%),
    radial-gradient(60% 50% at 80% 10%, rgba(20, 80, 60, .45), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(21, 147, 184, .14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.53 0 0 0 0 0.52 0 0 0 1.1 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='.35'/%3E%3C/svg%3E"),
    #070D0B !important;
  background-size: auto, auto, auto, 900px 900px, auto !important;
}
body::after {
  content: ""; position: fixed; z-index: -2; right: -4%; top: 64px; width: 420px; height: 130px; pointer-events: none;
  background: repeating-linear-gradient(-62deg, var(--lime) 0 12px, transparent 12px 30px); opacity: .55;
  transform: rotate(-28deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.wrap { max-width: var(--maxw) !important; padding: 0 clamp(18px, 4.5vw, 64px) !important; }

/* ---------- The site's header ---------- */
header.nav.v3 { position: sticky; top: 0; z-index: 60; height: auto; background: rgba(5, 10, 8, .82) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) !important; }
header.nav.v3 .v3-in { display: flex; align-items: center; gap: 22px; max-width: var(--maxw); margin: 0 auto; padding: 12px clamp(18px, 4.5vw, 64px); }
.v3-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.v3-logo img { width: 36px; height: 36px; }
.v3-logo span { font: italic 900 26px/1 var(--display); color: var(--text); }
.v3-links { display: flex; align-items: center; gap: 22px; }
.v3-links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 18px/1 var(--display); color: var(--text); text-decoration: none; }
.v3-links a:hover, .v3-links a[aria-current="page"] { color: var(--lime); }
.v3-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--lime); color: #050F0B;
  font: 700 17px/1 var(--display); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px var(--lime), 0 0 26px rgba(215, 245, 74, .4); }
header.nav.v3 .live-pill { margin: 0; }
.v3-menu { display: none; }
@media (max-width: 1100px) {
  .v3-links { display: none; position: absolute; left: 12px; right: 12px; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px;
    background: rgba(5, 12, 9, .97); border: 1px solid var(--line); border-radius: 16px; }
  header.nav.v3.open .v3-links { display: flex; }
  .v3-links a { min-height: 50px; padding: 0 14px; font-size: 21px; border-bottom: 1px solid var(--line-soft); }
  .v3-menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border-radius: 12px; cursor: pointer;
    background: rgba(8, 24, 18, .7); border: 1px solid rgba(244, 244, 238, .2); }
  .v3-menu i { display: block; height: 2px; background: var(--text); border-radius: 2px; }
}
@media (max-width: 640px) {
  header.nav.v3 .v3-in { gap: 10px; padding: 10px 14px; }
  .v3-logo span { font-size: 21px; }
  .v3-logo img { width: 30px; height: 30px; }
  .v3-btn { height: 38px; padding: 0 14px; font-size: 15px; }
  header.nav.v3 .live-pill { display: none; }
}

/* ---------- The event strip: broadcast type ---------- */
.strip { padding: clamp(40px, 7vh, 72px) 0 10px !important; }
.strip h1 { font: italic 900 clamp(52px, 8vw, 120px)/.86 var(--display) !important; text-transform: uppercase; letter-spacing: -.005em !important; }
.strip-sub { font-size: 17px !important; color: var(--muted) !important; margin-top: 14px !important; max-width: 62ch; }
.strip-sub b { color: var(--lime) !important; }
.day-tag, .tier-tag { font: 700 13px/1 var(--body) !important; letter-spacing: .06em; padding: 7px 13px !important; border-radius: 999px !important; }
.day-tag.live { background: var(--lime) !important; color: #050F0B !important; }
.day-tag.done { color: var(--lime) !important; border-color: var(--line) !important; background: rgba(215, 245, 74, .08) !important; }
.facts { border-radius: 14px !important; background: var(--surface) !important; border-color: var(--line) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); margin-top: 22px !important; }
.fact { padding: 14px 22px !important; }
.fact .k { font-size: 11.5px !important; color: var(--muted) !important; letter-spacing: .08em !important; }
.fact .v { font: italic 800 22px/1.05 var(--display) !important; text-transform: uppercase; color: var(--text) !important; }
.fact.hero .v { font-size: 26px !important; color: var(--lime) !important; }
.sched-chip { border-radius: 999px !important; padding: 7px 13px !important; font-size: 13px !important; background: var(--surface2) !important; }

/* ---------- Switchers and tabs ---------- */
.cat-switch, .tabs { border-radius: 999px !important; background: var(--surface) !important; border-color: var(--line) !important; padding: 4px !important; }
.cat-btn, .tab { border-radius: 999px !important; font: 700 17px/1 var(--display) !important; letter-spacing: .02em; padding: 10px 20px !important; text-transform: uppercase; }
.tab.active { background: var(--lime) !important; color: #050F0B !important; box-shadow: 0 0 22px rgba(215, 245, 74, .35); }
.tabs-wrap { background: linear-gradient(var(--void) 70%, transparent) !important; top: 69px !important; }

/* ---------- Day bands, tables, cards, bracket: the board's own parts in the new type ---------- */
.day-band { border-bottom-color: rgba(215, 245, 74, .3) !important; }
.day-band .day-n, .round-h, .rlabel, .rt-label { font-family: var(--display) !important; font-style: italic; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .01em; }
.day-band .day-n { font-size: clamp(22px, 2.6vw, 30px) !important; }
table th { font-family: var(--body); letter-spacing: .06em; }
.legend, .upcoming-summary, .results-body { border-radius: 14px !important; }
.btn-p, .btn.btn-p { background: var(--lime) !important; color: #050F0B !important; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line) !important; background: rgba(5, 10, 8, .8); }
footer .btn-back { color: var(--lime) !important; font: 700 17px/1 var(--display); }

/* ---------- The rankings page (/rankings/), same frame as the boards ---------- */
header.nav.v3 { display: block !important; height: auto !important; }
.rk-hero { padding: clamp(40px, 7vh, 72px) 0 26px !important; border-bottom-color: var(--line) !important; }
.rk-hero .eyebrow { color: var(--lime) !important; font: 700 13px/1 var(--body) !important; letter-spacing: .08em !important; }
.rk-hero h1 { font: italic 900 clamp(48px, 7.4vw, 108px)/.88 var(--display) !important; text-transform: uppercase; letter-spacing: -.005em !important; -webkit-text-stroke: 0 !important; }
.rk-hero p { font-size: 17px !important; color: var(--muted) !important; }
.rk-hero p b { color: var(--lime) !important; }
.st { background: var(--surface) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.st.total { background: radial-gradient(90% 90% at 100% 0%, rgba(215, 245, 74, .14), transparent 70%), var(--surface) !important; border-color: rgba(215, 245, 74, .35) !important; }
.st .n, .rk, .rating { font-family: var(--display) !important; font-style: italic; font-weight: 900 !important; }
.st .l { font: 700 12px/1.2 var(--body) !important; letter-spacing: .06em !important; }
.search { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 999px !important; padding: 11px 16px !important; }
.chip { font: 700 15px/1 var(--display) !important; text-transform: uppercase; letter-spacing: .03em; padding: 10px 16px !important; background: var(--surface) !important; }
.chip.active { background: var(--lime) !important; color: #050F0B !important; border-color: var(--lime) !important; box-shadow: 0 0 22px rgba(215, 245, 74, .3); }
.tbl-wrap { background: var(--surface) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
thead th { background: rgba(5, 10, 8, .6) !important; }
.pname { font-weight: 600 !important; }
.rk.top3 { color: var(--lime) !important; }
.legend { color: var(--muted) !important; }
.cta .btn { border-radius: 999px !important; background: var(--lime) !important; color: #050F0B !important; font: 700 19px/1 var(--display) !important; padding: 15px 26px !important;
  box-shadow: 0 0 0 1px var(--lime), 0 0 26px rgba(215, 245, 74, .4); }
footer .ig { color: var(--muted); font-weight: 600; }
footer .ig:hover { color: var(--lime); }