:root {
    color-scheme: dark;
    --bg: #071318;
    --surface: #15232a;
    --surface-2: #1f3038;
    --border: #2b3f48;
    --text: #eceff1;
    --muted: #93a3ad;
    --accent: #ffc53d;
    --accent-ink: #1d1500;
    --good: #4ade80;
    --bad: #fb7185;
    --live: #5cc8ff;
    --radius: 12px;
    --radius-s: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-underline-offset: 3px; }

h1, .h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.12; margin: 0 0 .6rem; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 2.75rem 0 1rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; line-height: 1.3; margin: .7rem 0 .8rem; }
h3 a, h2 a { color: inherit; text-decoration: none; }
h3 a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--surface-2); border-radius: 5px; padding: 1px 6px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 18px; }
main.wrap { padding-top: 32px; padding-bottom: 72px; min-height: 65vh; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 44em; margin: 0 0 1.5rem; }
/* Read by screen readers, not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 .7rem; color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Header */

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; gap: 8px 20px; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: auto; height: 44px; }
/* The logo is 4.6 times as wide as it is tall. On a phone it shrinks so that the account icon and the button
   still fit beside it: 210px holds the page's margins, the gap, the icon and "Välj lag". It is 30px tall at 352px. */
.site-header .brand img { height: clamp(24px, calc((100vw - 210px) / 4.63), 44px); }
/* Each menu item is a box as tall as the header row, so the whole box is clickable. */
.site-nav { display: flex; align-self: stretch; margin-left: auto; }
.site-nav form { display: flex; margin: 0; }
.site-nav a, .nav-button { display: flex; align-items: center; padding: 0 14px; color: var(--muted); background: none; border: 0; font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.site-nav a:hover, .nav-button:hover { color: var(--accent); background: rgba(255, 197, 61, .2); }
.site-nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.site-nav :focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* Mitt konto, a round icon as tall as the button beside it. */
.header-account { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--border); border-radius: 50%; color: var(--muted); transition: background-color .15s, border-color .15s, color .15s; }
.header-account svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
/* Logged in, the icon is the member's initials in green. */
.header-account-member { color: var(--good); border-color: var(--good); background: rgba(74, 222, 128, .14); }
.header-initials { font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.header-account:hover { color: var(--accent); border-color: rgba(255, 197, 61, .5); background: rgba(255, 197, 61, .1); }
.header-account[aria-current="page"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.header-account:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Below this width the logo, menu and button no longer fit on one line, so the menu gets its own row. */
@media (max-width: 997px) {
    .site-header .wrap { padding-top: 10px; padding-bottom: 0; }
    .header-actions { margin-left: auto; }
    .site-nav { order: 3; width: 100%; min-height: 46px; margin-left: 0; overflow-x: auto; }
    .site-nav a, .nav-button { padding: 0 11px; }
}

/* On phones the menu row runs edge to edge and the items share its width, so all of them fit. */
@media (max-width: 560px) {
    .site-nav { width: calc(100% + 36px); margin: 0 -18px; }
    .site-nav a, .nav-button { flex: 1 0 auto; justify-content: center; padding: 0 6px; }
    .site-nav form { flex: 1 0 auto; }
}

/* Six items fit a phone down to 352 points only in a smaller type. */
@media (max-width: 460px) {
    .site-nav a, .nav-button { padding: 0 3px; font-size: .8rem; }
}

/* Buttons, chips, tags */

.button { display: inline-block; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.2; padding: 12px 18px; border-radius: var(--radius-s); border: 2px solid var(--accent); cursor: pointer; white-space: nowrap; }
.button:hover { filter: brightness(1.08); }
.button-outline { background: transparent; color: var(--accent); }
.button-outline:hover { background: rgba(255, 197, 61, .1); filter: none; }
.button-quiet { background: transparent; color: var(--text); border-color: var(--border); }
.button-quiet:hover { border-color: var(--muted); filter: none; }
.button-danger { background: transparent; color: var(--bad); border-color: rgba(251, 113, 133, .5); margin-left: auto; }
.button-danger:hover { border-color: var(--bad); filter: none; }
/* Leads to another site. The arrow is left out for screen readers. */
.button-external::after { content: "\00a0↗"; content: "\00a0↗" / ""; }
.header-cta { padding: 9px 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.chip { display: inline-block; font-size: .75rem; font-weight: 700; line-height: 1.2; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.chip-open { color: var(--good); border-color: rgba(74, 222, 128, .45); }
.chip-sold, .chip-placed { color: var(--accent); border-color: rgba(255, 197, 61, .5); }
.chip-live { color: var(--live); border-color: rgba(92, 200, 255, .5); }
.chip-win { color: var(--accent-ink); background: var(--good); border-color: var(--good); }
.chip-large { font-size: .95rem; padding: 9px 16px; }
.chip-live::before, .dot { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chip-live::before, .dot { animation: none; } }
/* Only a match being played blinks. A game between matches shows a clock that stands still. */
.chip-wait { color: var(--live); border-color: rgba(92, 200, 255, .3); }
.chip-wait::before, .clock { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='5'/%3E%3Cpath d='M6 3.3V6l1.9 1.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='5'/%3E%3Cpath d='M6 3.3V6l1.9 1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.clock { width: 13px; height: 13px; margin-right: 8px; color: var(--live); }

.empty, .notice { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 20px; color: var(--muted); margin: 0; }
.notice { margin-top: 24px; }
.crumb { margin: 0 0 18px; font-size: .95rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-head h1 { margin: 0; }

/* Start page */

.hero { padding: 0 0 4px; }
.hero h1 { max-width: 15em; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 20px; display: flex; flex-direction: column; }
.card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.card header .tag { white-space: nowrap; }
.card .deadline { margin: 0 0 1rem; color: var(--muted); }
.card .deadline time { color: var(--text); font-weight: 600; }
.card .actions { margin-top: auto; }
.card > .button { margin-top: auto; align-self: flex-start; }
.cards-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--muted); }
.card-link h2, .card-link h3 { margin: .6rem 0 .5rem; font-size: 1.1rem; }
.card-link p { margin: 0; font-size: .95rem; }

/* The start page's parts (the draws being played, the latest settled draw and the draws to come) are
   boxes of their own, each with its heading in a bar on top beside an icon in the part's colour
   (Josef, 2 November 2026). On a phone they run from edge to edge. */
.panel { margin-top: 24px; background: #0b181e; border: 1px solid var(--border); border-radius: 16px; }
/* A link to a box lands with its bar below the sticky header, which has two rows below 998 points. */
.panel[id] { scroll-margin-top: 80px; }
@media (max-width: 997px) { .panel[id] { scroll-margin-top: 120px; } }
/* Where the bar is too narrow, the heading wraps and what is beside it stays. */
.panel-head { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 15px 15px 0 0; }
.panel-head h2 { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 auto 0 0; font-size: 1.25rem; }
.panel-head > a { flex: none; font-size: .95rem; font-weight: 600; }
.panel-body { padding: 18px 20px 20px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 197, 61, .12); color: var(--accent); }
.panel-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel-icon-live { background: rgba(92, 200, 255, .14); color: var(--live); }
.panel-icon-done { background: rgba(74, 222, 128, .14); color: var(--good); }
.panel-icon .dot { width: 10px; height: 10px; margin: 0; }
.panel-icon .clock { width: 18px; height: 18px; margin: 0; }
@media (max-width: 600px) {
    .panel { margin-right: -18px; margin-left: -18px; border-width: 1px 0; border-radius: 0; }
    .panel-head { gap: 12px; padding: 10px 18px; border-radius: 0; }
    .panel-head h2 { gap: 10px; font-size: 1.1rem; }
    .panel-icon { width: 30px; height: 30px; border-radius: 9px; }
    .panel-body { padding: 14px 12px 16px; }
}

/* The teams to join, a box per open draw (Josef, 8 October 2026, after Team Reducering on
   reducering.se, with a box per draw instead of per person). One is in sight at a time and the
   others lie beside it, a swipe, a sideways scroll or a click on the arrows in the heading's bar away. */
.section-lead { color: var(--muted); max-width: 46em; margin: -.4rem 0 1.2rem; }
.draws-nav { display: flex; flex: none; align-items: center; gap: 8px; }
.draws-nav[hidden], .draws-dots[hidden] { display: none; }
.draws-count { margin: 0 4px 0 0; color: var(--muted); font-size: .85rem; }
.draws-count strong { color: var(--text); }
.draws-step { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.draws-step:hover:not(:disabled) { border-color: var(--muted); }
.draws-step:disabled { opacity: .35; cursor: default; }
.draws-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.draws-track { position: relative; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.draws-track::-webkit-scrollbar { display: none; }
.draws-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.draws-track > .squad { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.draws-track > .squad[hidden] { display: none; }
/* Only the box in sight and the ones beside it show their teams, so a swipe never finds an empty box
   (app.js). Firefox guesses a page's language from the first 4096 characters of the text that can be
   seen, whatever lang says, and eight lists of the same teams made it take the start page for
   Norwegian (31 October 2026). */
.draws-track > .squad-away .team-list { visibility: hidden; }
/* A mouse drags the boxes sideways like a finger; snapping waits until it lets go. */
.draws-track.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.draws-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.draws-dots button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.draws-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--border); transition: width .2s; }
.draws-dots button:hover::before { background: var(--muted); }
.draws-dots button[aria-current="true"]::before { width: 18px; background: var(--accent); }
/* On a phone the arrows are enough beside the heading; the dots under the box tell how many there are. */
@media (max-width: 520px) {
    .draws-count { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .draws-nav { gap: 6px; }
    .draws-step { width: 34px; height: 34px; }
}

.squad { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: 90px; }
.squad-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px; }
.squad-logo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); font-weight: 900; letter-spacing: -.02em; }
.squad-head h3 { margin: 0; font-size: 1.15rem; }
.squad-head p { margin: 0; color: var(--muted); font-size: .85rem; }
/* When buying stops and when the draw closes, side by side. */
.squad-times { display: flex; gap: 28px; margin: 0 20px 16px; padding: 10px 16px; background: var(--surface-2); border-radius: var(--radius-s); }
.squad-times div { display: flex; flex-direction: column; }
.squad-times dt { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.squad-times dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.squad-draw { position: relative; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
.squad-draw h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 0 0 10px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.squad-status { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (min-width: 720px) {
    .squad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .squad-head { padding-bottom: 18px; }
    .squad-times { margin: 0 20px 0 0; }
    .squad-draw { grid-column: 1 / -1; }
    .squad .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
}
/* A line between the six teams by chance and the teams with other stakes, across both columns. */
.squad .team-split { grid-column: 1 / -1; height: 1px; margin: 6px 0; background: rgba(147, 163, 173, .3); }
/* The box holds the menus of its last row inside: they open upwards. */
.squad .team-row:nth-last-child(-n+2) .follow-menu { top: auto; bottom: calc(100% + 6px); }
.squad-note { margin: 12px 0 0; color: var(--muted); font-size: .85rem; }
.squad-note strong { color: var(--text); }
/* The last half hour of buying: the box is outlined and the time to buy stands out. */
.squad-soon { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: linear-gradient(rgba(255, 197, 61, .07), transparent 140px), var(--surface); }
.squad-soon .squad-buy dd, .squad-soon .squad-status { color: var(--accent); }
.squad-soon .squad-status { font-weight: 800; }
/* Buying has stopped: the teams are dimmed under a banner until the deadline. */
.squad-closed .team-row > :not(.follow) { opacity: .4; }
.squad-closed .squad-buy dd { color: var(--muted); }
.squad-banner { display: none; position: absolute; inset: 0; z-index: 2; place-items: center; margin: 0; overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); pointer-events: none; }
.squad-closed .squad-banner { display: grid; }
.squad-banner span { width: 160%; padding: 12px 0; transform: rotate(-9deg); background: var(--bad); color: #2a0711; font-size: 1.25rem; font-weight: 900; letter-spacing: .16em; text-align: center; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* A team in a list: badge, name and the line that tells it apart, then what can be done with it. */
.team-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.team-row { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 6px 6px 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); }
.team-row > .team-cell { flex: 1; min-width: 0; }
.team-row form { margin: 0; }
.team-row .button { padding: 8px 9px; font-size: .7rem; }
.team-row .badge { width: 32px; height: 32px; border-radius: 8px; font-size: .88rem; }
.team-row .badge-long { font-size: .62rem; }
.team-row .team-cell { gap: 8px; }
.team-row-on { border-color: rgba(255, 197, 61, .5); }
.team-list-page { max-width: 640px; margin-bottom: 1rem; }
.team-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.team-name a, .team-name strong { color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-name a:hover { text-decoration: underline; }
.team-name small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A team's badge. The six teams with Polaren's rows by chance shade from green, the likeliest rows,
   to yellow and orange; the extra krona is outlined in blue, and 5 and 10 kr a row in gold
   (Josef, 8 October 2026). */
.badge { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); color: var(--accent-ink); font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.badge-long { font-size: .68rem; letter-spacing: -.02em; }
.badge-1 { background: #54dd7d; }
.badge-2 { background: #9eda54; }
.badge-3 { background: #ced537; }
.badge-4 { background: #f0ce2f; }
.badge-5 { background: #ffbc32; }
.badge-6 { background: #ffa53a; }
.badge-kb { background: var(--surface); border: 2px solid #5cc8ff; color: #5cc8ff; }
.badge-boost { background: var(--surface); border: 2px solid #e8b84b; color: #e8b84b; }
.badge-plain { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.badge-large { width: 72px; height: 72px; border-radius: 18px; font-size: 1.6rem; }
.badge-large.badge-long { font-size: 1.2rem; }

/* A member follows a team or one coupon of it: a star that opens a small menu. */
.follow { position: relative; flex: none; }
.follow-toggle { display: grid; place-items: center; width: 30px; height: 34px; border-radius: var(--radius-s); color: var(--muted); cursor: pointer; list-style: none; }
.follow-toggle::-webkit-details-marker { display: none; }
.follow-toggle:hover, .follow[open] .follow-toggle { color: var(--text); background: var(--surface); }
.follow-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.follow-on { color: var(--accent); }
.follow-on svg { fill: currentColor; }
.follow-wide .follow-toggle { display: inline-flex; gap: 8px; width: auto; height: auto; padding: 10px 14px; border: 2px solid var(--border); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.follow-wide .follow-on { border-color: var(--accent); }
.follow-menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.follow-menu button { padding: 9px 12px; background: none; border: 0; border-radius: 6px; color: var(--text); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.follow-menu button:hover, .follow-menu button:focus-visible { background: var(--surface-2); }

/* A draw with a row per team: being played, or settled. */
.draw-table { margin-bottom: 16px; padding: 16px 18px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.draw-table-live { border-color: rgba(92, 200, 255, .55); }
.draw-table header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.draw-table h3 { margin: 0; }
.draw-table > p { margin: 2px 0 4px; }
.teams-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-variant-numeric: tabular-nums; }
.teams-table th { padding: 4px 12px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.teams-table td { padding: 7px 12px; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.teams-table td:first-child { border-left: 1px solid var(--border); border-radius: var(--radius-s) 0 0 var(--radius-s); padding-left: 8px; max-width: 280px; }
.teams-table td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.teams-table .num { text-align: right; }
.teams-table tr[data-href] { cursor: pointer; }
.teams-table tbody tr[data-href]:hover td { background: var(--surface); }
.teams-table .badge { width: 30px; height: 30px; border-radius: 7px; font-size: .8rem; }
.teams-table .badge-long { font-size: .6rem; }
.team-missing td { color: var(--muted); }
/* A draw's teams are a name each, without the line under it, in low rows (Josef, 1 November 2026). */
.draw-table .teams-table { border-spacing: 0 4px; }
.draw-table .teams-table td { padding-top: 4px; padding-bottom: 4px; background: var(--bg); }
.draw-table .teams-table .badge { width: 26px; height: 26px; border-radius: 6px; font-size: .74rem; }
.draw-table .teams-table .badge-long { font-size: .54rem; }
.whatif { color: var(--accent); }
/* The coupon of a draw being played: a column per match with its number, its score or kick-off and
   the signs under each other. The outcome of a match that is over is fixed; a pick is yellow, and
   the score of a match being played is outlined. Beside it, or under it on a phone, a line tells who
   plays the match the pointer rests on. */
.coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 6px 0 4px; }
.coupon-matches { display: grid; grid-template-columns: repeat(var(--matches), minmax(0, 52px)); gap: 4px; flex: 0 1 auto; width: calc(var(--matches) * 56px); max-width: 100%; margin: 0; padding: 0; list-style: none; }
.coupon-match { display: grid; grid-template-rows: auto auto repeat(3, 24px); gap: 3px; padding: 4px 3px; border-radius: var(--radius-s); text-align: center; font-variant-numeric: tabular-nums; }
.coupon-match:hover, .coupon-shown { background: var(--surface-2); }
.coupon-no { color: var(--muted); font-size: .7rem; font-weight: 700; line-height: 1.2; }
.coupon-state { overflow: hidden; color: var(--muted); font-size: .74rem; line-height: 1.3; white-space: nowrap; }
.coupon-live .coupon-state { color: var(--live); font-weight: 700; }
.coupon-finished .coupon-state { color: var(--text); }
.coupon-sign { display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: var(--bg); color: var(--text); font-size: .8rem; font-weight: 800; text-decoration: none; }
a.coupon-sign:hover { border-color: var(--muted); }
.coupon-finished .coupon-sign { background: none; color: var(--muted); opacity: .35; }
.coupon-finished .coupon-result { background: var(--muted); color: var(--bg); opacity: 1; }
.coupon-now { border: 1px dashed var(--live); color: var(--live); }
.coupon-sign.coupon-pick, a.coupon-sign.coupon-pick:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.coupon-note { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.coupon-about { margin-right: 10px; }
.coupon-reset { font-weight: 700; white-space: nowrap; }
.coupon-reset-off { visibility: hidden; }
/* The start page folds a draw into a line of how its teams stand together, which names the draw and
   leads to its page; it opens to the table. */
.draw-fold { margin-bottom: 12px; background: var(--surface); border: 1px solid rgba(92, 200, 255, .55); border-radius: var(--radius); }
.draw-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding: 14px 18px; border-radius: var(--radius); cursor: pointer; list-style: none; }
.draw-fold > summary::-webkit-details-marker { display: none; }
.draw-fold > summary:hover { background: var(--surface-2); }
.draw-fold[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.draw-fold > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.draw-fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.draw-fold-name { color: var(--muted); white-space: nowrap; }
.draw-fold-name strong { margin-right: 6px; color: var(--text); font-size: 1.1rem; }
.draw-fold-name a { margin-right: 6px; color: inherit; text-decoration: none; }
.draw-fold-name a:hover { color: var(--text); text-decoration: underline; }
.draw-fold-facts { display: flex; flex-wrap: wrap; gap: 2px 26px; color: var(--muted); font-size: .92rem; }
.draw-fold-facts strong { color: var(--text); font-variant-numeric: tabular-nums; }
.draw-fold-facts strong.good { color: var(--good); }
.draw-fold-facts strong.whatif { color: var(--accent); }
.draw-fold > summary .chip { margin-left: auto; }
.draw-fold .draw-table { margin: 0; padding-top: 4px; background: none; border: 0; }
/* A settled draw on the short start page: what the teams got, without a state to show. */
.draw-fold-settled { border-color: var(--border); }
.draw-fold-settled > summary::after { margin-left: auto; }
.draw-fold-facts strong.bad { color: var(--bad); }
@media (max-width: 700px) {
    .draw-fold > summary { gap: 6px 14px; padding: 12px 14px; }
    .draw-fold-facts { order: 1; flex-basis: 100%; gap: 0 18px; font-size: .88rem; }
    /* The name of the draw wraps between its parts, so that its state stays beside it. */
    .draw-fold-name { flex: 1 1 0; min-width: 0; white-space: normal; }
    .draw-fold-name > * { white-space: nowrap; }
    /* Under the coupon, the line keeps the room of its longest text, so the teams do not move. */
    .coupon-note { min-height: calc(3 * 1.45em); }
}
/* On a phone the tables keep their key columns. A draw's table shows each team by its badge alone:
   the whole row leads to the game. */
@media (max-width: 600px) {
    .draw-table { padding: 14px 12px 6px; }
    .coupon-matches { gap: 3px; }
    .coupon-match { padding: 4px 1px; }
    .coupon-state { font-size: .68rem; letter-spacing: -.02em; }
    .teams-table .wide-only { display: none; }
    .teams-table th { white-space: normal; vertical-align: bottom; }
    .teams-table th, .teams-table td { padding-left: 8px; padding-right: 8px; }
    .teams-table td:first-child { max-width: 46vw; }
    .teams-table .team-name small { display: none; }
    .draw-table .team-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Each team's running net result, small, side by side. */
.sparks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.spark { display: block; padding: 12px 14px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; }
.spark:hover { border-color: var(--muted); }
.spark-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; }
.spark-head .badge { width: 24px; height: 24px; border-radius: 6px; font-size: .65rem; }
.spark-head .badge-long { font-size: .5rem; }
.spark svg { display: block; width: 100%; height: 56px; margin: 8px 0 4px; }
.spark-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }

.games-team { display: block; color: var(--muted); font-size: .8rem; }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin: 0 0 1.1rem; }
.mini dt, .facts dt, .tiles dt { color: var(--muted); font-size: .8rem; }
.mini dd { margin: 0; font-weight: 700; }

.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 18px; color: var(--muted); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--accent); font-weight: 800; margin-bottom: 10px; }
.steps li strong { color: var(--text); }

/* The start page lays out its own width: the hero runs from edge to edge, the rest is in .wrap. */
main.wide { padding-bottom: 72px; min-height: 65vh; }

/* The hero: a stand full of supporters under the floodlights. The crowd (crowd.svg, drawn by
   scripts/make-crowd.php) repeats sideways and fades into the page at the bottom. The heading starts
   close to the menu, half as far down as it first did (Josef, 6 October 2026). */
.landing { position: relative; isolation: isolate; overflow: hidden; padding: 36px 0 316px; text-align: center; background: radial-gradient(ellipse 60% 42% at 50% 82%, rgba(92, 200, 255, .14), transparent 70%), radial-gradient(ellipse 36% 60% at 3% 0%, rgba(255, 233, 168, .13), transparent 70%), radial-gradient(ellipse 36% 60% at 97% 0%, rgba(255, 233, 168, .13), transparent 70%), linear-gradient(#071318, #0b1c24 52%, #133140); }
.landing::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(7, 19, 24, 0), var(--bg)); }
.landing > .wrap { position: relative; z-index: 3; }
.landing-crowd { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 320px; background: center bottom / auto 100% repeat-x; }
/* Two floodlights, each a grid of lamps with a glow and a faint beam towards the pitch. */
.landing-lights span { position: absolute; z-index: 0; top: 30px; left: max(12px, calc(50% - 590px)); width: 62px; height: 42px; border-radius: 5px; background: radial-gradient(circle, #fffdf4 0 2.4px, rgba(255, 228, 150, .6) 3.4px, transparent 5.5px) 3px 3px / 14px 12px, #22343d; box-shadow: 0 0 0 2px #2c414b, 0 0 34px 10px rgba(255, 233, 168, .26), 0 0 130px 56px rgba(255, 233, 168, .07); }
.landing-lights span + span { left: auto; right: max(12px, calc(50% - 590px)); }
.landing-lights span::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1200px; height: 900px; background: conic-gradient(from 112deg at 0 0, rgba(255, 240, 200, 0), rgba(255, 240, 200, .06) 14deg, rgba(255, 240, 200, .025) 32deg, rgba(255, 240, 200, 0) 46deg); pointer-events: none; }
.landing-lights span + span::before { left: auto; right: 50%; background: conic-gradient(from 202deg at 100% 0, rgba(255, 240, 200, 0), rgba(255, 240, 200, .025) 14deg, rgba(255, 240, 200, .06) 32deg, rgba(255, 240, 200, 0) 46deg); }
.landing-lights span::after { content: ""; position: absolute; top: 100%; left: 50%; width: 4px; height: 240px; margin-left: -2px; background: linear-gradient(#2c414b, rgba(44, 65, 75, 0)); }
.landing h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.028em; margin: 0 auto 1.1rem; max-width: none; }
.landing h1 span { display: block; color: var(--accent); }
.landing .lead { margin: 0 auto 1.9rem; max-width: 37em; color: #b6c3cb; }
.landing-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; list-style: none; margin: 24px 0 0; padding: 0; color: var(--muted); font-size: .875rem; }
.landing-facts li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 800; }
/* The games come straight after the stand: the first box sits where the crowd fades out
   (Josef, 6 October 2026). Positioned, so that it is drawn above the hero it overlaps. */
/* Without a draw being played, that is the box of teams (the result in #live is only on the short page). */
.landing + .wrap > #live > .panel:first-child,
.landing + .wrap > #live:not(:has(> .panel:not(.start-short))) + .panel { position: relative; margin-top: -24px; }

/* The short start page, for those who come back (Josef, 24 October 2026; see home.php): what is marked
   start-full goes, what is marked start-short comes. Of the hero only its heading stays, for screen readers. */
.start-short { display: none; }
.start[data-start="short"] .start-short { display: block; }
.start[data-start="short"] .start-full { display: none; }
.start[data-start="short"] .landing { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.start[data-start="short"] .landing > :not(.wrap), .start[data-start="short"] .landing .wrap > :not(h1) { display: none; }
.start[data-start="short"] .landing + .wrap > #live + .panel { position: static; margin-top: 24px; }
.start[data-start="short"] .landing + .wrap > #live > .panel:first-child,
.start[data-start="short"] .landing + .wrap > #live:not(:has(> .panel)) + .panel { position: static; margin-top: 14px; }
.start-new { margin: 18px 0 0; text-align: right; color: var(--muted); font-size: .875rem; }
.start-new button { padding: 0; color: var(--accent); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.start-new button:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .landing { padding: 26px 0 196px; }
    .landing-crowd { height: 196px; }
    .landing-lights span { top: 10px; transform: scale(.5); transform-origin: top left; }
    .landing-lights span + span { transform-origin: top right; }
    .landing .lead { font-size: 1.02rem; margin-bottom: 1.5rem; }
    .landing-facts { gap: 2px 16px; font-size: .82rem; }
}

/* Sharing a system: ten pals arm in arm, drawn like the two in the logo. */
.together { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; margin-top: 3.25rem; padding: 28px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.together h2 { margin: 0 0 .7rem; }
.together p { margin: 0 0 .9rem; }
.together p:last-child { margin: 0; color: var(--muted); }
.together span { color: var(--accent); }
.together-figure { margin: 0; }
.pals { display: block; width: 100%; height: auto; }
.pals use, .pals circle { stroke: var(--surface); stroke-width: 6; paint-order: stroke; }
.pal-light { fill: var(--text); }
.pal-yellow { fill: var(--accent); }
.together-figure figcaption { margin-top: 16px; text-align: center; color: var(--muted); }
.together-figure figcaption strong { color: var(--text); }
@media (max-width: 760px) { .together { grid-template-columns: 1fr; padding: 22px 20px; } }

/* What Polaren promises. */
.section-lead { margin: -.3rem 0 1.4rem; color: var(--muted); font-size: 1.05rem; max-width: 40em; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.promises li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 20px; }
.promises svg { display: block; width: 44px; height: 44px; padding: 9px; border-radius: 10px; background: rgba(255, 197, 61, .12); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promises h3 { margin: .9rem 0 .35rem; font-size: 1.05rem; }
.promises p { margin: 0; color: var(--muted); font-size: .95rem; }
/* On a phone the promises are a list: the icon beside the text instead of above it. */
@media (max-width: 600px) {
    .promises { gap: 10px; }
    .promises li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding: 14px 16px; }
    .promises svg { grid-row: span 2; }
    .promises h3 { margin: 0 0 .2rem; }
}

/* Where the name comes from, and a last way in. */
.story { display: flex; gap: 24px 32px; align-items: center; margin-top: 3.25rem; padding: 28px 32px; border-radius: var(--radius); border: 1px solid rgba(255, 197, 61, .3); background: linear-gradient(120deg, rgba(255, 197, 61, .12), rgba(255, 197, 61, .02) 65%), var(--surface); }
.story img { flex: none; width: 112px; height: 112px; }
.story h2 { margin: 0 0 .6rem; }
.story p { margin: 0 0 1.2rem; max-width: 40em; }
.story .small { margin: 14px 0 0; }
@media (max-width: 640px) {
    .story { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
    .story img { width: 76px; height: 76px; }
}

/* Lists of games */

.profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.profile h1 { margin: 0; }
.profile p { margin: 2px 0 0; }
.profile-main { flex: 1; min-width: 220px; }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 2rem; font-weight: 800; }

.tabs, .pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 14px; }
.tabs a, .pager a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); }
.tabs a:hover, .pager a:hover { color: var(--text); border-color: var(--muted); }
.tabs a[aria-current="page"], .pager a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.tabs a span { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tabs-top { margin-top: 0; margin-bottom: 22px; }
/* On a phone the product tabs keep to one row; on the narrowest it runs edge to edge and scrolls
   sideways (app.js scrolls the one picked into view). */
@media (max-width: 760px) {
    .tabs-top { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 0 18px; scrollbar-width: none; }
    .tabs-top::-webkit-scrollbar { display: none; }
    .tabs-top a { flex: none; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
}
.pager { justify-content: center; }
.pager-gap { color: var(--muted); padding: 7px 2px; }

.table-scroll { overflow-x: auto; }
.games, .compare { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-variant-numeric: tabular-nums; }
.games th, .compare th { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 4px 14px; white-space: nowrap; }
.games td, .compare td { background: var(--surface); padding: 12px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.games td:first-child, .compare td:first-child { border-left: 1px solid var(--border); border-radius: var(--radius-s) 0 0 var(--radius-s); }
.games td:last-child, .compare td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.games .num { text-align: right; }
/* Eight columns share the width: a long game name wraps rather than the table scrolling sideways. */
.games th, .games td { padding-left: 12px; padding-right: 12px; }
.games td[data-label="Spel"], .games td[data-label="Omgång"] { white-space: normal; }
.games a { color: var(--text); text-decoration: none; font-weight: 600; }
.games a:hover { text-decoration: underline; }
.games a .tag { margin-right: 8px; }
.games tbody tr:hover td { background: var(--surface-2); }
/* A row that is a link as a whole lights up as one; its own link is not underlined on top of that. */
.games tr[data-href] { cursor: pointer; }
.games tr[data-href] a:hover { text-decoration: none; }
/* How a game being played stands right now: not final. */
.pending { font-style: italic; color: var(--muted); }

@media (max-width: 700px) {
    .games thead { display: none; }
    .games, .games tbody { display: block; }
    .games tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
    .games td, .games td:first-child, .games td:last-child { background: none; border: 0; border-radius: 0; padding: 0; white-space: normal; }
    .games td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .72rem; }
    .games td[data-label="Spel"], .games td[data-label="Omgång"] { grid-column: 1 / -1; grid-row: 1; font-size: 1.05rem; }
    .games td[data-label="Spel"]::before, .games td[data-label="Omgång"]::before { display: none; }
    .games .num { text-align: left; }
    .games tbody tr:hover td { background: none; }
}

/* Game page */

.game-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.game-head h1 { margin-top: .35rem; }
.game-head p { margin: 0; }
.comment { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 20px 0 0; }

.facts, .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.facts div, .tiles div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px 14px; }
.facts dd, .tiles dd { margin: 2px 0 0; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.facts dd small, .tiles dd small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.tiles { margin: 24px 0 12px; }
.tiles div { background: var(--surface-2); }
/* The tiles on a game page keep their size whatever they say, so that nothing moves when a sign is
   picked: five in a row where there is room, otherwise the last and wordiest gets the width of two. */
.tiles-game { grid-template-columns: repeat(5, 1fr); }
.tiles-game dd small { line-height: 1.3; min-height: 2.6em; }
@media (max-width: 1000px) {
    .tiles-game { grid-template-columns: repeat(3, 1fr); }
    .tiles-game div:last-child { grid-column: span 2; }
}
@media (max-width: 600px) { .tiles-game { grid-template-columns: repeat(2, 1fr); } }
/* Yellow numbers for an outcome the visitor has made up, green when every sign correct is certain.
   A loss stays red even then. */
.tiles-whatif dd { color: var(--accent); }
.tiles-sure dd:not(.bad) { color: var(--good); }
.tiles-key { grid-template-columns: repeat(3, 1fr); }
.tiles-four { grid-template-columns: repeat(4, 1fr); }
.tiles-key dd { font-size: 1.6rem; }
@media (max-width: 640px) { .tiles-key, .tiles-four { grid-template-columns: repeat(2, 1fr); } }

.flash { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .45); color: var(--good); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 8px; }
.flash p { margin: 0; }
.flash-error { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .45); color: var(--bad); margin-top: 20px; }

.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.match { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "no main state" ". signs signs"; gap: 8px 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.match-live { border-color: var(--live); }
.match-no { grid-area: no; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.match-main { grid-area: main; min-width: 0; }
.match-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-main .muted { font-size: .82rem; }
.match-state { grid-area: state; text-align: right; }
.score { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.status { display: block; font-size: .8rem; color: var(--muted); }
.status-live { color: var(--live); font-weight: 700; }

.signs { grid-area: signs; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sign { display: block; text-align: center; font-size: .85rem; line-height: 1.3; padding: 7px 4px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--muted); border: 2px solid transparent; text-decoration: none; font-variant-numeric: tabular-nums; }
.sign b { color: var(--text); margin-right: 3px; }
a.sign:hover { border-color: var(--muted); }
.sign-none { opacity: .5; }
/* The outcome a match counts as: green when the rows have it, red when they do not. */
.sign-on.sign-hit { background: rgba(74, 222, 128, .18); color: var(--good); border-color: rgba(74, 222, 128, .6); }
.sign-on.sign-hit b { color: var(--good); }
.sign-on.sign-miss { background: rgba(251, 113, 133, .14); color: var(--bad); border-color: rgba(251, 113, 133, .55); }
.sign-on.sign-miss b { color: var(--bad); }
/* A match that has not started only counts as a draw for the time being. */
.sign-assumed { border-style: dashed; }
/* Chosen by the visitor. */
.sign.sign-pick, a.sign.sign-pick:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sign.sign-pick b { color: var(--accent-ink); }
.reset { font-size: .9rem; font-weight: 700; margin-top: 1.75rem; }
.reset-off { visibility: hidden; }

@media (min-width: 760px) {
    .match { grid-template-columns: 28px minmax(0, 1fr) 130px 264px; grid-template-areas: "no main state signs"; }
}

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars li { display: grid; grid-template-columns: 62px 1fr 90px; gap: 12px; align-items: center; font-variant-numeric: tabular-nums; }
.bar { height: 12px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; min-width: 3px; background: var(--accent); border-radius: 999px; }
.bar-label { font-weight: 700; }
.bar-value { color: var(--muted); font-size: .9rem; text-align: right; }

/* The best rows as columns, the matches as lines. The labels stay put when it scrolls sideways. */
.rows { border-collapse: separate; border-spacing: 3px; margin-left: -3px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.rows th { font-weight: 700; white-space: nowrap; padding: 0; }
.rows thead th { height: 30px; text-align: center; vertical-align: top; color: var(--text); }
.rows th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 3px 0 0 var(--bg); color: var(--muted); font-weight: 600; text-align: right; padding-right: 10px; }
.cell { width: 26px; min-width: 26px; height: 26px; padding: 0; text-align: center; border-radius: 6px; font-weight: 700; }
.cell-hit { background: rgba(74, 222, 128, .2); color: var(--good); }
.cell-miss { background: rgba(251, 113, 133, .14); color: var(--bad); }
/* The slider that scrolls through the rows: there but invisible until they do not fit. */
.rows-nav { margin-top: 8px; }
.rows-nav p { margin: 4px 0 0; }
.rows-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; visibility: hidden; }
.rows-slider.on { visibility: visible; }
.rows-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
.rows-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 18px; margin-top: -6px; border: 0; border-radius: 999px; background: var(--accent); }
.rows-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
.rows-slider::-moz-range-thumb { width: 44px; height: 18px; border: 0; border-radius: 999px; background: var(--accent); }
.rows-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.updated { margin-top: 24px; }

/* A link to a section lands with its heading below the sticky header. */
h2[id] { scroll-margin-top: 84px; }
@media (max-width: 760px) { h2[id] { scroll-margin-top: 132px; } }

/* Result pages */

/* One line like the coupon, whatever the number of matches: the boxes narrow rather than wrap. */
.correct-row { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 46px); gap: 6px; }
.correct-row li { display: grid; justify-items: center; padding: 5px 0 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); }
.correct-row small { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.correct-row b { color: var(--accent); font-size: 1.4rem; line-height: 1.1; }
.row-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .12em; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.levels { max-width: 560px; }

/* Text pages */

.prose { max-width: 720px; }
.prose header { margin-bottom: 1.2rem; }
.prose header h1 { margin-top: .4rem; }
.prose p, .prose li { font-size: 1.05rem; }
.prose p { margin: 0 0 1.1rem; }
.prose .lead { font-size: 1.2rem; }
.prose h2 { margin-top: 2.4rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose .numbered { list-style: none; padding: 0; counter-reset: step; }
.prose .numbered > li { counter-increment: step; position: relative; padding-left: 48px; margin-bottom: 1.3rem; }
.prose .numbered > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-s); background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.prose .numbered h3 { margin: 0 0 .3rem; padding-top: 3px; }
.prose .numbered p { margin: 0; }
.prose .numbered p + p { margin-top: .6rem; }
.faq dt { font-weight: 700; margin-top: 1.1rem; }
.faq dd { margin: .25rem 0 0; color: var(--muted); font-size: 1.05rem; }
.compare td, .compare th { white-space: normal; }
.compare .num { text-align: right; }

/* Polarenprylar: clothes with Polaren's mark. The pictures are prototypes (scripts/merch/make.py),
   which a banner under the heading says until the shop is open. The page lays out its own width. */

.page { padding-top: 32px; }
.banner { margin: 0; padding: 11px 0 12px; background: var(--accent); color: var(--accent-ink); font-size: .95rem; line-height: 1.4; }
.banner .wrap { display: block; }
.banner strong { font-weight: 800; }
.banner + .wrap { padding-top: 22px; }
.merch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 8px 0 10px; }
@media (max-width: 899px) { .merch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.merch figure { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.merch img { display: block; width: 100%; height: auto; background: #e3e6e8; }
.merch figcaption { display: grid; gap: 2px; padding: 10px 12px 12px; line-height: 1.35; }
.merch figcaption span { color: var(--muted); font-size: .85rem; }

/* Member accounts */

.account-head { max-width: 720px; }
.account-head h1 { margin-top: .4rem; }
.account-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 8px; align-items: start; }
.account-forms h2 { margin: 0; }
.account-forms .form { margin-top: 14px; }
.account-forms .flash { margin: 12px 0 0; }
.form .check { display: flex; align-items: center; gap: 10px; }
.form .check input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent); }
.form .code-input { max-width: 220px; font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.account-settings { max-width: 720px; margin-top: 3rem; }
.account-settings h2 { margin-top: 0; }
.account-settings .form { margin-top: 12px; }
.account-settings .button-danger { margin-left: 0; }
.form-narrow { max-width: 420px; }
.password-login { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.password-login summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.password-login .form { margin-top: 12px; }
.password-login .hint { margin: 12px 0 0; color: var(--muted); font-size: .875rem; }
/* The games a member can claim now. */
.claim-open { margin-bottom: 1rem; }
.claim-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.claim-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.claim-item-on { border-color: rgba(74, 222, 128, .45); }
.claim-item > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.claim-item a { color: var(--text); font-weight: 700; text-decoration: none; }
.claim-item a:hover { text-decoration: underline; }
.claim-item form { display: flex; align-items: center; gap: 10px; margin: 0; }
.chip-missing { color: var(--bad); border-color: rgba(251, 113, 133, .5); }
/* The administrator settles a claim. */
.decide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.decide select { font: inherit; font-size: .9rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 7px 8px; }
.decide .button { padding: 8px 10px; font-size: .72rem; }

/* Admin */

.narrow { max-width: 420px; }
.form { display: grid; gap: 16px; margin-top: 24px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.form input, .form textarea, .form select, .rows-dump textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 12px; width: 100%; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form .optional { font-weight: 400; font-size: .8rem; color: var(--muted); margin-left: 4px; }
.form + h2 { margin-top: 2rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.form .hint { margin: -8px 0 0; color: var(--muted); font-size: .875rem; }
.form .actions { margin-top: 4px; }
.rows-dump { margin-top: 24px; }
.rows-dump summary { cursor: pointer; color: var(--accent); }
.rows-dump textarea { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.visit-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 28px; }
.compare .num { text-align: right; white-space: nowrap; }
.compare .path { overflow-wrap: anywhere; }
.compare .path a { color: var(--text); }
.bars-days li { grid-template-columns: 84px 1fr 48px; }
.bars-days .bar-label { color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.bars-days .bar-label:hover { text-decoration: underline; }
/* With persons counted, the bar is all visitors and its strong part the persons among them. */
.bars-persons li { grid-template-columns: 84px 1fr 72px; }
.bars-persons .bar > span { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.bars-persons .bar b { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* Statistics */

.chart { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-zero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-good { stroke: var(--good); }
.chart-bad { stroke: var(--bad); }

/* Footer */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; padding: 36px 0 28px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.site-footer h2 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 .7rem; }
.site-footer nav a { display: block; color: var(--muted); text-decoration: none; padding: 3px 0; }
.site-footer nav a:hover { color: var(--text); }
.site-footer p { margin: .6rem 0 0; }
.site-footer strong { color: var(--text); }
.footer-note { margin-top: 28px !important; padding-top: 18px; border-top: 1px solid var(--border); font-size: .85rem; }
/* Svenska Spel's responsible gambling logos. A box with the name holds the place until the file is there. */
.footer-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 28px 0 0; padding: 0; }
.footer-logos a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; }
.footer-logos a:hover { opacity: .85; }
.footer-logos img { display: block; width: auto; height: 40px; }
.logo-slot { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-s); font-size: .85rem; font-weight: 800; }
.logo-slot b { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; font-size: .68rem; }

/* Admin: one box per team. */
.team-form { display: grid; gap: 12px; margin: 0; padding: 12px 18px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.team-form legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 700; }
.team-form legend .badge { width: 30px; height: 30px; border-radius: 7px; font-size: .8rem; }
.bars-head { margin-top: 1.8rem; }

/* Before anything else, visitors confirm that they are 18 (see layout.php). */
.age-gate { width: min(440px, calc(100% - 32px)); padding: 32px 28px 22px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); text-align: center; }
.age-gate::backdrop { background: rgba(7, 19, 24, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.age-gate img { display: block; margin: 0 auto 14px; }
.age-gate h2 { margin: 0 0 1.4rem; font-size: 1.35rem; text-wrap: balance; }
.age-gate form { display: grid; gap: 10px; margin: 0; }
.age-gate .button { padding: 15px 18px; font-size: .9rem; text-align: center; }
.age-gate p { margin: 1.2rem 0 0; text-wrap: balance; }
/* Where one who is under 18 is sent instead. */
.under-age { margin: 4vh auto 0; text-align: center; }
.under-age img { display: block; margin: 0 auto 18px; }
.under-age .lead { margin-left: auto; margin-right: auto; text-wrap: balance; }
/* Until Polaren opens (Config::PRE_LAUNCH) the stand from the start page covers every page, with a
   form for a reminder by mail (Josef, 12 October 2026). It scrolls when the screen is too low. */
html:has(.launch-gate[open]) { overflow: hidden; }
.launch-gate { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden auto; color: var(--text); text-align: center; background: radial-gradient(ellipse 60% 42% at 50% 82%, rgba(92, 200, 255, .14), transparent 70%), radial-gradient(ellipse 36% 60% at 3% 0%, rgba(255, 233, 168, .13), transparent 70%), radial-gradient(ellipse 36% 60% at 97% 0%, rgba(255, 233, 168, .13), transparent 70%), linear-gradient(#071318, #0b1c24 52%, #133140); }
.launch-gate::backdrop { background: var(--bg); }
.launch-body { position: relative; isolation: isolate; overflow: hidden; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 16px 300px; }
.launch-content { position: relative; z-index: 3; width: 100%; max-width: 40rem; }
.launch-content > img { display: block; width: 260px; max-width: 70%; height: auto; margin: 0 auto 28px; }
.launch-gate h2 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.028em; font-weight: 800; margin: 0 0 1.6rem; text-wrap: balance; }
.launch-gate h2 span { display: block; color: var(--accent); }
.launch-form { margin: 0 auto; max-width: 32rem; }
.launch-form label { display: block; margin: 0 0 12px; font-size: 1.15rem; color: #b6c3cb; text-wrap: balance; }
.launch-field { display: flex; gap: 8px; }
.launch-field input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: rgba(7, 19, 24, .7); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 14px; }
.launch-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.launch-field .button { padding: 14px 20px; font-size: .9rem; }
.launch-field .button:disabled { opacity: .6; cursor: wait; }
.launch-error { min-height: 1.6em; margin: 8px 0 0; color: var(--bad); font-size: .9rem; }
.launch-error:empty { min-height: 0; margin: 0; }
.launch-form .small { margin: 10px 0 0; }
.launch-done { margin: 0 auto; max-width: 32rem; padding: 16px 20px; border: 1px solid rgba(74, 222, 128, .45); border-radius: var(--radius); background: rgba(74, 222, 128, .1); color: var(--good); font-size: 1.1rem; font-weight: 600; }
.launch-content > .small { margin: 28px 0 0; text-wrap: balance; }
.launch-gate .landing-crowd { height: 280px; }
@media (max-width: 640px) {
    .launch-body { padding: 36px 16px 196px; }
    .launch-gate .landing-crowd { height: 180px; }
    .launch-gate .landing-lights span { top: 10px; transform: scale(.5); transform-origin: top left; }
    .launch-gate .landing-lights span + span { transform-origin: top right; }
    .launch-form label { font-size: 1.02rem; }
}
@media (max-width: 480px) {
    .launch-field { flex-direction: column; }
}