/* ============================================================
   FANTASY SSL— style.css
   Visual identity: dark arena floor + innebandy-ball orange,
   scoreboard display type, hole-pattern texture nodding to
   the ball itself.
   ============================================================ */

:root{
  --bg: #0B1220;
  --bg-panel: #121B2E;
  --bg-panel-alt: #17233A;
  --line: rgba(245,243,238,0.09);
  --line-strong: rgba(245,243,238,0.18);
  --ball: #FF9F1C;
  --ball-dark: #C97400;
  --ball-soft: rgba(255,159,28,0.14);
  --court: #F5F3EE;
  --good: #3ECF8E;
  --good-soft: rgba(62,207,142,0.14);
  --warn: #F5B300;
  --warn-soft: rgba(245,179,0,0.16);
  --bad: #FF5C6C;
  --bad-soft: rgba(255,92,108,0.14);
  --bad-dark: #A32636;
  --text: #F2F0E8;
  --text-dim: #9FA6BC;
  --text-dimmer: #6B7288;
  --radius: 14px;
  --radius-sm: 8px;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}

/* subtle ball-hole texture, used behind hero + section headers */
.hole-texture{
  background-image: radial-gradient(var(--line) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

a{ color: inherit; }
button{ font-family: inherit; }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ----------
   Two stacked rows: a taller brand row for the logo/wordmark, and a
   slimmer nav row underneath for the page links. */
.site-header{
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
.header-brand{
  position:relative; overflow:hidden;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.header-brand .wrap{ position:relative; z-index:1; display:flex; align-items:center; height: 130px; }
.header-banner{
  position:absolute; top:0; right:0; height:100%; width:auto; max-width:46%;
  object-fit:contain; object-position:right center;
  pointer-events:none; z-index:0;
}
@media (max-width: 900px){
  .header-banner{ display:none; }
}
.header-nav{
  position:relative;
  background: rgba(11,18,32,0.92);
  backdrop-filter: blur(10px);
}
.header-nav .wrap{ display:flex; align-items:center; height: 52px; }

.logo{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  min-width:0;
  cursor:pointer;
}
.logo:hover b{ color: var(--ball); }
.logo .mark{
  height:36px; width:auto; flex-shrink:0; display:block;
}
.logo-text{ display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; }
.logo b{ font-size: 28px; font-weight: 700; text-transform: uppercase; line-height:1; transition: color .15s; }

nav.main-nav{ display:flex; gap: 4px; flex-wrap:wrap; }
nav.main-nav button{
  background:none; border:none; color: var(--text-dim);
  font-size: 14px; padding: 8px 14px; border-radius: var(--radius-sm);
  cursor:pointer; transition: background .15s, color .15s;
}
nav.main-nav button:hover{ color: var(--text); background: var(--bg-panel-alt); }
nav.main-nav button.active{ color: var(--bg); background: var(--ball); font-weight:600; }


/* Mobile nav: a hamburger toggle replaces the horizontal button row —
   the row itself becomes a dropdown panel anchored under the header. */
.nav-toggle{
  display:none; align-items:center; gap:12px; width:100%;
  background:none; border:none; color: var(--text); cursor:pointer;
  padding:0; height:52px; font-size:14px; font-weight:600; font-family:inherit; text-align:left;
}
.nav-toggle-bars{ position:relative; flex-shrink:0; width:20px; height:2px; background: var(--text); border-radius:2px; }
.nav-toggle-bars::before, .nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: var(--text); border-radius:2px;
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }

/* ---------- Hero ----------
   A contained gradient banner card (not full-bleed) — headline/CTA on
   the left, the deadline card sitting on the right inside the same
   card, echoing a "register to play" style hero without needing an
   image: the accent glow is a CSS radial-gradient, not an asset. */
.hero{
  position: relative;
  padding: 40px 0 8px;
}
.home-columns{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns: 1fr 320px; gap:32px; align-items:center;
  background: linear-gradient(135deg, #16233F 0%, #0B1220 50%, #24140A 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 48px 44px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.home-columns::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 60% 100% at 78% 10%, #000 40%, transparent 90%);
  pointer-events:none;
}
.home-columns::after{
  content:"";
  position:absolute; top:-40%; right:-10%; width:60%; height:180%;
  background: radial-gradient(circle, rgba(255,159,28,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.home-columns > *{ position:relative; z-index:1; }
@media (max-width: 900px){
  .home-columns{
    grid-template-columns: 1fr; padding: 32px 24px;
    /* vertical instead of diagonal here — same colors, running bottom
       (warm accent) up to top (navy) instead of left-to-right */
    background: linear-gradient(0deg, #24140A 0%, #0B1220 55%, #16233F 100%);
  }
  /* this radial glow is anchored top-right (see the base rule below),
     which reads as its own left-to-right-ish highlight layered on top
     of the vertical gradient above — dropped on mobile so only the one
     bottom-to-top gradient shows. */
  .home-columns::after{ display:none; }
}
.eyebrow{
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 12px; color: var(--ball);
}
h1.hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.12;
  text-transform: uppercase;
  margin: 14px 0 16px;
  max-width: 780px;
}
.hero-title em{ font-style:normal; color: var(--ball); }
.hero p.lead{
  color: var(--text-dim);
  max-width: 560px;
  font-size: 17px;
  margin: 0 0 28px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 14px; font-weight:600; cursor:pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn-primary{ background: var(--ball); color:#1a1002; }
.btn-primary:hover{ background:#ffb04a; }
.btn-ghost{ background:transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover{ background: var(--bg-panel-alt); }
.btn-sm{ padding: 7px 12px; font-size:13px; }
.btn-danger{ background: var(--bad-soft); color: var(--bad); }


/* ---------- League switch ---------- */
.league-switch{
  display:inline-flex; background: var(--bg-panel); border:1px solid var(--line);
  border-radius: 999px; padding:4px; gap:4px;
}
.league-switch button{
  border:none; background:none; color: var(--text-dim);
  padding: 8px 20px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer;
  text-transform: uppercase; letter-spacing:.04em;
}
.league-switch button.active{ background: var(--ball); color:#1a1002; }

/* ---------- Sections ---------- */
.view{ display:none; padding: 48px 0 80px; }
.view.active{ display:block; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom:26px; flex-wrap:wrap; }
.section-head h2{
  font-family: var(--font-display); text-transform:uppercase;
  font-size: 26px; margin:0; letter-spacing:.01em;
}
.section-head p{ color: var(--text-dim); margin: 4px 0 0; font-size:14px; }
.section-head-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.deadline-card .league-switch{ margin-bottom:16px; }
.deadline-gw{
  font-family: var(--font-display); text-transform:uppercase; font-size:12px;
  letter-spacing:.05em; color: var(--text-dimmer); margin-bottom:4px;
}
.deadline-time{ font-family: var(--font-display); font-size:21px; color: var(--text); line-height:1.3; }
.deadline-stats{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; color: var(--text-dim); }
.deadline-stats div{ display:flex; justify-content:space-between; gap:10px; }
.deadline-stats span{ color: var(--text); }
.deadline-stats b{ color: var(--text); }

/* ---------- Status page ---------- */
.status-pill{
  display:block; width:100%; text-align:center;
  padding:13px 20px; border-radius:999px; margin: 2px 0 20px;
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:13px; font-weight:600;
}
.status-pill.live{ background: var(--good); color:#04261a; }
.status-pill.upcoming{ background: var(--ball-soft); color: var(--ball); border:1px solid var(--ball); }
.status-pill.finished{ background: var(--bg-panel-alt); color: var(--text-dim); border:1px solid var(--line-strong); }

.status-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; margin-bottom:8px; }
.status-box{
  grid-column: span 2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:20px 14px; text-align:center; font-family:inherit; cursor:default;
}
.status-box span{ font-size:12.5px; color: var(--text-dim); font-weight:600; }
.status-box b{ font-family: var(--font-display); font-size:26px; color: var(--text); font-weight:600; }
.status-box-link{ cursor:pointer; transition: border-color .15s; }
.status-box-link:hover{ border-color: var(--ball); }
.status-box-link b::after{ content:" \203A"; color: var(--ball); }

.locked-name-row{
  display:none; align-items:center; gap:10px;
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:11px 14px;
}
.locked-name{ font-family: var(--font-display); font-size:15px; font-weight:600; letter-spacing:.01em; }
.locked-badge{
  font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color: var(--text-dimmer); border:1px solid var(--line-strong); border-radius:4px; padding:2px 7px;
}
.status-box-alt{
  grid-column: span 3;
  background: var(--court); border-color: var(--court);
}
.status-box-alt span{ color:#5B6478; }
.status-box-alt b{ color: var(--bg); }
@media (max-width: 720px){
  .status-grid{ grid-template-columns: 1fr 1fr; }
  .status-box, .status-box-alt{ grid-column: span 1; }
}
@media (max-width: 460px){
  .status-grid{ grid-template-columns: 1fr; }
}

/* ---------- Status page: transfer trend (live, unhidden) ---------- */
.transfer-trend-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top:24px; }
@media (max-width: 720px){ .transfer-trend-grid{ grid-template-columns: 1fr; } }
/* .panel + .panel's generic 18px margin-top (for panels stacked
   vertically elsewhere) also matches these two side by side — it ate
   into the second one's grid-stretched height instead of just spacing
   it, making the "ut" panel visibly shorter than "in". Grid's own gap
   already spaces them; neither needs the sibling margin. Three class-
   level selectors here (vs. .panel + .panel's two) so this reliably
   wins on specificity regardless of source order, not just by luck. */
.transfer-trend-grid > .panel.transfer-trend-panel{ margin-top:0; }
.transfer-trend-panel h3{ margin:0 0 4px; }
.transfer-trend-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 4px; border-top:1px solid var(--line); font-size:13px;
}
.transfer-trend-row:first-child{ border-top:none; }
.transfer-trend-arrow{ flex-shrink:0; width:16px; text-align:center; font-weight:700; font-size:15px; }
.transfer-trend-arrow-in{ color: var(--good); }
.transfer-trend-arrow-out{ color: var(--bad); }
.transfer-trend-pos{
  flex-shrink:0; width:32px; text-align:center; font-family: var(--font-mono);
  font-size:11px; font-weight:700; text-transform:uppercase;
}
.transfer-trend-name{ flex:1; min-width:0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.transfer-trend-team{
  flex-shrink:1; min-width:0; font-size:11.5px; color: var(--text-dimmer);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%;
}
.transfer-trend-count{ font-family: var(--font-mono); font-size:13px; color: var(--text-dim); width:24px; text-align:right; flex-shrink:0; }

/* rink divider — signature decorative element */
.rink-divider{ height:26px; margin: 8px 0 30px; opacity:.9; }
.rink-divider svg{ width:100%; height:100%; display:block; }
.rink-divider line, .rink-divider circle, .rink-divider rect{
  stroke: var(--line-strong); fill:none;
}

/* ---------- Builder layout ---------- */
.builder-grid{ display:grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items:start; }
.builder-pool-toggle-btn{ display:none; }
@media (max-width: 900px){
  .builder-grid{ grid-template-columns: minmax(0, 1fr); }
  .builder-pool-toggle-btn{ display:inline-flex; }
  /* Spelarval starts hidden on mobile — Spelarlista (in the header,
     next to the league switch) toggles #builder-grid.pool-open to
     reveal it, right where it already sits first in source order. */
  #builder-pool-panel{ display:none; }
  #builder-grid.pool-open #builder-pool-panel{ display:block; }
}

.builder-top-section{ margin-bottom:18px; }
.builder-top-section .builder-actions{ margin:0 0 16px; }
.builder-wildcard-wrap{ max-width:280px; margin:0 auto; padding-top:16px; border-top:1px solid var(--line); }
.builder-confirm-btn{ width:100%; justify-content:center; margin-bottom:18px; }

/* ---------- Mitt lag page layout ---------- */
.myteam-grid{ display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items:start; }
@media (max-width: 900px){ .myteam-grid{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- Poäng page ---------- */
.poang-nav-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.poang-nav-row b{ font-family: var(--font-display); text-transform:uppercase; letter-spacing:.03em; }

.poang-stats-row{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }
.poang-stat-big{
  flex:1 1 160px; min-width:160px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:20px; text-align:center;
}
.poang-stat-big span{ font-size:12.5px; color: var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.poang-stat-big b{ font-family: var(--font-display); font-size:44px; line-height:1; color: var(--text); }
.poang-stat-grid-2x2{ flex:2 1 320px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.poang-stat-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:14px; text-align:center;
}
.poang-stat-cell span{ font-size:11.5px; color: var(--text-dim); font-weight:600; }
.poang-stat-cell-link{ cursor:pointer; text-decoration:none; transition: border-color .15s; }
.poang-stat-cell-link:hover{ border-color: var(--ball); }
.poang-stat-cell-link b::after{ content:" \203A"; color: var(--ball); }
.poang-stat-cell b{ font-family: var(--font-display); font-size:22px; color: var(--text); }
.poang-elva-row{ display:flex; justify-content:flex-end; margin-top:16px; }
#poang-bench-row .bench-slot{ cursor:default; }
#poang-elva-content{ margin-top:16px; }

.myteam-gw-banner{
  background: var(--court); color: var(--bg); text-align:center; font-size:14px; font-weight:600;
  padding:12px 16px; border-radius: var(--radius-sm); margin-bottom:14px;
}
.myteam-gw-banner b{ font-weight:700; }
.myteam-save-btn{ width:100%; justify-content:center; margin-bottom:18px; }

/* reserve bench, styled as a grey strip directly under the green court */
.bench-panel{
  background: var(--bg-panel-alt); border-radius: 0 0 var(--radius) var(--radius);
  margin: -8px 0 0; padding:20px 16px 16px; border:1px solid var(--line-strong); border-top:none;
}
.bench-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.bench-slot{ display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; cursor:pointer; }
.bench-slot .pitch-card{ width:100%; }
.bench-slot-label{
  font-family: var(--font-mono); font-size:11px; font-weight:700; color: var(--text);
  text-transform:uppercase; letter-spacing:.04em;
}
.bench-heading{
  margin:16px 0 0; text-align:center; font-family: var(--font-display); text-transform:uppercase;
  letter-spacing:.03em; font-size:14px; font-weight:600; color: var(--text-dim);
}

/* season chips */
.chip-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.chip-card{
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:20px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.chip-card-icon{
  width:42px; height:42px; border-radius:50%; background: var(--ball-soft); color: var(--ball);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display);
  font-weight:700; font-size:13px; letter-spacing:.01em;
}
.chip-card-name{ font-family: var(--font-display); text-transform:uppercase; font-size:14px; letter-spacing:.02em; }
.chip-card-desc{ font-size:12px; color: var(--text-dim); margin:0; line-height:1.5; min-height:36px; }
.chip-card .btn{ width:100%; justify-content:center; }
.chip-status{
  font-family: var(--font-mono); font-size:11.5px; font-weight:600; color: var(--good);
  background: var(--good-soft); border:1px solid var(--good); border-radius:999px; padding:6px 14px;
}

/* right sidebar */
.myteam-sidebar{ display:flex; flex-direction:column; gap:18px; }
.myteam-identity{ padding-bottom:2px; }
.myteam-username{ font-size:12px; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.myteam-teamname{ font-family: var(--font-display); text-transform:uppercase; font-size:22px; letter-spacing:.01em; line-height:1.15; }
.myteam-league-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px solid var(--line); font-size:13px;
}
.myteam-league-row:first-child{ border-top:none; }
.myteam-league-row b{ font-family: var(--font-mono); color: var(--text); }
.myteam-league-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.panel{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.panel + .panel{ margin-top:18px; }
.panel h3{
  font-family: var(--font-display); text-transform:uppercase;
  font-size:15px; margin: 0 0 14px; letter-spacing:.03em; color: var(--text-dim);
}

/* filters */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter-row select, .filter-row input{
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size:13px;
}
.filter-row input{ flex:1; min-width:160px; }
.filter-row select{ flex:1; min-width:120px; }
.filter-row-align-end{ align-items:flex-end; }

/* ---------- Matcher results eye toggle (Matcher/Fixtures) ---------- */
.fixtures-eye-toggle-wrap{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.fixtures-eye-toggle{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background: var(--bg-panel-alt); color: var(--text); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.fixtures-eye-toggle:hover{ background: var(--bg-panel); color: var(--ball); }
.fixtures-eye-toggle svg{ width:22px; height:22px; display:block; }
.fixtures-eye-toggle-caption{ font-size:10.5px; color: var(--text-dim); white-space:nowrap; }
.filter-col{ flex:1; min-width:120px; display:flex; flex-direction:column; }
.filter-col select{ width:100%; }
.filter-col-label{
  font-family: var(--font-display); text-transform:uppercase;
  font-size:11px; letter-spacing:.05em; color: var(--text-dimmer); margin-bottom:6px;
}

.filter-view-label{
  display:block; font-family: var(--font-display); text-transform:uppercase;
  font-size:12px; letter-spacing:.05em; color: var(--text-dimmer); margin-bottom:6px;
}
.filter-view-select{
  width:100%; background: var(--ball-soft); border:1px solid var(--ball); color: var(--text);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size:14px; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ball) 50%), linear-gradient(135deg, var(--ball) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filter-view-select optgroup{ font-style:normal; font-weight:700; background: var(--bg-panel); color: var(--text-dimmer); }
.filter-view-select option{ font-weight:400; background: var(--bg-panel); color: var(--text); }

/* player pool: grouped list (position or team sections) */
.pool-section{ margin-bottom:18px; }
.pool-section:last-child{ margin-bottom:0; }
.pool-section h4{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-display); text-transform:uppercase; font-size:12.5px;
  letter-spacing:.04em; color: var(--text-dimmer); margin:0 0 6px; padding:10px 4px 0; border-top:1px solid var(--line);
}
.pool-section:first-child h4{ padding-top:0; border-top:none; }
.pool-col-labels{
  display:flex; gap:10px; flex-shrink:0; padding-right:40px;
  font-family: var(--font-mono); font-weight:400; letter-spacing:normal; font-size:11px;
}
.pool-col-labels span:first-child{ width:44px; text-align:right; }
.pool-col-labels span:last-child{ width:34px; text-align:right; }
.pool-list{ list-style:none; margin:0; padding:0; }
.pool-row{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding: 8px 4px; border-top:1px solid var(--line); font-size:13px;
  transition: background .12s;
}
.pool-row:hover{ background: var(--bg-panel-alt); }
.pool-row:first-child{ border-top:none; }
.pool-row-in{ background: var(--ball-soft); box-shadow: inset 0 0 0 1px var(--ball); border-radius: var(--radius-sm); }
.pool-row-disabled{ cursor:not-allowed; opacity:.45; }
.pool-row-disabled:hover{ background:none; }
.pool-row-shirt{ flex-shrink:0; width:20px; height:20px; }
.pool-row-shirt svg, .pool-row-shirt img{ width:100%; height:100%; display:block; object-fit:contain; }
.pool-row .pname{ flex:1; min-width:0; font-weight:500; display:flex; flex-direction:column; gap:1px; }
.pool-row .pname-main{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pool-row .pteam{ min-width:0; font-size:11px; font-weight:400; color: var(--text-dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pool-divider{ flex-shrink:0; align-self:stretch; width:1px; background: var(--line-strong); }
.pool-row .price-tag{ width:44px; text-align:right; flex-shrink:0; }
.pool-points{ font-family: var(--font-mono); font-size:12px; color: var(--text-dimmer); width:34px; text-align:right; flex-shrink:0; }

.pool-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; padding-top:14px; border-top:1px solid var(--line); }
.pager-btn{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong);
  background: transparent; color: var(--text-dim); cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.pager-btn:hover:not(:disabled){ background: var(--ball); color:#1a1002; border-color: var(--ball); }
.pager-btn:disabled{ opacity:.3; cursor:not-allowed; }
.pager-count{
  font-family: var(--font-mono); font-size:12px; color: var(--text); font-weight:600;
  padding:5px 12px; border-radius: 14px; background: var(--bg-panel-alt);
  border:1px solid var(--line-strong);
}

.pos-badge{
  font-family: var(--font-mono); font-size:11px; padding:3px 7px; border-radius:5px;
  background: var(--ball-soft); color: var(--ball); font-weight:700; letter-spacing:.03em;
}
.pos-badge.D{ background: rgba(94,158,255,0.15); color:#7EB0FF; }
.pos-badge.F{ background: var(--good-soft); color: var(--good); }
.price-tag{ font-family: var(--font-mono); color: var(--court); font-size:14px; }

/* free-transfers/cost/bank stat row above the builder pitch */
.builder-stats{ display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:18px; }
.builder-stat{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.builder-stat-pill{
  display:inline-block; font-family: var(--font-mono); font-weight:700; font-size:17px;
  padding:7px 20px; border-radius: var(--radius-sm);
  background: var(--good-soft); color: var(--good); border:1px solid var(--good);
}
.builder-stat-pill.pending{ background: var(--ball-soft); color: var(--ball); border-color: var(--ball); }
.builder-stat-pill.over{ background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.builder-stat span{ font-size:11px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.03em; }
.builder-stat-divider{ width:1px; height:38px; background: var(--line-strong); flex-shrink:0; }
@media (max-width: 480px){
  /* Fixed 26px gaps + full-size pills for three stats + two dividers
     don't fit a phone-width panel — this was overflowing the box
     rather than wrapping or shrinking. Even spacing (no gap needed)
     plus smaller pills keeps all three on one tidy row instead. */
  .builder-stats{ gap:0; justify-content:space-between; }
  .builder-stat{ gap:5px; }
  .builder-stat-pill{ padding:6px 12px; font-size:14px; }
  .builder-stat-divider{ display:none; }
}

.builder-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.builder-actions .btn{ flex:1; min-width:120px; justify-content:center; }
.builder-actions .btn:disabled{ opacity:.4; cursor:not-allowed; }
.add-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
  background: transparent; color: var(--text); cursor:pointer; font-size:16px; line-height:1;
}
.add-btn:hover{ background: var(--ball); color:#1a1002; border-color: var(--ball); }
.add-btn:disabled{ opacity:.3; cursor:not-allowed; }
.add-btn.remove{ color: var(--bad); border-color: var(--bad-soft); }
.add-btn.remove:hover{ background: var(--bad); color:#2a0000; }

/* squad list */
.squad-list{ list-style:none; margin:0; padding:0; }
.squad-list li{
  display:flex; align-items:center; gap:10px;
  padding: 9px 4px; border-top:1px solid var(--line); font-size:13px;
}
.squad-list li .pos-badge{ flex-shrink:0; }
.squad-list li .pname{ flex:1; font-weight:500; }
.squad-list li .price-tag{ font-size:12px; }
.squad-list li.selected{ background: var(--ball-soft); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--ball); }
.admin-status-select{
  flex-shrink:0; background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text);
  padding:7px 10px; border-radius: var(--radius-sm); font-size:12.5px;
}

/* ---------- Mitt lag: formation pitch ---------- */
.formation-switch{ flex-wrap:wrap; }
.formation-switch button{ padding:8px 14px; font-size:12px; }

.pitch{
  position:relative; width:100%; aspect-ratio: 7 / 9; max-width:620px; margin: 0 auto;
  border-radius: var(--radius); overflow:hidden;
}
.pitch-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pitch-bg .pitch-fill{ fill:#2E8FE0; stroke:#050912; }
.pitch-bg .pitch-goal{ fill:#123A66; }
.pitch-bg .pitch-mark{ stroke:rgba(255,255,255,0.85); stroke-width:5; fill:none; }
.pitch-bg .pitch-cross path{ stroke:rgba(255,255,255,0.85); stroke-width:6; stroke-linecap:round; fill:none; }
.pitch-bg .pitch-dot{ fill:rgba(255,255,255,0.85); }

/* Rows sit at fixed percentages down the court rather than being
   evenly spaced, so GK lands inside the goal box and C/MF sits right
   on the halfway line regardless of how many rows are in play. */
.pitch-rows{ position:relative; height:100%; box-sizing:border-box; }
.pitch-row{
  position:absolute; left:4%; right:4%; transform:translateY(-50%);
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
.pitch-row-F{ top:27%; }
.pitch-row-MF{ top:50%; }
.pitch-row-D{ top:70%; }
.pitch-row-GK{ top:90%; }

.pitch-slot{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; width:104px; }
#myteam-content .pitch-slot.filled{ cursor:pointer; }
#builder-pitch-rows .pitch-slot.filled{ cursor:pointer; }
.pitch-remove-btn{
  position:absolute; top:-8px; left:0; z-index:2;
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,0.6);
  background: rgba(11,18,32,0.85); color:#fff; font-size:17px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.pitch-remove-btn:hover{ background: var(--bad); border-color: var(--bad); }
.pitch-avatar-btn{
  background:none; border:none; padding:0; margin:0; cursor:pointer; color:inherit; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.pitch-avatar{
  width:48px; height:48px; border-radius:50%; border:2px solid; background: var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:10.5px; font-weight:700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.pitch-slot.filled.selected .pitch-avatar{ box-shadow: 0 0 0 3px var(--ball); }
.pitch-name{
  font-size:11px; font-weight:700; color:#fff; background: rgba(11,18,32,0.82);
  padding:2px 8px; border-radius:99px; white-space:nowrap; max-width:72px; overflow:hidden; text-overflow:ellipsis;
}
.pitch-price{ font-family: var(--font-mono); font-size:10px; color:#fff; opacity:.75; }
.pitch-cv{ display:flex; gap:4px; }

.pitch-empty-btn{
  width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12); color:#fff; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pitch-empty-btn:hover{ background: rgba(255,255,255,0.24); }

/* Mitt lag's shirt-card pitch slot (Bygg laget keeps the plain circle
   avatar above — this is only used by renderMyTeam's pitchCard). */
.pitch-card{
  position:relative; display:flex; flex-direction:column; align-items:center; width:100%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  padding: 6px 0 0;
}
.pitch-slot.filled.selected .pitch-card{ box-shadow: 0 0 0 3px var(--ball); }
/* Upper-right corner cluster — info icon on top, then captain badge,
   then the Defensive Masterclass "X2" badge (any defender, if that
   chip is active for this gameweek), each stacked below the last.
   Always a column: this isn't a mobile-only layout, these badges
   belong under the info icon at every width. The swap button lives
   separately in the upper-left corner (see .swap-icon-btn.corner-left
   below). The captain badge shows "X3" instead of "K" when Triple
   Captain is the active chip instead — see renderMyTeam/renderPublicTeam,
   never both chips at once (enforced when activating one). */
.pitch-card .pitch-cv{ position:absolute; top:-8px; right:0; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.pitch-cap-badge{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--ball);
  background: var(--ball); color:#1a1002; font-size:12px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.pitch-def-badge{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--good);
  background: var(--good); color:#06241a; font-size:12px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Player availability status warning (skadad/avstängd/lämnat klubben) ----------
   Wherever this sits alongside/instead of an info-icon button (pitch-cv,
   pool-row, stats-row), it IS that button — see infoOrStatusIconHtml() in
   app.js, which swaps the plain info icon for this badge so only one shows. */
.player-status-badge{ display:inline-flex; align-items:center; justify-content:center; color: var(--bad); flex-shrink:0; }
button.player-status-badge{ border:none; background:none; padding:0; cursor:pointer; }
/* Wins over .info-icon-btn/.stats-info-btn's own background+color (two
   classes beats one) — the badge keeps its red triangle look even though
   it's literally that same button element when replacing the icon. */
.player-status-badge.info-icon-btn, .player-status-badge.stats-info-btn{
  background:none; box-shadow:none; color: var(--bad);
}
.player-status-badge svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
/* On player cards specifically (pitch-cv's cluster, plus the standalone
   corner badge on bench/court cards) the triangle matches the name tag's
   dark red rather than the list rows' brighter red. */
.pitch-cv .player-status-badge{ width:28px; height:28px; color: var(--bad-dark); }
.pool-row .player-status-badge{ width:20px; height:20px; margin-right:2px; }
.stats-row .player-status-badge{ width:20px; height:20px; }
/* standalone corner placement — cards with no existing .pitch-cv icon cluster (bench slots, Poäng's read-only court) */
.player-status-badge.corner{ position:absolute; top:-8px; right:0; z-index:3; width:26px; height:26px; color: var(--bad-dark); }
.info-icon-btn.corner{ position:absolute; top:-8px; right:0; z-index:3; width:26px; height:26px; font-size:14px; }
.pitch-shirt{ width:84px; height:84px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); }
.pitch-shirt svg, .pitch-shirt img{ width:100%; height:100%; display:block; object-fit:contain; }
.pitch-card-name{
  margin-top:2px; width:100%; text-align:center; font-size:12px; font-weight:700; color:#fff;
  background: rgba(11,18,32,0.9); padding:3px 4px; border-radius:4px 4px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pitch-card-opp{
  width:100%; text-align:center; font-size:10.5px; font-weight:700; color: var(--bg);
  background: var(--court); padding:2px 4px; border-radius:0 0 4px 4px;
}
/* Player has a status (skadad/avstängd/lämnat klubben) — on court/bench
   player cards only (not the Spelarval or Statistik lists), the name
   tag reads white-on-dark-red next to the warning badge. */
.pitch-card-name.status-name{ background: var(--bad-dark); color:#fff; }

/* "Lägg till X" placeholder — same shirt-card shape as a filled slot,
   just a big + instead of a shirt and one label instead of two. */
#builder-pitch-rows .pitch-slot.empty{ cursor:pointer; }
.pitch-card-placeholder{ transition: border-color .15s, background .15s; }
.pitch-card-placeholder:hover{ border-color: var(--ball); background: rgba(255,255,255,0.22); }
.pitch-placeholder-icon{
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:300; line-height:1; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08); border-radius:8px;
}
.pitch-card-placeholder .pitch-card-name{ border-radius:4px; white-space:normal; }

/* Staged-for-removal squad player (Övergångar only) — keeps the name/
   price/shirt-slot shape of a filled card but faded, with the "+" of an
   empty slot showing through, since it's both "removed" and "you can
   drop a replacement here" at once. */
#builder-pitch-rows .pitch-slot.ghost{ cursor:pointer; }
.pitch-card-ghost{ opacity:.45; transition: opacity .15s; }
.pitch-card-ghost:hover{ opacity:.7; }

/* Below ~640px of ACTUAL PITCH WIDTH (not viewport width — see the
   container-type on .panel below) the four absolutely-positioned rows
   (fixed at 27/50/70/90% down the court) no longer have room between
   them for full-size cards — rows start visually colliding. Rather
   than shrinking cards to the point of unreadability, this drops the
   absolute-position pitch metaphor and stacks the same rows in normal
   flow instead: each row just takes the height it needs, so adjacent
   rows can never overlap regardless of how narrow the pitch gets or
   whether a row wraps.
   This used to be a plain @media (max-width:640px) query, keyed to the
   whole browser window's width — wrong wherever a fixed-width sidebar
   sits next to the pitch (Övergångar's 340px player pool, Mitt lag/
   Poäng's own sidebars): at, say, a 950px window, the WINDOW is nowhere
   near 640px, but the pitch's own available width (window minus that
   340px sidebar minus gaps) can easily be narrower than 640px, so rows
   wrapped while still absolutely positioned — 5 defenders squeezed into
   a too-narrow pitch overlapped straight into the row below. A
   container query keyed to the pitch's OWN rendered width (via
   .panel's container-type below) catches that regardless of what's
   next to it, not just how wide the window happens to be. */
.panel{ container-type: inline-size; }
@container (max-width: 640px){
  .pitch{ aspect-ratio:auto; max-width:none; padding:16px 8px 18px; }
  .pitch-rows{ position:static; height:auto; display:flex; flex-direction:column; gap:14px; }
  .pitch-row{ position:static; transform:none; left:auto; right:auto; top:auto; }
  .pitch-slot{ width:78px; }
  .pitch-avatar, .pitch-empty-btn{ width:40px; height:40px; }
  .pitch-name{ font-size:10px; max-width:66px; }
  .pitch-shirt{ width:56px; height:56px; }
  .pitch-card-name{ font-size:11px; }
  .pitch-card-opp{ font-size:9.5px; }
}

/* friend leaderboards */
.points-input{
  width:80px; background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text);
  padding: 6px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size:13px; text-align:right;
}
.join-code{
  font-family: var(--font-mono); color: var(--ball); letter-spacing:.06em;
}
.invite-row{
  display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;
}
.invite-row input{
  flex:1; min-width:200px; background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text-dim);
  padding: 9px 12px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size:12.5px;
}
table.rules tr.me{ background: var(--ball-soft); }
.you-tag{
  font-family: var(--font-mono); font-size:10px; color: var(--ball); border:1px solid var(--ball-soft);
  padding:1px 5px; border-radius:4px; letter-spacing:.04em; vertical-align:middle;
}
.standings-team{ font-weight:600; color: var(--text); }
a.standings-team{ display:block; text-decoration:none; cursor:pointer; }
a.standings-team:hover{ color: var(--ball); text-decoration:underline; }
.standings-coach{ font-size:12px; color: var(--text-dim); margin-top:2px; }


/* ---------- Ligor (Topplistor) ---------- */
.ligor-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ligor-actions .btn{ flex:1; min-width:200px; justify-content:center; }

.ligor-list{ display:flex; flex-direction:column; gap:10px; }
.ligor-item{ display:flex; flex-direction:column; }
.ligor-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:14px 16px; cursor:pointer; transition: border-color .15s, background .15s;
}
.ligor-row:hover{ border-color: var(--line-strong); }
/* The open row loses its bottom corners/border so its dropdown reads as
   one continuous card growing out of it, not a separate panel. */
.ligor-row.open{
  background: var(--bg-panel-alt); border-color: var(--line-strong);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
/* Grid-rows trick: animating 0fr→1fr auto-sizes to the content's real
   height with no JS measuring, and — unlike max-height — needs no
   guessed ceiling that would either clip a tall topplista or make a
   short one animate at the wrong speed. min-height:0 on the child is
   required for the grid track to actually shrink past its content's
   natural size instead of refusing to go below it. */
.ligor-detail-wrap{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.ligor-detail-wrap.open{ grid-template-rows: 1fr; }
.ligor-detail-wrap > .ligor-detail{
  min-height:0; overflow:hidden;
  opacity:0; transition: opacity .18s ease;
}
.ligor-detail-wrap.open > .ligor-detail{ opacity:1; transition-delay:.08s; }
.ligor-detail{
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-top:none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding:16px;
}
.ligor-row-main{ flex:1; min-width:140px; display:flex; flex-direction:column; gap:3px; }
.ligor-row-main b{ font-size:14.5px; }
.ligor-row-sub{ font-size:11.5px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.03em; }
.ligor-rank{ display:flex; gap:24px; flex-shrink:0; }
.ligor-rank div{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:56px; }
.ligor-rank span{ font-size:10.5px; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.03em; }
.ligor-rank b{ font-family: var(--font-mono); font-size:15px; color: var(--text); display:flex; align-items:center; gap:4px; }
.ligor-rank-move{ font-size:9px; }
.ligor-rank-move.up{ color: var(--good); }
.ligor-rank-move.down{ color: var(--bad); }
.ligor-rank-move.same{ color: var(--text-dimmer); }

.empty-dashed{
  border:1px dashed var(--line-strong); border-radius: var(--radius-sm); padding:16px;
  text-align:center; color: var(--text-dimmer); font-size:12.5px;
}
@media (max-width: 560px){
  .ligor-row{ align-items:flex-start; }
  .ligor-rank{ gap:16px; width:100%; justify-content:flex-start; }
  .ligor-rank div{ align-items:flex-start; }
}

/* ---------- Statistik ---------- */
.stats-season-bar{
  background: var(--bg-panel-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:11px 14px; font-size:13px; color: var(--text-dim); margin: 16px 0;
}
/* Info icon + shirt + name stay put; Mkr/Vald av/Form/P scroll
   horizontally underneath them when they don't all fit (mainly a
   mobile-width thing — on wider screens everything just fits and this
   never engages). One shared scroll container for the header AND every
   row keeps their columns aligned as a single scrollbar moves them all
   together, rather than each row scrolling independently. */
.stats-table-scroll{ overflow-x:auto; }
.stats-col-headers, .stats-row{ display:flex; align-items:center; gap:10px; width:max-content; min-width:100%; }
/* The 4 number columns stay a tight, compact group (their own small
   gap below) — margin-left:auto on the group is what soaks up any
   leftover row width, pushing the whole block flush to the right edge
   instead of spreading the individual columns apart across the row. */
.stats-nums{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.stats-col-headers{
  padding: 0 4px 10px; border-bottom:1px solid var(--line-strong); margin-bottom:2px;
  font-family: var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.04em; color: var(--text-dimmer);
}
.stats-fixed{
  display:flex; align-items:center; gap:10px; flex:0 0 168px;
  position:sticky; left:0; background: var(--bg-panel); z-index:1;
}
.stats-col-spacer-icon{ width:22px; flex-shrink:0; }
.stats-col-spacer-shirt{ width:20px; flex-shrink:0; }
.stats-col-player{ flex:1; min-width:0; }
.stats-rows{ list-style:none; margin:0; padding:0; }
.stats-row{ padding:10px 4px; border-top:1px solid var(--line); font-size:13px; }
.stats-row:first-child{ border-top:none; }

.stats-info-btn{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong);
  background: var(--bg-panel-alt); color: var(--text-dim); font-size:11px; font-style:italic; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; font-family: Georgia, serif;
}
.stats-info-btn:hover{ border-color: var(--ball); color: var(--ball); }

.stats-row .pname{ flex:1; min-width:0; font-weight:500; display:flex; flex-direction:column; gap:1px; }
.stats-row .pname-main{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stats-row .pteam{ min-width:0; font-size:11px; font-weight:400; color: var(--text-dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stats-num{ width:44px; flex-shrink:0; text-align:right; font-family: var(--font-mono); }
.stats-row .stats-num{ font-size:13px; color: var(--text); }
.stats-num-wide{ width:56px; }
.stats-num-narrow{ width:34px; }

/* points/rules table */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.rules{ width:100%; min-width:420px; border-collapse:collapse; font-size:14px; }
table.rules th, table.rules td{ text-align:left; padding: 12px 10px; border-bottom:1px solid var(--line); }
table.rules th{ color: var(--text-dimmer); text-transform:uppercase; font-size:11px; letter-spacing:.05em; font-weight:600; }
table.rules td.pts{ font-family: var(--font-mono); text-align:right; }
table.rules td.pts.neg{ color: var(--bad); }
table.rules td.pts.pos{ color: var(--good); }

/* fixtures */
.fixture-list{ list-style:none; margin:14px 0 0; padding:0; }
.fixture-list li{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding: 10px 4px; border-top:1px solid var(--line); font-size:13.5px;
}
.fixture-date{ width:120px; flex-shrink:0; color: var(--text-dimmer); font-family: var(--font-mono); font-size:12px; }
.fixture-teams{ flex:1; min-width:200px; }
.fixture-teams b{ color: var(--text); }
.fixture-venue{ color: var(--text-dim); font-size:12px; }

/* Matcher page: gameweek rows grouped by day, with club crests either
   side of a translucent kickoff-time badge (.fixture-list above stays
   as-is — it's shared with the player info modal's Spelprogram tab). */
.matcher-deadline{ margin:2px 0 16px; font-size:12.5px; color: var(--text-dim); }
.matcher-day-group{ margin-bottom:20px; }
.matcher-day-group:last-child{ margin-bottom:0; }
.matcher-day-heading{
  margin:0 0 10px;
  text-align:center; text-transform:uppercase; letter-spacing:.04em;
  font-size:12.5px; font-weight:700; color: var(--text-dimmer);
}
/* Grid, not flex — every row shares the exact same column widths, so
   the time badge (and everything else) lines up in a straight column
   no matter how long an individual game's team names are. Children
   fall into the columns in source order (home, homelogo, time+venue,
   awaylogo, away), so no grid-area names are needed. Home/away are
   both 1fr, so the time+venue column — and the day heading centered
   above the row — land on the same true center either way. */
.matcher-game-row{
  display:grid; grid-template-columns: 1fr 32px auto 32px 1fr;
  align-items:center; gap:10px;
  padding:14px 16px; border-radius: var(--radius-sm); background: var(--bg-panel-alt);
  margin-bottom:10px;
}
.matcher-game-row:last-child{ margin-bottom:0; }
.matcher-team{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:15px; }
.matcher-team-home{ text-align:right; }
.matcher-team-away{ text-align:left; }
.matcher-team-abbr{ display:none; }
.matcher-logo{ width:32px; height:32px; object-fit:contain; }
.matcher-logo-placeholder{ display:inline-flex; align-items:center; justify-content:center; color: var(--text-dimmer); }
.matcher-logo-placeholder svg{ width:70%; height:70%; }
.matcher-time-wrap{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.matcher-time{
  background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  color:#fff; font-family: var(--font-mono); font-weight:700;
  font-size:14px; padding:8px 14px; border-radius:6px; min-width:58px; text-align:center;
}
.matcher-venue{
  text-align:center; color: var(--text-dim); font-size:12px; max-width:140px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Real score in place of kickoff time once a match has one (see
   matchResultsCache/subscribeMatchResults) — same badge shape as
   .matcher-time so the row's layout doesn't jump between the two.
   Orange while still live, green once the match has finished — see
   gameRowHtml's own status check for which one applies. */
.matcher-score{
  background: var(--ball); border: 1px solid var(--ball);
  color:#1a1002; font-family: var(--font-mono); font-weight:700;
  font-size:14px; padding:8px 14px; border-radius:6px; min-width:58px; text-align:center;
}
.matcher-score-finished{ background: var(--good); border-color: var(--good); }
.matcher-live-badge{
  background: var(--bad); color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:2px 6px; border-radius:4px; margin-top:2px; display:inline-block;
}
.matcher-game-row-clickable{ cursor:pointer; border:1px solid transparent; }
.matcher-game-row-clickable:hover{ border-color: var(--line-strong); }
@media (max-width: 640px){
  /* The middle column used to be auto-sized, which let the venue name
     claim as much width as it wanted and left almost nothing for the
     team-name columns either side — even the short abbreviation was
     still getting clipped. Pinning it to a fixed budget (the venue
     wraps within it instead) frees that space back up. */
  .matcher-game-row{ grid-template-columns: 1fr 26px 88px 26px 1fr; }
  .matcher-logo{ width:26px; height:26px; }
  .matcher-team{ font-size:13.5px; min-width:46px; }
  .matcher-venue{ max-width:none; white-space:normal; }
  /* Full club names get cramped/truncated at this width — the
     TEAM_CODES abbreviation reads better fully spelled out than a
     long name cut short with an ellipsis. */
  .matcher-team-full{ display:none; }
  .matcher-team-abbr{ display:inline; }
}

.team-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
/* "Så kommer du igång" cards: .panel's own sibling-margin rule
   (`.panel + .panel{ margin-top:18px }`, meant for stacked single-column
   panels elsewhere) was bleeding into this grid — every card but the
   first got squeezed 18px shorter once the row stretched to match the
   tallest one, instead of all four coming out the same height. */
.team-grid .panel{ margin-top:0; }
@media (max-width: 640px){
  .team-grid{ padding: 0 10px; }
  /* match the cards' own inset above, so the "Så kommer du igång"
     heading lines up with them instead of hugging the full window width */
  #view-home .section-head{ padding: 0 10px; }
}

/* empty state */
.empty-state{
  text-align:center; padding: 50px 20px; color: var(--text-dim);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty-state .big{ font-family: var(--font-display); font-size:20px; color: var(--text); margin-bottom:6px; text-transform:uppercase; }

/* admin */
.admin-form{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; }
.admin-form label{ display:block; font-size:11px; color: var(--text-dimmer); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.admin-form input, .admin-form select{
  width:100%; background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text);
  padding: 9px 10px; border-radius: var(--radius-sm); font-size:13px;
}
textarea.export-box{
  width:100%; min-height:160px; background: var(--bg-panel-alt); color: var(--text-dim);
  border:1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-mono);
  font-size:12px; padding:12px; margin-top:10px;
}
.note{ font-size:12.5px; color: var(--text-dimmer); line-height:1.6; }
.note code{ background: var(--bg-panel-alt); padding:1px 5px; border-radius:4px; font-family: var(--font-mono); }

/* ---------- Konto: sign in / create account card ---------- */
.auth-card{
  max-width:400px; margin:0 auto;
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:32px;
}
.auth-title{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:24px; margin:0 0 22px;
}
.auth-field{ margin-bottom:16px; }
.auth-field-row{ display:flex; gap:12px; }
.auth-field-row .auth-field{ flex:1; min-width:0; }
.auth-forgot{ text-align:right; margin:-8px 0 12px; font-size:12.5px; }
.auth-forgot .link-btn{ margin-left:0; }
.auth-field label{
  display:block; font-family: var(--font-display); text-transform:uppercase;
  font-size:11.5px; letter-spacing:.05em; color: var(--text-dimmer); margin-bottom:7px;
}
.auth-field input, .contact-message-input{
  width:100%; background: var(--bg-panel-alt); border:1px solid var(--line-strong); color: var(--text);
  padding:12px 14px; border-radius: var(--radius-sm); font-size:14px;
}
.contact-message-input{ font-family:inherit; resize:vertical; }
.auth-field input:focus, .contact-message-input:focus{ outline:none; border-color: var(--ball); }
.auth-field input:disabled{ opacity:.6; cursor:not-allowed; }
.auth-password-wrap{ position:relative; }
.auth-password-wrap input{ padding-right:44px; }
.auth-password-toggle{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color: var(--text-dimmer); cursor:pointer; padding:0;
}
.auth-password-toggle:hover{ color: var(--text); }
.auth-remember{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:13.5px; color: var(--text-dim); margin-bottom:4px; user-select:none;
}
.auth-remember input{ width:16px; height:16px; accent-color: var(--ball); cursor:pointer; flex-shrink:0; }
.auth-submit{ width:100%; justify-content:center; margin-top:6px; }
.auth-toggle{
  text-align:center; margin-top:18px; font-size:13.5px; color: var(--text-dim);
}
.link-btn{
  background:none; border:none; padding:0; margin-left:4px; cursor:pointer; font-family:inherit;
  color: var(--ball); font-size:inherit; font-weight:600; text-decoration:underline;
}
.link-btn:hover{ color:#ffb04a; }

/* ---------- Konto: logged-in settings (Personal details / Email / Manage) ---------- */
.account-settings{ display:grid; grid-template-columns: 220px 1fr; gap:24px; align-items:start; }
@media (max-width: 720px){ .account-settings{ grid-template-columns: 1fr; } }
.account-settings-nav{ display:flex; flex-direction:column; gap:2px; }
.account-settings-tab{
  text-align:left; background:none; border:none; color: var(--text-dim);
  padding:11px 14px; border-radius: var(--radius-sm); font-size:14px; font-family:inherit; cursor:pointer;
}
.account-settings-tab:hover{ background: var(--bg-panel-alt); color: var(--text); }
.account-settings-tab.active{ background: var(--bg-panel-alt); color: var(--text); font-weight:600; box-shadow: inset 3px 0 0 var(--ball); }
.account-settings-nav-divider{ height:1px; background: var(--line); margin:10px 4px; }
.account-settings-content{ max-width:460px; }
.account-danger-zone{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.account-danger-zone h4{
  font-family: var(--font-display); text-transform:uppercase; font-size:13px; letter-spacing:.03em;
  color: var(--bad); margin:0 0 8px;
}

.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%);
  background: var(--court); color:#0B1220; padding:12px 20px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:100; opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-8px); }

footer.site-footer{
  border-top:1px solid var(--line); padding: 28px 0; color: var(--text-dimmer); font-size:12.5px;
}
footer.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-links{ display:flex; align-items:center; gap:16px; }
.footer-link{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; color: var(--text-dimmer); text-decoration:underline;
}
.footer-link:hover{ color: var(--text); }
.footer-social{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; color: var(--text-dimmer); transition: color .15s;
}
.footer-social:hover{ color: var(--ball); }
.footer-social svg{ width:100%; height:100%; display:block; }

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  nav.main-nav{
    display:none; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:100%;
    background: var(--bg-panel); border-bottom:1px solid var(--line);
    padding:8px 16px 16px; box-shadow:0 12px 24px rgba(0,0,0,0.35);
    max-height: calc(100vh - 52px); overflow-y:auto;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav button{ width:100%; text-align:left; padding:13px 14px; font-size:15px; }
}

@media (max-width: 480px){
  .header-brand .wrap{ height:74px; }
  .logo .mark{ height:26px; }
  .logo b{ font-size:19px; }
  .logo span{ font-size:10.5px; }
}

/* ---------- Info icon (Spelarval rows + pitch cards) ---------- */
.info-icon-btn{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:none;
  background: var(--court); color: var(--bg); font-family: Georgia, serif; font-style:italic; font-weight:700;
  font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.info-icon-btn:hover{ background: var(--ball); }
.pool-row .info-icon-btn{ margin-right:2px; }
/* Every pitch-card's top-right corner icon(s) — info icon, plus a
   captain badge (Mitt lag) and/or a status warning badge (any card) —
   live inside .pitch-cv, which positions the whole cluster (see the
   generic .pitch-cv rules above). */
.pitch-cv .info-icon-btn{ width:28px; height:28px; font-size:13px; }

/* ---------- Swap button (Mitt lag) — same shape/size as the info icon,
   green-up/red-down triangles instead of "i". Pressing it enters/exits
   swap-select mode for that player (see the swap-candidate highlight
   below for the eligible bench/court targets it lights up). Always sits
   in the card's upper-left corner, opposite the info icon/captain badge
   cluster in the upper-right — its own standalone element, not part of
   .pitch-cv. ---------- */
.swap-icon-btn{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:none;
  background: var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.swap-icon-btn svg{ width:13px; height:13px; display:block; }
.swap-icon-btn:hover{ background: var(--bg-panel-alt); }
.swap-icon-btn.corner-left{
  position:absolute; top:-8px; left:0; z-index:2;
  width:28px; height:28px;
}
.swap-icon-btn.corner-left svg{ width:16px; height:16px; }
.pitch-slot.filled.swap-candidate .pitch-card,
.bench-slot.swap-candidate .pitch-card{ box-shadow: 0 0 0 3px var(--good); }
.bench-slot.selected .pitch-card{ box-shadow: 0 0 0 3px var(--ball); }

/* ---------- Player info modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background: rgba(0,0,0,0.3);
  display:flex; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
}
.modal-box{
  position:relative; width:100%; max-width:640px; margin:auto;
  background: var(--bg-panel); border:1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.modal-close-btn{
  position:absolute; top:14px; right:14px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
  background: var(--bg-panel-alt); color: var(--text); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close-btn:hover{ background: var(--bad); border-color: var(--bad); color:#fff; }
.modal-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:20px 56px 16px 20px; border-bottom:1px solid var(--line);
}
.modal-header-name{ font-family: var(--font-display); text-transform:uppercase; font-size:19px; letter-spacing:.01em; }
.modal-header-price{ font-family: var(--font-mono); font-size:15px; color: var(--court); flex-shrink:0; }
.modal-body{ padding:18px 20px 20px; }
.modal-add-btn{ width:100%; justify-content:center; margin-bottom:16px; }
.modal-status-banner{
  background: var(--bad); color:#fff; text-align:center; font-weight:700; font-size:13px;
  padding:11px 16px; border-radius: var(--radius-sm); margin:0 0 16px;
}

.modal-tabs{ display:flex; gap:4px; background: var(--bg-panel-alt); border-radius: var(--radius-sm); padding:4px; margin-bottom:18px; }
.modal-tab{
  flex:1; text-align:center; background:none; border:none; color: var(--text-dim);
  padding:9px 10px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer;
}
.modal-tab.active{ background: var(--court); color: var(--bg); }

.modal-info-grid{ display:grid; grid-template-columns: 90px 1fr 90px; gap:14px; align-items:start; margin-bottom:18px; }
.modal-player-photo, .modal-club-logo{
  width:100%; aspect-ratio: 3/4;
  border:1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-panel-alt);
  display:flex; align-items:center; justify-content:center; color: var(--text-dimmer);
}
.modal-player-photo svg, .modal-club-logo svg{ width:42%; height:42%; }
.modal-player-photo-img{ width:100%; height:100%; object-fit:cover; border-radius: inherit; }
.modal-club-logo img{ width:78%; height:78%; object-fit:contain; }
.modal-stat-list{ display:flex; flex-direction:column; gap:6px; justify-content:center; align-self:stretch; }
.modal-stat-row{
  display:flex; justify-content:space-between; gap:10px;
  background: var(--bg-panel-alt); border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; font-size:13px;
}
.modal-stat-row span{ color: var(--text-dim); }
.modal-stat-row b{ color: var(--text); font-family: var(--font-mono); }

.modal-games-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.modal-games-col h4{
  font-family: var(--font-display); text-transform:uppercase; font-size:12px;
  letter-spacing:.03em; color: var(--text-dimmer); margin:0 0 8px;
}
.modal-game-row{
  display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:12px;
}
.modal-game-row:first-child{ border-top:none; }
.modal-game-row .matcher-logo, .modal-game-row .matcher-logo-placeholder{ width:18px; height:18px; flex-shrink:0; }
.modal-game-round{ font-family: var(--font-mono); color: var(--text-dimmer); width:20px; flex-shrink:0; }
.modal-game-opp{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-game-value{ font-family: var(--font-mono); flex-shrink:0; color: var(--text-dim); font-size:11.5px; }
.modal-result-badge{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color: var(--bg);
}
.modal-result-badge.win{ background: var(--good); }
.modal-result-badge.draw{ background: var(--text-dimmer); }
.modal-result-badge.loss{ background: var(--bad); }
.modal-result-badge.tbd{ background: var(--line-strong); color: var(--text-dimmer); }

@media (max-width: 560px){
  .modal-info-grid{ grid-template-columns: 72px 1fr 72px; }
  .modal-games-grid{ grid-template-columns: 1fr; gap:18px; }
}

/* ---------- Match detail modal (Matcher) ----------
   Opened from a Matcher row once syncMatchResults has a live doc for
   it — reuses .modal-overlay/.modal-box, just its own header/body
   layout: date line, a score banner (home/score/away, live badge if
   still in progress), then one section per event type actually
   present (see matchDetailSectionHtml — a section with nothing on
   either side is skipped rather than shown empty). */
.match-detail-box{ max-width:520px; }
.match-detail-date{
  text-align:center; color: var(--text-dim); font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; margin:0; padding:20px 50px 0;
}
.match-detail-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 20px 18px; border-bottom:1px solid var(--line);
}
.match-detail-team{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700; justify-content:flex-end; text-align:right;
}
.match-detail-team-away{ justify-content:flex-start; text-align:left; }
.match-detail-team .matcher-logo{ width:28px; height:28px; flex-shrink:0; }
.match-detail-score{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family: var(--font-mono); font-weight:700; font-size:22px; color: var(--ball);
}
.match-detail-section{ padding:14px 20px; border-top:1px solid var(--line); }
.match-detail-section h4{
  margin:0 0 10px; font-family: var(--font-display); text-transform:uppercase;
  font-size:12px; letter-spacing:.03em; color: var(--text-dim); text-align:center;
}
.match-detail-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:5px 0; font-size:13.5px; }
.match-detail-cell{ text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match-detail-cell-away{ text-align:left; }

/* ---------- Player match stats modal (Status/Poäng) ----------
   Opened from a player card once real per-round points exist for that
   player (see .pitch-card-stats below and hasStats at each call site
   in app.js) — reuses .modal-overlay/.modal-box, its own header/score
   banner/breakdown table, echoing match-detail's own layout. */
.pitch-card-stats{ cursor:pointer; }
.pitch-card-stats:hover{ box-shadow: 0 0 0 2px var(--ball); }
.player-match-stats-box{ max-width:480px; }
.player-match-stats-header{
  padding:20px 56px 4px 20px; font-family: var(--font-display); text-transform:uppercase;
  font-size:19px; letter-spacing:.01em;
}
.player-match-stats-score{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:6px 20px 18px; border-bottom:1px solid var(--line);
  font-size:14px; font-weight:600; color: var(--text-dim);
}
.player-match-stats-score b{
  font-family: var(--font-mono); font-size:18px; color: var(--ball); background: var(--bg-panel-alt);
  border:1px solid var(--line-strong); border-radius:6px; padding:4px 10px;
}
.player-match-stats-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.player-match-stats-table th{
  text-align:left; font-family: var(--font-display); text-transform:uppercase; font-size:11px;
  letter-spacing:.03em; color: var(--text-dim); background: var(--bg-panel-alt);
  padding:9px 20px;
}
.player-match-stats-table th:not(:first-child), .player-match-stats-table td:not(:first-child){ text-align:right; }
.player-match-stats-table td{ padding:9px 20px; border-top:1px solid var(--line); }
.player-match-stats-table tr:nth-child(even) td{ background: rgba(255,255,255,0.03); }
.player-match-stats-table td.player-match-stats-neg{ color: var(--bad); }
.player-match-stats-info-btn{
  display:block; width:calc(100% - 40px); margin:18px 20px 20px; justify-content:center;
}

/* ---------- Mitt lag: on-court card action pop-up (Byt / Utse till
   kapten / Visa information) — reuses .modal-overlay/.modal-box. ---------- */
.card-menu-box{ max-width:360px; }
.card-menu-btn{
  display:block; width:100%; text-align:center; margin-bottom:10px;
  padding:14px 16px; border-radius: var(--radius-sm); border:none; cursor:pointer;
  background: var(--ball); color:#1a1002; font-weight:700; font-size:14px;
}
.card-menu-btn:last-child{ margin-bottom:0; }
.card-menu-btn:hover{ background:#ffb04a; }