/* Whistline public pages, matching the parent-facing prototype (~/Herd/mobbin/tribuna.html).
   Rules are copied screen by screen; keep the selector names identical to the prototype. */

@font-face{font-family:"Open Runde";font-weight:400;font-style:normal;font-display:optional;src:url("/fonts/OpenRunde-Regular.woff2") format("woff2")}
@font-face{font-family:"Open Runde";font-weight:500;font-style:normal;font-display:optional;src:url("/fonts/OpenRunde-Medium.woff2") format("woff2")}
@font-face{font-family:"Open Runde";font-weight:600;font-style:normal;font-display:optional;src:url("/fonts/OpenRunde-Semibold.woff2") format("woff2")}
@font-face{font-family:"Open Runde";font-weight:700;font-style:normal;font-display:optional;src:url("/fonts/OpenRunde-Bold.woff2") format("woff2")}

/* ─────────────────────────────────────────────────────────────
   TOKENS — the prototype's canvas, cards and glass; text, line, fill,
   live, result, focus, control and modal colours are the admin's
   (resources/css/app.css; docs/look.md, "Colour details"; docs/public/pages.md,
   "Type"). Light ink-3 and win are a shade darker than the admin's #707070
   and --color-ok (same hue): on the grey canvas and fills the admin's
   values stay under 4.5:1 for small text, and so does the white score on
   the win tile (#666666 is 5.1:1 on the canvas, 4.6:1 on a fill; white on
   rgb(42 133 0) is 4.7:1).
   ───────────────────────────────────────────────────────────── */
:root{
  /* type scale (docs/public/pages.md, "Type"): one size per use; scores and board numbers
     grow fluidly (clamp) */
  --fs-caption:11px;  /* labels under numbers, group above the time, bottom navigation */
  --fs-small:12px;    /* names in tiles, form, small badges */
  --fs-meta:13px;     /* sub-lines, break times, tabs, table header */
  --fs-ui:14px;       /* regular UI text, table rows, section headings */
  --fs-control:15px;  /* controls and titles: day tabs, menu, header context, name on the tournament card */
  --fs-head:16px;     /* sheet and modal heading (the admin's data-modal-head, 16/22) */
  --fs-value:18px;    /* kick-off time, more prominent values */
  --fs-score:20px;    /* score in a tile, numbers on the podium */
  --fs-title:24px;    /* page title */
  --fs-hero:30px;     /* tournament and team title */
  --fam:"Open Runde","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --canvas:#F2F2F2; --canvas-rgb:242 242 242;
  /* modals and sheets; in dark mode a step lighter than the cards, like the admin's --color-raise */
  --raise:#F2F2F2; --raise-rgb:242 242 242;
  /* the Zobraziť ďalšie tile: a grey fill in light, in dark the colour of the cards it sits between */
  --more:var(--fill-2); --more-hover:var(--fill);
  --surface:#FFFFFF;
  --card:rgb(255 255 255 / 90%); --card-line:#FFFFFF;
  --card-hover:rgb(247 247 247 / 90%);
  --glass:rgb(255 255 255 / 72%); --glass-hover:rgb(255 255 255 / 92%); --glass-line:#FFFFFF;
  --glass-shadow:0 1px 2px rgb(0 0 0 / 5%), 0 6px 18px rgb(0 0 0 / 7%);
  --ink:#101010;
  --ink-2:#4A4A4A;
  --ink-3:#666666;
  --line:rgb(0 0 0 / 8%);
  --line-2:rgb(0 0 0 / 13%);
  --dot:#D2D2D2;
  --fill:rgb(0 0 0 / 3%);
  --fill-2:rgb(0 0 0 / 5%);
  --live:rgb(216 0 0); --live-rgb:216 0 0;
  /* podium: the background is a light tint of the metal, the number its darker tone */
  --medal-1:212 175 55; --medal-2:146 152 163; --medal-3:176 118 68;
  --medal-1-ink:#8A660C; --medal-2-ink:#565C66; --medal-3-ink:#7A4A1E;
  --win:rgb(42 133 0);
  --loss:rgb(216 0 0);
  --draw:#707070;
  --fill-ink:#FFFFFF;
  --band:rgb(0 0 0 / 5%);
  --seg:#FFFFFF;
  --focus:rgb(59 108 217);
  /* the admin's controls: secondary button (btn-2), the selected tab's frame, dark toast */
  --btn-2:rgb(0 0 0 / 8%); --btn-2-hover:rgb(0 0 0 / 13%);
  --shadow-in:0 2px 3px -1px rgb(0 0 0 / 4%), 0 3px 4px -1.5px rgb(0 0 0 / 4%), 0 0 0 1px rgb(0 0 0 / 13%);
  --frame:#1B1B1B; --frame-ink:#F7F7F7;
  --shadow-pop:0 2px 2px -1px rgb(0 0 0 / 6%), 0 3px 4px -2px rgb(0 0 0 / 6%), 0 6px 8px -3px rgb(0 0 0 / 6%), 0 12px 16px -4px rgb(0 0 0 / 6%), 0 0 0 1px rgb(0 0 0 / 8%);
  /* modal from 720 px: the admin's modal shadow, scrim and animation curve */
  --scrim:linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 15%));
  --shadow-modal:0 24px 56px -12px rgb(0 0 0 / 24%), 0 24px 24px -12px rgb(0 0 0 / 12%), 0 3px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 5%), 0 1px 2px rgb(0 0 0 / 5%), 0 0 0 1px rgb(0 0 0 / 7%);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* quiet cross-fade as in the admin (app.css, --fade): scroll fades and list edges */
  --fade:.15s var(--ease-out);
  /* press as in the admin (app.css, --press): 150 ms on the --ease-out curve, buttons .97, rows and cards .99 */
  --press:.15s var(--ease-out);
  --mine:#8A5A00;
  --mine-fill:rgb(200 140 0 / 10%);
  --br-ice:#0F6E86;  --br-ice-f:rgb(15 110 134 / 9%);
  --br-food:#9C510D; --br-food-f:rgb(166 86 14 / 9%);
  --br-open:#4A2C6B; --br-open-f:rgb(74 44 107 / 9%);
  --br-cup:#8A5A00;  --br-cup-f:rgb(138 90 0 / 10%);
  --win-f:rgb(42 133 0 / 13%); --loss-f:rgb(216 0 0 / 11%); --draw-f:rgb(0 0 0 / 5%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0F0F0F; --canvas-rgb:15 15 15;
    --raise:#222222; --raise-rgb:34 34 34;
    --more:var(--card); --more-hover:var(--card-hover);
    --surface:#1A1A1A;
    --card:#1A1A1A; --card-line:transparent;
    --card-hover:#222222;
    --glass:rgb(255 255 255 / 9%); --glass-hover:rgb(255 255 255 / 15%); --glass-line:rgb(255 255 255 / 12%);
    --glass-shadow:0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 30%);
    --ink:#F2F2F2;
    --ink-2:rgb(242 242 242 / 68%);
    --ink-3:rgb(242 242 242 / 52%);
    --line:rgb(255 255 255 / 8%);
    --line-2:rgb(255 255 255 / 16%);
    --dot:#3A3A3A;
    --fill:rgb(255 255 255 / 4%);
    --fill-2:rgb(255 255 255 / 8%);
    --live:#FF6B70; --live-rgb:255 107 112;
    --medal-1:212 175 55; --medal-2:146 152 163; --medal-3:176 118 68;
    --medal-1-ink:#E7C877; --medal-2-ink:#BFC5D0; --medal-3-ink:#D79E6E;
    --win:#4CC873;
    --loss:#FF6B70;
    --draw:rgb(242 242 242 / 52%);
    --fill-ink:#0F0F0F;
    --band:rgb(255 255 255 / 8%);
    --seg:#222222;
    --focus:rgb(122 162 255);
    --btn-2:rgb(255 255 255 / 10%); --btn-2-hover:rgb(255 255 255 / 14%);
    --shadow-in:0 0 0 1px rgb(255 255 255 / 14%);
    --frame:#000000;
    --shadow-pop:inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 40%), 0 14px 36px rgb(0 0 0 / 55%);
    --scrim:linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 35%));
    --shadow-modal:inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 40%), 0 24px 56px rgb(0 0 0 / 60%);
    --mine:#F0B040;
    --mine-fill:rgb(240 176 64 / 12%);
    --br-ice:#5AC8DE;  --br-ice-f:rgb(90 200 222 / 13%);
    --br-food:#F0A05A; --br-food-f:rgb(240 160 90 / 13%);
    --br-open:#B99AE0; --br-open-f:rgb(185 154 224 / 13%);
    --br-cup:#F0B040;  --br-cup-f:rgb(240 176 64 / 13%);
    --win-f:rgb(76 200 115 / 16%); --loss-f:rgb(255 107 112 / 15%); --draw-f:rgb(255 255 255 / 8%);
  }
}

:root[data-theme="dark"]{
  --canvas:#0F0F0F; --canvas-rgb:15 15 15; --raise:#222222; --raise-rgb:34 34 34; --surface:#1A1A1A; --ink:#F2F2F2;
  --more:var(--card); --more-hover:var(--card-hover);
  --card:#1A1A1A; --card-line:transparent; --card-hover:#222222;
  --glass:rgb(255 255 255 / 9%); --glass-hover:rgb(255 255 255 / 15%); --glass-line:rgb(255 255 255 / 12%);
  --glass-shadow:0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 30%);
  --ink-2:rgb(242 242 242 / 68%); --ink-3:rgb(242 242 242 / 52%);
  --line:rgb(255 255 255 / 8%); --line-2:rgb(255 255 255 / 16%); --dot:#3A3A3A;
  --fill:rgb(255 255 255 / 4%); --fill-2:rgb(255 255 255 / 8%);
  --medal-1:212 175 55; --medal-2:146 152 163; --medal-3:176 118 68;
  --medal-1-ink:#E7C877; --medal-2-ink:#BFC5D0; --medal-3-ink:#D79E6E;
  --live:#FF6B70; --live-rgb:255 107 112; --win:#4CC873; --loss:#FF6B70; --draw:rgb(242 242 242 / 52%); --fill-ink:#0F0F0F;
  --band:rgb(255 255 255 / 8%);
  --seg:#222222;
  --focus:rgb(122 162 255);
  --btn-2:rgb(255 255 255 / 10%); --btn-2-hover:rgb(255 255 255 / 14%);
  --shadow-in:0 0 0 1px rgb(255 255 255 / 14%);
  --frame:#000000;
  --shadow-pop:inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 40%), 0 14px 36px rgb(0 0 0 / 55%);
  --scrim:linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 35%));
  --shadow-modal:inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 40%), 0 24px 56px rgb(0 0 0 / 60%);
  --mine:#F0B040; --mine-fill:rgb(240 176 64 / 12%);
  --br-ice:#5AC8DE;  --br-ice-f:rgb(90 200 222 / 13%);
  --br-food:#F0A05A; --br-food-f:rgb(240 160 90 / 13%);
  --br-open:#B99AE0; --br-open-f:rgb(185 154 224 / 13%);
  --br-cup:#F0B040;  --br-cup-f:rgb(240 176 64 / 13%);
  --win-f:rgb(76 200 115 / 16%); --loss-f:rgb(255 107 112 / 15%); --draw-f:rgb(255 255 255 / 8%);
}

/* ─────────────────────────────────────────────────────────────
   BASE — body 14/20 (--fs-ui), the admin's
   ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  /* double-tap does not zoom — the app reads at one width */
  touch-action:manipulation;
  font-family:var(--fam);font-size:var(--fs-ui);line-height:calc(20 / 14);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* full-width backgrounds (100vw) are wider by the scrollbar's width when it always shows — the page never scrolls
     sideways. The body itself clips (clip, not hidden: no scroll container is created); html has its own
     overflow so the body's does not propagate to the window, where a script or the trackpad could scroll the content. */
  overflow-x:clip;
}
/* keyboard: the element that receives focus scrolls to below the header and above the bottom menu, not under them */
html{overflow-x:clip;scroll-padding-block:calc(var(--hdr-h,0px) + 12px) calc(96px + env(safe-area-inset-bottom))}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.012em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:2px;text-decoration-thickness:1px}
/* links (tabs, cards, rows, menu) cannot be dragged, like buttons in the admin: in Safari a one-pixel mouse move during
   the first press would start dragging the link and the click would be lost (draggable from whistline.js arrives late on press) */
a,img{-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:4px}
/* tiles in a card, team squares in the strip and day tabs reach the edge of a clipping parent: the outline goes inside */
:is(.cardsect .tiles,.hdr-tabs) :focus-visible{outline-offset:-2px}
*{-webkit-tap-highlight-color:transparent}
/* on a touch screen, holding a finger on a link or button opens neither the system preview with a menu (iOS lifts it onto
   a white surface) nor text selection: as in an app, the control just presses (--press) */
@media (hover: none) and (pointer: coarse){
  :is(a,button){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
#view:focus-visible{outline:0}
svg:not(.crest-svg){width:17px;height:17px;flex:none}
.crest-svg{flex:none;display:block}
.muted{color:var(--ink-2)}
.tiny{color:var(--ink-3);font-size:var(--fs-meta)}

/* ─────────────────────────────────────────────────────────────
   PAGE FRAME
   ───────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Preskočiť na obsah — first in the tab order, visible only when focused */
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:100;padding:10px 14px;border-radius:8px;
  background:var(--ink);color:var(--surface);font-weight:600;transform:translateY(-200%)}
.skip:focus{transform:none;outline-color:var(--surface)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
/* content starts below the fixed bar — --hdr-h carries its height (JS sets it exactly;
   until then an estimate applies). The bar has 10 px of padding under the buttons and under the tabs; --view-gap is
   the gap from them to the content: 32 px, under tabs (Program, Poradie) 20 px. The hero (team, O turnaji, Domov before
   and after the tournament) and the game header are the page header themselves, the content below them is 32 px
   (.narrow, .mbody); 22 px stays above them. */
:root:has(#hdr){--hdr-h:106px;--view-gap:32px}
:root:has(.hdr #hdrTabs){--view-gap:20px}
:root:has(#hdr):has(main.view > :is(.narrow,.mid) > .gp-group:first-child,main.view .matchview){--view-gap:22px}
main.view{padding:calc(var(--hdr-h,0px) - 10px + var(--view-gap,22px)) clamp(16px,4vw,40px) 72px;position:relative;z-index:1}
.mid,.narrow{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
/* group tables in Poradie are separate cards: 4 px apart like all cards (.tiles, .narrow, .mbody) */
.mid.standings{gap:4px}
.ptitle h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em}
.mid > .ptitle{padding-top:calc(4px + env(safe-area-inset-top))}

/* ─────────────────────────────────────────────────────────────
   TOURNAMENT CHROME — fixed glass header, tab title, main nav
   ───────────────────────────────────────────────────────────── */
/* Header as in iOS: a fixed bar of glass buttons on top and under it
   a progressive blur — content dissolves into the bar instead of being cut off. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none}
.hdr[hidden]{display:none}
#hdr [hidden]{display:none}
.hdr > .wrap{pointer-events:auto;position:relative;z-index:1;transform:translateZ(0)}
.navfade{display:none}
/* the menu wrapper keeps the same width and margins as .wrap */
.navhold{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px);pointer-events:auto}
/* phone: two masked layers like the iOS fade — a strong blur on top, a soft tinted one reaching lower; the masks fade
   out on the admin's curve (full → 82 % → 30 % → none), so the fade's end is invisible. Like the admin's top bar
   (app.css, [data-top-bar]) it shows only once scrolled (data-at-top, whistline.js), 150 ms. From 720 px the admin's fade. */
.hdr::before,.hdr::after{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;will-change:transform;
  transition:opacity var(--fade)}
:root[data-at-top] .hdr::before,:root[data-at-top] .hdr::after{opacity:0}
.hdr::before{bottom:-4px;
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,rgb(0 0 0 / 82%) 70%,rgb(0 0 0 / 30%) 86%,transparent);
  mask-image:linear-gradient(to bottom,#000 45%,rgb(0 0 0 / 82%) 70%,rgb(0 0 0 / 30%) 86%,transparent)}
.hdr::after{bottom:-10px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,rgb(0 0 0 / 82%) 64%,rgb(0 0 0 / 30%) 84%,transparent);
  mask-image:linear-gradient(to bottom,#000 35%,rgb(0 0 0 / 82%) 64%,rgb(0 0 0 / 30%) 84%,transparent);
  background:linear-gradient(to bottom,rgb(var(--canvas-rgb) / 92%),rgb(var(--canvas-rgb) / 70%) 50%,rgb(var(--canvas-rgb) / 0%))}
.hdr-row{position:relative;display:flex;align-items:center;gap:5px;min-height:44px;padding:calc(10px + env(safe-area-inset-top)) 0 10px}
/* From 720 px the page has 40 px at the top: the bar's buttons are 40 px from the top (the bar sits --hdr-top lower)
   and the content below them. On scroll the bar leaves upward with the content and after --hdr-top sticks to the top
   (JS sets --hdr-shift); until it sticks (data-at-top) it has no fade. O turnaji: sharing has no row of its own — the
   tournament crest and the button are both 40 px from the top (the hero has no -12 px here). On a phone the bar is at
   the top and sharing on O turnaji has its own row above the hero. */
@media (min-width:720px){
  :root{--hdr-top:30px}
  .hdr{top:var(--hdr-shift,var(--hdr-top))}
  main.view{padding-top:calc(var(--hdr-h,0px) - 10px + var(--view-gap,22px) + var(--hdr-top))}
  :root:has(.hdr-float) main.view{padding-top:calc(env(safe-area-inset-top) + 40px)}
  :root:has(.hdr-float) .about-page .gphero{margin-top:0}
  .hdr-float > .wrap{pointer-events:none}
  .hdr-float .acts{pointer-events:auto}
}
.acts{display:flex;gap:5px;flex:none;align-items:center;margin-inline-start:auto;min-height:44px}
/* glass: milky fill, hairline white border, blurred background */
.gbtn,.gpill{
  cursor:pointer;color:var(--ink);text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  transition:transform var(--press),background-color .12s ease;
}
.gbtn{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center}
/* two buttons side by side sit in one glass pill as in iOS —
   the group carries the glass, the buttons inside are transparent */
.ggroup{display:inline-flex;align-items:center;flex:none;height:44px;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
.ggroup .gbtn{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  width:46px;height:42px;border-radius:21px;margin:0 -1px}
.ggroup .gbtn:first-child{margin-inline-start:0}.ggroup .gbtn:last-child{margin-inline-end:0}
@media (hover: hover){.ggroup .gbtn:hover{background:var(--glass-hover)}}
/* phone: the round buttons (theme, Zdieľať, Späť, the sheet bar's × and ‹) and the brand pill without the blur, on the
   solid surface: they sit over the soft edge (.pblur), which already blurs the content under the bar, and every blur
   layer is redrawn in each frame of a scroll */
@media (max-width:719px){
  .gbtn,.gpill,.ggroup{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* when all buttons are hidden the group disappears — otherwise an empty border would remain */
.ggroup:not(:has(> :not([hidden]))){display:none}
/* the only visible button in a group is a circle, not an oval */
.ggroup:not(:has(> :not([hidden]) ~ :not([hidden]))) > .gbtn{width:42px;margin:0}
.gbtn svg:not(.crest-svg){width:20px;height:20px;stroke-width:2}
@media (hover: hover){.gbtn:hover,.gpill:hover{background:var(--glass-hover)}}
.gbtn:active,.gpill:active{transform:scale(.97)}
.gbtn.on{color:var(--mine)}
.gbtn.star.on svg{fill:currentColor}
/* press on everything clickable: controls (tabs, bottom navigation, segments, contacts, arrows, teams) to .97 like
   buttons; whole cards and rows to .99 so a wide row does not visibly shrink; with a transition back */
.segb,.ir-act,.pgf-crest,.tsq,.lsb-link,.ped-top,.tcard,.ntile,.lsb.stack,.tcell,.vn-pin,.opt,.moretile,table.tbl tr:has(> td > a.tcell){transition:scale var(--press)}
:is(.htab,.navlink,.segb,.ir-act,.swipehint,.pgf-crest,.tsq,.lsb-link,.ped-top,.teamcell,.vn-pin,.pgrow .dots button):active{scale:.97}
/* a table row presses as a whole, not just its link: a tap anywhere in the row opens the team (whistline.js), so
   the whole row shrinks */
:is(.tcard,.ntile,.lsb.stack,.tcell:not(table.tbl .tcell),.opt,.moretile,table.tbl tr:has(> td > a.tcell)):active{scale:.99}
/* theme toggle: the moon in light, the sun in dark, handled by CSS, not script. Both icons share one cell and cross-fade
   (shrinking to .25, 4px blur, .3s); with reduced motion only the cross-fade */
.gbtn .ico-moon,.gbtn .ico-sun{grid-area:1/1;display:grid;place-items:center;
  transition:opacity .3s cubic-bezier(.2,0,0,1),scale .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1)}
.gbtn .ico-sun{opacity:0;scale:.25;filter:blur(4px)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gbtn .ico-moon{opacity:0;scale:.25;filter:blur(4px)}
  :root:not([data-theme="light"]) .gbtn .ico-sun{opacity:1;scale:1;filter:none}
}
:root[data-theme="dark"] .gbtn .ico-moon{opacity:0;scale:.25;filter:blur(4px)}
:root[data-theme="dark"] .gbtn .ico-sun{opacity:1;scale:1;filter:none}
:root[data-theme="light"] .gbtn .ico-moon{opacity:1;scale:1;filter:none}
:root[data-theme="light"] .gbtn .ico-sun{opacity:0;scale:.25;filter:blur(4px)}
@media (prefers-reduced-motion: reduce){ .gbtn .ico-moon,.gbtn .ico-sun{scale:1 !important;filter:none !important} }
/* tournament pill: the organiser's crest and the name — a tap switches the tournament */
.gpill{display:inline-flex;align-items:center;height:44px;padding:0 10px;border-radius:22px;
  min-width:0;flex:0 1 auto;text-align:start;font-size:var(--fs-meta);font-weight:600;letter-spacing:-.015em}
.bname{display:flex;align-items:center;gap:4px;min-width:0}
.bname .crest-svg{width:24px;height:auto;flex:none}
.bname svg:not(.crest-svg){width:20px;height:20px;flex:none;margin:0 3px}
.t-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* when the large title scrolls under the bar, the bar shows the page name —
   the pill then shrinks to the crest alone so the name has room */
.hdr-name{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + env(safe-area-inset-top)/2));
  max-width:calc(100% - 108px);display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-value);font-weight:600;letter-spacing:-.014em;opacity:0;transition:opacity .18s ease;pointer-events:none}
.hdr-name > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-name .crest-svg{width:22px;height:auto;flex:none}
:root[data-scrolled] .hdr-name{opacity:1}
:root[data-scrolled] .gpill{width:44px;padding:0 0 0 10px;justify-content:flex-start;border-radius:50%}
:root[data-scrolled] .gpill .t-name{display:none}
/* Môj tím's Zmeniť tím: the text in a pill, on a phone after scrolling only the swap icon in a circle */
#btnTeam{flex:none;gap:6px;padding:0 15px;white-space:nowrap}
#btnTeam[hidden]{display:none}
#btnTeam svg{display:none;width:20px;height:20px;flex:none}
@media (max-width:719px){
  :root[data-scrolled] #btnTeam{width:44px;padding:0;justify-content:center}
  :root[data-scrolled] #btnTeam svg{display:block}
  :root[data-scrolled] #btnTeam span{display:none}
}
/* the tab title sits on the left of the bar, like "Inbox" in a native app */
.hdr-title{margin:0;flex:1;min-width:0;font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:font-size .2s var(--ease-out)}
/* once scrolled (the bar stuck, data-hdr-stuck from whistline.js) the title in the bar is smaller — 18 px like the page
   name in the bar; the buttons set the bar's height, so it does not change */
:root[data-hdr-stuck] .hdr-title{font-size:var(--fs-value)}
@media (prefers-reduced-motion: reduce){.hdr-title{transition:none}}

/* the tab's switches (days) sit in the fixed bar under the title — the selected one has the selected segment's background and frame, the others are plain text */
/* the bar scrolls sideways and so also clips vertically: 2 px of padding keep the selected tab's frame whole, the margin gives them back */
/* 2 px on the sides so the scrolling row does not cut the buttons' 1 px outline; a negative margin keeps them at the content's edge */
.hdr-tabs{display:flex;gap:2px;margin:2px -2px 0;padding:2px 2px 10px;overflow-x:auto;scrollbar-width:none}
.hdr-tabs::-webkit-scrollbar{display:none}
.htab{
  cursor:pointer;white-space:nowrap;padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:var(--fs-control);font-weight:500;color:var(--ink-3);
  transition:background-color .15s ease-out,color .15s ease-out,scale var(--press);
}
.htab[aria-selected="true"],.htab[aria-current="page"]{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--shadow-in)}
@media (hover: hover){.htab:hover{color:var(--ink)}}
.htabs{flex:none;display:flex;gap:2px}
/* when the tabs do not fit in the row, a button with the current choice replaces them — it looks like the selected tab,
   with picker chevrons; a tap opens the picker in a bottom sheet */
.hmenu{display:none}
.hdr-tabs[data-menu] .htabs{display:none}
.hdr-tabs[data-menu] .hmenu{display:block}
/* groups in O turnaji: when any tab gets an ellipsis, a button with a picker in a sheet replaces them (like the days in Program) */
.segsel:not([data-menu]) > .segsel-btn{display:none}
.segsel[data-menu] > .seg{display:none}
.segsel[data-menu] > .segsel-btn{display:inline-flex;max-width:calc(100% - 20px);margin:0 10px 10px;background:var(--btn-2);box-shadow:none}
@media (hover: hover){.segsel[data-menu] > .segsel-btn:hover{background:var(--btn-2-hover)}}
.segsel-btn > span{overflow:hidden;text-overflow:ellipsis}
.hmenu-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;padding:8px 12px 8px 14px;border-radius:999px;
  font-size:var(--fs-control);font-weight:600;color:var(--ink);background:var(--seg);box-shadow:var(--shadow-in);
  transition:scale var(--press)}
.hmenu-btn svg{width:16px;height:16px;color:var(--ink-3)}
.hmenu-btn:active{scale:.97}
/* picker in a sheet: a row with the name (and under it the weekday, date, number of games), the Dnes badge on the right;
   the selected row is tinted and has a check. A long list scrolls inside the sheet. */
/* the options' tint does not stick out of the sheet's grid; the sheet title is indented like their text and the check sits under the × */
.opts{display:flex;flex-direction:column;gap:2px;max-height:min(60dvh,520px);overflow-y:auto;overscroll-behavior:contain}
/* scrolled-list edges as in the admin (app.css, x-scroll-fade): the list itself fades out over 16 px at an edge with more
   beyond it (data-scrolled top / left, data-more bottom / right; whistline.js wireScrollFade), on the same curve */
@property --edge-start{syntax:'<length>';inherits:false;initial-value:0px}
@property --edge-end{syntax:'<length>';inherits:false;initial-value:0px}
:is(.opts,.pick-list){
  -webkit-mask-image:linear-gradient(to bottom,transparent,rgb(0 0 0 / 30%) calc(var(--edge-start) * .25),rgb(0 0 0 / 82%) calc(var(--edge-start) * .55),#000 var(--edge-start),
    #000 calc(100% - var(--edge-end)),rgb(0 0 0 / 82%) calc(100% - var(--edge-end) * .55),rgb(0 0 0 / 30%) calc(100% - var(--edge-end) * .25),transparent);
  mask-image:linear-gradient(to bottom,transparent,rgb(0 0 0 / 30%) calc(var(--edge-start) * .25),rgb(0 0 0 / 82%) calc(var(--edge-start) * .55),#000 var(--edge-start),
    #000 calc(100% - var(--edge-end)),rgb(0 0 0 / 82%) calc(100% - var(--edge-end) * .55),rgb(0 0 0 / 30%) calc(100% - var(--edge-end) * .25),transparent);
  transition:--edge-start var(--fade),--edge-end var(--fade)}
:is(.opts,.pick-list)[data-scrolled]{--edge-start:16px}
:is(.opts,.pick-list)[data-more]{--edge-end:16px}
.sheet-card:has(.opts) .sheet-h h3{padding-inline-start:12px}
.opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:9px 12px;border-radius:14px;cursor:pointer;text-align:start;width:100%;
  color:var(--ink);text-decoration:none}
@media (hover: hover){.opt:hover{background:var(--fill)}}
.opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.opt .nm{font-size:var(--fs-ui);font-weight:500;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .sub{font-size:var(--fs-meta);line-height:18px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt-badge{flex:none;font-size:var(--fs-small);font-weight:600;line-height:16px;padding:3px 8px;border-radius:999px;background:var(--ink);color:var(--canvas)}
.opt-check{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--ink);visibility:hidden}
.opt-check svg{width:18px;height:18px}
.opt[aria-current]{background:var(--fill)}
.opt[aria-current] .nm{font-weight:600}
.opt[aria-current] .opt-check{visibility:visible}

.nav{flex:none;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.navpill{display:contents}
.nav::-webkit-scrollbar{display:none}
.navlink{
  cursor:pointer;font-size:var(--fs-control);color:var(--ink-3);white-space:nowrap;text-decoration:none;
  display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:2px solid transparent;
}
@media (hover: hover){.navlink:hover{color:var(--ink)}}
.navlink[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.navlink .badge{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none}
.navlink svg{display:none}
.navlink[hidden]{display:none}

@media (max-width:719px){
  :root:has(#hdr){--hdr-h:64px}
  .t-name{font-size:var(--fs-control)}
  .nav{padding-top:10px;gap:20px}
  .navlink{padding-bottom:10px;font-size:var(--fs-ui)}
  main.view{padding:calc(var(--hdr-h,0px) - 10px + var(--view-gap,22px)) clamp(16px,4vw,40px) calc(92px + env(safe-area-inset-bottom))}

  /* navigation on mobile: a full-width glass bar with four tabs (icon and name), always 21 px from the bottom */
  .nav{
    position:fixed;left:14px;right:14px;bottom:21px;z-index:40;
    display:flex;align-items:center;gap:10px;
    background:none;border:0;box-shadow:none;padding:0;overflow:visible;
  }
  .navpill{
    background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  }
  .navpill{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:6px;border-radius:32px;will-change:transform}
  /* under the menu the content dissolves the same way as at the top — a separate layer behind the pill */
  .navfade{display:block;position:fixed;left:0;right:0;bottom:0;z-index:39;pointer-events:none;
    height:calc(104px + env(safe-area-inset-bottom))}
  /* the fade's and the menu's blurs have their own layer: otherwise, when the content under them changes (tabs, a new page),
     iOS skips backdrop-filter for a moment and the content flashes */
  .navfade::before,.navfade::after{content:"";position:absolute;inset:0;pointer-events:none;will-change:transform}
  .navfade::before{
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    -webkit-mask-image:linear-gradient(to top,#000 40%,transparent);
    mask-image:linear-gradient(to top,#000 40%,transparent)}
  .navfade::after{
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);
    mask-image:linear-gradient(to top,#000 30%,transparent);
    background:linear-gradient(to top,rgb(var(--canvas-rgb) / 92%),rgb(var(--canvas-rgb) / 70%) 50%,rgb(var(--canvas-rgb) / 0%))}
  .navlink{
    position:relative;flex-direction:column;justify-content:center;gap:3px;min-height:50px;
    padding:5px 2px;border-bottom:0;border-radius:24px;color:var(--ink-2);
    font-size:var(--fs-caption);line-height:1.2;overflow:hidden;
    transition:background-color .15s ease-out,scale var(--press);
  }
  .navlink span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navlink svg{display:block;width:22px;height:22px;stroke-width:1.8}
  .navlink .crest-svg{width:22px;height:auto}
  /* the selected tab has a soft tint */
  .navlink[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--fill-2);border-bottom-color:transparent}
  .navlink .badge{position:absolute;top:4px;inset-inline-start:calc(50% + 7px);width:7px;height:7px;box-shadow:0 0 0 2px var(--surface)}
  /* Môj tím: a glass circle of its own next to the pill, with the star or the followed team's crest; the name is for a
     screen reader only */
  .navlink.me{flex:none;width:62px;height:62px;min-height:0;padding:0;border-radius:50%;gap:0;
    background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5)}
  .navlink.me span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .navlink.me .crest-svg{width:28px;height:auto}

  /* on mobile the title is a touch smaller so a longer tournament name fits */
  .hdr-title{font-size:var(--fs-title)}
  .ptitle{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.2}
}

/* ─────────────────────────────────────────────────────────────
   SECTIONS & GRID
   ───────────────────────────────────────────────────────────── */
.grid-auto{display:grid;gap:16px;align-items:start}
.sect{display:flex;flex-direction:column;gap:12px}
.sect-h{display:flex;align-items:baseline;gap:12px;padding:0}
/* icon by a heading: aligned to the text, in its weight */
.sect-h h2{font-size:var(--fs-ui);line-height:20px;font-weight:600;color:var(--ink)}
.sect-h .rule{flex:1}
.sect-h .count{font-size:var(--fs-meta);color:var(--ink-3);margin-inline-start:auto}
.sect-h.live h2{color:var(--live)}

/* ─────────────────────────────────────────────────────────────
   SMALL BITS
   ───────────────────────────────────────────────────────────── */
.chev{color:var(--ink-3);transition:transform .15s ease}
@media (prefers-reduced-motion: reduce){ .chev{transition:none} .gbtn:active,.gpill:active{transform:none} :is(.htab,.hmenu-btn,.navlink,.segb,.ir-act,.swipehint,.pgf-crest,.tsq,.lsb-link,.ped-top,.tcard,.ntile,.lsb.stack,.tcell,.teamcell,.vn-pin,.pgrow .dots button,.opt,.moretile,table.tbl tr:has(> td > a.tcell)):active{scale:none} .pgrow .dots button{transition:background-color .15s ease-out} }
.pill{font-size:var(--fs-meta);color:var(--ink-3)}
.pill.live{color:var(--live)}
.pill.mine{color:var(--mine)}

/* ─────────────────────────────────────────────────────────────
   TOURNAMENT CARD (screen 0 — tournaments list)
   ───────────────────────────────────────────────────────────── */
.tcard{
  display:flex;align-items:center;gap:16px;padding:16px;background:var(--surface);border-radius:20px;
  cursor:pointer;text-align:start;width:100%;text-decoration:none;
}
@media (hover: hover){.tcard:hover{background-color:var(--card-hover)}}
.tcard .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tcard .ttl{font-size:var(--fs-control);font-weight:600;letter-spacing:-.012em}
.tcard.live .ttl{color:var(--ink)}

/* ─────────────────────────────────────────────────────────────
   MATCH TILE (.ntile) — crest + name each side, middle column with
   group · time or score · subline. Reused by Nasleduje and Program.
   ───────────────────────────────────────────────────────────── */
.pulse{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
@media (prefers-reduced-motion: no-preference){
  .pulse{animation:pulse 2s ease-out infinite}
  @keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
}
/* Naživo under the score reads the same everywhere, red */
.ntile .nmid .nt-live{color:var(--live);font-weight:600;letter-spacing:-.01em}
.dim{color:var(--ink-3)}
/* what is happening right now breathes — you find it in the list at first glance. The red frame sits on its own layer (::after) above
   the tile's frame and only its opacity changes, so the tile (with the blur under it) is not repainted */
.ntile.now,.brow.tile.now{position:relative;border-color:transparent}
/* a break between tiles has no frame — it gets a transparent one so the red has something to sit on */
.brow.tile.now{border:1px solid transparent}
.ntile.now::after,.brow.tile.now::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid rgb(var(--live-rgb) / 62%);box-shadow:inset 0 0 0 .5px rgb(var(--live-rgb) / 62%);
  animation:nowring 2.2s ease-in-out infinite}
/* in a card a tile has only a top line: the red is only an inner rim */
.cardsect .tiles > .ntile.now{border-top-color:var(--line)}
.cardsect .tiles > .ntile.now::after{inset:0;border:0}
@keyframes nowring{0%,100%{opacity:1}50%{opacity:.29}}
@media (prefers-reduced-motion: reduce){
  .ntile.now::after,.brow.tile.now::after{animation:none;opacity:.89}
}
/* the tile of a running game does not need to pulse where it is the only one */
.noring .ntile.now{border-color:var(--card-line)}
.noring .ntile.now::after{content:none}
.tiles{display:flex;flex-direction:column;gap:4px;container-type:inline-size}
.ntile{
  display:flex;align-items:center;gap:5px;width:100%;
  background:var(--surface);border-radius:20px;padding:11px 8px;
  cursor:pointer;text-align:start;
}
@media (hover: hover){.ntile:hover{background-color:var(--card-hover)}}
/* a tile off screen is neither styled nor laid out until it scrolls near (a day's Program is some 40 of them, most of the
   swap's work on a phone); it keeps its last height, a phone tile's 87 px before its first. It clips its own paint, so a
   running game's ring (1 px outside) keeps the plain rendering and the focus ring is drawn inside the tile. Zobraziť ďalšie
   zápasy measures its list to grow it, so the tiles in it render in full */
.ntile:not(.now){content-visibility:auto;contain-intrinsic-size:auto 87px}
details.more-block .ntile{content-visibility:visible}
.ntile:focus-visible{outline-offset:-2px}
.nt-top{
  max-width:100%;font-size:var(--fs-small);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ntile .nt{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.ntile .nm{
  max-width:100%;min-width:0;font-size:var(--fs-small);font-weight:500;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ntile .nt.ph{color:var(--ink-3)}
.ntile .nt.mine .nm{color:var(--mine)}
.ntile .nmid{
  flex:none;width:clamp(94px,27cqw,132px);min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.ntile .nmid b{font-size:var(--fs-value);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* when the result alone is in the middle, it is the same size as the score in the schedule */
.ntile .nmid b.sc{font-size:var(--fs-score);letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:.3em}
/* the colon as two dots — the same piece as in the game detail */
.ntile .nmid b.sc .dots{display:flex;flex-direction:column;gap:.2em}
.ntile .nmid b.sc .dots::before,.ntile .nmid b.sc .dots::after{
  content:"";display:block;width:.13em;height:.13em;border-radius:50%;background:var(--ink-3);
}
/* kick-off time: as readable as the score; the colon tells it apart from a result */
.ntile .nmid b .tm{font-size:var(--fs-value);font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* direct children only — otherwise the rule would also shrink the numbers in the result */
.ntile .nmid > span{font-size:var(--fs-small);color:var(--ink-3);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* the three rows in the middle have a fixed height — the tile is equally tall before the game, live and after it */
.ntile .nmid > .nt-top,.ntile .nmid > span{min-height:16px;line-height:16px}
/* the context is a point smaller than the caption — the whole group name has to fit */
.ntile .nmid > .nt-top{font-size:var(--fs-caption)}
.ntile .nmid > b{display:flex;align-items:center;justify-content:center;min-height:24px;line-height:1}
/* Tabular digits wherever numbers change or stand under each other. */
.tn{white-space:nowrap}
[data-rel],.ntile .nmid,.brow .when{font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────
   BREAK ROW (.brow) — time · icon · label, tinted in its colour
   ───────────────────────────────────────────────────────────── */
.brow{
  display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line);width:100%;text-align:start;
  cursor:default;color:var(--bc,var(--ink-3));background:var(--bf,transparent);
}
.brow .blabel{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-meta);font-weight:500}
.brow .blabel svg:not(.crest-svg){width:17px;height:17px;color:var(--bc,var(--ink-3))}
.brow .when{font-size:var(--fs-meta);color:var(--bc,var(--ink-3));line-height:1.3}
/* a break between tiles is also a tile, just shorter. Time, icon and label are in one row; a label that
   does not fit beside them moves whole to a second row under the time and icon */
.brow.tile{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:9px;row-gap:3px;
  border-radius:20px;border-bottom:0;padding:9px 12px;
}
.brow.tile .blabel{display:contents}
.brow.tile .blabel svg:not(.crest-svg){flex:none;margin-inline-start:-1px}
.brow.tile .nm{min-width:0;max-width:100%;text-align:center;text-wrap:balance;overflow-wrap:anywhere;line-height:1.4}

/* ─────────────────────────────────────────────────────────────
   LIVE BOARDS — running games on the home page
   ───────────────────────────────────────────────────────────── */
.boards{display:grid;gap:14px}
.boards.swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);
  scroll-padding-inline:clamp(16px,4vw,40px)}
.boards.swipe::-webkit-scrollbar{display:none}
.boards.swipe > .bslide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* row under the board: dots in the middle, back / forward swipe hints on the sides */
.pgrow{position:relative;display:flex;align-items:center;justify-content:center;min-height:26px;margin-top:12px}
.swipehint{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:5px;min-height:24px;padding:2px 4px;cursor:pointer;
  font-size:var(--fs-small);color:var(--ink-3);white-space:nowrap;background:none;border-radius:9px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease-out,visibility 180ms,scale var(--press)}
.swipehint.prev{inset-inline-start:0}
.swipehint.next{inset-inline-end:0}
.swipehint.on{opacity:1;visibility:visible;pointer-events:auto}
/* the arrow is a character in <i> — the font has no italic, the browser would slant it */
.swipehint i{font-style:normal}
.dots{display:flex;justify-content:center;gap:2px}
/* dots: a 24 px tall target, sideways only up to the next dot — targets do not overlap; Ďalší zápas has the same offset */
.pgrow .dots{gap:12px;margin-top:0}
.pgrow .dots button{position:relative;width:6px;height:6px;padding:0;border-radius:3px;cursor:pointer;
  background:var(--line-2);transition:width .22s ease-out,background-color .15s ease-out,scale var(--press)}
.pgrow .dots button::before{content:"";position:absolute;inset:-9px -6px}
.pgrow .dots button[aria-current="true"]{width:20px;background:var(--ink)}

.lsbw{container-type:inline-size;width:100%}
.lsb{
  position:relative;isolation:isolate;
  display:grid;
  grid-template-columns:minmax(min-content,1fr) auto minmax(0,auto) auto minmax(min-content,1fr);
  align-items:center;gap:clamp(7px,2.4cqw,16px);
  width:100%;text-align:start;cursor:pointer;color:#fff;
  border-radius:24px;overflow:hidden;
  padding:clamp(12px,3cqw,16px) clamp(14px,3.6cqw,22px);
  background-color:#0A0A0C;background-image:var(--g);background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 14%),0 8px 24px rgb(0 0 0 / 14%);
}
.lsb-team{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lsb > .lsb-team:first-child{justify-self:start}
.lsb > .lsb-team:last-child{justify-self:end}
.lsb-team .crest-svg{width:clamp(28px,9.5cqw,52px);height:auto}
/* on the dark board a dark logo would get lost — it gets a light disc */
.lsb .crest-svg.logo .crest-bg{fill:rgb(255 255 255 / 94%)}
/* name with the jersey in one row — a long name gets an ellipsis, the jersey stays */
.sqj{flex:none;display:block}
.lsb.stack .lsb-full{
  display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;
  font-size:var(--fs-ui);font-weight:500;line-height:1.25;color:inherit;
}
.lsb.stack .lsb-full .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:360px){ .lsb.stack .lsb-full{font-size:var(--fs-meta)} }
.lsb-top,.lsb-rink,.lsb-final{font-variant-numeric:tabular-nums}
.lsb.stack > .lsb-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
/* middle: label · number · caption close together, as in the game tile */
.lsb.stack .lsb-mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding-inline:6px}
/* group · surface above the score: one line the width of the middle, a long name gets an ellipsis */
.lsb.stack .lsb-top{
  display:block;max-width:100%;min-height:24px;line-height:24px;
  font-size:var(--fs-meta);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* caption under the number (surface, day, countdown): the width of the middle, at most two lines, then an ellipsis */
.lsb.stack .lsb-rink{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  max-width:100%;font-size:var(--fs-meta);line-height:18px;min-height:18px;text-align:center;overflow-wrap:anywhere;
}
.lsb-mid{
  display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center;
  padding-inline:clamp(8px,3.4cqw,22px);
}
.lsb-rink{
  font-size:clamp(11px,2.7cqw,13px);font-weight:600;color:rgb(255 255 255 / 62%);max-width:100%;
  min-height:1.2em;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;
}
/* Naživo under the score, red */
.lsb-rink .lsb-now{color:var(--live);font-size:var(--fs-ui);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}

/* Live game on Domov in the light theme: no card, the score lies directly on
   the page canvas, texts in ink. The dark theme keeps the full gradient. */
.boards .lsb{
  background-color:transparent;background-image:none;color:var(--ink);box-shadow:none;
  padding-inline:clamp(6px,2cqw,12px);
}
/* tint in the screen background: a full-width layer under the header and the score */
.homehero{position:relative}
.homehero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * (var(--hdr-h,0px) - 10px + var(--view-gap,22px) + var(--hdr-top,0px)));bottom:-32px;left:50%;width:100vw;transform:translateX(-50%);
  background-image:var(--gc);opacity:.14;
  -webkit-mask-image:linear-gradient(#000 44%,transparent);mask-image:linear-gradient(#000 44%,transparent);
}
/* running game: crest · name in three shared rows, in the middle the red time above the score with dots */
.boards .lsb.stack{
  grid-template-columns:minmax(0,1fr) clamp(88px,29cqw,150px) minmax(0,1fr);
  align-items:center;column-gap:8px;padding-block:28px 8px;
}
.boards .lsb.stack > .lsb-team{justify-self:stretch}
.boards .lsb.stack .lsb-top{color:var(--ink-2)}
.boards .lsb.stack .lsb-team .crest-svg{width:clamp(54px,17cqw,74px)}
.boards .lsb.stack .lsb-final{
  display:flex;align-items:center;justify-content:center;gap:.28em;
  font-size:clamp(27px,9cqw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
}
.boards .lsb.stack .lsb-final i{display:flex;flex-direction:column;gap:.2em;font-size:1em}
.boards .lsb.stack .lsb-final i::before,.boards .lsb.stack .lsb-final i::after{
  content:"";display:block;width:.125em;height:.125em;border-radius:50%;background:currentColor;opacity:.5;
}
.boards .lsb.stack .lsb-final b{font-weight:600;font-variant-numeric:tabular-nums}
.boards .lsb .lsb-rink,.boards .lsb .lsb-top{color:var(--ink-2)}
.boards .lsb .crest-svg.logo .crest-bg{fill:transparent}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .boards .lsb{background-color:transparent;background-image:none;box-shadow:none;color:#fff}
  :root:not([data-theme="light"]) .boards .lsb .lsb-rink,:root:not([data-theme="light"]) .boards .lsb .lsb-top{color:rgb(255 255 255 / 62%)}
  :root:not([data-theme="light"]) .boards .lsb .crest-svg.logo .crest-bg{fill:rgb(255 255 255 / 94%)}
  :root:not([data-theme="light"]) .homehero::before{opacity:.26}
}
:root[data-theme="dark"] .boards .lsb{background-color:transparent;background-image:none;box-shadow:none;color:#fff}
:root[data-theme="dark"] .boards .lsb .lsb-rink,:root[data-theme="dark"] .boards .lsb .lsb-top{color:rgb(255 255 255 / 62%)}
:root[data-theme="dark"] .boards .lsb .crest-svg.logo .crest-bg{fill:rgb(255 255 255 / 94%)}
:root[data-theme="dark"] .homehero::before{opacity:.26}
@media (max-width:719px){
  .boards .lsb{padding:28px 16px 8px;gap:10px}
  .boards .lsb-team{gap:7px}
  .boards .lsb-team .crest-svg{width:clamp(40px,13cqw,54px)}
  .boards .lsb-mid{gap:6px;padding-inline:10px}
  .boards .lsb-rink{font-size:var(--fs-meta)}
}

/* ─────────────────────────────────────────────────────────────
   TOAST — short confirmation ("Odkaz skopírovaný.") or error; a longer
   sentence wraps to a second line inside the screen
   ───────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  width:max-content;max-width:calc(100% - 32px);padding:10px 16px;border-radius:20px;background:var(--frame);color:var(--frame-ink);
  font-size:var(--fs-meta);font-weight:500;text-align:center;text-wrap:balance;box-shadow:var(--shadow-pop);pointer-events:none;
}
/* stays in the tree (a hidden live region is not announced); invisible until .on */
.toast:not(.on){opacity:0}
@media (min-width:720px){ .toast{bottom:32px} }

/* ─────────────────────────────────────────────────────────────
   "SHOW MORE" TILE — folds the rest of a list, native <details>
   ───────────────────────────────────────────────────────────── */
.moretile{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:9px 12px;border-radius:14px;background:var(--more);
  color:var(--ink-2);font-size:var(--fs-meta);font-weight:500;line-height:20px;cursor:pointer;
  list-style:none;
}
.moretile::-webkit-details-marker{display:none}
@media (hover: hover){.moretile:hover{background:var(--more-hover);color:var(--ink)}}
.moretile .chev{width:16px;height:16px;transform:rotate(90deg);transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion: reduce){.moretile .chev{transition:none}}
.moretile .less{display:none}
details.more-block{display:contents}
/* the browser wraps the <details> content in its own block (::details-content), so the revealed tiles have their own
   column with the same 4 px gap as the ones above them (display:contents would glue them together) */
details.more-block > .tiles{display:flex;flex-direction:column;gap:4px}
details.more-block[open] > summary{order:99}
details.more-block[open] > summary .more{display:none}
details.more-block[open] > summary .less{display:inline}
details.more-block[open] > summary .chev{transform:rotate(-90deg)}

/* ─────────────────────────────────────────────────────────────
   CARD, ROWS — the "about" style blocks
   ───────────────────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:20px;padding:16px}
.rows{display:flex;flex-direction:column;container-type:inline-size;background:var(--surface);border-radius:20px;overflow:hidden}
.rows > *:last-child{border-bottom:0}
@media (max-width:719px){ .card{padding:14px} }

/* ─────────────────────────────────────────────────────────────
   "O TURNAJI" — hero, stat tiles, card section, info rows, team grid
   ───────────────────────────────────────────────────────────── */
/* separate cards (Forma, Poradie, Zápasy; Popis, Tímy) are 4 px apart like the games in Program;
   the hero and the switch above them stay 16 px from the cards */
.narrow{gap:4px}
.narrow > :not(.sect) + *,.narrow > * + :not(.sect){margin-top:12px}
/* hero → content 32 px, hero → tabs (O turnaji / Stravovanie) 24 px, tabs → content 16 px */
.narrow > .gp-group + *{margin-top:28px}
.narrow > .gp-group + .aboutbar{margin-top:20px}
.narrow > .aboutbar + *{margin-top:12px}
.gphero{position:relative;isolation:isolate;padding:0 4px 6px;margin-top:-12px}
.gphero::before{content:"";position:absolute;left:-16px;right:-16px;top:-70px;height:280px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%, var(--gp-tint,transparent), transparent 70%)}
.gp-hero{position:relative;display:block;width:100%;text-align:center;padding:0;color:inherit;cursor:pointer}
.gp-hero.static{cursor:default}
.gp-crest{display:block;line-height:0;margin-bottom:14px}
.gp-crest .crest-svg{display:block;margin-inline:auto}
/* team or tournament name: in full, wraps even without spaces — this is the place where it can be read in full */
.gp-h1{display:block;overflow-wrap:anywhere;
  font-size:var(--fs-hero);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.gp-badge{display:grid;place-items:center;width:64px;height:64px;color:var(--ink-3);margin-inline:auto}
/* without a logo just a quiet cup, smaller than the crest that would stand in its place */
.gp-badge svg:not(.crest-svg){width:40px;height:40px}
/* line under the heading: at most two lines, then an ellipsis; a group name without spaces wraps too */
.gp-h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;
  font-size:var(--fs-ui);color:var(--ink-3);margin-top:6px;text-wrap:pretty}
/* Value on top, label under it in capitals — one tile, one number. */
.gp-stat{flex:1;min-width:0;text-align:center;padding:0 2px}
.gp-stat b{display:block;font-size:var(--fs-value);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gp-stat span{display:block;margin-top:3px;font-size:var(--fs-caption);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-group{display:flex;flex-direction:column;gap:0}
.gp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:22px 0 0}
.gp-tile{display:flex;padding:2px 6px}
.gp-tile + .gp-tile{border-inline-start:1px solid var(--line)}
.gp-group:not(:has(.gp-tiles)) + .sect{margin-top:28px}

.cardsect{background:var(--surface);border-radius:20px;overflow:hidden}
.cs-h{display:flex;align-items:baseline;gap:8px;padding:14px 16px 12px}
.cs-h h2{font-size:var(--fs-ui);line-height:20px;font-weight:600;color:var(--ink)}
.cs-h .count{font-size:var(--fs-meta);color:var(--ink-3)}
.cardsect .rows{background:none;border-radius:0}
.cardsect > p.tiny,.cardsect .segp > p.tiny{padding:0 16px 16px}
/* tiles inside a card merge into rows separated by a hairline */
.cardsect .tiles{gap:0}
.cardsect .tiles > .ntile{
  background:none;border-radius:0;padding:12px 10px;border:0;border-top:1px solid var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.cardsect .tiles > .ntile:first-child{border-top:0}
@media (hover: hover){.cardsect .tiles > .ntile:hover{background-color:var(--fill)}}
.cs-lede{padding:0 16px 16px;margin:0;color:var(--ink-2);font-size:var(--fs-ui);line-height:20px;white-space:pre-line;max-width:calc(65ch + 32px)}
/* Fact = icon on the left, label in the middle, actions on the right. */
.inforows{display:flex;flex-direction:column;padding:6px 0 8px}
.inforow{display:flex;align-items:center;gap:14px;padding:11px 16px;color:inherit}
.ir-ico{flex:none;display:grid;place-items:center;width:26px;color:var(--ink-2)}
.ir-ico svg:not(.crest-svg){width:23px;height:23px}
.ir-body{flex:1;min-width:0}
/* stadium, address, organiser: at most two lines, then an ellipsis; wraps even without spaces */
.ir-name,.ir-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.ir-name{font-size:var(--fs-ui);line-height:20px}
.ir-sub{font-size:var(--fs-ui);color:var(--ink-3);line-height:20px;margin-top:1px;text-wrap:pretty}
.ir-acts{flex:none;display:flex;gap:12px}
.ir-act{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--btn-2);color:var(--ink)}
@media (hover: hover){.ir-act:hover{background:var(--btn-2-hover);color:var(--ink)}}
.ir-act svg:not(.crest-svg){width:19px;height:19px}
.cardsect > .cs-lede:first-child{padding-top:16px}

/* Stravovanie — the venue's pin on the map */
.vn-pin{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--btn-2);color:var(--ink)}
.vn-pin svg{width:20px;height:20px}
/* Stravovanie — slots: the time as a heading with rules on the sides, teams in four columns */
.phead{
  display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px 6px;
  font-size:var(--fs-small);color:var(--ink-3);
}
.phead::before,.phead::after{content:"";flex:1;height:1px;background:var(--line)}
.phead:first-child{padding-top:6px}
.lgrid{display:flex;flex-direction:column;padding:0 0 12px}
.lslot{display:flex;flex-direction:column;gap:6px}
.lslot .phead{padding:16px 16px 8px}
.lslot:first-child .phead{padding-top:6px}

/* a group's teams: always at most three side by side in equally wide columns, on desktop too */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cardsect .segp > .tgrid{padding:4px 12px 14px}
.tgrid .tsq{width:auto;aspect-ratio:auto;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;padding:6px 2px 4px;gap:7px;justify-content:flex-start;cursor:pointer}
/* hover as in the prototype: the tile stays without a background, only the crest's circle darkens */
@media (hover: hover){.tgrid .tsq:hover{background:none}}
@media (hover: hover){.tgrid .tsq:hover .tsq-logo{background:var(--fill-2)}}
.tsq-logo{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--fill);border:2px solid transparent;transition:background-color .15s ease-out}
.tsq-logo .crest-svg{width:42px;height:auto}
/* name in one line, a long one gets an ellipsis */
.tgrid .tsq .nm{display:block;max-width:100%;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgrid .tsq.mine .tsq-logo{background:var(--mine-fill);border-color:var(--mine)}

/* ─────────────────────────────────────────────────────────────
   STANDINGS TABLE — # · Tím · Z · V–R–P · B · Forma
   ───────────────────────────────────────────────────────────── */
.subhead{font-size:var(--fs-ui);line-height:20px;font-weight:600;display:flex;align-items:center;gap:8px}
.tblwrap{display:flex;flex-direction:column;container-type:inline-size;background:var(--surface);border-radius:20px;padding:0 0 8px;overflow:hidden}
/* on a narrow screen fewer columns rather than horizontal scrolling: Forma goes first, then the game count.
   The header counts from the end: # and Tím either share a cell with the group name or each has its own (th-place, th-team). */
@container (max-width:520px){
  table.tbl:not(.final) th:last-child,table.tbl td:nth-child(6){display:none}
  table.tbl:not(.final) th:nth-last-child(2),table.tbl td:nth-child(5){padding-inline-end:20px}
}
.tblwrap .scroll{overflow-x:auto;padding:0 8px}
.tbl-head{display:flex;align-items:baseline;gap:10px;padding:14px 16px 6px}
.tblwrap > p.tiny{padding:2px 16px 4px}
.tblwrap > p.tiny:first-child{padding-top:16px}
/* group name above the table: at most two lines, then an ellipsis; wraps even without spaces */
/* the truncated group name is a button inside the heading, the h2 stays a heading */
.tbl-head .subhead{min-width:0}
.tbl-head .subhead > [data-clamp]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;min-width:0}
/* text clamped to two lines (group name): when it does not fit, a tap expands it in full and another collapses it (whistline.js) */
[data-clamp][data-cut]{cursor:pointer}
[data-clamp][data-open]{-webkit-line-clamp:unset;line-clamp:none}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-meta)}
table.tbl thead tr{background:none}
table.tbl th{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);text-align:end;padding:6px 10px;white-space:nowrap;line-height:1}
/* header: the group name above place and team (colspan 2), beside it on its row Z, V–R–P, B and Forma */
table.tbl th:first-child{text-align:start;padding-inline-start:8px}
table.tbl th{vertical-align:baseline}
table.tbl:has(th.gname .subhead) th{padding-top:14px}
table.tbl th.gname{white-space:normal;color:var(--ink);font-size:var(--fs-ui);font-weight:600;line-height:20px;padding-bottom:6px}
table.tbl th.gname [data-clamp]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;min-width:0}
table.tbl th:last-child{padding-inline-end:12px}
table.tbl td{padding:6px 10px;text-align:end;color:var(--ink-2)}
table.tbl td:nth-child(n+3){font-size:var(--fs-ui);font-variant-numeric:tabular-nums}
table.tbl td:nth-child(1){text-align:start;color:var(--ink-3);padding-inline-start:8px;font-size:var(--fs-ui);font-variant-numeric:tabular-nums}
table.tbl td:nth-child(2){text-align:start;font-size:var(--fs-ui);color:var(--ink);white-space:nowrap;padding-inline-end:10px}
/* the team column takes the rest of the width and truncates a long name with an ellipsis — the table never scrolls sideways */
table.tbl td:nth-child(2){max-width:0;width:100%}
.tblwrap table.tbl td:nth-child(1){width:26px}
table.tbl td:last-child{padding-inline-end:12px}
table.tbl:not(.final) th:nth-last-child(2){color:var(--ink-2)}
table.tbl td:nth-child(5){font-weight:500;color:var(--ink)}
table.tbl td.vrp{font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl td,table.tbl th{font-variant-numeric:tabular-nums}
table.tbl .tcell{display:flex;align-items:center;gap:8px;min-width:0}
table.tbl .tcell .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tbl tr.ph td:nth-child(2){color:var(--ink-3)}
table.tbl tr.ph .crest-svg{opacity:.55}
@container (max-width:440px){
  .tblwrap table.tbl th,.tblwrap table.tbl td{padding-inline:8px}
  .tblwrap table.tbl th:last-child,.tblwrap table.tbl td:last-child,
  .tblwrap table.tbl:not(.final) th:nth-last-child(2),.tblwrap table.tbl td:nth-child(5){padding-inline-end:12px}
}
@container (max-width:330px){
  .tblwrap table.tbl:not(.final) th:nth-last-child(4),.tblwrap table.tbl td:nth-child(3){display:none}
}
.form{display:flex;gap:4px;justify-content:flex-end}
.fbox{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:var(--fs-small);font-weight:600;color:var(--fill-ink);flex:none}
.fbox.V{background:var(--win)}
.fbox.P{background:var(--loss)}
.fbox.R{background:var(--draw)}
table.tbl td.formcell{padding-inline-end:16px}

/* ─────────────────────────────────────────────────────────────
   SEGMENTED TABS, FORM STRIP, TEAM PAGE
   ───────────────────────────────────────────────────────────── */
.seg{display:flex;gap:3px;margin:0 10px 10px;padding:3px;background:var(--band);border-radius:999px}
/* one segment everywhere (Tímy, Poradie and the team's Zápasy, Odohrané zápasy, O turnaji / Stravovanie): the buttons are
   the size of the header tabs (.htab: 15 px, 8 × 14 px); segments are equally wide, long text gets an ellipsis */
.segb{
  flex:1 1 0;min-width:0;cursor:pointer;padding:8px 14px;border-radius:999px;text-align:center;
  font-size:var(--fs-control);line-height:calc(20 / 14);font-weight:500;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (hover: hover){.segb:hover{color:var(--ink)}}
.segb[aria-selected="true"],.segb[aria-current="page"]{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--shadow-in)}
/* full-page-width switch under the hero — icon and label, as in a native app */
.seg.big{margin:0}
/* O turnaji / Stravovanie tabs: on a phone a full-width switch and under it on the left the Stravovanie day picker
   (opens the days sheet); the header has no days then */
.aboutbar{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.aboutbar > .seg.big{align-self:stretch}
.seg.big .segb{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.seg.big .segb svg:not(.crest-svg){width:16px;height:16px}
.cardsect .segp > .tiles{padding:0}
/* tab panels lie on top of each other in one grid cell (like the content in the admin): the card has the tallest one's height,
   so switching only swaps the content and nothing under the card jumps; a hidden panel holds its place but is neither seen nor read by a screen reader */
.segps{display:grid;grid-template-columns:minmax(0,1fr)}
.segps > .segp{grid-area:1 / 1;min-width:0}
.segps > .segp[hidden]{display:block;visibility:hidden}
.cardsect .tblwrap{background:none;border-radius:0;padding-bottom:6px}
/* Forma — result above the opponent, played games and those still to come. */
.formstrip{display:flex;gap:6px;padding:0 16px 16px}
.fm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px}
/* each form game is a link to the game (the next screen slides in in the sheet): it lightens under the mouse, eases on press */
a.fm{color:inherit;text-decoration:none;border-radius:8px;transition:opacity .15s ease-out,scale var(--press)}
@media (hover: hover){a.fm:hover{opacity:.75}}
a.fm:active{scale:.97}
a.fm:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fm-sc{display:block;width:100%;text-align:center;padding:5px 2px;border-radius:6px;
  font-size:var(--fs-meta);font-weight:600;color:var(--fill-ink);font-variant-numeric:tabular-nums}
.fm-sc.V{background:var(--win)}
.fm-sc.P{background:var(--loss)}
.fm-sc.R{background:var(--draw)}
/* an unplayed game has no result — it carries the time and is not coloured */
.fm-sc.next{background:var(--fill);color:var(--ink-2)}
.fm .crest-svg{width:28px;height:auto}
/* in the team detail: a soft green / red tint from the side where the team stands */
.ntile.pov-h.res-w{background-image:linear-gradient(90deg,var(--win-f),transparent 48%)}
.ntile.pov-h.res-l{background-image:linear-gradient(90deg,var(--loss-f),transparent 48%)}
.ntile.pov-h.res-d{background-image:linear-gradient(90deg,var(--draw-f),transparent 48%)}
.ntile.pov-a.res-w{background-image:linear-gradient(270deg,var(--win-f),transparent 48%)}
.ntile.pov-a.res-l{background-image:linear-gradient(270deg,var(--loss-f),transparent 48%)}
.ntile.pov-a.res-d{background-image:linear-gradient(270deg,var(--draw-f),transparent 48%)}
/* my team is found by tinting the whole row — like a pill, not edge to edge */
table.tbl tr.mine td{background:var(--mine-fill)}
table.tbl tr.mine td:first-child{border-radius:10px 0 0 10px}
table.tbl tr.mine td:last-child{border-radius:0 10px 10px 0}
table.tbl tr.mine td:nth-child(2){color:var(--mine)}
table.tbl a.tcell{text-decoration:none;color:inherit}
/* the team's place and crest close together: 8 px between the number and the crest in every table (groups, final standings, in the sheet too) */
table.tbl td:nth-child(1){padding-inline-end:4px}
table.tbl td:nth-child(2){padding-inline-start:4px}
/* # and Tím above their own columns with their cells' padding: # above the place, Tím above the team crest */
table.tbl th.th-place{padding-inline-end:4px;text-align:center}
table.tbl th.th-team{text-align:start;padding-inline-start:4px}
/* the team row is a link to the team as a whole (a click beside the name clicks the link, whistline.js) and tints like a pill under the mouse */
table.tbl tr:has(> td > a.tcell){cursor:pointer}
@media (hover: hover){
  table.tbl tr:not(.mine):has(> td > a.tcell):hover td{background:var(--fill)}
  table.tbl tr:has(> td > a.tcell):hover td:first-child{border-radius:10px 0 0 10px}
  table.tbl tr:has(> td > a.tcell):hover td:last-child{border-radius:0 10px 10px 0}
}
/* without the Forma column (narrower table) the points are the last visible cell: the pill's rounding goes on them */
@container (max-width:520px){
  table.tbl tr:is(.mine,:hover) td:nth-child(5):nth-last-child(2){border-radius:0 10px 10px 0}
}
.tsq{text-decoration:none;color:inherit}
#btnBack{flex:none}

/* ─────────────────────────────────────────────────────────────
   MATCH PAGE — tinted score top, pre-match form grid
   ───────────────────────────────────────────────────────────── */
.ntile,.lsb{text-decoration:none;color:inherit}
.matchview{display:flex;flex-direction:column;gap:0;--tk:var(--ink);--tk2:var(--ink-2);--tkl:var(--line-2)}
.matchview .matchtop{position:relative;isolation:isolate;margin:-12px calc(-1 * clamp(16px,4vw,40px)) 0;color:var(--tk)}
/* detail header: the club colours only as a soft tint, not a full gradient */
.matchview .matchtop::before{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  top:calc(-1 * (var(--hdr-h,0px) - 10px + var(--view-gap,22px) + var(--hdr-top,0px)));
  background-image:var(--g);opacity:.14;
  -webkit-mask-image:linear-gradient(#000 44%, transparent);mask-image:linear-gradient(#000 44%, transparent);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .matchview .matchtop::before{opacity:.26} }
:root[data-theme="dark"] .matchview .matchtop::before{opacity:.26}
.matchview .matchtop .lsb{
  background-color:transparent;background-image:none;box-shadow:none;cursor:default;
  border-radius:0;padding:22px clamp(16px,4vw,40px) 26px;color:var(--tk);
  grid-template-columns:minmax(0,1fr) clamp(88px,29cqw,150px) minmax(0,1fr);align-items:center;column-gap:8px;
}
.matchview .matchtop .lsb > .lsb-team{justify-self:stretch}
.matchview .matchtop .lsb .crest-svg.logo .crest-bg{fill:none}
.matchview .matchtop .lsb-top{color:var(--tk2);font-size:var(--fs-meta);font-weight:500}
.matchview .matchtop .lsb-final{display:flex;align-items:center;justify-content:center;gap:.28em;font-size:clamp(27px,9cqw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.matchview .matchtop .lsb-final i{display:flex;flex-direction:column;gap:.2em;font-size:1em}
.matchview .matchtop .lsb-final i::before,.matchview .matchtop .lsb-final i::after{content:"";display:block;width:.125em;height:.125em;border-radius:50%;background:var(--tk2)}
.matchview .matchtop .lsb-final b{font-weight:600;font-variant-numeric:tabular-nums}
.matchview .matchtop .lsb-final b.dim{color:var(--ink-3)}
.matchview .matchtop .lsb-team .crest-svg{width:clamp(54px,17cqw,74px)}
.matchview .matchtop .lsb-team.ph .nm{color:var(--tk2)}
.matchview .matchtop .lsb-rink{color:var(--tk2);font-size:var(--fs-meta);line-height:18px;min-height:18px}
.matchview .matchtop .lsb-full{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;font-size:var(--fs-ui);font-weight:500;line-height:1.25}
.matchview .matchtop .lsb-full .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ice map — the classic top-down drawing: grey boards, blue
   lines, red goal lines, circles and a dashed centre. Half of the game
   is drawn in full and softly tinted, the other is only hinted. */
.rinkmap{
  --ice:#F7F9FC; --rk-red:#D0393B; --rk-blue:#2E7BD6; --rk-board:#5A6470;
  padding:0 16px 18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rinkmap{--ice:#1E242B; --rk-red:#E8595C; --rk-blue:#4A93E8; --rk-board:#9AA4B0}
}
:root[data-theme="dark"] .rinkmap{--ice:#1E242B; --rk-red:#E8595C; --rk-blue:#4A93E8; --rk-board:#9AA4B0}
.rinkmap svg{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
.rk-ice{fill:var(--ice)}
.rk-l{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.rk-red{stroke:var(--rk-red)}
.rk-blue{stroke:var(--rk-blue)}
.rk-l.board{stroke:var(--rk-board);stroke-width:2.4}
.rk-l.bluel{stroke-width:3}
.rk-l.mid{stroke-width:2.2;stroke-dasharray:5 3.5}
.rk-l.hash{stroke-width:1.5}
.rk-dot{stroke:none}
.rk-dot.red{fill:var(--rk-red)}
.rk-dot.blue{fill:var(--rk-blue)}
.rk-crease{fill:var(--rk-blue);stroke:var(--rk-red);stroke-width:1.4;stroke-linejoin:round}
.rk-dim{opacity:.28}
.rk-on-fill{fill:var(--rk-blue);fill-opacity:.08}
.rk-lb{fill:var(--ink);fill-opacity:.3;font-size:var(--fs-score);font-weight:700;text-anchor:middle;font-family:inherit}
.rk-lb.on{fill-opacity:1}
.lsb-link{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;width:100%;text-decoration:none;color:inherit}
.matchview .mbody{padding-top:32px;display:flex;flex-direction:column;gap:4px;min-height:40vh}
/* in the game sheet the content does not fill the height: the sheet has the content's height, so the gap above Zdieľať zápas is the same on every tab */
.scr-view .matchview .mbody{min-height:0}
/* bar: the group in the middle; once scrolled, the crests, score and state replace it */
/* collapsed bar: larger crests on the sides, the score in the middle and a small state under it */
.hdr-name.mb-mini{gap:clamp(20px,8vw,42px)}
.mb-side{display:flex;align-items:center;flex:none}
.mb-core{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.mb-sc{display:flex;align-items:center;justify-content:center;gap:.28em;line-height:1.05;font-size:var(--fs-score)}
.mb-sc i{display:flex;flex-direction:column;gap:.2em;font-size:1em}
.mb-sc i::before,.mb-sc i::after{content:"";display:block;width:.125em;height:.125em;border-radius:50%;background:currentColor;opacity:.5}
.mb-sc b{font-size:1em;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mb-sc b.dim{color:var(--ink-3)}
.mb-when{font-size:var(--fs-control);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.mb-core .mb-st{font-size:var(--fs-caption);font-weight:500;color:var(--ink-2);line-height:1.2}
/* Pre-match form: place · crest · streak · points */
.pgf{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:12px;padding:0 16px 18px}
/* the team's place and crest close together as in the group table (8 px): the team column and its header 4 px closer to the number */
.pgf > :is(.pgf-crest,.pgf-th:nth-child(2)){margin-inline-start:-4px}
.pgf-th{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);line-height:1}
.pgf-th.end{text-align:end}
.pgf-pos{font-size:var(--fs-ui);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.pgf-crest{display:grid;place-items:center;line-height:0}
.pgf-crest .crest-svg{display:block;width:26px;height:auto}
/* the streak is one pill split into cells — the ends keep the curve */
.pgf-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;min-width:0}
.fseg{height:24px;display:grid;place-items:center;background:var(--fill-2);font-size:var(--fs-small);font-weight:700;color:var(--fill-ink)}
.fseg:first-child{border-radius:99px 0 0 99px}
.fseg:last-child{border-radius:0 99px 99px 0}
.fseg.V{background:var(--win)}
.fseg.P{background:var(--loss)}
.fseg.R{background:var(--draw)}
.fseg.none{background:var(--fill-2)}
.fseg.now:not(.V):not(.P):not(.R){background:var(--line-2);color:var(--ink)}
.pgf-pts{font-size:var(--fs-ui);font-weight:600;text-align:end;font-variant-numeric:tabular-nums;line-height:1}

/* ─────────────────────────────────────────────────────────────
   TEAM SQUARES — O turnaji's team grid (.tgrid)
   ───────────────────────────────────────────────────────────── */
.tsq{
  flex:none;width:104px;aspect-ratio:1;scroll-snap-align:start;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);border-radius:20px;padding:10px;text-align:center;
}
@media (hover: hover){.tsq:hover{background-color:var(--card-hover)}}
.tsq .nm{
  font-size:var(--fs-small);font-weight:500;line-height:1.2;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tsq.mine .nm{color:var(--mine)}

/* Tímy on Domov: the heading on the background like Nasleduje, under it one card, teams two per row like the group table's
   rows — 26 px crest and 14 px name, 8 px from the card's edges; a row tints like a pill under the mouse. On the narrowest
   screen one per row. */
.teamgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px;padding:8px;border-radius:20px}
.teamcell{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;padding:6px 8px;border-radius:10px;
  color:var(--ink);text-decoration:none;transition:background-color .15s ease-out,scale var(--press)}
@media (hover: hover){.teamcell:hover{background-color:var(--fill)}}
.teamcell:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.teamcell .crest-svg{flex:none}
.teamcell .nm{min-width:0;font-size:var(--fs-ui);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamcell.mine .nm{color:var(--mine)}
@media (max-width:339px){.teamgrid{grid-template-columns:minmax(0,1fr)}}

/* ─────────────────────────────────────────────────────────────
   CARD SURFACES — translucent white on the canvas
   No background blur: the canvas under a card is a single colour, a blur would show nothing and every card would
   be a layer the phone paints separately on a tab switch (40 on one day of Program).
   ───────────────────────────────────────────────────────────── */
.tcard,.ntile,.tsq,.teamgrid,.card,.rows,.cardsect,.tblwrap{
  background-color:var(--card);border:1px solid var(--card-line);
}

/* empty top line in the match detail takes no room (context lives in the bar) */
.matchview .matchtop .lsb.stack .lsb-top:empty{display:none}

/* ─────────────────────────────────────────────────────────────
   DESKTOP — one block for everything from 720 px (the prototype).
   The column, header, menu and grids all hang on --col, --gutter and --bar-h.
   ───────────────────────────────────────────────────────────── */
@media (min-width:720px){
  :root{ --col:760px; --gutter:clamp(16px,4vw,40px); --bar-h:64px; }
  .wrap,.navhold{max-width:calc(var(--col) + 2 * var(--gutter));padding-inline:var(--gutter)}
  .mid,.narrow{max-width:var(--col)}
  main.view{padding-inline:var(--gutter);padding-bottom:112px}
  .hdr > .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:var(--bar-h);padding-block:10px}
  .hdr-row{display:contents}
  .hdr-name{display:none}
  #btnBack{order:0}
  #brand{order:1;max-width:320px}
  .hdr-title{order:2;flex:0 1 auto}
  /* tabs (days, groups) under the title as on mobile, the full width of the column */
  .hdr-tabs{order:7;flex:0 0 100%;margin:4px 0 0;padding:0;overflow:visible}
  .acts{order:6;margin-inline-start:auto}
  /* Zmeniť tím joins the actions on the right */
  #btnTeam{order:5;margin-inline-start:auto}
  #btnTeam:not([hidden]) ~ .acts{margin-inline-start:0}
  .navhold{display:block;width:auto;max-width:none;margin:0;padding:0;pointer-events:none}
  .nav{position:fixed;left:0;right:0;bottom:20px;z-index:40;
    display:flex;align-items:center;justify-content:center;gap:10px;
    overflow:visible;pointer-events:none;padding-top:0}
  .navpill{pointer-events:auto;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
    display:flex;gap:2px;padding:6px;border-radius:32px}
  .navlink{position:relative;flex-direction:row;justify-content:center;gap:8px;
    min-height:44px;padding:0 16px;border-bottom:0;border-radius:24px;color:var(--ink-2);
    font-size:var(--fs-ui);line-height:1.2;transition:background-color .15s ease-out,scale var(--press)}
  .navlink svg{display:block;width:19px;height:19px;stroke-width:1.8}
  .navlink[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--fill-2);border-bottom-color:transparent}
  .navlink.me{flex:none;width:56px;height:56px;min-height:0;padding:0;border-radius:50%;gap:0;pointer-events:auto;
    background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5)}
  .navlink.me span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .navlink.me .crest-svg{width:26px;height:auto}
  .navfade{display:block;position:fixed;left:0;right:0;bottom:0;z-index:39;pointer-events:none;height:116px}
  .navfade::before,.navfade::after{content:"";position:absolute;inset:0;pointer-events:none}
  .navfade::before{
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    -webkit-mask-image:linear-gradient(to top,#000 40%,transparent);
    mask-image:linear-gradient(to top,#000 40%,transparent)}
  .navfade::after{
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);
    mask-image:linear-gradient(to top,#000 30%,transparent);
    background:linear-gradient(to top,rgb(var(--canvas-rgb) / 92%),rgb(var(--canvas-rgb) / 70%) 50%,rgb(var(--canvas-rgb) / 0%))}
  :root[data-scrolled] .gpill{width:auto;padding:0 10px;border-radius:22px;justify-content:flex-start}
  :root[data-scrolled] .gpill .t-name{display:initial}
  /* fade like the admin's top bar (app.css, [data-top-bar]::after): no blur, the surface colour full at the top, 82 % at 45 %,
     30 % at 75 % and nothing 16 px below the bar */
  .hdr::before{display:none}
  .hdr::after{bottom:-16px;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;
    background:linear-gradient(rgb(var(--canvas-rgb)),rgb(var(--canvas-rgb) / 82%) 45%,rgb(var(--canvas-rgb) / 30%) 75%,rgb(var(--canvas-rgb) / 0%))}
  .grid-auto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-auto > :only-child{grid-column:1/-1}
  .grid-auto.list{grid-template-columns:minmax(0,1fr)}
  .boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boards > :only-child{grid-column:1/-1}
  .boards.swipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
    overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .boards.swipe > .bslide{flex:none;min-width:0}
  .pgrow{display:none}
  /* stats under the hero (teams, games, days): equally wide columns with a larger gap, not squeezed to the numbers' width */
  .gp-tiles{width:100%;max-width:420px;margin-inline:auto}
  .seg.big{width:100%;max-width:480px;margin-inline:auto}
  /* O turnaji / Stravovanie: tabs from the left as in Poradie (no icons), the Stravovanie day picker on the right in the same row
     instead of the days in the header */
  .aboutbar{flex-direction:row;align-items:center}
  .aboutbar > .seg.big{align-self:auto;width:auto;max-width:none;margin:0 auto 0 0;padding:0;gap:2px;background:none}
  .aboutbar > .seg.big .segb{flex:none;color:var(--ink-3)}
  .aboutbar > .seg.big .segb[aria-current="page"]{color:var(--ink)}
  .aboutbar > .seg.big .segb svg{display:none}
  /* O turnaji: hero from the left — the crest above a row holding the name (like the heading in Program and Poradie) and the dates
     on the left, the stats on the right (each centred in its column); all on the edges of the cards below them */
  .about-page .gp-group{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  .about-page :is(.gphero,.gp-hero){display:contents}
  .about-page .gp-hero{text-align:start}
  /* crest in a tile as in the admin (32 px, logo 24, radius 10 on fill-2), scaled up to 96 px */
  .about-page .gp-crest{grid-column:1/-1;justify-self:start;display:grid;place-items:center;width:96px;height:96px;
    border-radius:30px;background:var(--fill-2)}
  .about-page :is(.gp-crest .crest-svg,.gp-badge){width:72px;height:72px;margin:0}
  .about-page .gp-badge svg:not(.crest-svg){width:36px;height:36px}
  .about-page .gp-h1{grid-column:1;align-self:end;font-size:var(--fs-title);line-height:1.15}
  .about-page .gp-h2{grid-column:1;align-self:start}
  .about-page .gp-tiles{grid-column:2;grid-row:2/4;align-self:center;grid-template-columns:repeat(3,auto);
    width:auto;max-width:none;margin:0;padding:0}
  .about-page .gp-tile{padding-inline:20px}
  .about-page .gp-tile:last-child{padding-inline-end:0}
  /* stats: the number like the tournament name, the label like the dates line under it, with the same gap */
  .about-page .gp-stat b{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.15}
  .about-page .gp-stat span{margin-top:6px;font-size:var(--fs-ui);color:var(--ink-3);text-transform:none;letter-spacing:0}
  .formstrip{max-width:560px;margin-inline:auto}
  .matchview .matchtop .lsb{padding-inline:24px}
  .matchview .mbody{padding:32px 24px 30px}
}

/* Konečné poradie — pedestal + list from 4th (prototype) */
/* Podium: first in the middle and highest, second on the left, third on the right —
   the way they stand on the ice. The HTML order is 2·1·3 so it fits without
   jumping columns, and the steps are aligned to the bottom. They sit in the same
   card as the rest of the standings; the line under them is the floor, under it
   the standings continue from fourth place. */
.pedestal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;
  padding:16px 12px 0;container-type:inline-size;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.ped{display:flex;flex-direction:column;align-items:center;min-width:0}
.ped-top{display:flex;flex-direction:column;align-items:center;gap:7px;
  width:100%;min-width:0;padding:0 2px 10px;cursor:pointer;text-align:center;text-decoration:none;color:inherit}
@media (hover: hover){.ped-top:hover .ped-nm{color:var(--ink)}}
.ped .crest-svg{width:clamp(38px,13cqw,54px);height:auto}
/* the name reads as strongly as in the table under the podium */
.ped-nm{max-width:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:var(--fs-meta);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-nm > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the team whose page is open has its name in the "my" team colour — like its row in the table */
.ped.mine .ped-nm{color:var(--mine)}
/* a step not yet taken — crest and dash only hinted */
.ped.ph{opacity:.55}
.ped.ph .ped-top{cursor:default}
/* step: the place number on a coloured background, height by placing;
   the number carries a darker tone of the same metal as the step */
.ped-block{width:100%;display:grid;place-items:center;
  border-radius:12px 12px 0 0;font-size:var(--fs-title);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ped.p1 .ped-block{height:78px;color:var(--medal-1-ink);
  background:linear-gradient(180deg,rgb(var(--medal-1) / 38%),rgb(var(--medal-1) / 10%))}
.ped.p2 .ped-block{height:58px;color:var(--medal-2-ink);
  background:linear-gradient(180deg,rgb(var(--medal-2) / 34%),rgb(var(--medal-2) / 9%))}
.ped.p3 .ped-block{height:44px;color:var(--medal-3-ink);
  background:linear-gradient(180deg,rgb(var(--medal-3) / 34%),rgb(var(--medal-3) / 9%))}

/* ─────────────────────────────────────────────────────────────
   BREAK COLOURS — the 8 colours of App\Support\BreakLook (the
   prototype's .bk-*); ice, food, open and cup tokens are above
   ───────────────────────────────────────────────────────────── */
:root{
  --br-pause:#4F5B6B; --br-pause-f:rgb(79 91 107 / 9%);
  --br-blue:#2B5FC7;  --br-blue-f:rgb(43 95 199 / 9%);
  --br-green:#2B7337; --br-green-f:rgb(46 122 58 / 9%);
  --br-red:#B4392D;   --br-red-f:rgb(184 58 46 / 9%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --br-pause:#A7B1BE; --br-pause-f:rgb(167 177 190 / 12%);
    --br-blue:#7EA6F4;  --br-blue-f:rgb(126 166 244 / 13%);
    --br-green:#72CC82; --br-green-f:rgb(114 204 130 / 13%);
    --br-red:#F0877B;   --br-red-f:rgb(240 135 123 / 13%);
  }
}
:root[data-theme="dark"]{
  --br-pause:#A7B1BE; --br-pause-f:rgb(167 177 190 / 12%);
  --br-blue:#7EA6F4;  --br-blue-f:rgb(126 166 244 / 13%);
  --br-green:#72CC82; --br-green-f:rgb(114 204 130 / 13%);
  --br-red:#F0877B;   --br-red-f:rgb(240 135 123 / 13%);
}
.brow.bk-pause{--bc:var(--br-pause);--bf:var(--br-pause-f)}
.brow.bk-blue {--bc:var(--br-blue); --bf:var(--br-blue-f)}
.brow.bk-ice  {--bc:var(--br-ice);  --bf:var(--br-ice-f)}
.brow.bk-green{--bc:var(--br-green);--bf:var(--br-green-f)}
.brow.bk-cup  {--bc:var(--br-cup);  --bf:var(--br-cup-f)}
.brow.bk-food {--bc:var(--br-food); --bf:var(--br-food-f)}
.brow.bk-red  {--bc:var(--br-red);  --bf:var(--br-red-f)}
.brow.bk-open {--bc:var(--br-open); --bf:var(--br-open-f)}

/* ─────────────────────────────────────────────────────────────
   SHARING — the small sheet from the prototype (.sheet, sheetShare): a card
   floating above dimmed content, rounded on all sides, inset
   from the edges equally at the sides and the bottom (--sheet-gap), with a handle on top;
   in it the ticket preview and the share targets. From 720 px it stands in the middle.
   ───────────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  --sheet-gap:8px;padding:0 var(--sheet-gap) var(--sheet-gap)}
.sheet[hidden]{display:flex;visibility:hidden;transition:visibility 0s linear 300ms}
.sheet-bg{position:absolute;inset:0;background:rgb(0 0 0 / 36%);cursor:pointer;
  opacity:1;transition:opacity 400ms ease-out}
.sheet[hidden] .sheet-bg{opacity:0;transition-duration:300ms}
/* sheets and modals stand on --raise: everything inside that paints in the page colour (screen backgrounds, the bar's fade) goes with it */
.sheet-card,.msheet-panel{--canvas:var(--raise);--canvas-rgb:var(--raise-rgb)}
.sheet-card{
  position:relative;width:100%;max-width:520px;max-height:86dvh;overflow-y:auto;
  background:var(--canvas);box-shadow:0 24px 70px rgb(0 0 0 / 28%);
  /* bottom corners concentric with the screen's corners (--screen-r, iPhone 55 px), smaller by the gap from the edge */
  --r-bottom:max(36px, calc(var(--screen-r, 55px) - var(--sheet-gap)));
  border-radius:36px 36px var(--r-bottom) var(--r-bottom);
  transform:none;opacity:1;transition:transform 400ms cubic-bezier(.32,.72,0,1);
  /* the admin's modal padding: content 20 px from the edge, header 14 px above the content; on a phone a handle on top and 32 px at the bottom */
  padding:12px 20px 32px;
  display:flex;flex-direction:column;gap:14px;
}
/* a long list scrolls only inside the card, the page behind it stays (a downward drag at the top pulls the card down, whistline.js). The card
   scrolls, so touch-action from the body does not reach into it: here too a double-tap does not zoom, a quick second tap on ×
   is not swallowed by the zoom gesture */
.sheet-card{overscroll-behavior:contain;touch-action:manipulation}
/* comes and goes on the large sheet's curve (.msheet-panel): in 400 ms, out 300 ms and 40 px past the edge so the curve's tail
   finishes off screen. The previews in Zdieľať have a fixed height, so the card has its height at once and slides up
   whole from the bottom. */
.sheet[hidden] .sheet-card{transform:translateY(calc(100% + var(--sheet-gap) + 40px));transition-duration:300ms}
.sheet-card::before{content:"";flex:none;width:36px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto -6px}
/* header as in the admin's modal: heading 16/22; × is a glass circle (44 px) at the content's edge, like the buttons in the game
   and team detail */
.sheet-h{display:flex;align-items:center;gap:12px;min-height:32px}
/* × stands on a solid card: a blur would have nothing to show, it would only repaint the background in every frame
   while the card slides and is dragged */
.sheet-h .gbtn{-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet-h h3{font-size:var(--fs-head);line-height:22px;font-weight:600;flex:1}
/* ticket in the preview: a tilted frame with a 9 : 16 image */
.pvwrap{position:relative;width:min(58%,220px);aspect-ratio:9/16;margin:4px auto 10px;border-radius:22px;
  background:var(--fill-2);transform:rotate(-2.5deg);
  box-shadow:0 18px 50px rgb(0 0 0 / 22%),0 0 0 1px rgb(255 255 255 / 60%)}
.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:0;transition:opacity .25s ease}
.pv.on{opacity:1}
/* a preview still drawing (whistline.js showPoster): a paper skeleton the size of the ticket (whistline.js sets the --ph height
   by the ticket's kind), on the ticket the notches and a dashed divide above the stub as on paper (stub 200 and notch
   radius 36 at width 880), a soft shine across it; while the image cross-fades in (data-loading="done"), only the paper stays */
.pvbox .pvwrap[data-loading]{container-type:inline-size;isolation:isolate}
.pvbox .pvwrap[data-loading]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:calc(100cqw * 44 / 880);
  background-color:var(--fill-2)}
.pvbox .pvwrap[data-loading=""]::before{
  background-image:linear-gradient(100deg,transparent 35%,rgb(255 255 255 / 38%) 50%,transparent 65%);
  background-size:250% 100%;background-repeat:no-repeat;animation:pvshine 1.4s ease-in-out infinite}
.pvbox .pvwrap[data-kind="ticket"][data-loading]::before{
  --stub:calc(100cqw * 200 / 880);--nr:calc(100cqw * 36 / 880);
  -webkit-mask:radial-gradient(circle at 0 calc(100% - var(--stub)),transparent var(--nr),#000 calc(var(--nr) + .5px)) left/51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)),transparent var(--nr),#000 calc(var(--nr) + .5px)) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 calc(100% - var(--stub)),transparent var(--nr),#000 calc(var(--nr) + .5px)) left/51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)),transparent var(--nr),#000 calc(var(--nr) + .5px)) right/51% 100% no-repeat}
.pvbox .pvwrap[data-kind="ticket"][data-loading]::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(100cqw * 62 / 880);right:calc(100cqw * 62 / 880);bottom:calc(100cqw * 200 / 880 - 1px);height:2px;
  background:repeating-linear-gradient(to right,var(--line-2) 0 6px,transparent 6px 12px)}
@keyframes pvshine{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pvbox .pvwrap[data-loading=""]::before{background-image:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / 7%) 50%,transparent 70%)}
}
:root[data-theme="dark"] .pvbox .pvwrap[data-loading=""]::before{background-image:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / 7%) 50%,transparent 70%)}
@media (prefers-reduced-motion: reduce){.pvbox .pvwrap[data-loading=""]::before{animation:none;background-image:none}}
/* the ticket and card in the preview stand alone — tilted and with a shadow already in the image, no frame or rotation */
.pvwrap.bare{width:min(78%,300px);aspect-ratio:auto;margin:0 auto 8px;background:none;box-shadow:none;border-radius:0;transform:none}
.pvwrap.bare .pv{position:static;display:block;width:100%;height:auto;min-height:120px;max-height:min(48dvh,470px);object-fit:contain;border-radius:0}
/* the ticket has a known ratio (880 × 1420): it has its space at once, the card does not grow once the image loads */
.pvwrap.bare[data-kind="ticket"] .pv{aspect-ratio:880/1420}
/* standings tables are as tall as their team count: the preview always has the full height and the image fits in it */
.pvwrap.bare[data-kind="table"] .pv{min-height:min(48dvh,470px)}
/* standings: a snapping strip of previews — a swipe picks the table, the middle one is picked; neighbours peek out on both sides */
.pvstrip{display:flex;align-items:center;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 -22px 4px;padding:14px 0 16px;-webkit-overflow-scrolling:touch}
.pvstrip::-webkit-scrollbar{display:none}
.pvstrip::before,.pvstrip::after{content:"";flex:0 0 calc(50% - min(34%,160px) - 8px)}
.pvstrip .pvwrap{flex:0 0 min(68%,320px);margin:0;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;
  transform:scale(.94) rotate(-2.5deg);scroll-snap-align:center;will-change:transform}
.pvstrip .pv{position:static;height:auto;min-height:min(46dvh,460px);max-height:min(46dvh,460px);object-fit:contain;display:block;border-radius:0}
.pvdots{display:flex;justify-content:center;gap:6px;margin:0 0 10px}
.pvdots span{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.pvdots span.on{background:var(--ink)}
.dests{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:6px 20px 4px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.dests::-webkit-scrollbar{display:none}
.dest{flex:1 0 58px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;text-align:center}
.d-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--fill-2);
  transition:transform var(--press)}
.dest:active .d-ico{transform:scale(.97)}
@media (prefers-reduced-motion: reduce){.dest:active .d-ico{transform:none}}
.d-ico svg{width:26px;height:26px}
.d-ico.ig{background:linear-gradient(45deg,#F9CE34 0%,#EE2A7B 50%,#6228D7 100%)}
.d-ico.fb{background:#1877F2}
.d-ico.copy,.d-ico.more{color:var(--ink);background:var(--fill-2)}
.d-l{font-size:var(--fs-small);font-weight:500;color:var(--ink);line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-share] body{overflow:hidden}
@media (min-width:720px){
  .sheet{align-items:center;padding:16px}
  .sheet[hidden] .sheet-card{transform:scale(.96);opacity:0;transition:transform 150ms ease-out,opacity 150ms ease-out}
  /* the admin's modal: a card in the surface colour like the game detail, with card corners (20 px) and the modal shadow above a blurred dark scrim */
  .sheet-bg{background:var(--scrim,rgb(0 0 0 / 34%));-webkit-backdrop-filter:blur(2px) saturate(1.2);backdrop-filter:blur(2px) saturate(1.2);
    transition:opacity 250ms var(--ease-out,ease-out)}
  .sheet[hidden] .sheet-bg{transition-duration:150ms}
  .sheet-card{max-width:420px;border-radius:20px;padding:16px 20px;box-shadow:var(--shadow-modal,0 24px 70px rgb(0 0 0 / 28%));
    transition:transform 250ms cubic-bezier(.22,1,.36,1),opacity 250ms cubic-bezier(.22,1,.36,1)}
  .sheet-card::before{display:none}
}
/* the bottom sheet (.sheet-edge: team and day picker in Stravovanie, Zdieľať) sits on the bottom and side edges of the screen,
   rounded only on top like the team detail (.msheet-panel); as tall as its content, at most 85dvh (the team picker full height,
   .sheet-tall), a long list scrolls under the heading with × */
@media (max-width:719px){
  .sheet-edge{--sheet-gap:0px}
  .sheet-edge .sheet-card{max-width:none;max-height:85dvh;border-radius:36px 36px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  /* a long list scrolls under the heading without a scrollbar, as the team detail */
  .sheet-edge .opts{flex:0 1 auto;min-height:0;max-height:none;scrollbar-width:none}
  .sheet-edge .opts::-webkit-scrollbar{display:none}
  /* Zdieľať and the team picker (.sheet-tall): a full-height sheet like the team detail, without the handle; the bar as in the detail
     (× on the left, title in the middle). Zdieľať centres the ticket between the bar and the targets, the team list fills the rest */
  :is(.flat-share,.sheet-tall) .sheet-card{height:calc(100dvh - env(safe-area-inset-top) - 18px);max-height:none;padding-top:10px;overflow:hidden}
  :is(.flat-share,.sheet-tall) .sheet-card::before{display:none}
  :is(.flat-share,.sheet-tall) .sheet-h{position:relative;min-height:44px;margin-inline:-4px}
  :is(.flat-share,.sheet-tall) .sheet-h .gbtn{order:-1}
  :is(.flat-share,.sheet-tall) .sheet-h h3{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
  .sheet-tall .opts{flex:1 1 auto}
  .flat-share .pvbox{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:720px) and (prefers-reduced-transparency: reduce){
  .sheet-bg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(0 0 0 / 50%)}
}
@media (prefers-reduced-motion: reduce){
  .sheet-card,.sheet[hidden] .sheet-card,.sheet[hidden] .sheet-bg{transition-duration:200ms}
  .sheet[hidden]{transition-delay:200ms}
}

/* ─────────────────────────────────────────────────────────────
   SHEET / MODAL — game and team detail above the page (whistline.js)
   Phone: the bottom sheet from the prototype (.msheet) — comes up from the bottom with a rounded
   top, the page under it shrinks to a card on a black background, the next
   screen slides in from the right. From 720 px: the admin's modal — centred above a
   blurred background, grows from .96 and fades in, closes faster;
   the next screen rises by 24 px like a sheet above a modal in the admin.
   ───────────────────────────────────────────────────────────── */
.msheet{position:fixed;inset:0;z-index:55;display:flex;justify-content:center}
.msheet-bg{position:absolute;inset:0;cursor:pointer;touch-action:none}
.msheet-panel{position:relative;width:100%;overflow:hidden}
/* screens in the stack: each fills the whole panel and has its own scroll (.scr-body), on return it is where you left it;
   the bar stands above it, so when the content bounces the bar stays put; --hdr-h is the panel bar's height, the content starts
   below it and the game and team header's tint reaches under it */
.scr{--hdr-h:64px;--hdr-top:0px;--view-gap:22px;position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.scr-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:var(--hdr-h);overflow-y:auto;overscroll-behavior:contain}
.scr-body:focus{outline:0}
/* bar: × on the left (on a next screen ‹ and × on the right), context in the middle, sharing on the right; content blurs under it —
   a fade as in the page header, only once the screen is scrolled (data-stuck, whistline.js); from 720 px the admin's fade */
.scr-bar{position:absolute;top:0;left:0;right:0;z-index:5;isolation:isolate;display:flex;align-items:center;gap:6px;min-height:64px;padding:10px 16px}
.scr-bar::before{content:"";position:absolute;inset:0 0 -4px;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--fade);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,rgb(0 0 0 / 82%) 70%,rgb(0 0 0 / 30%) 86%,transparent);
  mask-image:linear-gradient(to bottom,#000 45%,rgb(0 0 0 / 82%) 70%,rgb(0 0 0 / 30%) 86%,transparent)}
.scr[data-stuck] > .scr-bar::before{opacity:1}
.scr-bar .gbtn{flex:none}
/* the bar's buttons and texts above its blur (Safari can paint the backdrop-filter layer above them) */
.scr-bar > :not(.pblur){z-index:1}
.scr-bar > :not(.scr-mini,.pblur){position:relative}
.scr-end{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.scr-view{padding:12px clamp(16px,4vw,40px) calc(32px + env(safe-area-inset-bottom))}
:root:is([data-sheet],[data-push]) body{overflow:hidden}

@media (max-width:719px){
  .msheet{align-items:flex-end}
  .msheet[hidden]{display:flex;visibility:hidden;transition:visibility 0s linear 300ms}
  .msheet-bg{background:rgb(0 0 0 / 34%);transition:opacity 400ms ease-out}
  .msheet[hidden] .msheet-bg{opacity:0;transition-duration:300ms}
  /* almost to the top: only a narrow strip of the card under the sheet peeks out */
  .msheet-panel{height:calc(100dvh - env(safe-area-inset-top) - 18px);
    background:var(--canvas);border-radius:36px 36px 0 0;box-shadow:0 -10px 50px rgb(0 0 0 / 25%);
    clip-path:inset(0 round 36px 36px 0 0);transition:transform 400ms cubic-bezier(.32,.72,0,1)}
  /* leaving on the same curve, shorter and 40 px past the edge so the curve's tail finishes off screen */
  .msheet[hidden] .msheet-panel{transform:translateY(calc(100% + 40px));transition-duration:300ms}
  /* the screen's content has the background, not the whole screen: the bar's band is transparent, under the bar the panel is in the sheet colour */
  .scr-view{flex:1 0 auto;background:var(--canvas)}
  /* the air under the content shrinks by --fit when the content would otherwise scroll only a few pixels (whistline.js, fitScreen) */
  .scr-view{padding-bottom:calc(32px - var(--fit,0px) + env(safe-area-inset-bottom))}
  /* the sheet's content bounces like a page, except a drag that started at the top — that pulls down the whole sheet (whistline.js, data-pull) */
  .scr-body[data-pull]{overscroll-behavior-y:none}
  /* the next screen cross-fades with the previous one in place, whole with its bar (transitions.dev, page side-by-side): the new one
     comes lightly from the right, the old one leaves lightly to the left, both by 8 px with a 3 px blur, 250 ms; reversed on return. No
     screen slides over another, so the scrolled content of the one below does not peek through the bar's transparent band.
     The content and each bar element cross-fade separately, not the whole screen: the edge under the bar (.pblur) via --pb-o so
     the blur sees the content under it. */
  .scr.under{visibility:hidden;transition:visibility 0s linear 250ms}
  .scr > .scr-body,.scr-bar > :not(.pblur){transition:opacity 250ms var(--ease-out),translate 250ms var(--ease-out),filter 250ms var(--ease-out)}
  .scr:is(.enter,.leave) > .scr-body,.scr:is(.enter,.leave) > .scr-bar > :not(.pblur){opacity:0;translate:8px 0;filter:blur(3px)}
  .scr.under > .scr-body,.scr.under > .scr-bar > :not(.pblur){opacity:0;translate:-8px 0;filter:blur(3px)}
  .scr:is(.enter,.leave,.under) > .scr-bar > .pblur{--pb-o:0}
  /* the leaving screen is below the one we return to: its scrolled content (opaque under the bar too) would
     otherwise cover the previous screen's bar during the cross-fade */
  .scr.leave{z-index:-1}
  /* buttons that are the same on both screens (‹, share, × between two nested ones, whistline.js
     data-same-bar) stay put: the leaving screen hides them at once, the arriving one has them at once in the same place */
  .msheet-panel[data-same-bar] .scr-bar > :is(.gbtn,.scr-end){transition:none}
  .msheet-panel[data-same-bar] .scr.enter > .scr-bar > :is(.gbtn,.scr-end){opacity:1;translate:none;filter:none}

  /* the page under the sheet: a shrunk card with rounded corners on a black background; it shrinks from where
     it is scrolled to (--sy), clipped only while the sheet is up or leaving (--vclip) */
  body{transition:background-color 300ms cubic-bezier(.32,.72,0,1)}
  /* 1 px taller than the screen: a page exactly the screen's height cannot scroll and the home-screen app (iOS)
     then moves the fixed bottom menu higher. The large viewport (lvh) does not change while Safari's toolbar shrinks
     and grows on scroll, so the page is not laid out again in every frame of it (dvh would be). */
  #view{background:var(--canvas);min-height:calc(100lvh + 1px);transform-origin:50% calc(var(--sy,0) * 1px);clip-path:var(--vclip,none)}
  /* the page card's corners after shrinking match the sheet's corners (36 px): the radius is divided by the card's scale, during a drag too;
     the header is rounded only under the sheet and its corners straighten together with the scale-up so no black is left after closing */
  :root{--page-r:calc(36px / (.9 + .1 * var(--drag-p,0)))}
  .hdr > .wrap{transform-origin:50% 0;border-radius:0}
  #view,.hdr > .wrap{transition:transform 300ms cubic-bezier(.32,.72,0,1),clip-path 300ms cubic-bezier(.32,.72,0,1),background-color 300ms ease-out,border-radius 300ms cubic-bezier(.32,.72,0,1)}
  :root:is([data-sheet],[data-push]) body{background:#000;transition-duration:400ms}
  :root:is([data-sheet],[data-push]) #view,:root:is([data-sheet],[data-push]) .hdr > .wrap{transform:translateY(calc(env(safe-area-inset-top) + 6px)) scale(.9);transition-duration:400ms}
  :root:is([data-sheet],[data-push]) #view{clip-path:inset(calc(var(--sy,0) * 1px) 0 0 0 round var(--page-r) var(--page-r) 0 0)}
  :root:is([data-sheet],[data-push]) .hdr > .wrap{background-color:var(--canvas);border-radius:var(--page-r) var(--page-r) 0 0}
  :root:is([data-sheet],[data-push]) .hdr::before,:root:is([data-sheet],[data-push]) .hdr::after{opacity:0;transition-duration:400ms}
  /* dragged sheet: the page under it scales back up with the finger (--drag-p 0 → 1, whistline.js) and the black fades */
  :root:is([data-sheet],[data-push])[data-sheet-drag] #view,:root:is([data-sheet],[data-push])[data-sheet-drag] .hdr > .wrap{transition:none;
    transform:translateY(calc((env(safe-area-inset-top) + 6px) * (1 - var(--drag-p,0)))) scale(calc(.9 + .1 * var(--drag-p,0)))}
  /* a bottom sheet above the large one (Zdieľať from the team detail): the large sheet steps back, shrunk from its top, and with the finger
     on the bottom sheet it comes back (--push-p 0 → 1, whistline.js) */
  .msheet-panel{transform-origin:50% 0}
  :root[data-sheet][data-push] .msheet-panel{transform:scale(.92)}
  :root[data-sheet][data-push][data-push-drag] .msheet-panel{transition:none;transform:scale(calc(.92 + .08 * var(--push-p,0)))}
  /* the bottom menu leaves as a sheet arrives and comes back after it. The pill and the fade's layers themselves fade (the fade via --pb-o,
     below at .navfade > .pblur), not their parent (.nav, .navfade): a parent with opacity, a transform or visibility is
     a boundary for its descendants' backdrop-filter and iPhone Safari sometimes does not paint the pill's blur on return, the menu
     stays transparent. The header's inert (pageInert) and pointer-events block taps. */
  .navpill{transition:opacity 150ms ease-out,translate 150ms ease-out}
  :root:is([data-sheet],[data-push]) .navpill{opacity:0;translate:0 12px}
  :root:is([data-sheet],[data-push]) :is(.nav,.navpill){pointer-events:none}
  /* Môj tím's circle leaves and comes back with the pill */
  .navlink.me{transition:opacity 150ms ease-out,translate 150ms ease-out,background-color .15s ease-out,scale var(--press)}
  :root:is([data-sheet],[data-push]) .navlink.me{opacity:0;translate:0 12px;pointer-events:none}
}

@media (min-width:720px){
  .msheet{align-items:center;padding:16px}
  .msheet[hidden]{display:flex;visibility:hidden;transition:visibility 0s linear 150ms}
  /* the admin's scrim: the page blurred by 2 px and a touch more saturated under a soft dark gradient */
  .msheet-bg{background:var(--scrim,rgb(0 0 0 / 34%));-webkit-backdrop-filter:blur(2px) saturate(1.2);backdrop-filter:blur(2px) saturate(1.2);
    transition:opacity 250ms var(--ease-out)}
  .msheet[hidden] .msheet-bg{opacity:0;transition-duration:150ms}
  .msheet-panel{width:min(540px,calc(100vw - 32px));height:min(calc(100dvh - 32px),860px);
    border-radius:20px;background:var(--canvas);box-shadow:var(--shadow-modal,0 24px 70px rgb(0 0 0 / 28%));
    transition:transform 250ms var(--ease-out),opacity 250ms var(--ease-out)}
  .msheet[hidden] .msheet-panel{transform:scale(.96);opacity:0;transition-duration:150ms}
  .scr{background:var(--canvas);transition:opacity 250ms var(--ease-out,ease-out),transform 250ms var(--ease-out,ease-out)}
  /* fade under the bar like the admin's top bar: the surface colour, 16 px below the bar, no blur */
  .scr-bar::before{inset:0 0 -16px;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;
    background:linear-gradient(var(--canvas),color-mix(in oklab,var(--canvas) 82%,transparent) 45%,color-mix(in oklab,var(--canvas) 30%,transparent) 75%,transparent)}
  .scr.enter{opacity:0;transform:translateY(24px)}
  .scr.leave{opacity:0;transform:translateY(24px);transition-duration:150ms}
  .scr.under{opacity:0;visibility:hidden;transition:opacity 150ms var(--ease-out),visibility 0s linear 150ms}
  /* in the modal the content is as narrow as on a phone — grids and gaps sized for 760 px tighten */
  .scr-view .gp-tiles,.scr-view .formstrip,.scr-view .seg.big{max-width:none}
  .scr-view .matchview .mbody{padding:32px 0 0}
  .scr-view .matchview .matchtop .lsb{padding-inline:16px}
}
@media (prefers-reduced-transparency: reduce){
  .msheet-bg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(0 0 0 / 50%)}
}
@media (prefers-reduced-motion: reduce){
  /* without motion the sheet still arrives, just faster and without scaling and moving */
  .msheet-panel,.msheet[hidden] .msheet-panel,.msheet[hidden] .msheet-bg,.scr,.scr.under,.scr.leave{transition-duration:200ms}
  .msheet[hidden]{transition-delay:200ms}
  #view,.hdr > .wrap,body,.hdr::before,.hdr::after{transition:none}
  :root:is([data-sheet],[data-push]) #view,:root:is([data-sheet],[data-push]) .hdr > .wrap,:root[data-sheet][data-push] .msheet-panel{transform:none}
  :root:is([data-sheet],[data-push])[data-sheet-drag] #view,:root:is([data-sheet],[data-push])[data-sheet-drag] .hdr > .wrap,
  :root[data-sheet][data-push][data-push-drag] .msheet-panel{transform:none}
  .navpill,:root:is([data-sheet],[data-push]) .navpill{translate:none}
}
@media (min-width:720px) and (prefers-reduced-motion: reduce){
  /* modal without scaling and screens without moving, only the cross-fade */
  .msheet[hidden] .msheet-panel,.scr.enter,.scr.leave{transform:none}
}
/* no motion on a phone either: sheets and the screens in them only cross-fade, nothing comes in from below or the side */
@media (prefers-reduced-motion: reduce){
  .sheet-card,.sheet[hidden] .sheet-card{transform:none;transition:opacity 200ms ease-out}
  .sheet[hidden] .sheet-card{opacity:0}
  .msheet-panel,.msheet[hidden] .msheet-panel{transform:none;transition:opacity 200ms ease-out}
  .msheet[hidden] .msheet-panel{opacity:0}
  .scr,.scr.enter,.scr.leave,.scr.under{transform:none;filter:none;transition:opacity 200ms ease-out,visibility 0s linear 200ms}
  .scr.enter,.scr.leave,.scr.under{opacity:0}
  .scr:is(.enter,.leave,.under) > .scr-bar{transform:none}
  /* on a phone the content and the bar elements cross-fade separately (the same buttons stay put), only without moving and blur */
  @media (max-width:719px){
    .scr.enter,.scr.leave,.scr.under{opacity:1}
    .scr:is(.enter,.leave,.under) > .scr-body,.scr:is(.enter,.leave,.under) > .scr-bar > :not(.pblur){translate:none;filter:none}
  }
}
/* high contrast (Windows): backgrounds disappear, the selected tab, day, group or menu item gets an outline in the system colour;
   the score colon (two dots made of background) is drawn in the text colour and results in the form keep their colour */
@media (forced-colors: active){
  .segb[aria-selected="true"],.segb[aria-current="page"],.htab[aria-current="page"],.opt[aria-current],.navlink[aria-current="page"]{
    outline:2px solid CanvasText;outline-offset:-2px}
  :is(.ntile .nmid b.sc .dots,.lsb-final i,.mb-sc i)::before,:is(.ntile .nmid b.sc .dots,.lsb-final i,.mb-sc i)::after{
    forced-color-adjust:none;background:CanvasText;opacity:1}
  .fbox,.fm-sc,.fseg{forced-color-adjust:none}
}
/* Poradie from 720 px: group tables two side by side, an odd last one (or the only one) across the full width */
@media (min-width:720px){
  .mid.standings:has(> .tblwrap:not([data-final-order])){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mid.standings > .tblwrap:nth-child(odd):last-child{grid-column:1 / -1}
}
/* team on the ice: a red dot with a ripple after the name in the group table */
.ping{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--live);margin-inline-start:-2px}
.ping::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--live);opacity:.3}
@media (prefers-reduced-motion: no-preference){
  .ping::after{animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
  @keyframes ping{75%,100%{transform:scale(2);opacity:0}}
}

/* Page transition as in the admin (app.css): whistline.js swaps tabs without a reload (swapView); when the
   page loads in full (no script, an error), the browser keeps the old page on screen until the new one is ready,
   and swaps them at once, with no white flash. With reduced motion a plain load. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}

/* ─────────────────────────────────────────────────────────────
   SOFT EDGE AS IN iOS (scroll edge effect "soft") — phone
   The web has no blur that strengthens towards the edge, so it is built up: three background-blur layers (2 → 24 px), each
   masked to its own band, the strongest at the edge (every layer is redrawn in each frame of a scroll, so no more of them);
   on top the surface colour, thickening towards the edge on the admin's curve (0 → 30 % → 70 % → 88 %). --pb-dir is the direction to the edge: "to top" at the top, "to bottom" at the bottom. Under the page's
   and the sheet's top bar it shows only once scrolled, under the bottom menu always; the sheet's bottom has no edge, there is no menu
   there. From 720 px the admin's fade (top bar) replaces it and these layers are not drawn.
   ───────────────────────────────────────────────────────────── */
.pblur{display:none}
@media (max-width:719px){
  /* turned on and off via --pb-o on each layer separately: opacity on the whole wrapper would make it, during the cross-fade,
     a boundary the blur cannot see past, and the blur would show only at the end, all at once */
  .pblur{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;--pb-dir:to top;--pb-o:1}
  .pblur > i,.pblur::after{position:absolute;inset:0;opacity:var(--pb-o);transition:opacity var(--fade)}
  .pblur > i{-webkit-mask-image:var(--pb-mask);mask-image:var(--pb-mask);
    -webkit-backdrop-filter:blur(var(--pb-r));backdrop-filter:blur(var(--pb-r))}
  .pblur > i:nth-child(1){--pb-r:2px;--pb-mask:linear-gradient(var(--pb-dir),transparent 0%,#000 12%,#000 35%,transparent 50%)}
  .pblur > i:nth-child(2){--pb-r:8px;--pb-mask:linear-gradient(var(--pb-dir),transparent 20%,#000 40%,#000 62%,transparent 80%)}
  .pblur > i:nth-child(3){--pb-r:24px;--pb-mask:linear-gradient(var(--pb-dir),transparent 55%,#000 80%)}
  .pblur::after{content:"";background:linear-gradient(var(--pb-dir),rgb(var(--canvas-rgb) / 0%),rgb(var(--canvas-rgb) / 30%) 40%,
    rgb(var(--canvas-rgb) / 70%) 75%,rgb(var(--canvas-rgb) / 88%))}

  /* page header: the edge reaches 24 px below the bar; the ::before/::after layers are not drawn */
  .hdr::before,.hdr::after{display:none}
  .hdr > .pblur{bottom:-24px}
  :root[data-at-top] .hdr > .pblur{--pb-o:0}
  :root:is([data-sheet],[data-push]) .hdr > .pblur{--pb-o:0}
  :root:is([data-sheet],[data-push]) .hdr > .pblur > i,:root:is([data-sheet],[data-push]) .hdr > .pblur::after{transition-duration:400ms}

  /* under the bottom menu: the edge from below, starting at the top of the menu pill (21 px from the bottom + 64 px pill) */
  .navfade::before,.navfade::after{display:none}
  .navfade > .pblur{--pb-dir:to bottom;top:auto;height:85px}
  :root:is([data-sheet],[data-push]) .navfade > .pblur{--pb-o:0}
  .navfade > .pblur > i,.navfade > .pblur::after{transition-duration:150ms}
  /* Safari paints the area under its toolbar in the colour of the fixed element at the page's bottom edge (it needs 5 px of it
     solid): a strip in the page colour, 5 px on screen, so that area is the page colour exactly and does not change with the
     content scrolling under the fade. It leaves with the fade under a sheet, whose card then sits on the edge. */
  .navfade::after{display:block;inset:auto 0 -7px;height:12px;background:var(--canvas);will-change:auto;
    -webkit-mask-image:none;mask-image:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity 150ms ease-out}
  :root:is([data-sheet],[data-push]) .navfade::after{opacity:0}
  /* in iPhone Safari (not the home-screen app) its toolbar comes right under the page's bottom: the menu stands 10 px above it,
     the 21 px are the home-screen app's room above the home indicator; the fade starts at the pill's top as before */
  @supports (-webkit-touch-callout:none){
    @media (display-mode: browser){
      .nav{bottom:10px}
      .navfade > .pblur{height:74px}
    }
  }

  /* sheet: under the bar once scrolled (whistline.js, edgeState) */
  .scr-bar::before{display:none}
  .scr-bar > .pblur{bottom:-24px;--pb-o:0}
  .scr[data-stuck] > .scr-bar > .pblur{--pb-o:1}
}

/* Live score: Open Runde has no equal-width digits (tabular-nums changes nothing), so every score number a goal
   rewrites (data-score) has the width of the widest digit — 2 → 3 does not move the colon. A changed digit enters as in the admin
   (count-in.js, app.css "Motion: a live number"): from the side the number went, blurred, 250 ms. */
[data-score]{display:inline-block;min-width:.7em;text-align:center}
[data-count-in]{display:inline-block;transition:opacity 250ms var(--ease-out),translate 250ms var(--ease-out),filter 250ms var(--ease-out);transition-delay:calc(var(--count-i,0) * 80ms)}
@starting-style{[data-count-in]{opacity:0;translate:0 calc(var(--count-dir,1) * 8px);filter:blur(2px)}}
@media (prefers-reduced-motion: reduce){[data-count-in]{transition:none}}