/* Derbyland. The look of a German floodlit Saturday: charcoal, warm
   floodlight white, DIN lettering like a stadium sign, and one high-vis
   signal colour (a linesman's flag) for whatever is yours or worth most.
   No glass, no gradients on surfaces, no glow in the interface: the only
   light comes from the 3D world. The map is the centre of the page. */

/* ---------- Tokens ---------- */
:root {
  --bg: #0c0d0f;
  --surface: #141518;
  --surface-2: #1b1d21;
  --line: #25282d;
  --line-2: #363a41;
  --text: #f0ede6;
  --text-2: #b4b0a7;
  --text-3: #9b978e; /* faintest text, ≥6:1 on --surface */
  --you: #c9f23e; /* set from the player's colour by app.js */
  --signal: #c9f23e;
  --signal-ink: #0c0d0f;
  --loss: #e8695f;
  --radius: 6px;
  --radius-sm: 3px;
  --din: "DIN Condensed", "Bahnschrift SemiBold Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --din-num: "DIN Alternate", "Bahnschrift", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --chrome: 196px; /* masthead + club strip + gaps: what's left is the map's height */
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* The two typefaces: condensed DIN for words, DIN Alternate for numbers */
h2, .brand__word, .round__day, .setup__name, .fx__name b, .btn, .map-label__pill,
.tooltip strong, .fixtures__day, .strip__label {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* ---------- Masthead ---------- */
.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand__mark { width: 24px; height: 28px; }
.brand__word { font-size: 30px; line-height: 0.9; padding-top: 4px; }
.round { display: flex; align-items: baseline; gap: 14px; padding-left: 40px; border-left: 1px solid var(--line); }
.round__league { font-size: 13px; color: var(--text-3); }
.round__day { font-size: 24px; line-height: 1; padding-top: 3px; }
.round__dates { font: 15px/1 var(--din-num); color: var(--text-2); }

.clock { display: flex; align-items: center; gap: 14px; }
.clock__label { max-width: 90px; font-size: 12px; line-height: 1.3; color: var(--text-3); text-align: right; }
.clock__digits { display: flex; gap: 4px; }
.clock__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 5px 6px 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.clock__unit b { font: 22px/1 var(--din-num); color: var(--signal); font-variant-numeric: tabular-nums; }
.clock__unit i { margin-top: 2px; font: normal 10px/1 var(--ui); color: var(--text-3); }

/* ---------- Crests ---------- */
.crest {
  --size: 32px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
}
.crest { grid-template: minmax(0, 1fr) / minmax(0, 1fr); } /* the logo can never grow out of its box (Bremen's tall diamond did) */
/* --logo-scale sets the logo's size itself (not a transform), so it is drawn sharp at its final size */
.crest img { width: calc(100% * var(--logo-scale, 1)); height: calc(100% * var(--logo-scale, 1)); max-width: none; object-fit: contain; }
/* While the logo is still loading: the club's abbreviation on its colour */
.crest > * { grid-area: 1 / 1; }
.crest.is-loading { border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 2px var(--c2); }
.crest.is-loading img { opacity: 0; }
.crest.is-loading::after { content: attr(data-abbr); grid-area: 1 / 1; color: #fff; font: 700 calc(var(--size) * 0.3)/1 var(--din); }
.crest--badge {
  border-radius: 50%;
  background: var(--c1);
  box-shadow: inset 0 0 0 2px var(--c2);
  color: #fff;
  font: 700 calc(var(--size) * 0.32)/1 var(--din);
}

/* ---------- Price scale: six little pennants ---------- */
.p-zero { color: var(--text-3); }
.p-low { color: var(--text-2); }
.p-neg { color: var(--loss); }
.p-mid { color: var(--text); }
.p-high, .p-max { color: var(--signal); }

/* ---------- Three prices side by side: Sieg | Remis | Niederlage ---------- */
.triple { display: inline-flex; gap: 3px; }
.triple__cell { display: flex; flex-direction: column; align-items: center; min-width: 13px; }
.triple__cell b { font: 700 13px/1.1 var(--din); font-variant-numeric: tabular-nums; }
.triple__cell.p-max b { padding: 0 2px; border-radius: 2px; background: var(--signal); color: var(--signal-ink); }
.triple--labelled { gap: 6px; }
.triple--labelled .triple__cell { min-width: 44px; padding: 5px 4px 4px; background: var(--surface-2); border-radius: var(--radius-sm); }
.triple--labelled .triple__cell b { font: 20px/1 var(--din-num); }
.triple--labelled .triple__cell.p-max { background: var(--signal); }
.triple--labelled .triple__cell.p-max b { padding: 0; background: none; }
.triple--labelled .triple__cell.p-max small { color: var(--signal-ink); }
.triple--labelled small { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }

/* ---------- Faces: a mannequin head in the club's shirt, until real photos ---------- */
.face {
  --size: 30px;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background: #262a30;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.face svg { display: block; width: 100%; height: 100%; }

/* ---------- The club strip: played | still free ---------- */
.strip {
  display: flex;
  gap: 18px;
  padding: 10px 32px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Each group gets width by how many clubs it holds (--n is set by app.js);
   the slots shrink with the window and only scroll on phones */
.strip__group { display: flex; flex-direction: column; gap: 6px; flex: var(--n, 1) 1 0; min-width: calc(var(--n, 1) * 46px); }
.strip__group--played { padding-right: 18px; border-right: 1px solid var(--line); min-width: calc(var(--n, 1) * 46px + 18px); } /* the padding on top: one played day still gets a full slot */
.strip__label { font-size: 13px; color: var(--text-3); }
.strip__label b { margin-left: 4px; color: var(--text-2); font-weight: 700; }
.strip__list { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 4px; }
.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 7px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
}
.slot__line { font: 12px/1.15 var(--din-num); color: var(--text-3); white-space: nowrap; }

/* The Torjäger's surname in the narrow DIN, so "Füllkrug" fits */
.slot__nums { display: flex; align-items: center; gap: 5px; }
.slot__fields { display: inline-flex; align-items: center; gap: 3px; font: 12.5px/1.15 var(--din-num); color: var(--text-3); }
.slot__fields::before { content: ""; width: 7px; height: 8px; clip-path: var(--hex); background: currentColor; } /* a field */
.slot__fields.is-up { color: var(--signal); }
.slot__fields.is-down { color: var(--loss); }

/* Still free: in colour, on a card, with the win price */
.slot--free { background: var(--surface); border-color: var(--line); cursor: pointer; transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.14s var(--ease); }
.slot--free::before {
  /* the club's colour as a short bar on top */
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 0 0 2px 2px;
  background: var(--c1);
}
.slot--free:active { transform: scale(0.96); }
/* The three prices (Sieg | Remis | Niederlage) as one bar of three equal boxes,
   so the numbers always sit in the middle of their box; the win box carries its level */
.triple--boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 78px; }
.slot--free .triple--boxes { margin-top: 3px; }
.triple--boxes .triple__cell { justify-content: center; min-width: 0; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, transparent); } /* see-through, so the boxes show on any card */
.triple--boxes .triple__cell b { padding: 0; font: 12px/1 var(--din-num); background: none; }
.triple--boxes .triple__cell--S { background: color-mix(in srgb, currentColor 16%, transparent); }
.triple--boxes .triple__cell--S b { font-weight: 700; }
.triple--boxes .triple__cell.p-max { background: var(--signal); }
.triple--boxes .triple__cell.p-max b { color: var(--signal-ink); }
/* In the Verein step's summary line: a little bigger, right after the club's name */
.step__summary .triple--boxes { flex: none; width: 78px; max-width: none; margin-left: 2px; }
.step__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a long club name gives way, never the prices */
.step__summary .triple--boxes .triple__cell { height: 20px; }
.step__summary .triple--boxes .triple__cell b { font-size: 13.5px; }
/* Narrow cards (small windows, phones) show only the win box: three boxes would be too cramped.
   .is-narrow is set by js/app.js from the cards' width, and the key above follows it */
.is-narrow .slot--free .triple { grid-template-columns: 1fr; max-width: 34px; }
.is-narrow .slot--free .triple__cell--U, .is-narrow .slot--free .triple__cell--N,
.is-narrow .strip__key--prices i:not(:first-child) { display: none; }
.slot--free.is-picked { border-color: var(--you); background: color-mix(in srgb, var(--you) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--you); }
.slot--free.is-picked::after {
  content: "✓";
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
  background: var(--you);
  color: var(--signal-ink);
  font: 900 10px/1 var(--ui);
}
@media (hover: hover) and (pointer: fine) {
  .slot--free:not(.is-picked):hover { border-color: var(--line-2); background: var(--surface-2); }
}

/* ---------- Stage: the map in the middle, your matchday beside it ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 380px);
  gap: 20px;
  padding: 16px 32px 24px;
}
.map-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  height: clamp(560px, calc(100vh - var(--chrome)), 980px);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0c0f;
  border: 1px solid var(--line);
  isolation: isolate;
}
.map { position: absolute; inset: 0; }
.map canvas { display: block; touch-action: none; }
.map-wrap::after {
  /* a soft vignette so the edges sink into the night */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(8, 9, 11, 0.7) 100%);
  z-index: 1;
}
.map-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* The round's table, lying on top of the map (same grid cell, pinned top-left) */
.board {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 5;
  width: 240px;
  margin: 14px;
  padding: 10px 12px 6px;
  background: rgba(20, 21, 24, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.board__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.board__head h2 { font-size: 16px; }
.board__head span { font-size: 12px; color: var(--text-3); }
.board__row {
  display: grid;
  grid-template-columns: 12px 18px minmax(0, 1fr) 16px 24px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.board__rank { font: 12px/1 var(--din-num); color: var(--text-3); }
.board__swatch {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--p);
  color: #0c0d0f;
  font: 700 12px/1 var(--din);
}
.board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board__row.is-target .board__name::after { content: " · Duell"; font-size: 12.5px; font-weight: 600; color: var(--p); }
.board__fields { font: 17px/1 var(--din-num); text-align: right; font-variant-numeric: tabular-nums; }
.board__row.is-you .board__fields { color: var(--you); }

/* Stadium tags. Every stadium gets the same round coin with its crest, on a
   short stem above the roof: no logo is bigger than another, none hides its
   stadium. A home stadium sits in a tag of its owner's colour with their name,
   your match gets a white ring. --zoom (set by the map) makes the tags a
   little bigger when you zoom in and smaller from far away. */
.map-labels { --zoom: 1; }
.map-label { pointer-events: none; }
.map-label__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the stem's foot sits on the roof; --dx/--dy move the tag aside where it would cover another */
  transform: translate(var(--dx, 0px), calc(-50% + var(--dy, 0px))) scale(var(--zoom));
  transform-origin: 50% 100%;
  transition: transform 0.3s var(--ease);
}
/* A tag that was moved aside: a thin leader line from its stadium (a small dot) to the tag */
.map-label__leader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--len, 0px);
  height: 1.5px;
  margin-top: -0.75px;
  background: rgba(244, 242, 236, 0.75);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  transform: rotate(var(--ang, 0rad));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.map-label__leader::before { content: ""; position: absolute; left: -3px; top: -2.25px; width: 6px; height: 6px; border-radius: 50%; background: #f4f2ec; box-shadow: 0 0 0 1.5px rgba(12, 13, 15, 0.8); }
.map-label.is-moved .map-label__leader { opacity: 1; }
.map-label.is-moved .map-label__stem { opacity: 0; }
.map-label__pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: #0c0d0f;
  line-height: 1;
  white-space: nowrap;
}
.map-label__crest {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f4f2ec;
  box-shadow: 0 0 0 1.5px rgba(12, 13, 15, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.map-label__crest .crest { width: 17px !important; height: 17px !important; } /* the size is set inline by JS */
.map-label__crest .crest--badge, .map-label__crest .crest.is-loading { width: 24px !important; height: 24px !important; }
.map-label__name, .map-label__owner { display: none; }
.map-label__stem { width: 1.5px; height: 10px; background: linear-gradient(rgba(244, 242, 236, 0.7), rgba(244, 242, 236, 0)); }
/* All other stadiums: a small coin, so the players' home stadiums stand out */
.map-label:not(.is-capital):not(.is-active) .map-label__crest { width: 21px; height: 21px; box-shadow: 0 0 0 1px rgba(12, 13, 15, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); }
.map-label:not(.is-capital):not(.is-active) .map-label__crest .crest { width: 15px !important; height: 15px !important; }
.map-label:not(.is-capital):not(.is-active) .map-label__crest .crest--badge,
.map-label:not(.is-capital):not(.is-active) .map-label__crest .crest.is-loading { width: 21px !important; height: 21px !important; }
.map-label:not(.is-capital):not(.is-active) .map-label__stem { height: 6px; opacity: 0.6; }
/* Clubs that don't count for anyone this week: smaller and pale, so the map stays calm.
   The stadium itself stays visible: nobody can set a flag there */
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__pill { opacity: 0.8; filter: saturate(0.55); transition: opacity 0.3s var(--ease); }
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__crest { width: 17px; height: 17px; }
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__crest .crest { width: 12px !important; height: 12px !important; }
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__crest .crest--badge,
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__crest .crest.is-loading { width: 17px !important; height: 17px !important; }
.map-label:not(.is-capital):not(.is-active):not(.is-lit) .map-label__stem { opacity: 0.3; }
/* A club that counts for another player this week: full size, ring in their colour */
.map-label.is-lit:not(.is-capital):not(.is-active) .map-label__crest { box-shadow: 0 0 0 2px var(--pick), 0 0 10px color-mix(in srgb, var(--pick) 60%, transparent); }
/* A home stadium: a bigger coin in a ring of the owner's colour, with their initial in a small badge.
   No wide name tag: it would cover the stadiums next door (NRW) */
.map-label.is-capital .map-label__pill { position: relative; padding: 3px; background: var(--owner); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.map-label.is-capital .map-label__crest { width: 26px; height: 26px; box-shadow: none; }
.map-label.is-capital .map-label__crest .crest { width: 19px !important; height: 19px !important; }
.map-label.is-capital .map-label__owner {
  display: grid;
  place-items: center;
  position: absolute;
  top: -5px;
  right: -7px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--owner);
  box-shadow: 0 0 0 1.5px #0c0d0f;
  font-size: 10px;
  line-height: 1;
}
.map-label.is-capital .map-label__stem { width: 2px; background: linear-gradient(var(--owner), transparent); }
/* Your match and your Torjäger's club: a white ring (around the coin, or around the whole home tag) */
.map-label.is-active .map-label__crest, .map-label.is-active.is-capital .map-label__pill { box-shadow: 0 0 0 2.5px #fff, 0 0 14px rgba(255, 255, 255, 0.5); }
.map-label.is-active.is-capital .map-label__crest { box-shadow: none; }
.map-label.is-active .map-label__stem { width: 2px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }

/* Things on top of the map: plain, solid, quiet */
.map-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-width: calc(100% - 200px);
  padding: 6px 10px;
  background: rgba(20, 21, 24, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-2);
}
.map-legend li { display: flex; align-items: center; gap: 6px; }
.map-legend i { display: grid; place-items: center; width: 14px; height: 16px; clip-path: var(--hex); background: var(--p); color: #0c0d0f; font: 700 9px/1 var(--din); font-style: normal; }
.map-legend .is-free i { background: #4a505a; }
.map-legend .is-target i { background: transparent; box-shadow: inset 0 0 0 2px var(--you); clip-path: none; border-radius: 2px; }
.map-tools { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.map-hint { font-size: 12px; color: var(--text-3); }

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 180px;
  max-width: 290px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.tooltip.is-owned { border-left: 3px solid var(--p); }
.tooltip[hidden] { display: none; }
.tooltip strong { font-size: 17px; line-height: 1.05; }
.tip__row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.tip__row > div { display: flex; flex-direction: column; }
.tip__sub { color: var(--text-3); font-size: 12px; }
.tip__owner { font-size: 12px; font-weight: 600; color: var(--p); }
.tip__line { font-size: 12.5px; color: var(--text-2); }
.tip__line--muted { color: var(--text-3); }
.tip__cta { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--you); }

/* Shown briefly when someone scrolls over the map without ⌘/Ctrl */
.scroll-hint {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(8, 9, 11, 0.55);
  color: var(--text);
  font: 600 16px/1 var(--ui);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.scroll-hint.is-on { opacity: 1; }
.scroll-hint kbd {
  margin: 0 4px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font: 600 14px/1 var(--ui);
}

/* Loading and failure states */
.map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--text-3);
  font-size: 13px;
  z-index: 2;
  transition: opacity 0.6s var(--ease);
}
.map-loading__hex { width: 30px; height: 34px; clip-path: var(--hex); background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.map-wrap.is-ready .map-loading, .map-wrap.is-failed .map-loading {
  opacity: 0;
  visibility: hidden; /* opacity alone left the animated hexagon drawn on top */
  pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0s 0.6s;
}
.map-failed { display: none; position: absolute; inset: 0; place-content: center; text-align: center; padding: 24px; color: var(--text-2); z-index: 3; }
.map-wrap.is-failed .map-failed { display: grid; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.14s var(--ease);
}
.btn:active { transform: scale(0.97); }
.link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #24272c; }
  .link:hover { color: var(--text); text-decoration-color: var(--text-3); }
}

/* ---------- Side: your matchday and the flag round ---------- */
.side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: clamp(560px, calc(100vh - var(--chrome)), 980px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.panel {
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.panel__head h2 { font-size: 21px; line-height: 1; }
.panel__meta { display: inline-flex; align-items: center; gap: 4px; font: 12px/1 var(--din-num); color: var(--text-3); }
.panel__meta.is-ready { color: var(--you); }
.panel__meta--live::before { content: ""; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--loss); }
.muted { font-size: 13px; color: var(--text-3); }
.flag-icon { width: 14px; height: 14px; }

/* "Deine Aufstellung": three numbered steps. Done ones get a tick, the next
   open one is outlined in your colour, so it's obvious what's still missing. */
.setup { padding: 16px 16px 14px; }
.setup__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.setup__title { display: flex; flex-direction: column; gap: 3px; }
.setup__title h2 { font-size: 22px; line-height: 1; }
.setup__title span { font: 12px/1 var(--din-num); color: var(--text-3); }
.progress { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.progress__bar { display: flex; gap: 3px; }
.progress__bar i { width: 24px; height: 5px; border-radius: 1px; background: var(--line-2); transform: skewX(-18deg); transition: background 0.2s var(--ease); }
.progress__bar i.on { background: var(--you); }
.progress__text { font: 12.5px/1 var(--din-num); color: var(--text-2); }
.progress.is-done .progress__text { color: var(--you); }

.step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
  padding: 10px 10px 11px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease);
}
.step.is-next { border-color: var(--you); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 35%, transparent); }
.step__num { font: 700 32px/0.85 var(--din); color: var(--text-3); text-align: center; padding-top: 2px; }
.step.is-next .step__num, .step.is-done .step__num { color: var(--you); }
.step.is-done .step__num::after { content: "✓"; display: block; margin-top: 5px; font: 900 11px/1 var(--ui); }
.step__body { min-width: 0; }
.step__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.step__label { font: 700 16px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.step__hint { margin-left: auto; font-size: 12.5px; color: var(--text-3); text-align: right; }
.step__empty { font-size: 13px; color: var(--text-3); }
.step.is-next .step__empty { color: var(--text-2); }
.step__body > .triple--labelled { margin-top: 10px; }
.setup__note { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--you) 9%, var(--surface));
  border: 1px solid var(--you);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.summary b { font: 700 15px/1 var(--din); text-transform: uppercase; color: var(--you); white-space: nowrap; }

.setup__club { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; }
.setup__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup__name { font-size: 22px; line-height: 1; }
.setup__sub { font-size: 12.5px; color: var(--text-2); }

/* Torjäger: one player per row; the search lists every scorer of the season */
.player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px 6px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s var(--ease);
}
.player__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.player__sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.player__goals { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.player__goals b { font: 16px/1 var(--din-num); color: var(--text); }
.player__edit { font-size: 12px; color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.player.is-picked { border-color: var(--you); background: color-mix(in srgb, var(--you) 7%, transparent); }
.player.is-used { opacity: 0.42; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .player:not(.is-picked):not(.is-used):hover { background: var(--surface-2); }
}
.finder__input {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 14px/1.2 var(--ui);
}
.finder__input::placeholder { color: var(--text-3); }
.finder__input:focus { outline: none; border-color: var(--you); }
.finder__list { display: flex; flex-direction: column; gap: 1px; max-height: 190px; margin-top: 6px; overflow-y: auto; scrollbar-width: thin; }
.ball-icon { width: 12px; height: 12px; }

.rules { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.rules summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--text); font-weight: 600; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  font: 700 10px/1 var(--ui);
  color: var(--text-3);
}
.rules[open] summary { margin-bottom: 6px; }
.rules ol { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; padding-left: 18px; list-style: decimal; }
.rules p { margin-top: 6px; }
.rules b { color: var(--you); font-weight: 600; }
/* The duel explained: one sentence, three outcomes (coloured edge), an example, the special cases */
.rules--duel[open] { padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rules--duel p { margin: 0 0 10px; line-height: 1.45; }
.rules__lead { font-size: 13.5px; color: var(--text); }
.outcomes { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.outcomes__row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 10px; border-left: 3px solid var(--edge); border-radius: 4px; background: var(--surface); }
.outcomes__row.is-win { --edge: var(--signal); }
.outcomes__row.is-loss { --edge: var(--loss); }
.outcomes__row.is-tie { --edge: var(--line-2); }
.outcomes__if { font-weight: 600; color: var(--text); }
.outcomes__then { color: var(--text-2); }
.outcomes__row.is-loss b { color: var(--loss); } /* what you lose in red, not in the win colour */
.rules__example { padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 4px; }
/* The Festung (Kein Duell) as its own block in the duel explanation */
.rules__fort { margin: 4px 0 10px; padding: 10px 12px 2px; border-radius: 6px; background: var(--surface); }
.rules__fort-head { display: flex; align-items: center; gap: 8px; }
.rules__fort-head svg { flex: none; width: 18px; height: 18px; color: var(--text-2); }
.rules__fort-head b { color: var(--text) !important; font-size: 13.5px; }
.rules__sub { margin: 12px 0 6px !important; font: 600 11.5px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.rules__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 16px; list-style: disc; line-height: 1.4; }
@media (max-width: 380px) { .outcomes__row { grid-template-columns: 1fr; gap: 2px; } } /* very narrow: condition above, result below */
.duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 6px; } /* two columns where they fit, else one (narrow side column) */
.duel__option {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease), transform 0.14s var(--ease);
}
.duel__option:active { transform: scale(0.97); }
.duel__swatch { width: 3px; height: 26px; border-radius: 1px; background: var(--p); }
.duel__text { display: flex; flex-direction: column; min-width: 0; }
.duel__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.duel__text small { font: 12.5px/1.2 var(--din-num); color: var(--text-3); }
.duel__option.is-picked { border-color: var(--p); background: color-mix(in srgb, var(--p) 9%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--p); }
.duel__option.is-full { opacity: 0.5; cursor: not-allowed; } /* already 2 challengers */
.duel__option.is-full small { color: var(--loss); }
@media (hover: hover) and (pointer: fine) {
  .duel__option:not(.is-picked):hover { border-color: var(--line-2); }
}

/* Flag round */
.flags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 6px; margin: 10px 0 8px; }
.flags__flag { color: var(--text-3); opacity: 0.35; }
.flags__flag .flag-icon { width: 22px; height: 22px; }
.flags__flag.is-ready { color: var(--you); opacity: 1; }
.flags__text { margin-left: 8px; font: 16px/1 var(--din-num); }
.flags .link { margin-left: auto; }

/* ---------- Duell-Arena: the week's duels as face-to-face cards ---------- */
.arena { padding: 28px 32px 8px; border-top: 1px solid var(--line); }
.arena__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 12px; margin-top: 8px; }
.arena__avatar { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--p); color: #0c0d0f; font: 700 12px/1 var(--din); }
.vs { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
/* your duels: a thin line in your colour; each side's colour on its edge */
.vs.is-mine { border-color: color-mix(in srgb, var(--you) 45%, var(--line)); }
/* Each side glows faintly in its player's colour, like a fight card */
.vs:not(.vs--fort):not(.vs--empty) { background:
  linear-gradient(100deg, color-mix(in srgb, var(--pa) 11%, transparent) 0%, transparent 42%, transparent 58%, color-mix(in srgb, var(--pb) 11%, transparent) 100%), var(--surface); }
.vs__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--bg); color: var(--text-2) !important; font: 16px/1 var(--din) !important; letter-spacing: 0.04em !important; box-shadow: 0 0 0 4px var(--surface); }
/* The tug-of-war: A's share of the points from the left, B's from the right */
.vs__tug { position: relative; height: 6px; margin-top: -4px; border-radius: 3px; overflow: hidden; background: var(--pb); }
.vs__tug::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share); background: var(--pa); box-shadow: 2px 0 0 var(--surface); transition: width 0.6s var(--ease); }
/* A match still running */
.vs__live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 7px 1px; border-radius: 999px; background: color-mix(in srgb, var(--loss) 18%, transparent); color: var(--loss); font: 700 11px/1.2 var(--din); letter-spacing: 0.06em; text-transform: uppercase; }
.vs__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.vs__head .tag + .vs__live { margin-left: 0; }
.vs__foot .tag { margin-right: 6px; vertical-align: 1px; }
.vs__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.vs__head b { font-weight: 600; }
.vs__verb { color: var(--text-3); }
.vs__head .tag { margin-left: auto; }
.vs__head .tag + .tag { margin-left: 0; }
.tag--hot { background: color-mix(in srgb, var(--signal) 16%, transparent); color: var(--signal); }
.vs__body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; } /* both clubs equally tall */
.vs__side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.vs__side--a { box-shadow: inset 0 3px 0 var(--pa); }
.vs__side--b { box-shadow: inset 0 3px 0 var(--pb); }
.vs__side b { font: 17px/1.05 var(--din); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs__side small { font-size: 12px; color: var(--text-3); line-height: 1.25; }
.vs__secret { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--line-2); color: var(--text-3); font: 700 15px/1 var(--din); }
.vs__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 64px; }
.vs__x { font: 13px/1 var(--din); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.vs__score { font: 30px/1 var(--din-num); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.vs__mid small { font-size: 11.5px; color: var(--text-3); }
.vs__foot { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.vs__foot.is-up { color: var(--signal); }
.vs__foot.is-down { color: var(--loss); }
/* someone in a Festung, or nothing chosen yet */
.vs--fort, .vs--empty { flex-direction: row; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.vs--fort p, .vs--empty p { margin: 0; line-height: 1.4; }
.vs--empty .btn { margin-left: auto; flex: none; }
.arena__fort { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text); }
.arena__fort svg { width: 20px; height: 20px; }
.vs--teaser { border-style: dashed; background: none; }
.vs--teaser .arena__fort { font: 700 16px/1 var(--din); color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); background: none; }
/* Live: the round's table if every match ended now */
.whatif { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.whatif__head { display: flex; align-items: baseline; gap: 10px; }
.whatif__head h3 { font-size: 17px; }
.whatif__head small { font-size: 12px; color: var(--text-3); }
.whatif__news { margin: 6px 0 10px; font-size: 14px; font-weight: 600; }
.whatif__news.is-up { color: var(--signal); }
.whatif__news.is-down { color: var(--loss); }
.whatif__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.whatif__row { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) 16px auto 44px; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.whatif__row.is-you { background: color-mix(in srgb, var(--you) 8%, transparent); }
.whatif__rank { font: 14px/1 var(--din-num); color: var(--text-3); }
.whatif__move { font-size: 10px; text-align: center; }
.whatif__move.is-up, .whatif__net.is-up { color: var(--signal); }
.whatif__move.is-down, .whatif__net.is-down { color: var(--loss); }
.whatif__fields { font: 14px/1 var(--din-num); color: var(--text-2); font-variant-numeric: tabular-nums; }
.whatif__net { font: 600 14px/1 var(--din-num); text-align: right; color: var(--text-3); }

/* ---------- Eure Saison: the race chart beside the Kurier ---------- */
.season { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; gap: 16px; padding: 20px 32px 8px; } /* each card its own height; the chart matches the Kurier (js) */
.race, .kurier { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.race__head h2 { font-size: 22px; line-height: 1; }
.race__head p { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.race__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 6px; }
.race__fact { display: flex; flex-direction: column; gap: 3px; }
.race__fact small { font-size: 11.5px; color: var(--text-3); }
.race__fact b { font: 17px/1 var(--din-num); }
.race__plot { position: relative; }
.race__svg { display: block; overflow: visible; }
.race__grid { stroke: var(--line); stroke-width: 1; }
.race__tick { fill: var(--text-3); font: 11px var(--din-num); }
.race__line { fill: none; stroke: var(--p); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.race__line.is-you { stroke-width: 3.5; }
.race__line--live { stroke-dasharray: 4 4; }
/* The first look: every line draws itself from the start to today */
.race__svg.is-drawing polyline.race__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: raceDraw 1.6s var(--ease) 0.15s forwards paused; }
.race__svg.is-drawing .race__area { opacity: 0; animation: raceFade 0.8s ease 1.2s forwards paused; }
.race.is-seen .race__svg.is-drawing polyline.race__line, .race.is-seen .race__svg.is-drawing .race__area { animation-play-state: running; }
@keyframes raceDraw { to { stroke-dashoffset: 0; } }
@keyframes raceFade { to { opacity: 1; } }
.race__crown { display: inline-grid; color: #f5c84a; }
.race__crown svg { width: 14px; height: 14px; }
.race__dot { fill: var(--p); stroke: var(--surface); stroke-width: 2; }
.race__cursor { stroke: var(--line-2); stroke-width: 1; }
/* The tag at each line's end: initial, name, fields (identity never by colour alone) */
.race__tag { position: absolute; display: inline-flex; align-items: center; gap: 5px; transform: translateY(-50%); font-size: 12.5px; color: var(--text-2); white-space: nowrap; pointer-events: none; }
.race__tag b { font: 13px/1 var(--din-num); color: var(--text); }
.race__tag.is-you { color: var(--text); font-weight: 600; }
.race__tag .arena__avatar { width: 18px; height: 18px; font-size: 10px; }
.race__tip { position: absolute; top: 4px; z-index: 2; display: flex; flex-direction: column; gap: 5px; min-width: 150px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); pointer-events: none; }
.race__tip[hidden] { display: none; }
.race__tip > b { font-size: 12px; color: var(--text-3); font-weight: 600; }
.race__tiprow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 28px; align-items: center; gap: 7px; font-size: 13px; }
.race__tiprow .arena__avatar { width: 18px; height: 18px; font-size: 10px; }
.race__tiprow b { font: 14px/1 var(--din-num); }
.race__tiprow small { font: 12px/1 var(--din-num); text-align: right; color: var(--text-3); }
.race__tiprow small.is-up { color: var(--signal); }
.race__tiprow small.is-down { color: var(--loss); }
/* The Kurier: a little newspaper, with a masthead between two rules */
.kurier { display: flex; flex-direction: column; gap: 12px; }
.kurier__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-top: 3px double var(--line-2); border-bottom: 3px double var(--line-2); text-align: center; }
.kurier { --serif: "Didot", "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; }
.kurier__name { font: 700 34px/1 var(--serif); letter-spacing: 0.01em; }
.kurier__rule { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.kurier__issue { font: italic 13px/1.2 var(--serif); color: var(--text-2); }
.kurier__story { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.kurier__story h3 { margin-top: 3px; font: 17px/1.15 var(--din); }
.kurier__story p { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.kurier__story.is-lead h3 { font: 700 26px/1.1 var(--serif); }
.kurier__kicker { font: 600 10.5px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.kurier__share { align-self: flex-start; font-size: 13.5px; }
@media (max-width: 960px) { .season { grid-template-columns: 1fr; } }

/* ---------- Fixtures, like a printed matchday programme ---------- */
.schedule { padding: 28px 32px 40px; border-top: 1px solid var(--line); }
.section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.section-head h2 { font-size: 24px; line-height: 1; }
.section-head p { font-size: 13px; color: var(--text-3); }
.fixtures__day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 15px;
  color: var(--text-3);
}
.fixtures__day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* One match per line: time | home | chances or score | away, and under it what
   the match means for your group (.fx__tags). Prices sit inside the club button,
   next to the middle, and only where you can still pick the club */
.fx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); /* the time sits in the middle (.fx__kick) */
  align-items: center;
  gap: 4px 14px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s var(--ease);
}
.fx + .fx { border-top: 1px solid var(--line); }
.fx.is-hot { background: color-mix(in srgb, var(--text) 3%, transparent); }
.fx.is-quiet { opacity: 0.45; }
.fx__time { display: none; font: 16px/1 var(--din-num); color: var(--text-2); font-variant-numeric: tabular-nums; } /* phones only */
.fx__kick { font: 15px/1 var(--din-num); color: var(--text-2); font-variant-numeric: tabular-nums; }
.fx__club {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), transform 0.14s var(--ease);
}
.fx__club:active { transform: scale(0.97); }
.fx__club .triple--boxes { flex: none; width: 78px; margin-left: 12px; }
/* Big screens: both clubs sit next to the middle, so a match reads as one line */
.fx__club--home { justify-self: end; }
.fx__tags { justify-content: center; }
/* the away club mirrored: crest on the outside, prices next to the middle */
.fx__club--away { justify-self: start; flex-direction: row-reverse; text-align: right; }
.fx__club--away .triple--boxes { margin-left: 0; margin-right: 12px; }
.fx__name { display: flex; flex-direction: column; min-width: 0; }
.fx__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.05; }
.fx__name small { font-size: 12px; color: var(--text-3); }
.fx__club.is-picked { border-color: var(--you); background: color-mix(in srgb, var(--you) 7%, transparent); }
.fx__club.is-used .crest { filter: grayscale(1); opacity: 0.5; }
.fx__club.is-used .fx__name b { color: var(--text-3); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .fx__club:not(.is-picked):hover { background: var(--surface); border-color: var(--line); }
}
.fx__mid { display: flex; flex-direction: column; gap: 5px; text-align: center; }
.fx__track { display: flex; gap: 2px; height: 4px; }
.fx__track i { min-width: 3px; }
.fx__track i:nth-child(1) { background: var(--h); }
.fx__track i:nth-child(2) { background: var(--line-2); }
.fx__track i:nth-child(3) { background: var(--a); }
.fx__pcts { display: flex; justify-content: space-between; font: 12px/1 var(--din-num); color: var(--text-3); font-variant-numeric: tabular-nums; }
.fx__score { font: 24px/1 var(--din-num); letter-spacing: 0.04em; }
.fx__minute { font: 12px/1 var(--din-num); color: var(--text-3); }
.fx__minute.is-running { color: var(--signal); }
/* What the match means for your group: a chip per player, with their initial */
.fx__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 8px 2px; }
.fx__tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.fx__tag.is-you { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 45%, transparent); }
.fx__tag b { font: 600 12px/1 var(--din-num); color: var(--text-3); }
.fx__tag b.is-up { color: var(--signal); }
.fx__tag b.is-down { color: var(--loss); }
.fx__tag .arena__avatar { width: 18px; height: 18px; font-size: 10px; }

.fineprint { margin-top: 22px; font-size: 12px; color: var(--text-3); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--you);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1500px) {
  .map-hint { display: none; } /* would collide with the legend; the scroll hint teaches zooming instead */
}
@media (max-width: 1180px) {
  .masthead, .strip, .stage, .arena, .season, .schedule { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 960px) {
  /* One column: the map, then the round's table, then your matchday */
  .stage { grid-template-columns: 1fr; }
  .map-wrap { height: min(74vh, 820px); min-height: 460px; }
  .board { grid-row: 2; width: auto; margin: 0; justify-self: stretch; background: var(--surface); }
  .side { grid-column: 1; grid-row: 3; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr auto; gap: 10px 20px; }
  .round { grid-column: 1 / -1; grid-row: 2; padding-left: 0; border-left: 0; flex-wrap: wrap; }
  .clock__label { display: none; }
}
@media (max-width: 720px) {
  .masthead, .stage, .arena, .season, .schedule { padding-left: 16px; padding-right: 16px; }
  .strip { padding-left: 16px; padding-right: 16px; }
  .masthead { grid-template-columns: 1fr; }
  .round { grid-row: auto; }
  .clock__unit { min-width: 0; flex: 1; }
  .clock__digits { width: 100%; }
  .brand__word { font-size: 28px; }
  .side { grid-template-columns: 1fr; }
  .map-wrap { height: 70vh; min-height: 420px; }
  .map-legend { right: 14px; bottom: 58px; font-size: 12px; }
  .finder__input { font-size: 16px; } /* smaller text makes iPhones zoom into the field */
  .setup__club { grid-template-columns: 34px minmax(0, 1fr); }
  .setup__prices { grid-column: 1 / -1; }
  /* Phones: the two clubs stacked, the chances or score on the right */
  .fx { grid-template-columns: 40px minmax(0, 1fr) 76px; grid-template-areas: "time home mid" "time away mid" "tags tags tags"; gap: 2px 8px; padding: 10px 2px; }
  .fx__time { display: block; grid-area: time; align-self: start; padding-top: 10px; font-size: 14px; }
  .fx__kick { display: none; }
  .fx__club { padding: 4px 6px; }
  .fx__club--home { grid-area: home; justify-self: stretch; }
  .fx__club--away { grid-area: away; justify-self: stretch; flex-direction: row; text-align: left; }
  .fx__club .triple--boxes, .fx__club--away .triple--boxes { margin-left: auto; margin-right: 0; }
  .fx__mid { grid-area: mid; }
  .fx__name b { font-size: 15px; }
  .fx__tags { grid-area: tags; padding: 4px 0 0; justify-content: flex-start; }
}

/* ---------- Reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ======================================================================
   Menu, day card, Erzfeinde, dialogs (added 27 Oct 2026)
   ====================================================================== */

/* The masthead gets the menu button as a first column */
.masthead { grid-template-columns: auto auto 1fr auto; }
.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  margin-right: -26px; /* sits close to the logo despite the masthead's wide gap */
  padding: 0 9px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.menu-btn span { display: block; height: 2px; border-radius: 1px; background: var(--text); }
.menu-btn span:nth-child(2) { width: 65%; } /* a short middle bar, like a flag */
.menu-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover { background: var(--surface); border-color: var(--line); }
}

/* The drawer slides in from the left over a dark veil */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 6, 8, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  background: #111215;
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.26s var(--ease);
}
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.brand--small .brand__word { font-size: 24px; }
.brand--small .brand__mark { width: 20px; height: 23px; }
.drawer__close, .daycard__close, .dialog__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.drawer__body { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 16px 12px 20px; overflow-y: auto; }

.drawer__user { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.drawer__avatar { display: grid; place-items: center; width: 40px; height: 40px; padding-top: 3px; border-radius: 50%; background: var(--p); color: var(--signal-ink); font: 700 21px/1 var(--din); }
.drawer__who { display: flex; flex-direction: column; min-width: 0; }
.drawer__who strong { font-size: 15px; }
.drawer__who span { font-size: 12px; color: var(--text-3); }
.drawer__link { background: none; border: 0; color: var(--text-2); font-size: 12.5px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }

.drawer__section { display: flex; flex-direction: column; gap: 2px; }
.drawer__label { padding: 0 10px 6px; font: 700 12px/1 var(--din); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.drawer__group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; padding: 11px 12px 10px; background: var(--surface); border: 1px solid var(--you); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.drawer__group-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer__group strong { font: 700 20px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.drawer__dots { display: flex; gap: 3px; }
.drawer__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--p); }
.drawer__group-sub { font-size: 12px; color: var(--text-3); }
.drawer__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.drawer__item.is-active { background: var(--surface); color: var(--text); }
.drawer__item.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--you); }
.drawer__meta { margin-left: auto; font: 12px/1 var(--din-num); color: var(--text-3); }
.drawer__item .tag { margin-left: auto; }
.nav-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drawer__foot { margin-top: auto; padding: 0 10px; font-size: 12px; color: var(--text-3); }
.drawer__foot b { font: 400 12.5px/1 var(--din-num); color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .drawer__item:not(.is-active):hover { background: var(--surface); color: var(--text); }
  .drawer__close:hover, .daycard__close:hover, .dialog__close:hover { color: var(--text); border-color: var(--text-3); }
}

/* Small labels: Comeback, Erzfeind, Bald */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px 1px;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--text-3);
  font: 700 11px/1.2 var(--din);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tag--signal { background: var(--signal); color: var(--signal-ink); }
.tag--rival { background: color-mix(in srgb, var(--loss) 18%, transparent); color: var(--loss); }
.duel__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Erzfeinde, under the round's table */
.rivals { margin-top: 4px; padding: 8px 0 4px; border-top: 1px solid var(--line); }
.rivals[hidden] { display: none; }
.rivals__label { display: block; margin-bottom: 4px; font: 700 12px/1 var(--din); text-transform: uppercase; letter-spacing: 0.05em; color: var(--loss); }
.rivals__row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; color: var(--text-2); }
.rivals__row.is-mine { color: var(--text); }
.rivals__name { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rivals__name::before { content: ""; width: 3px; height: 12px; border-radius: 1px; background: var(--p); }
.rivals__vs { font-size: 12.5px; color: var(--loss); }
.rivals__score { margin-left: auto; font: 15px/1 var(--din-num); }

/* Played slots open their Bilanz */
.slot--played { cursor: pointer; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); }
.slot--played:active { transform: scale(0.96); }
/* The keys next to "Gespielt" and "Noch frei": what the marks and the three numbers mean */
.strip__key { display: inline-flex; align-items: center; gap: 12px; margin-left: 12px; font: 500 12px/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--text-2); vertical-align: 1px; }
.strip__key > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.strip__key small { font-size: 11.5px; color: var(--text-3); }
.strip__key--prices { gap: 3px; color: var(--text-3); }
.strip__key--prices i { padding: 2px 5px; border-radius: 4px; background: var(--surface-2); font-style: normal; color: var(--text-2); }
/* The explanations only where the group has room for them (measured on the group itself) */
.strip__group { container-type: inline-size; }
@container (max-width: 450px) { .strip__key small { display: none; } } /* the words alone when it gets narrow */
@container (max-width: 400px) { .strip__key--prices { display: none; } }
/* A mark in a played slot: a burst (Klatsche) or a target (Volltreffer), in the signal colour */
.slot__mark { display: inline-grid; place-items: center; width: 13px; height: 13px; color: var(--signal); }
.slot__mark svg { width: 100%; height: 100%; display: block; }
@media (hover: hover) and (pointer: fine) {
  .slot--played:hover { background: var(--surface); border-color: var(--line); }
}

/* A week's Bilanz */
.daycard {
  position: absolute;
  z-index: 60;
  width: 310px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.daycard[hidden] { display: none; }
.daycard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.daycard__head > div { display: flex; flex-direction: column; min-width: 0; }
.daycard__head strong { font: 700 18px/1 var(--din); text-transform: uppercase; }
.daycard__head span { font-size: 12.5px; color: var(--text-2); }
.daycard__close { width: 26px; height: 26px; margin-left: auto; align-self: flex-start; font-size: 16px; }
.daycard__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; margin: 0; font-size: 13px; }
.daycard__rows dt { color: var(--text-2); }
.daycard__rows dd { margin: 0; text-align: right; font: 14px/1.3 var(--din-num); white-space: nowrap; }
.daycard__rows .is-up { color: var(--signal); }
.daycard__rows .is-down { color: var(--loss); }
.daycard__rows .is-faint { color: var(--text-3); }
.daycard__rows .is-sum { font-size: 17px; }
.daycard__note { margin-top: 8px; padding: 6px 8px; background: var(--bg); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2); }

/* Rules and FAQ */
.dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
}
.dialog::backdrop { background: rgba(5, 6, 8, 0.65); }
.dialog__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dialog__head h2 { font-size: 24px; }
.dialog__body { padding: 4px 20px 22px; font-size: 14px; color: var(--text-2); }
.dialog__body h3 { margin: 18px 0 6px; font: 700 17px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.dialog__body ol, .dialog__body ul { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; list-style: revert; }
.dialog__body b { color: var(--text); }
.dialog__body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dialog__body th, .dialog__body td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.dialog__body th { color: var(--text-3); font-weight: 600; }
.dialog__body td { font-family: var(--din-num); color: var(--text); }
.dialog__body th:first-child, .dialog__body td:first-child { text-align: left; font-family: var(--ui); color: var(--text-2); }

/* The masthead with the menu button, on smaller screens */
@media (max-width: 900px) {
  .masthead { grid-template-columns: auto auto 1fr; column-gap: 10px; }
  .menu-btn { margin-right: 0; }
  .clock { grid-column: 3; justify-self: end; }
  .round { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .masthead { grid-template-columns: auto 1fr; }
  .clock { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
  .round { grid-row: 2; }
  .daycard { width: min(310px, calc(100vw - 24px)); }
}

/* ======================================================================
   "Gespielt" as crest + face, and the Bonusfragen (27 Oct 2026)
   ====================================================================== */

/* A played week: a coloured bar on top says won / drawn / lost */
.slot--played { gap: 4px; padding-top: 8px; }
.slot--played::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 0 0 2px 2px;
  background: var(--line-2);
}
.slot--played.is-S::before { background: var(--signal); }
.slot--played.is-N::before { background: var(--loss); }

/* The club's crest with your Torjäger's face in front, his goals on top */
.duo { position: relative; display: inline-block; width: 40px; height: 30px; }
.duo .crest { position: absolute; left: 2px; top: 0; }
.duo__face { position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--bg); }
.duo__goals {
  position: absolute;
  right: -4px;
  top: 2px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--bg);
  color: var(--text-3);
  font: 11.5px/14px var(--din-num);
  text-align: center;
}
.duo__goals.has-goals { background: var(--signal); color: var(--signal-ink); }
.slot--played .slot__fields { font-size: 14px; }

/* The Bonusfragen, under the Torjäger */
.quiz { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.quiz__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.quiz__title { font: 700 14px/1 var(--din); text-transform: uppercase; letter-spacing: 0.03em; }
.quiz__rule { font: 12.5px/1 var(--din-num); color: var(--text-3); }
.quiz__item { padding: 7px 0; }
.quiz__item + .quiz__item { border-top: 1px dashed var(--line); }
.quiz__q { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }
.quiz__item.is-answered .quiz__q { color: var(--text); }
.quiz__opts { display: flex; gap: 4px; }
.quiz__opt {
  flex: 1;
  min-width: 0;
  padding: 6px 6px 5px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font: 700 14px/1.1 var(--din);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease), transform 0.14s var(--ease);
}
.quiz__opt:active { transform: scale(0.97); }
.quiz__opt.is-picked { border-color: var(--you); background: color-mix(in srgb, var(--you) 12%, var(--surface-2)); color: var(--text); box-shadow: inset 0 0 0 1px var(--you); }
.quiz__note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .quiz__opt:not(.is-picked):hover { border-color: var(--line-2); color: var(--text); }
}

/* ======================================================================
   Lineup as an accordion, five Bonusfragen, Volltreffer (27 Oct 2026)
   ====================================================================== */

/* A folded step: one clickable line with its summary */
.step:not(.is-open) { padding-top: 8px; padding-bottom: 8px; align-items: center; }
.step:not(.is-open) .step__num { font-size: 22px; padding-top: 3px; }
.step:not(.is-open) .step__num::after { display: none; }
.step:not(.is-done):not(.is-open) { opacity: 0.75; }
.step__top { width: 100%; }
button.step__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.step:not(.is-open) .step__top { margin-bottom: 0; }
.step__summary { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.step__edit { flex: none; margin-left: auto; font-size: 12px; color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .step:not(.is-open):hover { border-color: var(--line-2); }
  button.step__top:hover .step__edit { color: var(--text); }
}

/* The questions: a number, the question, the answers in one row */
.quiz { margin-top: 0; padding-top: 0; border-top: 0; }
.quiz__item { padding: 8px 0; }
.quiz__q { display: flex; gap: 8px; align-items: baseline; }
.quiz__q b { flex: none; font: 12px/1 var(--din-num); color: var(--text-3); }
.quiz__item.is-answered .quiz__q b { color: var(--you); }
.quiz__note { padding-left: 16px; }

/* The Volltreffer box */
.hit { margin-top: 10px; padding: 10px 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.hit__head { display: flex; align-items: baseline; justify-content: space-between; }
.hit__title { font: 700 15px/1 var(--din); text-transform: uppercase; letter-spacing: 0.03em; color: var(--you); }
.hit__opt { font-size: 12.5px; color: var(--text-3); }
.hit__text { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.hit__rewards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 0 10px; }
.hit__rewards li { display: flex; flex-direction: column; gap: 2px; padding: 6px 7px; background: var(--surface-2); border-radius: var(--radius-sm); }
.hit__rewards b { font: 700 13px/1.1 var(--din); text-transform: uppercase; color: var(--text); }
.hit__rewards span { font-size: 12px; line-height: 1.25; color: var(--text-3); }
.hit__row { display: flex; align-items: center; gap: 6px; }
.hit__select {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 13px/1.2 var(--ui);
}
.hit__colon { font: 18px/1 var(--din-num); color: var(--text-3); }
.num { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.num button { width: 24px; height: 30px; background: var(--surface-2); border: 0; color: var(--text-2); font-size: 15px; cursor: pointer; }
.num b { min-width: 22px; font: 18px/30px var(--din-num); text-align: center; color: var(--you); }
@media (hover: hover) and (pointer: fine) {
  .num button:hover { color: var(--text); background: #24272c; }
}

/* The Comeback joker */
.comeback { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--you) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--you) 50%, transparent); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2); }
.player.is-comeback .player__sub { color: var(--you); }

@media (max-width: 720px) {
  .hit__select { font-size: 16px; } /* smaller text makes iPhones zoom in */
  .hit__rewards { grid-template-columns: 1fr; }
}

/* Long notes in player rows end in "…"; the list never scrolls sideways */
.player__sub { min-width: 0; }
.player__subtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder__list { overflow-x: hidden; }

/* ======================================================================
   Spezialkarten and player profiles (27 Oct 2026)
   ====================================================================== */

/* The round's rows are buttons now: each opens that player's profile */
.board__row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; text-align: left; cursor: pointer; grid-template-columns: 12px 18px minmax(0, 1fr) auto 16px 24px; }
.board__list li:first-child .board__row { border-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .board__row:hover .board__name { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
}

/* A card in hand: a tiny upright card with its symbol */
.board__cards { display: flex; gap: 3px; }
.card-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 13px;
  height: 17px;
  border-radius: 2px;
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: rotate(-6deg);
}
.card-chip svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card-chip--big { width: 34px; height: 46px; border-radius: 4px; transform: rotate(-5deg); }
.card-chip--big svg { width: 20px; height: 20px; stroke-width: 2; }

/* The profile */
.dialog--profile .dialog__head { border-top: 3px solid var(--p); }
.profile__head { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.profile__who { display: flex; flex-direction: column; gap: 3px; }
.profile__who strong { font: 700 20px/1 var(--din); text-transform: uppercase; color: var(--text); }
.profile__cap { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.profile__vs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 10px; background: var(--bg); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); }
.profile__card { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.profile__card + .profile__card { margin-top: 6px; }
.profile__card div { display: flex; flex-direction: column; gap: 2px; }
.profile__card b { font: 700 16px/1 var(--din); text-transform: uppercase; }
.profile__card span { font-size: 12.5px; color: var(--text-2); }
.profile__empty, .profile__note { font-size: 13px; color: var(--text-3); }
.profile__note { margin-top: 8px; }
.profile__clubs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 0; list-style: none; }
.profile__clubs li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; background: var(--bg); border-radius: var(--radius-sm); }
.profile__clubs li span { font: 12px/1 var(--din-num); color: var(--you); }
.profile__clubs li.is-used .crest { filter: grayscale(1); opacity: 0.5; }
.profile__clubs li.is-used span { color: var(--text-3); }
.profile__clubs li.is-used::before { content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 2px; margin-left: -8px; background: var(--line-2); }
.profile__clubs li.is-S::before { background: var(--signal); }
.profile__clubs li.is-N::before { background: var(--loss); }
.profile__scorers { display: flex; flex-direction: column; padding: 0; list-style: none; }
.profile__scorers li { display: grid; grid-template-columns: 36px 22px minmax(0, 1fr) 14px 34px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.profile__scorers li:first-child { border-top: 0; }
.profile__day { font: 12.5px/1 var(--din-num); color: var(--text-3); }
.profile__pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.profile__goals { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font: 14px/1 var(--din-num); color: var(--text-3); }
.profile__goals .ball-icon { width: 11px; height: 11px; }
.profile__goals.has-goals { color: var(--signal); }
@media (max-width: 720px) {
  .profile__clubs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* The dialog's own list style (bullets, column) must not reach these two lists */
.dialog__body .profile__clubs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 0; list-style: none; }
.dialog__body .profile__scorers { display: flex; flex-direction: column; gap: 0; padding: 0; list-style: none; }
@media (max-width: 720px) {
  .dialog__body .profile__clubs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Both halves of the strip share one height, so their bottom edges line up */
.slot { min-height: 82px; justify-content: center; }
/* Price boxes: one fixed width, so columns line up whatever the label */
.triple--labelled .triple__cell { width: 46px; min-width: 0; }
.step__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Step heads: the label never wraps; a long hint ends in "…" instead */
.step__label { white-space: nowrap; }
.step__hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Duel tags may wrap onto a second line, but never past the box */
.duel__text { overflow: hidden; }
.duel__tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Duel options: the crest sits in the corner, the text (and its tags) get the full width */
.duel__option { position: relative; grid-template-columns: 3px minmax(0, 1fr); align-items: start; }
.duel__option > .crest { position: absolute; top: 9px; right: 9px; }
.duel__text b { padding-right: 22px; }
.duel__swatch { align-self: stretch; height: auto; min-height: 26px; }

/* ======================================================================
   Flag round with Beute and Neutralisieren (rules NB, 27 Oct 2026)
   ====================================================================== */
.flags__src { margin: -2px 0 10px; font: 12px/1.3 var(--din-num); color: var(--text-3); }
.ways { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.way {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.way__ring { width: 14px; height: 15px; clip-path: var(--hex); background: var(--line-2); position: relative; }
.way__ring::after { content: ""; position: absolute; inset: 2px; clip-path: var(--hex); background: var(--bg); }
.way--claim .way__ring, .way--loot .way__ring { background: var(--you); }
.way--hit .way__ring { background: var(--loss); }
.way--hit .way__ring::after { inset: 4px; }
.way__title { color: var(--text); }
.way__cost { font: 12.5px/1 var(--din-num); color: var(--text-2); white-space: nowrap; }
.way__note { grid-column: 2 / -1; font-size: 12.5px; color: var(--text-3); }
.tip__cta--hit { color: var(--loss); }

/* Turn order in the flag round (lost in the map-centred rebuild, restored) */
.turns-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.turns-wrap__label { font-size: 12px; color: var(--text-3); }
.turns { display: flex; flex-wrap: wrap; gap: 4px; counter-reset: turn; }
.turns li {
  counter-increment: turn;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-2);
}
.turns li::before {
  content: counter(turn);
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background: var(--p);
  color: var(--signal-ink);
  font: 700 11px/1 var(--din-num);
}
.turns li.is-you { color: var(--text); font-weight: 600; }
.flags__text { white-space: nowrap; }

/* The live flag round of an online round: whose turn it is, with the clock,
   and everyone in turn order with what they still have (29 Oct 2026) */
.live-turn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--p, var(--line-2));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font: 600 14px/1.3 var(--din-num);
}
.live-turn.is-mine { border-color: var(--you); border-left-color: var(--you); box-shadow: 0 0 0 1px var(--you) inset; }
.live-turn.is-mine strong { color: var(--you); }
.turns--live { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin-top: 10px; }
.turns--live li { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto auto; gap: 8px; padding: 5px 8px 5px 5px; }
.turns--live li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.turns--live li small { font: 12px/1 var(--din-num); color: var(--text-3); }
.turns--live li.is-turn { outline: 1px solid var(--p); background: color-mix(in srgb, var(--p) 14%, var(--surface-2)); }

/* ======================================================================
   The week in phases, folded cards, phones with tabs (27 Oct 2026)
   ====================================================================== */

/* The four phases of the week, in the masthead. The current one is lit;
   clicking another previews it (the prototype has no real clock yet). */
@media (min-width: 901px) { .masthead { grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: 28px; } }
.phases { display: flex; align-items: center; gap: 4px; justify-self: center; }
.phase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 96px;
  padding: 7px 10px 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.phase__label { font: 700 15px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2); }
.phase__when { font: 12px/1 var(--din-num); color: var(--text-3); }
.phase.is-now .phase__when { color: var(--you); }
.phase.is-on { border-color: var(--you); background: var(--surface-2); }
.phase.is-on .phase__label { color: var(--text); }
.round, .round__day, .round__dates { white-space: nowrap; }
.phase-back { white-space: nowrap; margin-left: 6px; padding: 0; background: none; border: 0; color: var(--text-3); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .phase:not(.is-on):hover { border-color: var(--line-2); }
}

/* A card that isn't due right now: one line and a button */
.panel.is-compact { padding-top: 12px; padding-bottom: 12px; }
.compact { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compact__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compact__text h2 { font-size: 18px; line-height: 1; }
.compact__text span { font-size: 13px; color: var(--text-3); }
.btn--quiet { padding: 7px 11px 5px; font-size: 14px; }

/* Step 1: the free clubs as a list */
.picker { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 300px; overflow-y: auto; }
.picker__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}
.picker__row.is-picked { border-color: var(--you); background: var(--surface-2); }
.picker__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker__who b { font: 700 15px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.picker__who small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  .picker__row:not(.is-picked):hover { background: var(--surface-2); }
}

/* "Kein Duell" is a Festung: a tower (FORT_ICON in js/app.js) in a round avatar like the friends' */
.duel__option--fort .duel__swatch, .ticket__duel.is-fort { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text); }
.duel__option--fort .duel__swatch svg { width: 21px; height: 21px; }
.ticket__duel.is-fort svg { width: 19px; height: 19px; }

/* The flag round on top of the map */
.mapbar {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  transform: translateX(-50%);
  background: rgba(20, 21, 24, 0.94);
  border: 1px solid var(--you);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  white-space: nowrap;
}
.mapbar[hidden] { display: none; }
.mapbar__flags { display: flex; gap: 2px; }
.mapbar__text { overflow: hidden; text-overflow: ellipsis; }

/* Aufgedeckt: everyone's lineup */
.lineups { display: flex; flex-direction: column; margin: 8px 0 10px; }
.lineup { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.lineup .board__swatch { margin-top: 1px; }
.lineup__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lineup__body b { font-size: 14.5px; }
.lineup__line { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.lineup__scorer { color: var(--text-3); }
.lineup__duel { font-size: 12.5px; color: var(--text-3); }
.lineup__duel.is-against-you { color: var(--loss); font-weight: 600; }
.lineup.is-you b { color: var(--you); }

/* Live: what each part of your week is worth right now */
.live { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 8px 0 10px; }
.live dt, .live dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.live dt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.live dt small { font-size: 12.5px; color: var(--text-3); }
.live dd { display: flex; align-items: center; justify-content: flex-end; font: 700 18px/1 var(--din-num); text-align: right; } /* stretches like its dt, so both lines meet */
.live dd.is-up { color: var(--you); }
.live dd.is-down { color: var(--loss); }
.live dd.is-faint { color: var(--text-3); }
.live dd.is-sum, .live dt:nth-last-of-type(1) { border-top: 2px solid var(--line-2); }
.ticker { display: flex; flex-direction: column; margin-top: 10px; font-size: 13px; }
.ticker__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); color: var(--text-3); }
.ticker__row.is-watched { color: var(--text); }
.ticker__min { font: 12px/1 var(--din-num); }
.ticker__team:first-of-type { text-align: right; }
.ticker__score { font: 700 15px/1 var(--din-num); text-align: center; }
.ticker__team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs: only on phones */
.tabbar { display: none; }
@media (max-width: 1180px) {
  .phase { min-width: 0; }
  .phase__when { display: none; }
}
@media (max-width: 900px) {
  .phases { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
  .phase { flex: 1; align-items: center; }
  .phase-back { display: none; }
}
@media (max-width: 720px) {
  body { padding-bottom: 68px; }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(12, 13, 15, 0.97);
    border-top: 1px solid var(--line-2);
  }
  .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; background: none; border: 0; color: var(--text-3); font-size: 12px; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar button[aria-current="page"] { color: var(--you); }
  .toast { bottom: 84px; }
  /* Each tab shows its part of the page */
  body[data-tab="karte"] .strip, body[data-tab="karte"] .side, body[data-tab="karte"] .board, body[data-tab="karte"] .schedule, body[data-tab="karte"] .arena, body[data-tab="karte"] .season,
  body[data-tab="spieltag"] .map-wrap, body[data-tab="spieltag"] .board, body[data-tab="spieltag"] .schedule, body[data-tab="spieltag"] .arena, body[data-tab="spieltag"] .season,
  body[data-tab="runde"] .strip, body[data-tab="runde"] .map-wrap, body[data-tab="runde"] .side, body[data-tab="runde"] .schedule,
  body[data-tab="plan"] .strip, body[data-tab="plan"] .map-wrap, body[data-tab="plan"] .side, body[data-tab="plan"] .board, body[data-tab="plan"] .arena, body[data-tab="plan"] .season { display: none; }
  body[data-tab="karte"] .map-wrap { height: calc(100dvh - 285px); min-height: 380px; }
  body[data-tab="plan"] .stage { display: none; } /* nothing of it shows in this tab, so no empty gap */
  body[data-tab="runde"] .board { grid-row: 1; }
  body[data-tab="spieltag"] .side, body[data-tab="runde"] .board { grid-row: 1; }
  .phases { grid-row: 4; }
  .map-legend { left: 10px; bottom: 10px; max-width: calc(100% - 150px); gap: 2px 8px; padding: 5px 8px; font-size: 11.5px; }
  .map-legend .is-target { display: none; } /* the flag bar on the map explains the rings */
  .map-tools { flex-direction: column; align-items: stretch; gap: 6px; right: 10px; bottom: 10px; } /* stacked, so they don't cover the legend */
  .phase { padding: 6px 6px 5px; }
  .phase__label { font-size: 13.5px; }
  .mapbar { top: 10px; padding: 7px 10px; font-size: 12.5px; }
  .mapbar__text { max-width: 150px; }
}

/* ---------- Rückblick: last week, card by card ---------- */
.recap-btn {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
  padding: 9px 12px 8px;
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 700 15px/1 var(--din);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
.recap-btn::before { content: "▶ "; color: var(--you); }
.dialog--recap { width: min(460px, calc(100vw - 24px)); }
.recap { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.recap__step { font: 12.5px/1 var(--din-num); color: var(--text-3); }
.recap h3 { margin: 0; }
.recap__big { font: 700 44px/1 var(--din-num); color: var(--text); }
.recap__big.is-up { color: var(--you); }
.recap__big.is-down { color: var(--loss); }
.recap__text { font-size: 15px; line-height: 1.5; color: var(--text-2); min-height: 4.5em; }
.recap__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.recap__nav .btn:disabled { opacity: 0.35; cursor: default; }
.recap__dots { display: flex; gap: 6px; }
.recap__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.recap__dots i.on { background: var(--you); }
.btn--primary { background: var(--you); border-color: var(--you); color: var(--signal-ink); }

/* ---------- Zeitraffer: the matchday on top of the map while it plays ---------- */
.map-replay {
  position: absolute;
  top: 64px; /* under the flag bar, above Germany's middle */
  left: 50%;
  z-index: 5;
  padding: 10px 18px 8px;
  transform: translateX(-50%);
  background: rgba(12, 13, 15, 0.82);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font: 700 30px/1 var(--din);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.map-replay[hidden] { display: none; }
#replayBtn:disabled { opacity: 0.5; cursor: default; }

/* ======================================================================
   Deine Aufstellung, redone (27 Oct 2026): question cards, the Volltreffer
   scoreboard, the lineup ticket
   ====================================================================== */

/* The panel: a faint glow of your colour along the top edge */
.panel.setup { background: linear-gradient(180deg, color-mix(in srgb, var(--you) 7%, var(--surface)) 0, var(--surface) 90px); }
/* Step numbers as round badges: grey, your colour when next, filled when done */
.step__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  font: 700 17px/1 var(--din);
}
.step.is-next .step__num { border-color: var(--you); color: var(--you); }
.step.is-done .step__num { border-color: var(--you); background: var(--you); color: var(--signal-ink); }
.step.is-done .step__num::after { display: none; }
.step:not(.is-open) .step__num { width: 24px; height: 24px; font-size: 14px; padding: 0; }

/* ----- Bonusfragen ----- */
.bq { display: flex; flex-direction: column; gap: 10px; }
.bq__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.bq__dots { display: flex; gap: 4px; }
.bq__dots i { width: 10px; height: 11px; clip-path: var(--hex); background: var(--line-2); transition: background 0.2s var(--ease); }
.bq__dots i.on { background: var(--you); }
.bq__count { font: 13px/1 var(--din-num); color: var(--text-2); white-space: nowrap; }
.bq__ladder { display: flex; gap: 3px; margin-left: auto; }
.bq__rung { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; padding: 4px 6px 3px; border-radius: 3px; background: var(--bg); font: 12px/1 var(--din-num); color: var(--text-3); }
.bq__rung b { color: var(--text-2); }
.bq__rung b::after { content: " ✓"; font-size: 10px; }
.bq__rung small { color: var(--you); font: inherit; }

.bq__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 0.2s var(--ease);
}
.bq__card.is-answered { border-color: color-mix(in srgb, var(--you) 45%, var(--line)); }
.bq__head { display: flex; gap: 10px; align-items: flex-start; }
.bq__kind {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--surface-2);
}
.bq__kind--event { background: color-mix(in srgb, #ffb547 18%, var(--surface-2)); }
.bq__kind--count { background: color-mix(in srgb, #4fb3ff 16%, var(--surface-2)); }
.bq__kind--match { background: #f4f2ec; }
.bq__sym { font: 700 18px/1 var(--din); color: var(--text); }
.bq__kind--event .bq__sym { color: #ffb547; }
.bq__kind--count .bq__sym { color: #4fb3ff; }
.bq__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bq__meta { font: 600 11.5px/1 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.bq__q { font-size: 14.5px; line-height: 1.35; color: var(--text); font-weight: 600; }
.bq__opts { display: flex; gap: 6px; }
.bq__opt {
  flex: 1;
  min-width: 0;
  padding: 10px 8px 8px;
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font: 700 15px/1 var(--din);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.12s var(--ease);
}
.bq__opt:active { transform: scale(0.97); }
.bq__opt.is-picked { border-color: var(--you); background: var(--you); color: var(--signal-ink); }
.bq__opt.is-picked::before { content: "✓ "; }
@media (hover: hover) and (pointer: fine) {
  .bq__opt:not(.is-picked):hover { border-color: var(--text-3); color: var(--text); }
}
.bq__foot { display: flex; align-items: center; gap: 8px; }
.bq__history { display: flex; gap: 3px; }
.bq__history i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.bq__history i.on { background: #ffb547; }
.bq__note { font-size: 12.5px; color: var(--text-3); }

/* ----- Volltreffer: a stadium scoreboard ----- */
.vt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--you) 35%, var(--line));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--you) 12%, transparent), transparent 70%),
    #0e0f12;
  overflow: hidden;
}
.vt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vt__title { display: flex; flex-direction: column; gap: 4px; }
.vt__title b { font: 700 22px/1 var(--din); text-transform: uppercase; letter-spacing: 0.03em; color: var(--you); }
.vt__title span { font-size: 13px; color: var(--text-2); }
.vt__odds { flex: none; padding: 5px 8px 4px; border-radius: 999px; background: var(--surface-2); font: 12px/1 var(--din-num); color: var(--text-2); white-space: nowrap; }
.vt__matches { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.vt__matches::-webkit-scrollbar { display: none; }
.vt__match {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 6px 8px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.vt__match small { margin-left: 4px; font: 11.5px/1 var(--din-num); color: var(--text-3); }
.vt__vs { font: 700 12px/1 var(--din); color: var(--text-3); }
.vt__match.is-picked { border-color: var(--you); background: color-mix(in srgb, var(--you) 16%, var(--surface)); }
.vt__match.is-picked small { color: var(--you); }
@media (hover: hover) and (pointer: fine) {
  .vt__match:not(.is-picked):hover { border-color: var(--text-3); }
}
.vt__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 8px;
  background: #060708;
  box-shadow: inset 0 0 0 1px #1e2126, inset 0 10px 30px rgba(0, 0, 0, 0.6);
}
.vt__side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.vt__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2); }
.vt__digit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vt__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(180deg, #17191d 0 49%, #0b0c0f 51% 100%); /* a split-flap digit */
  box-shadow: inset 0 0 0 1px #262a30;
  font: 700 36px/1 var(--din-num);
  color: var(--you);
  text-shadow: 0 0 14px color-mix(in srgb, var(--you) 60%, transparent);
}
.vt__colon { font: 700 30px/1 var(--din-num); color: var(--text-3); }
.vt__arrow {
  width: 40px;
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .vt__arrow:hover { background: var(--surface-2); color: var(--you); }
}
.vt__empty { padding: 14px 10px; border-radius: 8px; background: #060708; text-align: center; font-size: 13px; color: var(--text-3); }
.vt__label { font: 600 11.5px/1 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.vt__rewards { display: flex; flex-direction: column; gap: 6px; }
.vt__reward {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.vt__reward b { font: 700 15px/1.05 var(--din); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.vt__reward span:not(.vt__icon) { grid-column: 2; font-size: 12.5px; line-height: 1.3; color: var(--text-3); }
.vt__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--you) 14%, var(--surface-2)); color: var(--you); }
.vt__icon svg { width: 17px; height: 17px; }

/* ----- The lineup ticket, when all four are set ----- */
.ticket {
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--you) 45%, var(--line));
  background: color-mix(in srgb, var(--you) 6%, var(--bg));
  overflow: hidden;
}
.ticket__head { display: block; padding: 8px 12px 7px; background: var(--you); color: var(--signal-ink); font: 700 14px/1 var(--din); text-transform: uppercase; letter-spacing: 0.03em; }
.ticket__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket__box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px dashed var(--line-2); min-width: 0; }
.ticket__box:nth-child(even) { border-left: 1px dashed var(--line-2); }
.ticket__box:nth-child(-n + 2) { border-top: 0; }
.ticket__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket__txt small { font: 600 10.5px/1 var(--ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.ticket__txt b { font: 700 16px/1.05 var(--din); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__txt span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__hex { display: grid; place-items: center; flex: none; width: 26px; height: 30px; clip-path: var(--hex); background: var(--you); color: var(--signal-ink); font: 700 11px/1 var(--din-num); }
.ticket__duel { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--p); color: #0c0d0f; font: 700 14px/1 var(--din); }

/* ---------- Deine Aufstellung, second pass (27 Oct 2026) ---------- */
/* Room to breathe: one column for the side cards on mid-size screens */
@media (max-width: 960px) {
  .side { grid-template-columns: 1fr; }
}
/* Folded steps: a small label on top, what you chose below, "ändern" as a button */
.step:not(.is-open) .step__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label edit" "sum edit";
  row-gap: 5px;
  column-gap: 10px;
  align-items: center;
}
.step:not(.is-open) .step__label { grid-area: label; font-size: 12px; letter-spacing: 0.05em; color: var(--text-3); }
.step:not(.is-open) .step__summary { grid-area: sum; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.step:not(.is-open) .step__summary .crest, .step:not(.is-open) .step__summary .face { width: 22px !important; height: 22px !important; }
.step:not(.is-open) .step__edit {
  grid-area: edit;
  padding: 6px 11px 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12.5px;
  text-decoration: none;
}
.step.is-done:not(.is-open) { background: color-mix(in srgb, var(--you) 4%, var(--surface)); }
@media (hover: hover) and (pointer: fine) {
  .step:not(.is-open) .step__top:hover .step__edit { border-color: var(--you); color: var(--you); }
}
/* An open step: its head line folds it away, with "Einklappen ▲" on the right */
.step.is-open button.step__top { flex-wrap: wrap; align-items: baseline; row-gap: 2px; margin-bottom: 8px; }
.step.is-open .step__hint { order: 3; flex-basis: 100%; margin-left: 0; text-align: left; white-space: normal; } /* its own line, never cut */
.step__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--text-2);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.step__close::after { content: ""; width: 8px; height: 8px; margin-top: 4px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); } /* an arrow up: fold away */
.step__hint + .step__close { margin-left: auto; }
/* "Fertig" at the end of the open step */
.step__done {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: 600 14px/1 var(--ui);
  cursor: pointer;
}
.step.is-done .step__done { border-color: var(--you); background: var(--you); color: var(--signal-ink); }
@media (hover: hover) and (pointer: fine) {
  .step.is-open .step__top:hover .step__close { border-color: var(--you); color: var(--you); }
  .step__done:hover { border-color: var(--you); }
}

/* Step 1: your match as a card */
.matchcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border-radius: var(--radius);
  background: radial-gradient(90% 120% at 50% 0%, #1d2026, #0e0f12);
  border: 1px solid var(--line);
}
.matchcard__side { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 4px; border-radius: 8px; opacity: 0.7; }
.matchcard__side b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.matchcard__side small { font-size: 11.5px; color: var(--text-3); }
.matchcard__side.is-mine { opacity: 1; background: color-mix(in srgb, var(--you) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--you); }
.matchcard__side.is-mine small { color: var(--you); font-weight: 600; }
.matchcard__mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.matchcard__mid b { font: 700 22px/1 var(--din-num); }
.matchcard__day { font: 600 11.5px/1 var(--ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.matchcard__vs { font-size: 11.5px; color: var(--text-3); }
.matchcard__bar { display: flex; gap: 2px; height: 20px; margin: 8px 0 10px; border-radius: 5px; overflow: hidden; }
.matchcard__seg { display: grid; place-items: center; min-width: 34px; background: var(--surface-2); color: var(--text-3); font: 11.5px/1 var(--din-num); }
.matchcard__seg--d { background: #22252b; }
.matchcard__seg.is-mine { background: color-mix(in srgb, var(--you) 75%, #000); color: var(--signal-ink); font-weight: 700; }
.step__body > .triple--labelled { margin-top: 0; }

/* Step 4: friends as round avatars in their colour */
.duel__option { grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border-radius: 8px; }
.duel__swatch {
  display: grid;
  place-items: center;
  align-self: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  border-radius: 50%;
  background: var(--p);
  color: #0c0d0f;
  font: 700 15px/1 var(--din);
}
.duel__option.is-picked { box-shadow: inset 0 0 0 1.5px var(--p), 0 0 18px color-mix(in srgb, var(--p) 25%, transparent); }
.duel__option > .crest { top: 8px; right: 8px; }
/* What your result pays: three equal boxes across the step */
.step__body > .triple--labelled { display: flex; gap: 6px; }
.step__body > .triple--labelled .triple__cell { flex: 1; }
/* Step 1 list: the match as two crests, the club it counts for lit, the prices on the right */
.picker { gap: 4px; }
.picker__row { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 7px 10px; border-color: var(--line); background: var(--bg); border-radius: 8px; }
.picker__row .triple { justify-self: end; }
.picker__pair { display: flex; align-items: center; gap: 6px; }
.picker__colon { font: 700 13px/1 var(--din); color: var(--text-3); }
.picker__crest { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; opacity: 0.35; filter: grayscale(0.7); transition: opacity 0.15s var(--ease), filter 0.15s var(--ease); }
.picker__crest.is-mine { opacity: 1; filter: none; background: #f4f2ec; box-shadow: 0 0 0 2px var(--you); }
.picker__row.is-picked { background: color-mix(in srgb, var(--you) 10%, var(--bg)); }
@media (hover: hover) and (pointer: fine) {
  .picker__row:not(.is-picked):hover .picker__crest.is-mine { box-shadow: 0 0 0 2px var(--you), 0 0 14px color-mix(in srgb, var(--you) 40%, transparent); }
}
/* Bonusfragen: a drawn symbol per question, in the colour of its kind */
.bq__kind { min-width: 38px; height: 38px; border-radius: 10px; }
.bq__kind svg { width: 22px; height: 22px; }
.bq__kind--count { color: #4fb3ff; }
.bq__kind--event { color: #ffb547; }
/* Volltreffer: the two special cards of the week get a frame in your colour */
.vt__reward.is-card { border-color: color-mix(in srgb, var(--you) 30%, var(--line)); }
.picker__row .triple { gap: 4px; }
.picker__row .triple__cell { min-width: 34px; padding: 6px 4px 5px; border-radius: 6px; background: var(--surface-2); font-size: 16px; text-align: center; }
/* The jackpot price fills its whole box (not a small chip inside it) */
.picker__row .triple__cell.p-max { background: var(--signal); }
.picker__row .triple__cell.p-max b { padding: 0; background: none; color: var(--signal-ink); }
.picker__row .triple__cell b { display: block; text-align: center; }
/* Both crests sit in a coin: the club it counts for light, the opponent dark */
.picker__crest { background: #2a2d33; }
.picker__crest.is-mine { background: #f4f2ec; }

/* Volltreffer: every match visible at once (they wrap instead of scrolling sideways) */
.vt__matches { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* … and the tip only counts once it is confirmed */
.vt__confirm { justify-content: center; width: 100%; padding: 12px 14px 10px; font-size: 16px; border-radius: 8px; }
.vt__done { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 10px; border-radius: 8px; background: color-mix(in srgb, var(--you) 14%, var(--surface)); border: 1px solid var(--you); color: var(--you); font: 700 15px/1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.vt__done .link { color: var(--text-2); font: 500 12.5px/1 var(--ui); text-transform: none; letter-spacing: 0; }

/* Umlauts: single-line names that cut off with "…" (overflow hidden) and sit on a
   tight line height lost the dots of Ä Ö Ü ("KOLN", "FULLKRUG"). A little room on
   top, taken back with a negative margin, so nothing moves */
.vs__side b, .fx__name b, .vt__name, .ticket__txt b, .matchcard__side b, .duel__text b, .step__text, .board__name, .lineup b, .phase__label {
  padding-top: 0.16em;
  margin-top: -0.16em;
}

/* Konfetti (js/app.js confetti): over everything, never in the way of a click */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 100; pointer-events: none; }

/* Laptops and tablets on their side: brand, round and clock don't fit next to the
   four phases (the clock stuck out of the screen), so the phases get a row of their
   own, full width. At the end of the file, so it wins over the .phases base rules */
@media (min-width: 901px) and (max-width: 1499px) {
  .masthead { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: 12px; }
  .phases { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; min-width: 0; }
  .phase { flex: 1; min-width: 0; align-items: center; }
}
/* Other systems have other (wider) fonts than the Mac (found by the GitHub test on
   Linux): the matchday text may shrink and wrap, extras drop out when it's tight */
.round { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.phase__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1199px) {
  .round__league, .clock__label { display: none; }
}

/* The strip: fade an edge where more clubs are hidden (js/app.js stripFade) */
.strip { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.strip.more-left { --fade-l: 40px; }
.strip.more-right { --fade-r: 56px; }

/* A Festung in the arena: a big tower in the player's colour */
.vs--fort { background: radial-gradient(circle at 34px 50%, color-mix(in srgb, var(--pa, var(--text-3)) 16%, transparent), transparent 160px), var(--surface); }
.vs--fort .arena__fort { width: 52px; height: 52px; background: color-mix(in srgb, var(--pa, var(--text-3)) 18%, var(--bg)); box-shadow: inset 0 0 0 2px var(--pa, var(--line-2)); color: var(--pa, var(--text)); }
.vs--fort .arena__fort svg { width: 28px; height: 28px; }
.vs__forttext { display: flex; flex-direction: column; gap: 3px; }
.vs__forttext b { font: 18px/1.1 var(--din); color: var(--text); }
.vs__forttext p { color: var(--text-2); }
.vs__forttext small { font-size: 12px; color: var(--text-3); }

/* ---------- Online spielen (js/online.js) ---------- */
.dialog--online { width: min(520px, calc(100vw - 24px)); }
.online__form { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 4px; }
.online__form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }
.online__form input:not([type="radio"]), .online__form select {
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: 15px/1.2 var(--ui);
}
.online__form input:focus, .online__form select:focus { outline: none; border-color: var(--you); }
.online__form .btn { align-self: flex-start; }
.online__label { font-size: 13px; color: var(--text-2); }
.online__colors { display: flex; gap: 8px; }
.online__color { position: relative; cursor: pointer; }
.online__color input { position: absolute; opacity: 0; }
.online__color span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.online__color input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.online__color input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }
.online__color.is-taken { opacity: 0.25; cursor: not-allowed; }
.online__who { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.dialog__body .online__rounds { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.online__round { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; }
.online__round.is-active { border-color: var(--you); }
.online__pick { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.online__code b { font: 16px/1 var(--din-num); letter-spacing: 0.12em; color: var(--you); }
.online__members { display: flex; flex-wrap: wrap; gap: 5px; }
.online__members i { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--p) 18%, transparent); color: var(--text); font-style: normal; box-shadow: inset 0 0 0 1px var(--p); }
.online__box { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.online__box summary { cursor: pointer; font-weight: 600; }

/* Which round you see: the demo or your online round (js/app.js) */
.board__mode { margin-left: 8px; padding: 2px 7px 1px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font: 600 10.5px/1.3 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.board__mode.is-online { background: color-mix(in srgb, var(--you) 18%, transparent); color: var(--you); }
.board__head { align-items: center; }
.strip__group[hidden] { display: none; } /* a new online round: nothing played yet */

/* The flag round: what the others take from you */
.flags__against { margin: -2px 0 8px; font-size: 12.5px; color: var(--loss); }
/* Big screens: the round's table sits on the map's left, so the flag bar goes right */
@media (min-width: 961px) { .mapbar { left: auto; right: 14px; transform: none; } }

/* Step 1's match list in a narrow side column (windows around 1000 px): smaller
   crests and price boxes, so the prices never lie on top of the second crest */
.picker { container-type: inline-size; }
@container (max-width: 280px) {
  .picker__row { gap: 8px; padding: 6px 8px; }
  .picker__pair { gap: 4px; }
  .picker__crest { width: 30px; height: 30px; }
  .picker__crest .crest { width: 20px !important; height: 20px !important; }
  .picker__row .triple { gap: 3px; }
  .picker__row .triple__cell { min-width: 26px; padding: 5px 2px 4px; font-size: 14px; }
}

/* Bottom of an open step that isn't finished yet: the same small up-arrow in a
   circle as in its head line, centred, instead of a wide "Einklappen" button */
.step__done--arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 12px auto 0;
  padding: 0;
  border-radius: 50%;
  color: var(--text-2);
}
.step__done--arrow::after { content: ""; width: 9px; height: 9px; margin-top: 4px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .step__done--arrow:hover { color: var(--you); } }

/* A folded step in a narrow side column: the club's name wins over its price
   boxes (they are in the open step anyway), so it never shrinks to "E…" */
.step__top { container-type: inline-size; }
@container (max-width: 300px) {
  .step__summary .triple { display: none; }
}

/* Map legend: never under the buttons at the bottom right (Saison, Ganz
   Deutschland, about 215 px), it wraps into two lines instead. "Fahne möglich"
   only means something in the flag round, so it only shows then. */
@media (min-width: 721px) { .map-legend { max-width: calc(100% - 250px); } } /* phones have their own rule */
body:not([data-phase="fahnenrunde"]) .map-legend .is-target { display: none; }

/* Phones: the flag bar's hint gets two lines instead of being cut off ("tippe au…") */
@media (max-width: 720px) {
  .mapbar { white-space: normal; width: max-content; max-width: calc(100% - 20px); }
  .mapbar__text { max-width: none; line-height: 1.25; }
}

/* ---------- Smoothness (28 Oct 2026): nothing snaps, every tap answers ---------- */
/* Phones: no grey flash on every tap (it looks like a glitch) */
html { -webkit-tap-highlight-color: transparent; }

/* A step that just opened slides in from its head line */
.step.is-opening .step__body > :not(.step__top) { animation: step-in 0.3s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(-6px); } }

/* The ticket pops in once, the moment your lineup is complete */
.ticket.is-new { animation: ticket-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(8px) scale(0.95); } }

/* Another phase or phone tab: the new content fades in instead of snapping */
.is-swapping { animation: swap-in 0.32s var(--ease) both; }
.stage.is-swapping { animation-name: swap-fade; } /* the map's box only fades (no movement) */
@keyframes swap-in { from { opacity: 0.25; transform: translateY(6px); } }
@keyframes swap-fade { from { opacity: 0.25; } }

/* Every tappable row gives a little press, like a real button */
.picker__row, .player, .phase, .step__top, .tabbar button { transition: transform 0.12s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease); }
.picker__row:active, .player:active, .phase:active, .tabbar button:active { transform: scale(0.97); }
.step__top:active { transform: scale(0.99); }

/* ======================================================================
   Laptops (28 Oct 2026): a MacBook shows about 1280 × 720. The header, the
   phases and the club strip used to take a third of that, so Germany was cut
   off at the bottom. Now: phases back in the header line, a flatter strip,
   and the map takes exactly what's left of the screen.
   ====================================================================== */
/* Wide enough for one header line (1200 px and more): phases next to the round */
@media (min-width: 1200px) and (max-width: 1499px) {
  .masthead { grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: 22px; padding-top: 8px; padding-bottom: 8px; }
  .menu-btn { margin-right: -12px; } /* close to the logo, without touching it (the gap is smaller here) */
  .phases { grid-column: auto; grid-row: auto; justify-self: center; }
  .phase { flex: none; min-width: 92px; align-items: flex-start; padding: 6px 9px 5px; }
  .round { padding-left: 22px; gap: 10px; }
  .round__day { font-size: 21px; }
  .brand__word { font-size: 26px; }
  .clock__unit { min-width: 38px; padding: 4px 5px 3px; }
  .clock__unit b { font-size: 19px; }
}
/* Laptop screens are low: a flatter strip, a smaller table on the map */
@media (min-width: 961px) and (max-height: 920px) {
  .masthead { padding-top: 8px; padding-bottom: 8px; }
  .strip { padding-top: 6px; padding-bottom: 8px; }
  .strip__group { gap: 4px; }
  .slot { padding: 4px 2px 4px; }
  .stage { padding-top: 12px; padding-bottom: 16px; }
  .board { width: 214px; margin: 10px; padding: 8px 10px 4px; }
  .board__row { padding: 3px 0; font-size: 13px; gap: 6px; }
}
/* The map fills the rest of the screen, whatever its height (at least 420 px) */
@media (min-width: 961px) {
  .map-wrap { height: clamp(420px, calc(100vh - var(--chrome)), 980px); }
  .side { max-height: clamp(420px, calc(100vh - var(--chrome)), 980px); }
}

/* ---------- Das Rennen as a table (28 Oct 2026) ----------
   One row per player: rank, avatar, name with the gap to the leader, a mini
   curve of the season, fields, and this week's change. The big chart opens
   below on "Verlauf ansehen". */
.race__table { list-style: none; margin: 14px 0 0; padding: 0; }
.race__row {
  display: grid;
  grid-template-columns: 14px 22px minmax(0, 1fr) 96px 40px 44px;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.race__row--head { padding-top: 0; padding-bottom: 6px; border-top: 0; font-size: 11.5px; color: var(--text-3); }
.race__row--head span:nth-child(5), .race__row--head span:nth-child(6) { text-align: right; }
.race__row.is-you { background: color-mix(in srgb, var(--p) 8%, transparent); border-radius: var(--radius-sm); border-top-color: transparent; }
.race__row.is-you + .race__row { border-top-color: transparent; }
.race__rank { font: 13px/1 var(--din-num); color: var(--text-3); }
.race__row .arena__avatar { width: 22px; height: 22px; font-size: 11px; }
.race__name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.race__name b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.race__name small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race__name .race__crown { align-self: center; }
.race__spark { display: block; overflow: visible; }
.race__spark polyline, .race__spark line { fill: none; stroke: var(--p); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.race__spark line.is-live { stroke-dasharray: 3 3; }
.race__spark circle { fill: var(--p); }
.race__fields { font: 22px/1 var(--din-num); text-align: right; }
.race__delta { font: 14px/1 var(--din-num); text-align: right; color: var(--text-3); }
.race__delta.is-up { color: var(--signal); }
.race__delta.is-down { color: var(--loss); }
.race__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.race__chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.race__toggle { margin-left: auto; border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; }
.race__toggle::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease); }
.race__toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .race__toggle:hover { border-color: var(--you); } }
.race__plot { margin-top: 14px; }
.race__plot.is-opening { animation: step-in 0.3s var(--ease) both; }
@media (max-width: 420px) {
  .race__row { grid-template-columns: 12px 20px minmax(0, 1fr) 64px 32px 34px; gap: 7px; padding: 8px 4px; }
  .race__spark { width: 64px; }
  .race__name small { display: none; }
  .race__fields { font-size: 19px; }
}

/* ---------- Der Kurier as headline cards (28 Oct 2026) ----------
   A one-line masthead, the lead story with a big number in the winner's
   colour, then the other stories as small cards, two by two. */
.kurier { gap: 12px; }
.kurier__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--line-2); text-align: left; }
.kurier__name { font-size: 26px; }
.kurier__issue { font: 12px/1.2 var(--ui); color: var(--text-3); white-space: nowrap; }
.kurier__story { padding-bottom: 0; border-bottom: 0; }
.kurier__lead {
  --p: var(--signal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--p) 35%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--p) 9%, var(--surface));
}
.kurier__big { font: 44px/0.9 var(--din-num); color: var(--p); letter-spacing: -0.02em; }
.kurier__lead h3 { margin-top: 4px; font: 700 24px/1.1 var(--serif); }
.kurier__lead .kurier__kicker { color: var(--p); }
.kurier__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.kurier__card { padding: 10px 12px 11px; border-radius: var(--radius-sm); background: var(--surface-2); }
.kurier__card h3 { font: 15.5px/1.2 var(--din); }
.kurier__card p { font-size: 12.5px; }
.kurier__card .kurier__kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.kurier__card.is-hot .kurier__kicker { color: var(--loss); }
.kurier__kicker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kurier__share { align-self: flex-end; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text-2); font: 12.5px var(--ui); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .kurier__share:hover { border-color: var(--you); color: var(--text); } }
/* The race and the Kurier side by side don't need the same height any more */
.season { align-items: start; }
@media (min-width: 961px) { .season { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* the race is a compact table now: two equal halves */

/* ---------- Euer Spieltag as cards (28 Oct 2026) ----------
   Every screen gets the compact phone layout: the time on the left, the two
   clubs one above the other, chances or score on the right, and what the match
   means for you underneath. Bigger screens: cards, two side by side. */
.fx[hidden], .fixtures__day[hidden], .fx-filter[hidden] { display: none; }
.fx { grid-template-columns: 44px minmax(0, 1fr) 96px; grid-template-areas: "time home mid" "time away mid" "tags tags tags"; gap: 2px 10px; padding: 10px 12px; }
.fx__time { display: block; grid-area: time; align-self: start; padding-top: 10px; font-size: 14px; }
.fx__kick { display: none; }
.fx__club { padding: 4px 6px; }
.fx__club--home { grid-area: home; justify-self: stretch; }
.fx__club--away { grid-area: away; justify-self: stretch; flex-direction: row; text-align: left; }
.fx__club .triple--boxes, .fx__club--away .triple--boxes { margin-left: auto; margin-right: 0; }
.fx__mid { grid-area: mid; align-self: center; }
.fx__name b { font-size: 15.5px; }
.fx__tags { grid-area: tags; padding: 6px 0 0 54px; justify-content: flex-start; }
.fx.is-quiet { opacity: 0.6; }
@media (min-width: 721px) {
  .fixtures { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 8px; align-items: start; }
  .fixtures__day { grid-column: 1 / -1; }
  .fx { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
  .fx + .fx { border-top: 1px solid var(--line); }
  .fx.is-hot { border-color: var(--line-2); background: var(--surface); }
}
@media (max-width: 720px) { .fx__tags { padding-left: 0; } }
/* "Eure Spiele · 3 | Alle · 9" in the section head, and the card for the rest */
.schedule .section-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.section-head__text { display: flex; flex-direction: column; gap: 4px; }
.fx-filter { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.fx-filter__btn { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 13px var(--ui); cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.fx-filter__btn[aria-pressed="true"] { background: var(--you); color: var(--signal-ink); font-weight: 600; }
.fx-more { grid-column: 1 / -1; margin-top: 2px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: none; color: var(--text-2); font: 13.5px var(--ui); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .fx-more:hover, .fx-filter__btn:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--you); } }
/* Big screens: no day headings between the cards (they left half-empty rows),
   the weekday stands above the time in each card instead */
.fx__wd { display: none; }
@media (min-width: 721px) {
  .fixtures__day { display: none; }
  .fx__wd { display: block; margin-bottom: 3px; font: 600 11px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
}
/* The Kurier's small cards: always two by two (one column on narrow phones) */
.kurier__grid { grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(50% - 4px)), 1fr)); }
/* Race and Kurier side by side: both cards end together, the race's chips at the bottom */
@media (min-width: 961px) {
  .season { align-items: stretch; }
  .race { display: flex; flex-direction: column; }
  .race__facts { margin-top: auto; padding-top: 14px; }
  .race__plot { order: 1; }
}
/* The paper's name never breaks; on narrow screens the issue line moves below it */
.kurier__head { flex-wrap: wrap; row-gap: 4px; }
.kurier__name { white-space: nowrap; }

/* ---------- A new online round: "Eure Runde startet" (28 Oct 2026) ---------- */
.start { display: flex; flex-direction: column; gap: 12px; border-color: color-mix(in srgb, var(--you) 40%, var(--line)); }
.start__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.start h2 { font-size: 20px; }
.start__badge { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--you) 16%, transparent); color: var(--you); font: 600 13px/1 var(--din-num); }
.start__text { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.start__invite { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.start__who { font-size: 13px; color: var(--text-2); }
.start__code { font: 28px/1 var(--din-num); letter-spacing: 0.16em; color: var(--you); user-select: all; }
/* The steps: a dot per step on one line, the title and its detail beside it */
.start__steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.start__steps::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); } /* the line joining the dots */
.start__steps li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; font-size: 13.5px; }
.start__dot { grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); font: 12px/1 var(--din-num); color: var(--text-3); }
.start__steps b { grid-column: 2; font-weight: 600; color: var(--text-2); line-height: 1.2; }
.start__detail { grid-column: 2; font-size: 12.5px; color: var(--text-3); line-height: 1.25; }
.start__steps li.is-now .start__dot { border-color: var(--you); color: var(--you); box-shadow: 0 0 0 3px color-mix(in srgb, var(--you) 22%, transparent); }
.start__steps li.is-now b { color: var(--text); }
.start__steps li.is-done .start__dot { border-color: var(--you); background: var(--you); }
.start__steps li.is-done .start__dot::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--signal-ink); border-bottom: 2px solid var(--signal-ink); transform: rotate(-45deg); }
.start__steps li.is-done b { color: var(--text-2); }
.start__go { align-self: stretch; padding: 12px; font-size: 15px; }
.start__go:disabled { opacity: 0.45; cursor: not-allowed; }
.start__ask { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--you); border-radius: var(--radius-sm); font-size: 13.5px; }
.start__help { align-self: flex-start; font-size: 13px; }
/* The help: the week's four phases */
.help { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; counter-reset: help; }
.help li { counter-increment: help; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.help li::before { content: counter(help); grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--you); color: var(--signal-ink); font: 700 14px/1 var(--din-num); }
.help b { font: 700 17px/1.1 var(--din); text-transform: uppercase; letter-spacing: 0.02em; }
.help span { font-size: 12px; color: var(--text-3); text-align: right; }
.help p { grid-column: 2 / -1; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* ---------- Anpfiff: the start animation (js/app.js playIntro) ---------- */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 11, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: intro-in 0.35s var(--ease) both; overflow-y: auto; }
.intro.is-leaving { animation: intro-out 0.3s var(--ease) both; }
@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.02); } }
.intro__box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 920px; text-align: center; }
.intro__kicker { font: 700 13px/1 var(--din); letter-spacing: 0.3em; text-transform: uppercase; color: var(--you); animation: step-in 0.5s var(--ease) 0.1s both; }
.intro__title { font-size: clamp(32px, 6vw, 56px); line-height: 1; animation: step-in 0.5s var(--ease) 0.2s both; }
.intro__sub { font-size: 14px; color: var(--text-2); animation: step-in 0.5s var(--ease) 0.3s both; }
.intro__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 8px; perspective: 900px; }
.intro__card { --p: var(--you); width: 150px; animation: card-flip 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) calc(0.5s + var(--i) * 0.26s) both; transform-origin: 50% 60%; }
@keyframes card-flip { from { opacity: 0; transform: rotateY(-95deg) translateY(16px); } }
.intro__face { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; border: 1px solid color-mix(in srgb, var(--p) 60%, transparent); border-radius: 14px; background: linear-gradient(170deg, color-mix(in srgb, var(--p) 28%, var(--surface)) 0%, var(--surface) 55%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.intro__card.is-you .intro__face { box-shadow: 0 0 0 2px var(--p), 0 18px 40px rgba(0, 0, 0, 0.45); }
.intro__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--p); color: #0c0d0f; font: 700 20px/1 var(--din); }
.intro__name { font: 700 17px/1.1 var(--din); text-transform: uppercase; }
.intro__face .crest { margin: 6px 0 2px; }
.intro__club { font-size: 13px; color: var(--text-2); }
.intro__fields { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--p) 18%, transparent); color: var(--text); font: 600 12px/1 var(--din-num); }
.intro__next { font-size: 14px; color: var(--text-2); animation: step-in 0.5s var(--ease) 1.4s both; }
.intro__go { padding: 13px 32px; font-size: 16px; animation: step-in 0.5s var(--ease) 1.5s both; }
@media (max-width: 520px) { .intro__card { width: calc(50% - 8px); } .intro__cards { gap: 10px; } }

/* ---------- The home stadium draft (29 Oct 2026, js/draft.js) ---------- */
.draft { z-index: 95; align-items: start; }
.draft__box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(760px, 100%); margin: auto 0; padding: 12px 0 24px; text-align: center; }
.draft .intro__title { font-size: clamp(28px, 5vw, 48px); }
.draft.is-mine .intro__title, .draft.is-mine .draft__sub { color: var(--you); }
.draft__order { display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); margin: 10px 0 4px; }
.draft__slot {
  --p: var(--line-2);
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  text-align: left; animation: step-in 0.4s var(--ease) calc(0.3s + var(--i) * 0.08s) both;
}
.draft__no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); font: 700 18px/1 var(--din-num); color: var(--text-3); }
.draft__reel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1.1 var(--din); text-transform: uppercase; color: var(--text-3); }
.draft__slot.is-rolling .draft__reel { color: var(--text-2); filter: blur(0.6px); }
.draft__slot.is-drawn { border-color: color-mix(in srgb, var(--p) 70%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--p) 22%, var(--surface)) 0%, var(--surface) 70%); animation: draft-land 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.draft__slot.is-drawn .draft__no { background: var(--p); color: #0c0d0f; }
.draft__slot.is-drawn .draft__reel { color: var(--text); }
.draft__slot.is-you { box-shadow: 0 0 0 2px var(--p); }
.draft__slot.is-turn { box-shadow: 0 0 0 2px var(--p), 0 0 24px color-mix(in srgb, var(--p) 45%, transparent); }
.draft__got { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.draft__got small { color: var(--text-3); }
.draft__picking { color: var(--p); font-weight: 600; animation: draft-pulse 1.2s ease-in-out infinite; }
@keyframes draft-land { 0% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes draft-pulse { 50% { opacity: 0.45; } }
.draft__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 8px; animation: step-in 0.4s var(--ease) both; }
.draft__club {
  --p: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 70px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer;
}
.draft__label { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.draft.is-mine .draft__club:not(:disabled):hover { border-color: var(--you); background: var(--surface-2); color: var(--text); }
.draft__club:disabled { cursor: default; }
.draft:not(.is-mine) .draft__club:not(.is-taken) { opacity: 0.75; }
.draft__club.is-taken { border-color: var(--p); background: color-mix(in srgb, var(--p) 18%, var(--surface)); color: var(--text); opacity: 1; }
.draft__club.is-taken .crest { filter: saturate(0.4); }
.draft__note { min-height: 20px; font-size: 13px; color: var(--loss); }
.draft__go { color: var(--signal-ink); }
.board__nocap { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--surface-2); color: var(--text-3); font: 700 11px/1 var(--din-num); }
.online__draftnote { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
@media (max-width: 520px) { .draft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .draft__reel { font-size: 16px; } }

/* ---------- "Online spielen", step by step (28 Oct 2026) ---------- */
.dialog--online { width: min(560px, calc(100vw - 24px)); }
.dialog--online h3 { margin: 6px 0 4px; font-size: 20px; }
.online__steps { display: flex; gap: 6px; margin: 2px 0 12px; }
.online__steps span { flex: 1; padding: 6px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--text-3); text-align: center; white-space: nowrap; }
.online__steps .is-on { background: var(--you); color: var(--signal-ink); font-weight: 600; }
.online__steps .is-done { color: var(--text-2); }
.online__steps .is-done::before { content: "✓ "; color: var(--you); }
.online__invited, .online__sent { margin-bottom: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--you) 45%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--you) 8%, var(--surface)); font-size: 14px; }
.online__sent p { margin-top: 4px; }
.online__back { margin: 0 0 6px; font-size: 13px; }
.online__field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.online__field legend { margin-bottom: 8px; padding: 0; font-size: 13px; color: var(--text-2); }
/* Choices as pills (players, how long) */
.online__seg { display: flex; gap: 6px; flex-wrap: wrap; }
.online__seg label { flex: 1; position: relative; cursor: pointer; }
.online__seg input { position: absolute; opacity: 0; }
.online__seg span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 600 16px/1.1 var(--din-num); color: var(--text-2); text-align: center; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease); }
.online__seg--wide span { font: 600 14px/1.2 var(--ui); }
.online__seg small { font: 12px var(--ui); color: var(--text-3); }
.online__seg input:checked + span { border-color: var(--you); background: color-mix(in srgb, var(--you) 12%, transparent); color: var(--text); }
.online__seg input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
/* The 18 stadiums as crests */
.online__clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.online__club { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 4px !important; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
.online__club input { position: absolute; opacity: 0; }
.online__club small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-2); }
.online__club:has(input:checked) { border-color: var(--you); background: color-mix(in srgb, var(--you) 12%, transparent); }
.online__club:has(input:checked) small { color: var(--text); font-weight: 600; }
.online__club:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.online__club.is-taken { cursor: not-allowed; border-color: color-mix(in srgb, var(--p) 50%, var(--line)); }
.online__club.is-taken .crest { filter: grayscale(1); opacity: 0.35; }
.online__club.is-taken small { color: var(--p); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .online__club:not(.is-taken):hover, .online__seg label:hover span, .online__choice:hover { border-color: var(--you); } }
.online__color.is-taken span { background: repeating-linear-gradient(45deg, var(--c) 0 4px, transparent 4px 8px); }
/* Home: your rounds and the two ways on */
.online__roundhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.online__badge { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--you) 16%, transparent); color: var(--you); font-size: 11.5px; font-weight: 600; }
.online__coderow { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); }
.online__coderow b { font: 16px/1 var(--din-num); letter-spacing: 0.12em; color: var(--you); }
.online__round--demo { background: none; border-style: dashed; }
.online__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.online__choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color 0.15s var(--ease); }
.online__choice b { font-size: 15px; }
.online__choice span { font-size: 12.5px; color: var(--text-3); }
@media (max-width: 420px) { .online__choices { grid-template-columns: 1fr; } .online__steps span { font-size: 11px; padding: 5px 4px; } }
/* After founding / the preview of a round */
.online__done, .online__preview { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.online__kicker { font: 600 11px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--you); }
.dialog__body .online__bigcode { align-self: flex-start; padding: 10px 16px; border: 1px dashed var(--you); border-radius: var(--radius-sm); font: 34px/1 var(--din-num); letter-spacing: 0.18em; color: var(--you); user-select: all; }
.online__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Leaving a round: the link sits at the end of the code line, the question in the card */
.online__leave { margin-left: auto; color: var(--text-3); }
.online__round.is-leaving { gap: 8px; border-color: var(--loss); background: color-mix(in srgb, var(--loss) 7%, var(--surface-2)); }
.online__round.is-leaving span { color: var(--text-2); }
.btn--danger { border-color: var(--loss); background: var(--loss); color: #fff; }

/* ---------- Inviting: Teilen, WhatsApp, E-Mail, SMS, Kopieren ---------- */
.invite { display: flex; flex-wrap: wrap; gap: 6px; }
.invite__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--ui); text-decoration: none; cursor: pointer; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
.invite__btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-3)); }
.invite__btn--share { --dot: var(--you); }
.invite__btn--wa { --dot: #25d366; }
.invite__btn--mail { --dot: #45b4ff; }
.invite__btn--sms { --dot: #b08cff; }
.invite__btn--copy { --dot: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .invite__btn:hover { border-color: var(--you); } }
.online__round .invite { padding-top: 4px; }
.start__go { justify-content: center; text-align: center; }

/* The logo (28 Oct 2026): the mark sits inside the word and is lined up with
   the capitals of DERBYLAND, whatever the size (the cap unit is the height
   of a capital letter): 1.3 capitals tall, centred on them */
.brand { gap: 0; }
.brand__word { display: inline-flex; align-items: baseline; gap: 0.32em; white-space: nowrap; padding-top: 1px; } /* capitals, mark and menu icon on one centre line */
.brand__mark, .brand--small .brand__mark { width: auto; height: 1.32cap; flex: none; align-self: baseline; position: relative; top: 0.15cap; filter: drop-shadow(0 1px 6px rgba(201, 242, 62, 0.18)); }

/* Phones (found by tools/audit.mjs, 28 Oct 2026): everything you tap is at
   least 36 px high, a thumb hits it (the phases were 27, the menu link 20) */
@media (max-width: 720px) {
  .phase { min-height: 40px; justify-content: center; }
  .invite__btn, .fx-filter__btn, .race__chip.race__toggle, .kurier__share, .btn--quiet, .online__choice, .start__help { min-height: 36px; }
  .invite__btn { padding: 9px 13px; }
  .board__row { min-height: 38px; }
  .drawer__link { display: inline-flex; align-items: center; min-height: 36px; }
  .dialog .btn, #setup .btn, #arena .btn, .map-tools .btn { min-height: 36px; }
}

/* ---------- Quick Game (js/quick.js, js/app.js renderQuickCard / playTicker) ---------- */
.is-quick .clock { display: none; } /* no real deadline: the button sets the pace */
.quick { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--you) 45%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--you) 9%, var(--surface)), var(--surface) 60%); }
.quick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quick__kicker { font: 700 12px/1 var(--din); letter-spacing: 0.22em; text-transform: uppercase; color: var(--you); }
.quick__day { font: 700 20px/1 var(--din); text-transform: uppercase; }
.quick__dots { display: flex; gap: 3px; }
.quick__dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--line-2); }
.quick__dots i.is-done { background: var(--you); }
.quick__dots i.is-now { background: color-mix(in srgb, var(--you) 45%, var(--line-2)); box-shadow: 0 0 0 1px var(--you); }
.quick__text { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.quick__go { align-self: stretch; justify-content: center; padding: 12px; font-size: 16px; }
.quick__again, .quick__quit { align-self: flex-start; font-size: 12.5px; }
.quick__quit { color: var(--text-3); }
.quick__final { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quick__final li { display: grid; grid-template-columns: 28px 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.quick__final li.is-you { box-shadow: inset 0 0 0 1px var(--you); }
.quick__final .arena__avatar { width: 22px; height: 22px; font-size: 11px; }
.quick__rank { font: 700 15px/1 var(--din-num); color: var(--text-3); }
.quick__n { font: 600 15px/1 var(--din-num); }
.online__quicklink { margin-top: 12px; font-size: 13px; }
/* The live ticker: every match of the matchday, goal by goal */
.tq { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, 100%); }
.tq__min { font: 700 56px/1 var(--din-num); color: var(--you); font-variant-numeric: tabular-nums; }
.tq__list { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.tq__row { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tq__row.is-mine { border-color: var(--you); background: color-mix(in srgb, var(--you) 9%, var(--surface)); }
.tq__row.is-foe { border-color: color-mix(in srgb, var(--loss) 60%, var(--line)); }
.tq__row.is-goal { animation: tq-goal 0.9s var(--ease); }
@keyframes tq-goal { 0% { background: color-mix(in srgb, var(--you) 35%, var(--surface)); transform: scale(1.02); } }
.tq__team { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 15px/1.1 var(--din); text-transform: uppercase; }
.tq__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq__team--away { justify-content: flex-end; text-align: right; }
.tq__score { font: 700 22px/1 var(--din-num); text-align: center; font-variant-numeric: tabular-nums; }
.tq__goal { grid-column: 1 / -1; min-height: 14px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.tq__skip { margin-top: 6px; min-width: 180px; min-height: 40px; justify-content: center; }
@media (max-width: 520px) { .tq__min { font-size: 42px; } .tq__team { font-size: 13px; gap: 5px; } .tq__row { padding: 6px 8px; column-gap: 6px; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); } }
.tq__team { line-height: 1.3; padding-top: 2px; } /* room for the dots of Ö and Ü */
.strip__key[hidden] { display: none; }

/* ---------- Klatsche: you pick the club of the one you beat (Quick Game) ----------
   A card on top of your lineup with a slanted stamp and a glowing edge; when you
   choose, a "Verordnet" seal thumps onto it. The same look, quieter, when you
   are the one who got the Klatsche. */
.klatsche {
  position: relative;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(120deg, var(--loss), color-mix(in srgb, var(--loss) 20%, var(--signal)) 55%, var(--line-2)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--loss) 40%, transparent);
  animation: klatsche-in 0.55s var(--ease) both, klatsche-glow 2.6s ease-in-out 0.6s 2;
  overflow: hidden;
}
.klatsche--got { margin: 8px 0 10px; animation: klatsche-in 0.45s var(--ease) both; }
.klatsche__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.klatsche__top .klatsche__text { flex: 1 1 100%; } /* stamp and face on top, the words below: fits the narrow side column */
.klatsche__top .arena__avatar { width: 30px; height: 30px; font-size: 14px; }
.klatsche__stamp {
  font: 700 15px/1 var(--din);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--loss);
  padding: 5px 7px 3px;
  border: 2px solid var(--loss);
  border-radius: var(--radius-sm);
  transform: rotate(-8deg);
  animation: klatsche-stamp 0.5s var(--ease) 0.15s both;
}
.klatsche__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.klatsche__text b { font: 700 17px/1.15 var(--din); letter-spacing: 0.02em; text-transform: uppercase; }
.klatsche__text small { color: var(--text-2); font-size: 13px; line-height: 1.35; }
.klatsche__list { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.klatsche__hint { margin: 8px 0 0; color: var(--text-3); font-size: 12px; }
.klatsche__set { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--loss) 9%, var(--surface)); }
.klatsche__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klatsche__what b { font-size: 14px; line-height: 1.25; }
.klatsche__set > .crest { grid-row: span 2; }
.klatsche__set .triple { grid-column: 2; grid-row: 2; justify-self: start; }
.klatsche__again { grid-column: 3; grid-row: 1 / span 2; }
.klatsche__what small { color: var(--text-3); font-size: 12px; }
.klatsche__again { min-height: 36px; }
.klatsche__seal {
  position: absolute;
  right: 10px;
  top: 8px;
  font: 700 13px/1 var(--din);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--loss) 75%, var(--text));
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 5px 9px 3px;
  transform: rotate(9deg);
  opacity: 0.85;
  pointer-events: none;
}
.klatsche.is-stamped .klatsche__seal { animation: klatsche-seal 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.klatsche.is-stamped { animation: klatsche-thump 0.35s ease-out 0.12s both; }
@keyframes klatsche-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes klatsche-stamp { from { opacity: 0; transform: rotate(-20deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes klatsche-seal { from { opacity: 0; transform: rotate(-10deg) scale(2.4); } to { opacity: 0.85; transform: rotate(9deg) scale(1); } }
@keyframes klatsche-thump { 0% { transform: none; } 40% { transform: translateY(2px) scale(0.985); } 100% { transform: none; } }
@keyframes klatsche-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--loss) 22%, transparent), 0 0 24px color-mix(in srgb, var(--loss) 25%, transparent); } }
.reduce-motion .klatsche, .reduce-motion .klatsche__stamp, .reduce-motion .klatsche__seal { animation: none !important; }

/* A minus week in the flag round: what you still have to give back */
.flags__minus { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--loss) 12%, transparent); color: var(--text); font-size: 13px; line-height: 1.4; }

/* ---------- Welcome: the first visit, in the example round ---------- */
/* the same close button as the dialogs' (.dialog__close) */
.welcome__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: none; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; }
.welcome__close:hover { color: var(--text); border-color: var(--text-3); }
.welcome__go { display: flex; flex-direction: column; gap: 8px; }
.welcome__go .btn { width: 100%; justify-content: center; min-height: 40px; }

/* Quick Game: the phase buttons only show where the game is (the Quick card moves it on) */
.phase:disabled { cursor: default; }
.phase:disabled:not(.is-on) { opacity: 0.5; }
.phase:disabled:not(.is-on):hover { background: none; }

/* Ticker: a little tag on your match and your duel's match */
.tq__row { position: relative; }
.tq__tag { position: absolute; top: -8px; left: 10px; padding: 2px 6px 1px; border-radius: var(--radius-sm); background: var(--you); color: var(--signal-ink); font: 700 10px/1.2 var(--din); letter-spacing: 0.06em; text-transform: uppercase; }
.tq__tag--foe { background: var(--loss); color: #fff; }
.tq__row.is-mine, .tq__row.is-foe { margin-top: 4px; }
/* The first ticker of a matchday is there at once (no fade): the results under it mustn't flash up */
.ticker-q.is-instant { animation: none; background: rgba(8, 9, 11, 0.97); }

/* Quick Game: "Fertig" right on the map's flag bar (phones: the Quick card is in another tab) */
.mapbar__go { flex: none; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.mapbar__go:disabled { opacity: 0.5; }

/* ---------- Spezialkarten: the reward you pick with a Volltreffer, and the card you play (29 Oct 2026) ---------- */
button.vt__reward { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.vt__reward.is-chosen { border-color: var(--you); background: color-mix(in srgb, var(--you) 12%, var(--surface)); box-shadow: 0 0 0 1px var(--you) inset; }
.vt__reward.is-chosen b::after { content: " ✓"; color: var(--you); }
.cardplay { margin: 12px 0 4px; padding: 12px; border: 1px solid color-mix(in srgb, var(--you) 35%, var(--line)); border-radius: var(--radius-sm); background: var(--surface-2); }
.cardplay__head { margin: 0 0 2px; font: 700 15px/1.1 var(--din); text-transform: uppercase; letter-spacing: 0.03em; }
.cardplay__note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-3); }
.cardplay__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cardplay__row.is-on .card-chip { box-shadow: 0 0 0 2px var(--you); }
.cardplay__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cardplay__text b { font: 700 14px/1.1 var(--din); text-transform: uppercase; }
.cardplay__text span { font-size: 12.5px; line-height: 1.3; color: var(--text-3); }
.cardplay__pick { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.cardplay__who { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 6px 10px; border: 1px solid var(--line); border-left: 4px solid var(--p); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font: 600 13px/1 var(--din-num); cursor: pointer; }
.chip-btn.is-on { border-color: var(--p); color: var(--text); background: color-mix(in srgb, var(--p) 16%, var(--surface)); }
.chip-btn:disabled { opacity: 0.4; cursor: default; }
.cardplay__clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cardplay__club { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 12.5px; cursor: pointer; text-align: left; }
.cardplay__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardplay__club.is-on { border-color: var(--you); color: var(--text); }
.cardplay__seen { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.klatsche__wait { margin: 6px 0 4px; padding: 10px 12px; border-left: 3px solid var(--loss); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; line-height: 1.4; color: var(--text-2); }

/* ---------- The end of a round: the final table, place by place, then the winner (29 Oct 2026) ---------- */
.finale { z-index: 96; }
.finale .confetti, body > .confetti { z-index: 97; }
.finale__box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(620px, 100%); text-align: center; }
.finale__list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 14px 0 4px; }
.finale__row {
  display: grid; grid-template-columns: 34px 28px minmax(70px, 140px) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left;
  animation: finale-in 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) var(--d) both;
}
.finale__row.is-you { box-shadow: 0 0 0 2px var(--p); }
.finale__row.is-top { border-color: color-mix(in srgb, var(--p) 70%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--p) 22%, var(--surface)), var(--surface) 70%); }
.finale__rank { font: 700 20px/1 var(--din-num); color: var(--text-2); }
.finale__row.is-top .finale__rank { color: var(--p); }
.finale__name { overflow: hidden; font: 700 16px/1.1 var(--din); text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.finale__bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.finale__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--p); transform-origin: left; animation: finale-bar 0.9s var(--ease) calc(var(--d) + 0.2s) both; }
.finale__n { font: 600 14px/1 var(--din-num); white-space: nowrap; }
.finale__champ { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; animation: finale-champ 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) var(--d) both; }
.finale__champ b { font: 700 clamp(24px, 4.5vw, 36px)/1.05 var(--din); text-transform: uppercase; color: var(--p); }
.finale__champ span:last-child { font-size: 14px; color: var(--text-2); }
.finale__cup { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--p) 60%, transparent)); }
.finale__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; animation: step-in 0.4s var(--ease) var(--d) both; }
@keyframes finale-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes finale-bar { from { transform: scaleX(0); } }
@keyframes finale-champ { from { opacity: 0; transform: scale(0.6); } }
@media (max-width: 520px) {
  .finale__row { grid-template-columns: 26px 26px minmax(0, 1fr) auto; gap: 8px; }
  .finale__bar { grid-column: 1 / -1; grid-row: 2; }
  .finale__name { font-size: 14px; }
}