/*
 * @author Emanuele Macera (https://emanuelemacera.com)
 *
 * Lega Pauper Alessandria - the components of the whole site (public pages, organiser area, developer area).
 *
 * Every element that appears on more than one page is styled once here, by a component class (.btn, .card, .table,
 * .badge, .field, .alert, .decklist...). Pages never style these themselves, and nothing here has a colour, a font or
 * a radius of its own: all of it comes from the tokens of a skin (css/skin-*.css). To restyle the whole site you change
 * the skin, not this file.
 *
 * The language is a newspaper: a thick rule opens every section, headings are condensed capitals, a hairline separates
 * rows, buttons are outlined rectangles and the red of the logo marks what matters (the first places, the cut, what is
 * open now).
 */


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 84.375%; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
section[id], [id].card { scroll-margin-top: 84px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; font-family: var(--font-display); letter-spacing: .02em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.35rem); font-weight: var(--display-weight); text-transform: var(--display-transform); }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: var(--display-weight); text-transform: var(--display-transform); }
h3 { font-size: 1.15rem; font-weight: 600; text-transform: var(--display-transform); letter-spacing: .03em; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code, pre, textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--accent-ink); padding: .5rem .8rem; z-index: 99; }

/* ---------- layout ---------- */
.container { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.container-narrow { width: min(100% - 2rem, 760px); margin-inline: auto; }
.section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; border-top: 4px solid var(--ink); padding-top: .6rem; }
.section-head h2 { margin: 0; }
.section-head > .muted, .section-head > a { font: 600 .8rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.section-head > a { color: var(--accent); text-decoration: none; padding-block: .35rem; }
.section-head > a:hover { color: var(--text); }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: .6rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker, .eyebrow { font: 600 .82rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }

/* ---------- masthead: the strip of the day, the name of the league, the menu ---------- */
.topline { background: var(--bar-bg); color: var(--bar-text); font-size: .8rem; }
.topline .container { display: flex; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .45rem; flex-wrap: wrap; }
.topline b { color: #fff; font-weight: 600; }
.topline a { color: var(--bar-text); text-decoration-color: var(--bar-muted); }
.topline a:hover { color: #fff; }
.mast { background: var(--header-bg); border-bottom: 4px solid var(--ink); }
.mast .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: .65rem; }
.mast .tag { font: 600 .74rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.logo { display: block; text-align: center; text-decoration: none; }
.logo img { width: 54px; height: 54px; object-fit: contain; margin: 0 auto .25rem; }
.logo .name { display: block; font: 700 1.3rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.logo small { display: block; color: var(--muted); letter-spacing: .24em; text-transform: uppercase; font-size: .66rem; margin-top: .25rem; }
/* on a computer the name alone is enough: the logo would only make the top of the page taller (it stays on a phone and in the footer) */
@media (min-width: 861px) { .mast .logo img { display: none; } .mast .container { padding-block: .85rem; } }
.logo-on-dark { display: var(--logo-on-dark, block); }
.logo-on-light { display: var(--logo-on-light, none); }
.mast-tools { justify-self: end; display: flex; gap: .5rem; width: min(100%, 320px); }
.mast-tools .search { flex: 1; min-width: 0; }
.search .input { min-height: 40px; padding: .45rem .9rem; font-size: .9rem; background: var(--bg); }

/* light / dark: shown once the page has chosen a theme (data-theme is set by a small script in the head) */
:root {
    --ico-moon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M21 14.5A9 9 0 0 1 9.5 3a9 9 0 1 0 11.5 11.5z%27/%3E%3C/svg%3E");
    --ico-sun: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM11 1h2v3h-2zm0 19h2v3h-2zM1 11h3v2H1zm19 0h3v2h-3zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4zM5.6 19.8l-1.4-1.4 2.1-2.1 1.4 1.4zM18.4 6.3l-1.4 1.4-2.1-2.1 1.4-1.4z%27/%3E%3C/svg%3E");
}
.tbtn { display: none; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); border-radius: var(--radius-ctl); cursor: pointer; }
.tbtn:hover { border-color: var(--ink); }
/* the change of theme fades instead of jumping */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease-in-out; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
:root[data-theme] .tbtn { display: grid; }
:root[data-theme] .tbtn.tbtn-m { display: none; }
.tbtn .ico { --ico: var(--ico-moon); background: var(--text); }
:root[data-theme="dark"] .tbtn .ico { --ico: var(--ico-sun); }
.search-page { display: flex; gap: .6rem; margin-top: .75rem; max-width: 560px; }
.search-page .input { flex: 1; }
.sbtn, .msearch, .tabbar { display: none; }

.mainnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header-bg); border-bottom: 1px solid var(--line); }
.mainnav .container { display: flex; justify-content: center; gap: .3rem; flex-wrap: wrap; }
.mainnav a { text-decoration: none; padding: .8rem 1.3rem; font: 600 .95rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mainnav a:hover { color: var(--accent); }
.mainnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font: var(--display-weight) 1.05rem var(--font-display); text-transform: var(--display-transform); letter-spacing: .08em; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.nav-toggle { display: none; background: transparent; border: 2px solid var(--ink); border-radius: var(--radius-ctl); color: var(--text); padding: .45rem .8rem; font: 600 .85rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

/* the bar at the bottom of the phone: the five places people look for */
.ico { width: 22px; height: 22px; background: var(--muted); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; display: block; }
.ico-home { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 3 2 12h3v8h5v-5h4v5h5v-8h3z%27/%3E%3C/svg%3E"); }
.ico-trophy { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 3h10v2h4v3a4 4 0 0 1-4 4h-.3A5 5 0 0 1 13 15.9V18h4v3H7v-3h4v-2.1A5 5 0 0 1 7.3 12H7a4 4 0 0 1-4-4V5h4zm0 4H5v1a2 2 0 0 0 2 2zm10 0v3a2 2 0 0 0 2-2V7z%27/%3E%3C/svg%3E"); }
.ico-cards { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8 2h9a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM3 6h1v14h11v1H4a1 1 0 0 1-1-1z%27/%3E%3C/svg%3E"); }
.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 13h4v8H4zm6-6h4v14h-4zm6-4h4v18h-4z%27/%3E%3C/svg%3E"); }
.ico-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 2h2v2h6V2h2v2h3v18H4V4h3zm-1 7v11h12V9z%27/%3E%3C/svg%3E"); }
.ico-menu { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z%27/%3E%3C/svg%3E"); }
.ico-user { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.400 0-8 2.200-8 5v3h16v-3c0-2.800-3.600-5-8-5z%27/%3E%3C/svg%3E"); }
.ico-search { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10 3a7 7 0 0 1 5.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z%27/%3E%3C/svg%3E"); }

@media (max-width: 860px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .container, .container-narrow { width: min(100% - 1.5rem, var(--maxw)); }
    .topline .container { padding-block: .35rem; }
    .topline .container > :last-child { display: none; }

    /* masthead: logo and name on one line, search behind a button */
    .mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; border-bottom-width: 3px; }
    .mast .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; padding-block: .55rem; }
    .mast .tag, .mast-tools { display: none; }
    .mast .tbtn { width: 44px; height: 44px; }
    :root[data-theme] .tbtn.tbtn-m { display: grid; }
    .logo { flex: 1; display: flex; align-items: center; gap: .65rem; text-align: left; min-width: 0; }
    .logo img { width: 44px; height: 44px; margin: 0; flex: none; }
    .logo .name { font-size: 1.1rem; line-height: 1.05; letter-spacing: .08em; }
    .logo small { display: none; }
    .sbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); border-radius: var(--radius-ctl); cursor: pointer; padding: 0; }
    .sbtn .ico { background: var(--text); }
    .sbtn[aria-expanded="true"] { background: var(--ink); } .sbtn[aria-expanded="true"] .ico { background: var(--ink-ink); }
    .msearch { display: block; width: calc(100% + 8px); margin-inline: -4px; padding: 0 4px; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .34s cubic-bezier(.2, .8, .2, 1), padding .34s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .34s; }
    .msearch.is-open { max-height: 76px; padding: .55rem 4px 6px; opacity: 1; visibility: visible; transition-delay: 0s; }
    .msearch .input { height: 46px; font-size: 1rem; border-color: var(--ink); }

    .mainnav { display: none; }
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--header-bg); border-top: 3px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .tabbar a, .tabbar .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 60px; margin-top: -3px; text-decoration: none; color: var(--muted); font: 600 .62rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; border-top: 3px solid transparent; }
    .tabbar .tab-more { background: transparent; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
    .tabbar a[aria-current="page"], .tabbar .tab-more[aria-current="page"], .tabbar .tab-more[aria-expanded="true"] { color: var(--accent); border-top-color: var(--accent); }
    .tabbar a[aria-current="page"] .ico, .tabbar .tab-more[aria-current="page"] .ico, .tabbar .tab-more[aria-expanded="true"] .ico { background: var(--accent); }
}
@media (max-width: 380px) { .tabbar a { font-size: .58rem; letter-spacing: .03em; } .logo .name { font-size: .98rem; } }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--bar-bg); color: var(--bar-text); margin-top: 3.5rem; border-top: 4px solid var(--ink); overflow: hidden; }
.site-footer::before { content: ""; position: absolute; right: -60px; top: -40px; width: 380px; height: 380px; background: url("../images/brand/lpa-logo-white-256.png") center / contain no-repeat; opacity: .04; pointer-events: none; transform: rotate(-8deg); }
.site-footer a { color: var(--bar-text); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .muted { color: var(--bar-muted); }
.site-footer h4 { margin: 0 0 1rem; font: 600 .78rem var(--font-display); text-transform: uppercase; letter-spacing: .22em; color: var(--bar-muted); }
.site-footer h4::after { content: ""; display: block; width: 28px; height: 3px; margin-top: .55rem; background: var(--accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* top row: who we are, where to go (two short lists), where we play */
.foot-top { position: relative; display: grid; grid-template-columns: 1.2fr 1.1fr 1fr; gap: 2.5rem; padding-block: 2.8rem 2.2rem; }
.foot-logo { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.foot-logo img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.foot-logo .name { font: 700 1.3rem/1.05 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.foot-brand p { margin: 0 0 1.2rem; max-width: 34ch; color: var(--bar-text); font: italic 1rem/1.5 var(--font-serif); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--bar-line); background: rgba(255, 255, 255, .03); transition: background .15s, border-color .15s; }
.social a:hover { background: var(--accent); border-color: var(--accent); }
.social i { width: 20px; height: 20px; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; display: block; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-content: start; }
.foot-nav a { display: inline-block; padding: .3rem 0; font-weight: 500; border-bottom: 1px solid transparent; }
.foot-nav a:hover { border-bottom-color: var(--accent); }
.foot-where .where-card { display: grid; gap: .55rem; }
.foot-where img { height: 46px; width: auto; justify-self: start; border: 1px solid var(--bar-line); }
.foot-where b { font: 600 1.1rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.foot-where address { font-style: normal; color: var(--bar-muted); line-height: 1.5; }
.foot-where .pin { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; padding: .5rem .85rem; border: 1px solid var(--bar-line); font: 600 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; justify-self: start; }
.foot-where .pin:hover { border-color: var(--accent); }
.foot-where .pin i { width: 16px; height: 16px; background: var(--accent); -webkit-mask: var(--ico-pin) center / contain no-repeat; mask: var(--ico-pin) center / contain no-repeat; }

/* second row: who supports us and the affiliation, side by side */
.foot-partners { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem 3rem; padding-block: 1.8rem; border-top: 1px solid var(--bar-line); }
.tiles { display: flex; flex-wrap: wrap; gap: .7rem; }
.tiles a, .tiles span { display: grid; place-items: center; width: 138px; height: 66px; background: #000; border: 1px solid var(--bar-line); overflow: hidden; transition: border-color .15s, transform .15s; }
.tiles a:hover { border-color: var(--accent); transform: translateY(-2px); }
.tiles img { max-width: 88%; height: 50px; width: auto; object-fit: contain; }
.affil { display: flex; align-items: center; gap: 1.2rem; height: 66px; padding: 0 1.2rem; border: 1px solid var(--bar-line); background: rgba(255, 255, 255, .03); }
.affil img { width: 84px; height: auto; flex: none; }
.affil p { margin: 0; font-size: .9rem; line-height: 1.35; }
.affil b { color: #fff; font: 600 .9rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: .1rem; }

/* last rows: the rights and the legal links, then the small print */
.foot-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding-block: 1.1rem; border-top: 1px solid var(--bar-line); font-size: .88rem; color: var(--bar-text); }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: var(--bar-text); text-decoration: underline; text-decoration-color: var(--bar-line); text-underline-offset: 3px; }
.foot-bottom a:hover { text-decoration-color: var(--accent); }
.foot-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.3rem; }
.foot-fine { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding-block: 0 1.6rem; font-size: .78rem; line-height: 1.5; color: var(--bar-muted); }
.foot-fine p { margin: 0; }
.credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem .55rem; }
.credit .by a { color: var(--bar-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.credit .aka { font-style: italic; }
.credit .links { display: inline-flex; gap: .3rem; }
.credit .links a { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--bar-line); text-decoration: none; }
.credit .links a:hover { border-color: var(--accent); }
.credit .links i { width: 14px; height: 14px; background: var(--bar-text); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; display: block; }
.totop { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--bar-line); text-decoration: none !important; font: 600 .75rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #fff !important; }
.totop:hover { background: var(--accent); border-color: var(--accent); }
.totop i { width: 12px; height: 12px; background: #fff; -webkit-mask: var(--ico-up) center / contain no-repeat; mask: var(--ico-up) center / contain no-repeat; }
:root {
    --ico-fb: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M14 8h3V4h-3a5 5 0 0 0-5 5v2H6v4h3v7h4v-7h3l1-4h-4V9a1 1 0 0 1 1-1z%27/%3E%3C/svg%3E");
    --ico-ig: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.5 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z%27/%3E%3C/svg%3E");
    --ico-tg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M21.5 3.5 2.8 10.7c-.9.3-.9 1.2 0 1.5l4.6 1.4 1.8 5.5c.2.6.9.8 1.4.4l2.6-2.2 4.8 3.5c.6.4 1.4.1 1.6-.6L23 5c.2-1-.7-1.9-1.5-1.5zM9 13l9.5-6-7 7.200-.3 3z%27/%3E%3C/svg%3E");
    --ico-mail: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.500 2 7.500 5.500L19.500 7zM4 17h16V9.200l-8 5.800-8-5.800z%27/%3E%3C/svg%3E");
    --ico-in: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2 9h4v12H2zm7 0h4v1.700c.6-1 1.900-2 3.800-2 3.600 0 4.200 2.400 4.200 5.400V21h-4v-5.800c0-1.400 0-3.200-2-3.200s-2.200 1.500-2.200 3.100V21H9z%27/%3E%3C/svg%3E");
    --ico-gh: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 0 0-3.200 19.500c.5.1.7-.2.7-.5v-1.800c-2.800.6-3.400-1.300-3.400-1.300-.5-1.200-1.100-1.500-1.100-1.500-.9-.6.1-.6.1-.6 1 .1 1.500 1 1.500 1 .9 1.500 2.300 1.100 2.900.8.1-.7.4-1.100.6-1.400-2.200-.3-4.600-1.100-4.600-5 0-1.100.4-2 1-2.700-.1-.3-.4-1.300.1-2.700 0 0 .8-.3 2.700 1a9.400 9.400 0 0 1 5 0c1.900-1.300 2.700-1 2.700-1 .5 1.400.2 2.400.1 2.700.6.7 1 1.600 1 2.700 0 3.900-2.400 4.700-4.600 5 .4.3.7.9.7 1.800v2.700c0 .3.2.6.7.5A10 10 0 0 0 12 2z%27/%3E%3C/svg%3E");
    --ico-pin: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.500A2.500 2.500 0 1 1 12 6.500a2.500 2.500 0 0 1 0 5z%27/%3E%3C/svg%3E");
    --ico-up: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 4l8 8-1.400 1.400L13 7.800V20h-2V7.800l-5.600 5.600L4 12z%27/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
    .foot-top { grid-template-columns: 1fr 1fr; gap: 2rem; padding-block: 2.2rem 1.6rem; }
    .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .site-footer { margin-top: 2.5rem; }
    .site-footer::before { width: 260px; height: 260px; right: -70px; top: -30px; }
    .foot-top { grid-template-columns: 1fr; gap: 1.8rem; padding-block: 1.8rem 1.4rem; }
    .site-footer h4 { margin-bottom: .8rem; }

    /* who we are: logo and name, the motto, four big social buttons side by side */
    .foot-logo { margin-bottom: .7rem; }
    .foot-logo img { width: 50px; height: 50px; }
    .foot-logo .name { font-size: 1.15rem; }
    .foot-brand p { margin-bottom: 1rem; }
    .social { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
    .social a { width: 100%; height: 46px; }

    /* the two lists of links side by side, with a thumb-sized height */
    .foot-nav { gap: 1rem; }
    .foot-nav a { display: flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 1px solid var(--bar-line); width: 100%; }

    /* where we play: logo beside the name and the address, the map button across */
    .foot-where .where-card { grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .1rem; align-items: center; }
    .foot-where img { grid-row: 1 / span 2; height: 52px; }
    .foot-where b { align-self: end; }
    .foot-where address { align-self: start; }
    .foot-where .pin { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 46px; margin-top: .7rem; }

    .foot-partners { display: grid; gap: 1.5rem; padding-block: 1.5rem; }
    .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .tiles a, .tiles span { width: 100%; height: 62px; }
    .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .affil { height: auto; gap: 1rem; padding: .8rem 1rem; }

    /* the last lines: rights, legal links with the way back up, small print */
    .foot-bottom { flex-direction: column; align-items: stretch; gap: .6rem; padding-block: 1.1rem .8rem; }
    .foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.2rem; width: 100%; }
    .foot-tools a:not(.totop) { display: inline-flex; align-items: center; min-height: 44px; }
    .totop { min-height: 44px; padding-inline: 1.1rem; margin-left: auto; }
    .foot-fine { flex-direction: column; align-items: flex-start; gap: .8rem; padding-bottom: 1.4rem; }
    .credit .links a { width: 32px; height: 32px; }
}
.band-affil { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 1.4rem; background: var(--bg-elev); border: 1px solid var(--line); }
.band-affil img { width: 150px; height: auto; flex: none; }
.band-affil b { font: 700 1.15rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; display: block; }
.band-affil p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 560px) { .band-affil { flex-direction: column; align-items: flex-start; gap: .8rem; } .band-affil img { width: 120px; } }

/* ---------- page head: a kicker, the title, a line of text under it ---------- */
.page-head { padding-top: clamp(1.5rem, 4vw, 2.4rem); background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.page-head .container { padding-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { font: 400 1rem/1.5 var(--font-serif); max-width: 60ch; }
.page-head .split p { margin: 0; }
.page-head .tabs { margin-bottom: -1.25rem; border-bottom: 0; }
.breadcrumbs { font: 600 .8rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.breadcrumbs a { color: var(--accent); text-decoration: none; } .breadcrumbs a:hover { color: var(--text); }

/* ---------- front page: the next stage is the lead story ---------- */
.front { display: grid; grid-template-columns: 1.6fr 1fr; margin-top: 2rem; background: var(--bg-elev); border: 1px solid var(--line); }
.front-story { padding: clamp(1.5rem, 4vw, 2.8rem); border-right: 1px solid var(--line); }
.front h1 { margin: .5rem 0 1rem; font-size: clamp(1.95rem, 4.6vw, 3.2rem); line-height: 1; letter-spacing: .01em; }
.front h1 span { color: var(--accent); }
.front .deck { font: 400 1.05rem/1.5 var(--font-serif); color: var(--muted); max-width: 46ch; margin: 0 0 1.4rem; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border-block: 1px solid var(--ink); margin-bottom: 1.5rem; }
.facts div { padding: .8rem 1.6rem .8rem 0; margin-right: 1.6rem; border-right: 1px solid var(--line); }
.facts div:last-child { border: 0; margin: 0; padding-right: 0; }
.facts small { display: block; font: 600 .72rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.facts b { font: 600 1.35rem var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.front-side { padding: 1.6rem; background: var(--bar-bg); color: var(--bar-text); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; }
.front-side img { width: 230px; margin: 0 auto; }
.front-side .big { font: 700 7.5rem/.8 var(--font-display); color: rgba(255, 255, 255, .07); position: absolute; right: -.4rem; bottom: -.4rem; }
.front-side p { margin: 0; font: italic 1rem/1.5 var(--font-serif); color: #cfd2d8; position: relative; }
.front-side p b { font: 600 .95rem var(--font-display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.front-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; margin-top: 2.5rem; align-items: start; }
.front-cols > * + * { margin-top: 0; }
.podium { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.podium li { counter-increment: p; display: flex; align-items: baseline; gap: .9rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.podium li::before { content: counter(p); font: 700 2.4rem/1 var(--font-display); color: var(--accent); width: 1.3rem; }
.podium a { font-weight: 600; text-decoration: none; }
.podium a:hover { text-decoration: underline; }
.podium span { margin-left: auto; font: 600 1rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.season-bar { display: flex; gap: 4px; margin: .8rem 0; }
.season-bar i { flex: 1; height: 10px; background: var(--line); }
.season-bar i.is-done { background: var(--ink); } .season-bar i.is-next { background: var(--accent); }
.index { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--bg-elev); margin-top: 2.5rem; }
.index a { padding: 1.5rem; text-decoration: none; border-right: 1px solid var(--line); transition: background .15s; }
.index a:last-child { border: 0; }
.index a:hover { background: var(--ink); color: var(--ink-ink); }
.index a:hover small { color: #ff8085; } .index a:hover p { color: var(--ink-ink); opacity: .75; }
.index small { font: 600 .75rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.index h3 { margin: .3rem 0 .4rem; font: 700 1.7rem/1 var(--font-display); }
.index p { margin: 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 900px) {
    .front, .front-cols { grid-template-columns: 1fr; }
    .front-story { border-right: 0; }
    .index { grid-template-columns: 1fr 1fr; } .index a:nth-child(2) { border-right: 0; } .index a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
    .front { margin-top: 1rem; }
    .front-story { display: flex; flex-direction: column; padding: 1.25rem 1.1rem 1.3rem; }
    .front .kicker { order: 1; font-size: .75rem; letter-spacing: .16em; }
    .front h1 { order: 2; font-size: 1.95rem; margin: .4rem 0 .9rem; }
    .facts { order: 3; display: block; border-top: 2px solid var(--ink); border-bottom: 0; margin-bottom: 1.1rem; }
    .facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; padding: .65rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .facts small { font-size: .75rem; }
    .facts b { font-size: 1.3rem; text-align: right; }
    .front .btns { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .front .btns .btn { padding: .95rem .5rem; font-size: .9rem; }
    .front .btns .btn-primary { grid-column: 1 / -1; font-size: 1.05rem; padding: 1.1rem .5rem; }
    .front .btns .btn:last-child:nth-child(2) { grid-column: 1 / -1; }
    .front .deck { order: 5; font-size: 1.02rem; margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
    .front-side { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
    .front-side img { width: 52px; flex: none; margin: 0; }
    .front-side .big { display: none; }
    .front-side p { font-size: .92rem; }
    .front-cols { gap: 2rem; margin-top: 2rem; }
    .index { margin-top: 2rem; }
    .index a { padding: 1.1rem 1rem; min-height: 112px; }
    .index h3 { font-size: 1.45rem; }
}
@media (max-width: 360px) { .front h1 { font-size: 2.05rem; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 2px solid var(--ink); background: transparent; color: var(--text); padding: .65rem 1.2rem; border-radius: var(--radius-ctl); font: 600 .92rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.btn:hover { background: var(--btn-hover); color: var(--ink-ink); border-color: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--ink-ink); }
.btn-ghost { border-color: var(--line-strong); }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.btn-danger:hover { background: var(--err); border-color: var(--err); color: #fff; }
.btn-sm { padding: .4rem .85rem; font-size: .8rem; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- cards ---------- */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.card-flush { padding: 0; overflow: hidden; }
.card-accent { border-color: var(--ink); border-top: 4px solid var(--accent); }
.card-title { margin: 0 0 .25rem; font-size: 1.1rem; }
.card-sub { color: var(--muted); font-size: .9rem; margin: 0 0 .75rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; }
.card-body { padding: 1.25rem; }
a.card { display: block; text-decoration: none; transition: border-color .15s, background .15s; }
a.card:hover { border-color: var(--ink); background: var(--bg-elev); color: var(--text); }
a.card h3 { transition: color .15s; } a.card:hover h3 { color: var(--accent); }

/* ---------- tables: ledgers ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font: 600 .75rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); padding: .75rem 1rem; border-bottom: 2px solid var(--ink); white-space: nowrap; background: var(--bg-elev); }
.table td { padding: .65rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.num strong { font: 700 1.25rem/1 var(--font-display); }
.table .rank { width: 3.6rem; font: 700 1.7rem/1 var(--font-display); text-align: center; color: var(--muted); }
.table th.rank { font: 600 .75rem var(--font-display); letter-spacing: .16em; line-height: 1.55; color: var(--muted); }
.table .rank-1, .table .rank-2, .table .rank-3 { color: var(--accent); }
.table tr.is-cut td { border-bottom: 2px dashed var(--accent); }
.table tr.is-qualified td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.player-link { font-weight: 600; text-decoration: none; }
.player-link:hover { text-decoration: underline; }
.only-sm { display: none; }
@media (max-width: 600px) {
    .hide-sm { display: none; }
    .only-sm { display: block; }
    .table th, .table td { padding-inline: .6rem; }
    .table .rank { width: 2.8rem; font-size: 1.6rem; }
    .table th { letter-spacing: .1em; }
}
.table-note { padding: .8rem 1rem; color: var(--muted); font: italic .9rem var(--font-serif); border-top: 1px solid var(--line); }

/* ---------- badges, tags, mana ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 6px; font: 600 .72rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; background: transparent; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.badge-in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.badge-out { color: var(--muted); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.badge-err { color: var(--err); border-color: color-mix(in srgb, var(--err) 55%, transparent); background: color-mix(in srgb, var(--err) 10%, transparent); }
.badge-accent { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.badge-live { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mana-cost { display: inline-flex; gap: 2px; vertical-align: middle; align-items: center; flex: none; }
.mana-cost .ms { margin: 0; }
.deck-line .mana-cost { font-size: .8rem; }
.mana-lg .ms { font-size: 1.5rem; }

/* ---------- forms ---------- */
.field { margin-bottom: 1rem; }
.label { display: block; font: 600 .72rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.input, .select, .textarea { width: 100%; min-height: 46px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); padding: .65rem .95rem; font: inherit; transition: border-color .15s, box-shadow .15s; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.select { -webkit-appearance: none; appearance: none; padding-right: 2.7rem; cursor: pointer; text-overflow: ellipsis; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .95rem center; background-size: 14px; }
.select::-ms-expand { display: none; }

/* the menus drawn by the site (js/lpa.js): the closed one is a button like the fields, the open one a soft panel */
.fs { position: relative; }
.fs-native { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fs-btn { position: relative; display: block; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: none; }
.fs-btn::after { content: ""; position: absolute; right: .95rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: currentColor; -webkit-mask: var(--ico-chev) center / contain no-repeat; mask: var(--ico-chev) center / contain no-repeat; transition: rotate .28s cubic-bezier(.2, .8, .2, 1); }
.fs-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fs-btn[aria-expanded="true"]::after { rotate: 180deg; }
.fs-btn:disabled { opacity: .55; cursor: not-allowed; }
.fs-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: min(330px, 55vh); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 50px -16px rgba(17, 18, 21, .5), 0 2px 6px rgba(17, 18, 21, .08); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
.fs-list.is-open { opacity: 1; transform: none; }
.fs.is-up .fs-list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; }
.fs-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .85rem; border-radius: 9px; cursor: pointer; font-size: .98rem; line-height: 1.3; color: var(--text); }
.fs-opt.is-active { background: var(--bg-elev-2); }
.fs-opt[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.fs-opt[aria-selected="true"]::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.fs-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fs-group { padding: .7rem .85rem .3rem; font: 600 .7rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
:root { --ico-check: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m5 12.500 4.500 4.500L19 7%27/%3E%3C/svg%3E"); }
@media (max-width: 600px) { .fs-opt { padding: .8rem .9rem; font-size: 1rem; } }
.input-icon { position: relative; }
.input-icon .ico { position: absolute; left: .95rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; pointer-events: none; }
.input-icon .input { padding-left: 2.8rem; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.textarea { min-height: 220px; resize: vertical; }
.textarea.mono { font-size: .88rem; line-height: 1.45; }
.hint { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.error { color: var(--err); font-size: .88rem; margin-top: .3rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.check { display: flex; gap: .55rem; align-items: flex-start; margin: .4rem 0; cursor: pointer; }
.check input { margin-top: .3rem; accent-color: var(--accent); }
.choice-group { display: grid; gap: .5rem; }
.choice { display: flex; gap: .6rem; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg-elev); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { accent-color: var(--accent); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upload-current { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.upload-current img { height: 48px; width: auto; background: #fff; padding: 4px; border: 1px solid var(--line); }

/* ---------- alerts ---------- */
.alert { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: 1rem; background: var(--bg-elev); }
.alert-ok { border-left-color: var(--ok); }
.alert-warn { border-left-color: var(--warn); }
.alert-error { border-left-color: var(--err); }
.alert-info { border-left-color: var(--info); }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alert strong { display: block; margin-bottom: .15rem; }

/* ---------- things that open and close ---------- */
:root { --ico-chev: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E"); }
details > summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--accent); -webkit-mask: var(--ico-chev) center / contain no-repeat; mask: var(--ico-chev) center / contain no-repeat; rotate: -90deg; transition: rotate .35s cubic-bezier(.2, .8, .2, 1); }
details:not(.js-details)[open] > summary::before, details.js-details.is-open > summary::before { rotate: 0deg; }
details > summary:hover { color: var(--accent); }
details.js-details > :not(summary) { animation: fade-up .4s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- steps and statuses ---------- */
.stepper { display: flex; gap: .4rem; flex-wrap: wrap; counter-reset: step; }
.step { flex: 1 1 130px; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: 600 .82rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-elev); }
.step::before { counter-increment: step; content: counter(step) ". "; opacity: .7; }
.step.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.step.is-current { color: var(--text-strong); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- tabs, segmented switches, chips ---------- */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-top: 1rem; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: .7rem 1rem; text-decoration: none; color: var(--muted); font: 600 .9rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--accent); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--line); background: var(--bg-elev-2); border-radius: var(--radius-pill); max-width: 100%; }
.seg button, .seg-opt { position: relative; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--muted); font: 600 .85rem var(--font); padding: .5rem 1.05rem; border-radius: var(--radius-pill); cursor: pointer; min-height: 2.4rem; white-space: nowrap; transition: background .15s, color .15s; }
.seg button:hover, .seg-opt:hover { color: var(--text); }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg button[aria-pressed="true"], .seg-opt:has(input:checked) { background: var(--ink); color: var(--ink-ink); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .3rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-elev); cursor: pointer; font: 600 .85rem var(--font); transition: border-color .15s, background .15s, box-shadow .15s; }
.chip:hover { border-color: var(--muted); }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pager { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pager a { flex: 1 1 220px; display: block; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--bg-elev); }
.pager a:hover { border-color: var(--ink); }
.pager small { display: block; color: var(--accent); font: 600 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; }
.pager .next { text-align: right; }

/* ---------- stages ---------- */
.stage-card { display: grid; gap: .35rem; }
.stage-date { font: var(--display-weight) 1.35rem var(--font-display); text-transform: var(--display-transform); letter-spacing: .02em; }
.stage-row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .12s; }
.stage-row:last-child { border-bottom: 0; }
.stage-row:hover { background: var(--row-hover); color: var(--text); }
.stage-no { font: 700 2rem/1 var(--font-display); color: var(--accent); }
.stage-row.is-final .stage-no { color: var(--gold); }
.stage-row strong { font-weight: 600; }
@media (max-width: 560px) { .stage-row { grid-template-columns: 3rem 1fr; padding: 1rem; } .stage-row > :last-child { grid-column: 2; } .stage-no { font-size: 1.7rem; } }

/* ---------- decks ---------- */
.deck-card { display: grid; gap: .5rem; }
.deck-card .art { aspect-ratio: 16 / 7; background: var(--bg-elev-2) center / cover no-repeat; margin: -.25rem -.25rem .25rem; }
.deck-card h3 { margin: 0; }
.decklist { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.deck-group h4 { font: 600 .8rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); border-bottom: 2px solid var(--ink); padding-bottom: .3rem; margin-bottom: .4rem; }
.deck-line { position: relative; display: flex; align-items: center; gap: .55rem; padding: .18rem 0; font-size: .95rem; }
.deck-line .qty { width: 1.5rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.deck-line .cardname { cursor: help; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-line.is-bad .cardname { color: var(--err); text-decoration: line-through; }
.deck-line.is-bad .why { color: var(--err); font-size: .8rem; }
.deck-colors { display: inline-flex; gap: 3px; vertical-align: middle; }
.deck-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
@media (max-width: 960px) { .deck-layout { grid-template-columns: 1fr; } }
.deck-aside { display: grid; gap: var(--gap); }
.deck-aside h4 { font: 600 .78rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: .5rem; }
.deck-aside .row { display: flex; justify-content: space-between; padding: .15rem 0; font-size: .92rem; }
.curve { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.curve div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: .68rem; color: var(--muted); }
.curve i { display: block; width: 100%; background: var(--accent); min-height: 2px; }
.curve span { margin-top: 2px; }
.cardgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 190px)); justify-content: start; }
.photo-board + .photo-board { margin-top: 2.6rem; }
.photo-group { margin-top: 1.5rem; }
.deck-pane .photo-group h3 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem; padding-bottom: .3rem; border-bottom: 2px solid var(--ink); }
.photo-group h3 span { color: var(--text); letter-spacing: 0; }
@media (max-width: 520px) { .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.cardgrid .pic { position: relative; display: block; border-radius: 5%; background: var(--bg-elev-2); aspect-ratio: 488 / 680; }
.cardgrid img { width: 100%; height: 100%; object-fit: cover; border-radius: 5%; }
.cardgrid .pic .name { position: absolute; inset: 0; display: grid; place-items: center; padding: .5rem; text-align: center; font-size: .8rem; font-weight: 700; }
.cardgrid .qty { position: absolute; right: .45rem; bottom: .45rem; min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--accent); color: #fff; border: 2px solid #fff; font: 700 1rem/1 var(--font-display); letter-spacing: .02em; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.cardgrid .pic.is-bad { outline: 3px solid var(--err); }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.deck-pane, .verify, #archetype-box:not([hidden]) { animation: fade-up .38s cubic-bezier(.2, .8, .2, 1) both; }
.deck-pane h3 { font: 600 .8rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 1.1rem 0 .5rem; }
.deck-pane h3:first-child { margin-top: 0; }


/* ---------- the deck archive: numbers, filters, the most played archetypes, the list ---------- */
.figures { display: flex; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.figures div { padding: .55rem 1.2rem; border-right: 1px solid var(--line); text-align: center; }
.figures div:last-child { border-right: 0; }
.figures dt { font: 600 .68rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.figures dd { margin: 0; font: 700 1.5rem/1.1 var(--font-display); }

.filterbar { display: grid; gap: 1.1rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem; box-shadow: 0 1px 2px rgba(17, 18, 21, .04), 0 14px 30px -18px rgba(17, 18, 21, .22); }
.filterbar .field { margin: 0; min-width: 0; }
.fb-search { display: grid; grid-template-columns: 1fr 1fr auto; gap: .9rem; align-items: end; }
.fb-go { min-height: 46px; padding-inline: 1.6rem; gap: .6rem; }
.fb-go .ico { background: currentColor; width: 18px; height: 18px; }
.fb-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.fb-picks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-strong); }
.chip-mana { width: 42px; height: 42px; min-height: 0; padding: 0; border-color: transparent; background: var(--bg-elev-2); }
.chip-mana .ms { font-size: 1.3rem; }
.chip-mana:has(input:checked) { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 3px var(--accent-soft); }

.kicker + .arch-strip { margin-top: .3rem; }
.arch-strip { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem 0 .5rem; }
.arch-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .4rem .35rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-elev); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; transition: border-color .15s, background .15s, box-shadow .15s; }
.arch-chip:hover { border-color: var(--ink); color: var(--text); }
.arch-chip b { font: 700 .85rem var(--font-display); letter-spacing: .04em; min-width: 1.7rem; padding: .1rem .5rem; border-radius: var(--radius-pill); text-align: center; background: var(--bg-elev-2); color: var(--muted); }
.arch-chip .mana-cost { font-size: .8rem; }
.arch-chip.is-on { background: var(--ink); color: var(--ink-ink); border-color: var(--ink); }
.arch-chip.is-on b { background: var(--accent); color: #fff; }

.resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; padding-bottom: .8rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.resultbar strong { font: 700 1.5rem/1 var(--font-display); }
.resultbar > span { color: var(--muted); margin-right: .3rem; }
.tag-x { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .5rem .3rem .85rem; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font: 600 .82rem var(--font); text-decoration: none; transition: background .15s, color .15s; }
.tag-x i { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: #fff; font: 400 1rem/1 var(--font); font-style: normal; }
.tag-x:hover { background: var(--accent); color: #fff; }
.tag-x:hover i { background: #fff; color: var(--accent); }
.resultbar .reset { margin-left: auto; font: 600 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.decks-table { margin-top: .8rem; }
.decks-table tr.group-row td { padding: .55rem 1rem; background: var(--bg-elev-2); border-bottom: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); font-size: .85rem; }
.decks-table tr.group-row b { font: 700 1rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; margin-right: .6rem; }
.decks-table tr.group-row:hover { background: inherit; }
.decks-table .deck-name { font-weight: 700; text-decoration: none; margin-right: .5rem; }
.decks-table .deck-name:hover { color: var(--accent); }
.decks-table .deck-colors { font-size: .9rem; }
.decks-table .rank { width: 3.4rem; }
.empty { text-align: center; padding: 2.2rem 1rem; }
.empty h3 { margin-bottom: .3rem; }

@media (max-width: 900px) {
    .fb-search { grid-template-columns: 1fr 1fr; }
    .fb-go { grid-column: 1 / -1; }
    .fb-filters { grid-template-columns: 1fr 1fr; }
    .figures div { padding-inline: .8rem; }
}
@media (max-width: 600px) {
    .figures { width: 100%; }
    .figures div { flex: 1; padding: .45rem .4rem; }
    .figures dd { font-size: 1.4rem; }
    .filterbar { padding: 1rem; gap: .9rem; border-radius: 14px; }
    .fb-search { grid-template-columns: 1fr; gap: .7rem; }
    .fb-filters { gap: .7rem; }
    .fb-filters .field:last-child { grid-column: 1 / -1; }
    .fb-picks { flex-direction: column; align-items: stretch; gap: .9rem; padding-top: .9rem; }
    .fb-picks .seg { display: flex; width: 100%; }
    .fb-picks .seg-opt { flex: 1; justify-content: center; padding-inline: .4rem; }
    .chips { gap: .4rem; }
    .resultbar .reset { margin-left: 0; }
    .arch-strip { flex-wrap: nowrap; overflow-x: auto; margin-inline: -.75rem; padding-inline: .75rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
    .arch-strip::-webkit-scrollbar { display: none; }
    .decks-table .rank { width: 2.8rem; }
    .decks-table tr.group-row td { padding-inline: .7rem; }
}

/* ---------- the page of a deck: a cover with the art, the share menu, the picture for the social networks ---------- */
:root {
    --ico-wa: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 0 0-8.600 15.100L2 22l5-1.300A10 10 0 1 0 12 2zm5.200 14c-.2.600-1.200 1.200-1.700 1.200-.5.100-1 .2-3.300-.7-2.800-1.100-4.600-4-4.700-4.200-.1-.2-1.100-1.500-1.100-2.800s.7-2 .9-2.300c.3-.3.600-.3.800-.3h.6c.2 0 .4 0 .6.500l.8 2c.1.200.1.300 0 .5l-.4.600-.3.400c-.1.100-.3.300-.1.600.2.300.8 1.300 1.700 2.100 1.100 1 2.100 1.300 2.400 1.400.3.100.5.100.6-.1l.9-1.100c.2-.3.400-.2.600-.1l1.900.9c.3.100.5.200.5.300.1.200.1.800-.1 1.400z%27/%3E%3C/svg%3E");
    --ico-x: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M18.200 2h3.300l-7.200 8.300L23 22h-6.700l-5.200-6.800L5 22H1.700l7.700-8.800L1 2h6.900l4.700 6.200zm-1.200 18h1.800L7 3.900H5.100z%27/%3E%3C/svg%3E");
    --ico-link: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10.600 13.400a1 1 0 0 1 0-1.400l3-3a3 3 0 1 1 4.200 4.200l-1.500 1.500-1.400-1.400 1.500-1.500a1 1 0 0 0-1.400-1.400l-3 3a1 1 0 0 1-1.400 0zm2.800-2.800a1 1 0 0 1 0 1.400l-3 3a3 3 0 1 1-4.200-4.200l1.500-1.500 1.400 1.400-1.500 1.500a1 1 0 0 0 1.400 1.400l3-3a1 1 0 0 1 1.400 0z%27/%3E%3C/svg%3E");
    --ico-share: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M18 16a3 3 0 0 0-2.200 1L8.900 13.100a3 3 0 0 0 0-2.200L15.700 7A3 3 0 1 0 15 5.200L8.300 9A3 3 0 1 0 8.300 15l6.800 3.900A3 3 0 1 0 18 16z%27/%3E%3C/svg%3E");
    --ico-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v8.600l3.500-3.500 3 3 4-5L19 15V6zm4.500 1.500a1.500 1.500 0 1 1 0 3 1.500 1.500 0 0 1 0-3z%27/%3E%3C/svg%3E");
}
.ico-share { --ico: var(--ico-share); } .ico-image { --ico: var(--ico-image); }

.deck-hero { position: relative; color: #fff; background: #0b0c0e; border-bottom: 4px solid var(--ink); }
.deck-hero.has-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 12, 14, .96) 0%, rgba(11, 12, 14, .78) 55%, rgba(11, 12, 14, .5) 100%), var(--art) center 30% / cover; }
.deck-hero:not(.has-art)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% 0, rgba(229, 36, 43, .35), transparent 70%); }
.deck-hero .container { position: relative; padding-block: 1.4rem 2rem; }
.deck-hero .breadcrumbs { color: rgba(255, 255, 255, .65); }
.deck-hero .breadcrumbs a { color: #fff; }
.deck-hero .breadcrumbs a:hover { color: var(--accent); }
.deck-hero-grid { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 2rem; align-items: center; }
.deck-hero h1 { margin: .7rem 0 .8rem; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; color: #fff; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); color: #fff; font: 600 .8rem var(--font); text-decoration: none; }
a.hero-chip { color: #fff; }
a.hero-chip.is-stage { background: rgba(211, 23, 31, .55); border-color: rgba(255, 128, 133, .75); }
a.hero-chip:hover { background: rgba(255, 255, 255, .22); color: #fff; }
a.hero-chip.is-stage:hover { background: var(--accent); border-color: #fff; }
.hero-chip b { font: 700 1rem/1 var(--font-display); letter-spacing: .02em; }
.hero-chip .mana-cost { font-size: .8rem; }
.hero-chip.medal { border-color: transparent; color: #17130a; }
.medal-gold { background: linear-gradient(135deg, #ffd978, #f4b942); }
.medal-silver { background: linear-gradient(135deg, #e7eaf0, #b9bfcc); }
.medal-bronze { background: linear-gradient(135deg, #eeb084, #cf8450); }
.medal-plain { background: rgba(255, 255, 255, .16); color: #fff !important; }
.hero-player { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-size: 1.05rem; }
.hero-player:hover { color: #fff; }
.hero-player b { font-weight: 700; border-bottom: 2px solid var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero-actions .btn .ico { background: currentColor; width: 18px; height: 18px; }
.btn-light { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(255, 255, 255, .08); }
.btn-light:hover { background: #fff; border-color: #fff; color: #0b0c0e; }
.deck-hero-art { margin: 0; position: relative; justify-self: end; width: 100%; transform: rotate(1.5deg); }
.deck-hero-art img { width: 100%; height: auto; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8); }
.deck-hero-art figcaption { margin-top: .6rem; text-align: right; font: italic .85rem var(--font-serif); color: rgba(255, 255, 255, .7); }

/* the share menu */
.share { position: relative; }
.popover { position: absolute; z-index: 40; left: 0; top: calc(100% + .5rem); min-width: 230px; padding: .4rem; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
.popover.is-open { opacity: 1; transform: none; }
.pop-item { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .65rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: 600 .95rem var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.pop-item:hover { background: var(--bg-elev-2); color: var(--text); }
.pop-item i { flex: none; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* the picture for Instagram and Facebook */
.social-panel { padding: 0; overflow: hidden; }
.social-panel > summary { padding: 1.1rem 1.3rem; flex-wrap: wrap; gap: .3rem .9rem; }
.social-panel .sp-title { font: 700 1.15rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.social-body { margin: 0; display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 1.6rem; padding: 0 1.3rem 1.4rem; }
.social-preview { background: var(--bg-elev-2); border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); align-self: start; }
.social-canvas { display: block; width: 100%; height: auto; }
.social-side { display: grid; gap: 1.1rem; align-content: start; }
.social-side .textarea { min-height: 0; font-size: .9rem; }

/* the way to the other lists of the evening */
.deck-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.deck-step { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); text-decoration: none; transition: border-color .18s, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.deck-step:hover { border-color: var(--ink); color: var(--text); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(17, 18, 21, .45); }
.deck-step.is-next { grid-column: 2; flex-direction: row-reverse; text-align: right; }
.deck-step .go { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bg-elev-2); font: 400 1.4rem/1 var(--font); transition: background .18s, color .18s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.deck-step:hover .go { background: var(--accent); color: #fff; }
.deck-step.is-prev:hover .go { transform: translateX(-4px); } .deck-step.is-next:hover .go { transform: translateX(4px); }
.deck-step .body { display: grid; gap: .1rem; min-width: 0; }
.deck-step small { font: 600 .72rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.deck-step b { font: 700 1.3rem/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.deck-step .who { color: var(--muted); font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; }
.deck-step.is-next .who { justify-content: flex-end; }
.deck-step .deck-colors { font-size: .8rem; }

@media (max-width: 860px) {
    .deck-hero-grid { grid-template-columns: 1fr; }
    .deck-hero-art { max-width: 300px; justify-self: start; transform: none; order: -1; }
    .deck-hero-art figcaption { text-align: left; }
}
@media (max-width: 700px) {
    .deck-hero .container { padding-block: 1rem 1.5rem; }
    .deck-hero-art { display: none; }
    .deck-hero h1 { font-size: 2rem; }
    .hero-actions { gap: .5rem; }
    .hero-actions .share, .hero-actions > .btn { flex: 1 1 100%; }
    .hero-actions .share .btn { width: 100%; }
    .popover { right: 0; left: 0; min-width: 0; }
    .social-body { grid-template-columns: 1fr; padding-inline: 1rem; }
    .social-preview { max-width: 300px; justify-self: center; width: 100%; }
    .deck-pager { grid-template-columns: 1fr; gap: .7rem; }
    .deck-step.is-next { grid-column: 1; }
    .deck-step { padding: .9rem 1rem; }
    .deck-step .go { width: 40px; height: 40px; }
    .deck-step b { font-size: 1.1rem; }
}

/* ---------- the page of a player ---------- */
.player-hero .hero-sub { margin: 0; font: italic 1.1rem var(--font-serif); color: rgba(255, 255, 255, .78); }
.player-hero h1 { margin-bottom: .6rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-label .muted { font-size: .8rem; }
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.player-aside .card .kicker { margin-bottom: .7rem; }

.form-chart { display: flex; align-items: stretch; justify-content: space-evenly; gap: 8px; height: 190px; }
.fc-col { flex: 1 1 0; max-width: 92px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); }
.fc-col:hover { color: var(--text); }
.fc-val { font: 700 .95rem/1 var(--font-display); color: var(--text); }
.fc-bar { display: block; width: 100%; max-width: 46px; background: var(--line-strong); border-radius: 6px 6px 2px 2px; min-height: 4px; transition: height .5s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
.fc-bar.is-podium { background: var(--ink); }
.fc-bar.is-win { background: var(--accent); }
.fc-col:hover .fc-bar { opacity: .8; }
.fc-label { font: 600 .72rem var(--font-display); letter-spacing: .12em; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--line-strong); margin: 0 .3rem 0 .8rem; vertical-align: -1px; }
.key:first-child { margin-left: 0; }
.key.is-podium { background: var(--ink); } .key.is-win { background: var(--accent); }

.arch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .8rem; }
.arch-card { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); text-decoration: none; transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.arch-card:hover { border-color: var(--ink); color: var(--text); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(17, 18, 21, .5); }
.arch-card b { font: 700 1.1rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.arch-card .mana-cost { font-size: .8rem; }

.rank-big { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.rank-big b { font: 700 3.2rem/1 var(--font-display); color: var(--accent); }
.rank-big span { font: 600 .85rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.honor-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.honor-list li { display: flex; align-items: baseline; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.honor-list li:last-child { border-bottom: 0; }
.honor-list b { font: 700 1.4rem/1 var(--font-display); width: 2.2rem; color: var(--muted); }
.honor-list b.rank-1, .honor-list b.rank-2, .honor-list b.rank-3 { color: var(--accent); }
.card-rank { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.card-rank li { counter-increment: c; display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .4rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.card-rank li:last-child { border-bottom: 0; }
.card-rank li::before { content: counter(c); grid-row: 1 / span 2; font: 700 1.1rem/1.2 var(--font-display); color: var(--muted); }
.card-rank a { font-weight: 600; text-decoration: none; }
.card-rank a:hover { color: var(--accent); }

@media (max-width: 960px) {
    .player-layout { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .stat-grid { gap: .7rem; }
    .stat { padding: .8rem; }
    .stat-value { font-size: 1.6rem; }
    .form-chart { height: 160px; gap: 5px; }
    .rank-big b { font-size: 2.6rem; }
}
/* ---------- statistics ---------- */
.stat { padding: 1rem 1.1rem; border: 1px solid var(--line); border-top: 4px solid var(--ink); background: var(--bg-elev); }
.stat-value { font: 700 1.9rem/1 var(--font-display); }
.stat-label { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) 3fr 3.2rem; gap: .75rem; align-items: center; margin: .45rem 0; font-size: .9rem; }
.bar { height: 10px; background: var(--bg-elev-2); overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-fill.is-alt { background: var(--ink); }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.fun-card { display: flex; gap: .9rem; align-items: flex-start; }
.fun-icon { font-size: 1.6rem; line-height: 1; }
.fun-title { font: 700 .82rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }

/* ---------- admin and developer shell ---------- */
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.admin-nav { background: var(--bg-elev); border-right: 1px solid var(--line); padding: 1.1rem .8rem; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.admin-nav .brand { margin-bottom: 1.2rem; padding-inline: .4rem; }
.admin-nav a.item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .93rem; border-left: 3px solid transparent; }
.admin-nav a.item:hover, .admin-nav a.item[aria-current="page"] { background: var(--bg-elev-2); color: var(--text); }
.admin-nav a.item[aria-current="page"] { border-left-color: var(--accent); }
.admin-nav .group { font: 600 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin: 1.1rem .7rem .3rem; }
.admin-main { padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; min-width: 0; }
.admin-top { display: none; }
@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-top { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: var(--header-bg); border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 20; }
}
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.alert-count { background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: .72rem; padding: 0 .45rem; margin-left: auto; font-weight: 800; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .92rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.link-box { display: flex; gap: .5rem; flex-wrap: wrap; }
.link-box .input { flex: 1; min-width: 220px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.qr { width: 150px; background: #fff; padding: 8px; border: 1px solid var(--line); }
.log-entry { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.log-entry pre { white-space: pre-wrap; word-break: break-word; font-size: .78rem; color: var(--muted); max-height: 220px; overflow: auto; margin: .4rem 0 0; }

/* ---------- registration page ---------- */
.verify { border: 1px solid var(--line); background: var(--bg-elev); padding: 1.1rem; margin-top: 1rem; }
.verify.is-ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.verify.is-bad { border-color: color-mix(in srgb, var(--err) 60%, transparent); }
.verify-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.verify ul { margin: .4rem 0; padding-left: 1.2rem; }
.suggest { background: transparent; border: 0; color: var(--info); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.alt-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- popup ---------- */
dialog.dialog { width: min(92vw, 30rem); padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .65); }
dialog.dialog h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.dialog-actions form { margin: 0; }

/* ---------- pagination, markdown ---------- */
.pagination { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
.pagination a, .pagination span { padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); text-decoration: none; color: var(--muted); font: 600 .85rem var(--font-display); letter-spacing: .1em; min-width: 2.4rem; text-align: center; }
.pagination a:hover { border-color: var(--ink); color: var(--text); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: var(--ink-ink); }
.prose { max-width: 70ch; font-size: 1.05rem; }
.prose p, .prose li { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.65; }
.prose h2 { margin-top: 1.8em; } .prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin: .3rem 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1em 0; font-family: var(--font); }
.prose th, .prose td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }
.honors { max-width: none; columns: 2 280px; column-gap: 1.5rem; }
.honors h3 { break-after: avoid; margin: 0 0 .5rem; padding-top: .6rem; border-top: 2px solid var(--ink); font: 700 1.2rem var(--font-display); letter-spacing: .06em; }
.honors h3 a { text-decoration: none; }
.honors ol { break-inside: avoid; margin: 0 0 1.5rem; padding: .6rem 1.25rem .6rem 2.8rem; background: var(--bg-elev); border: 1px solid var(--line); list-style: none; counter-reset: h; }
.honors li { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--line); font-family: var(--font); font-size: 1rem; counter-increment: h; position: relative; }
.honors li:last-child { border-bottom: 0; }
.honors li::before { content: counter(h); position: absolute; left: -2.1rem; top: .1rem; font: 700 1.5rem/1.6 var(--font-display); color: var(--muted); }
.honors li:first-child { font-weight: 700; }
.honors li:first-child::before { color: var(--accent); }
.prose blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--accent); color: var(--muted); }

/* ---------- print (lists for the deck check) ---------- */
@media print {
    body { background: #fff; color: #000; display: block; padding: 0; }
    .topline, .mast, .mainnav, .tabbar, .site-footer, .admin-nav, .admin-top, .no-print { display: none !important; }
    .admin-shell { display: block; } .admin-main { padding: 0; }
    .print-deck { break-inside: avoid; page-break-after: always; }
    a { color: #000; text-decoration: none; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* the "show five more" pill at the end of the archetypes */
.arch-more { display: inline-flex; align-items: center; padding: .4rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: 600 .85rem var(--font); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.arch-more:hover { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--ink-ink); }

/* ---------- the cookie banner (js/consent.js) ---------- */
.consent { position: fixed; z-index: 80; left: 1rem; bottom: 1rem; width: min(460px, calc(100% - 2rem)); padding: 1.2rem 1.3rem 1.1rem; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(17, 18, 21, .55), 0 2px 8px rgba(17, 18, 21, .1); opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); outline: none; }
.consent.is-open { opacity: 1; transform: none; }
.consent h2 { margin: 0 2rem .5rem 0; font-size: 1.3rem; }
.consent p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--text); }
.consent p a { color: var(--accent); }
.consent-x { position: absolute; right: .6rem; top: .6rem; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 400 1.6rem/1 var(--font); cursor: pointer; transition: background .15s, color .15s; }
.consent-x:hover { background: var(--bg-elev-2); color: var(--text); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: center; }
.consent-actions[hidden] { display: none; }
.consent-btn { min-height: 46px; width: 100%; }
.consent-link { grid-column: 1 / -1; justify-self: center; padding: .55rem .8rem; border: 0; background: transparent; color: var(--text); font: 600 .88rem var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.consent-link:hover { color: var(--accent); }
.consent-panel { display: grid; gap: .9rem; margin-bottom: 1rem; padding: .9rem 0; border-block: 1px solid var(--line); }
.consent-panel[hidden] { display: none; }
.consent-row { display: flex; gap: .9rem; align-items: flex-start; }
.consent-row label { display: grid; gap: .15rem; cursor: pointer; }
.consent-row label b { font-size: .95rem; }
.consent-row label small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.switch { position: relative; flex: none; width: 46px; height: 26px; margin-top: .1rem; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch.is-locked { opacity: .6; } .switch.is-locked input { cursor: not-allowed; }
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--bar-line); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: #fff; text-decoration-color: var(--accent); }
@media (max-width: 860px) {
    .consent { left: .75rem; right: .75rem; width: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + .6rem); max-height: calc(100vh - 140px); overflow-y: auto; padding: 1rem; }
    .consent h2 { font-size: 1.15rem; }
}
@media print { .consent { display: none; } }

/* the legal pages: long readable text and tables */
.legal { max-width: 78ch; }
.legal h2 { margin-top: 1.8em; padding-top: .6rem; border-top: 2px solid var(--ink); font-size: 1.25rem; }
.legal h2:first-child { margin-top: 0; }
.legal code { padding: .1em .4em; background: var(--bg-elev-2); border-radius: 4px; font-size: .88em; }
.legal-table { font-size: .9rem; }
.legal-table td, .legal-table th { vertical-align: top; }
.legal .table-wrap { margin: 1rem 0; }
@media (max-width: 860px) { .foot-tools .linklike { display: inline-flex; align-items: center; min-height: 44px; } }

/* the names offered while typing (js/lpa.js) */
.sg-wrap { position: relative; }
.sg-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: 340px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 50px -16px rgba(17, 18, 21, .5); opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.sg-list.is-open { opacity: 1; transform: none; }
.sg-opt { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 9px; cursor: pointer; }
.sg-opt.is-active { background: var(--bg-elev-2); }
.sg-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-cost .mana-cost { font-size: .8rem; }
.sg-hint { flex: none; color: var(--muted); font-size: .8rem; }

/* sponsors on the page of the league */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.sponsor-tile { display: grid; gap: .7rem; justify-items: center; padding: 1.1rem 1rem .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
a.sponsor-tile:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(17, 18, 21, .45); color: var(--text); }
.sponsor-tile img { width: 100%; max-width: 190px; height: 84px; object-fit: contain; background: #000; border-radius: 10px; padding: .5rem; }
.sponsor-name { font: 600 .8rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- the hall of fame ---------- */
.hero-sub { margin: 0 0 1rem; font: italic 1.1rem var(--font-serif); color: rgba(255, 255, 255, .78); }
.hall-hero h1 { margin-bottom: .5rem; }
.hall-hero-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; margin-top: .6rem; }
.hall-champion { display: grid; gap: .1rem; margin-top: .4rem; }
.hall-champion b { font: 700 1.9rem/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.hall-champion a { color: #fff; text-decoration-color: var(--accent); }
.hall-figures { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.hall-figures div { border-right-color: rgba(255, 255, 255, .2); }
.hall-figures dt { color: rgba(255, 255, 255, .7); } .hall-figures dd { color: #fff; }
.hall-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.hall-seasons { display: grid; gap: 1.75rem; }
.hall-year-label { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hall-year-row { display: flex; flex-direction: column-reverse; gap: 1rem; } /* narrow screens: one under the other, the latest season of the year first */
@media (min-width: 1100px) {
    .hall-year-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    .hall-year-row .season-card { grid-column: var(--slot); }
}
.hall-aside { position: sticky; top: 76px; }
.season-card { background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 14px; padding: 1.1rem 1.2rem 1rem; }
.season-card.is-live { border-top-color: var(--accent); }
.season-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.season-card-head h2 { margin: 0; font-size: 1.3rem; }
.season-card-head a { text-decoration: none; }
.season-card-head a:hover { color: var(--accent); }
.podium3 { display: grid; gap: .45rem; }
.pod { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; background: var(--bg-elev-2); border-left: 4px solid var(--line-strong); }
.pod-1 { background: linear-gradient(90deg, rgba(244, 185, 66, .28), var(--bg-elev-2) 70%); border-left-color: #f4b942; padding-block: .8rem; }
.pod-2 { border-left-color: #c3c8d2; } .pod-3 { border-left-color: #d38a55; }
.pod-rank { font: 700 1.4rem/1 var(--font-display); color: var(--muted); }
.pod-1 .pod-rank { color: var(--accent); font-size: 1.8rem; }
.pod-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pod-1 .pod-name { font: 700 1.25rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.pod-pts { color: var(--muted); font-size: .85rem; }
.rest { list-style: none; margin: .7rem 0 0; padding: 0; columns: 2; column-gap: 1.2rem; font-size: .92rem; }
.rest li { break-inside: avoid; display: flex; gap: .5rem; align-items: baseline; padding: .28rem 0; border-bottom: 1px solid var(--line); }
.rest b { font: 700 1rem var(--font-display); color: var(--muted); width: 1.8rem; flex: none; }
.titles-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .92rem; }
.titles-table th { text-align: right; padding: .3rem .35rem; font: 600 .68rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.titles-table th:nth-child(2) { text-align: left; }
.titles-table td { padding: .5rem .35rem; border-bottom: 1px solid var(--line); }
.titles-table .r { width: 1.6rem; font: 700 1.1rem var(--font-display); color: var(--muted); }
.titles-table .n { text-align: right; font: 700 1.1rem var(--font-display); font-variant-numeric: tabular-nums; }
.titles-table .n.is-gold { color: var(--accent); }
@media (max-width: 960px) { .hall-layout { grid-template-columns: 1fr; } .hall-aside { position: static; } }
@media (max-width: 600px) { .rest { columns: 1; } .hall-champion b { font-size: 1.5rem; } .hall-figures { width: 100%; } .hall-figures div { flex: 1; } }

/* ---------- the calendar ---------- */
.date-block { display: grid; justify-items: center; align-content: center; width: 78px; min-height: 92px; padding: .4rem 0; background: var(--ink); color: var(--ink-ink); border-radius: 12px; flex: none; text-align: center; line-height: 1; }
.date-block .dow, .date-block .mon { font: 600 .72rem var(--font-display); letter-spacing: .18em; opacity: .8; }
.date-block .day { font: 700 2.4rem/1.05 var(--font-display); }
.date-block.sm { width: 58px; min-height: 66px; border-radius: 10px; }
.date-block.sm .day { font-size: 1.7rem; }
.date-block.sm .dow, .date-block.sm .mon { font-size: .62rem; }
.next-card { display: flex; gap: 1.4rem; align-items: stretch; padding: 1.3rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px; box-shadow: 0 18px 40px -28px rgba(17, 18, 21, .5); }
.next-card .date-block { background: var(--accent); color: #fff; width: 96px; min-height: 0; }
.next-card .date-block .day { font-size: 3.2rem; }
.next-card.is-final .date-block { background: var(--gold); }
.next-body { flex: 1; min-width: 0; display: grid; gap: .55rem; align-content: start; }
.next-body h2 { margin: 0; }
.next-body p { margin: 0; }
.live-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.next-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding: .6rem 0; border-block: 1px solid var(--line); }
.next-facts small { display: block; font: 600 .68rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cal-season-bar { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tl-month { margin-top: .8rem; font: 600 .78rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tl-month:first-child { margin-top: 0; }
.tl-item { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem .75rem .75rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.tl-item:hover { border-color: var(--ink); color: var(--text); transform: translateX(3px); box-shadow: 0 10px 22px -18px rgba(17, 18, 21, .5); }
.tl-item.is-played .date-block { background: var(--bg-elev-2); color: var(--muted); }
.tl-item.is-next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tl-item.is-next .date-block { background: var(--accent); color: #fff; }
.tl-item.is-final .date-block { background: var(--gold); color: #17130a; }
.tl-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.tl-main strong { font: 700 1.2rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.tl-win b { color: var(--accent); }
.tl-state { flex: none; }
@media (max-width: 600px) {
    .next-card { flex-direction: column; gap: 1rem; padding: 1rem; }
    .next-card .date-block { width: 100%; min-height: 0; grid-auto-flow: column; justify-content: center; gap: .8rem; padding: .6rem; }
    .next-card .date-block .day { font-size: 2.2rem; }
    .tl-item { flex-wrap: wrap; padding: .7rem; gap: .7rem; }
    .tl-state { margin-left: calc(58px + .7rem); }
}

/* ---------- the organiser and developer areas: sidebar, phone bar, pages made of panels ---------- */
:root {
    --i-dash: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 3h8v10H3zm10 0h8v6h-8zM3 15h8v6H3zm10-4h8v10h-8z%27/%3E%3C/svg%3E");
    --i-gear: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M19.400 13a7.500 7.500 0 0 0 0-2l2.100-1.600-2-3.500-2.500 1a7 7 0 0 0-1.700-1L15 3h-4l-.400 2.900a7 7 0 0 0-1.700 1l-2.500-1-2 3.500L6.600 11a7.500 7.500 0 0 0 0 2l-2.100 1.600 2 3.500 2.500-1a7 7 0 0 0 1.700 1L11 21h4l.400-2.900a7 7 0 0 0 1.700-1l2.500 1 2-3.500zM13 15.500a3.500 3.500 0 1 1 0-7 3.500 3.500 0 0 1 0 7z%27/%3E%3C/svg%3E");
    --i-log: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2 1 21h22zm1 15h-2v-2h2zm0-4h-2V9h2z%27/%3E%3C/svg%3E");
    --i-list: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 5h2v2H4zm4 0h12v2H8zM4 11h2v2H4zm4 0h12v2H8zM4 17h2v2H4zm4 0h12v2H8z%27/%3E%3C/svg%3E");
    --i-user: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.400 0-8 2.200-8 5v3h16v-3c0-2.800-3.600-5-8-5z%27/%3E%3C/svg%3E");
    --i-pin: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.500A2.500 2.500 0 1 1 12 6.500a2.500 2.500 0 0 1 0 5z%27/%3E%3C/svg%3E");
    --i-download: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M11 3h2v9l3.500-3.500 1.400 1.400L12 15.800 6.100 9.900l1.400-1.400L11 12zM5 19h14v2H5z%27/%3E%3C/svg%3E");
    --i-key: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 14a4 4 0 1 1 3.900-5H22v4h-2v3h-3v-3h-6.100A4 4 0 0 1 7 14zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z%27/%3E%3C/svg%3E");
    --i-out: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 3h9v2H6v14h7v2H4zm12 4 5 5-5 5-1.400-1.400L17.200 13H9v-2h8.200l-2.600-2.600z%27/%3E%3C/svg%3E");
}
.ico-dash { --ico: var(--i-dash); } .ico-gear { --ico: var(--i-gear); } .ico-log { --ico: var(--i-log); } .ico-list { --ico: var(--i-list); }
.ico-user { --ico: var(--i-user); } .ico-pin { --ico: var(--i-pin); } .ico-download { --ico: var(--i-download); } .ico-key { --ico: var(--i-key); }
.ico-out { --ico: var(--i-out); } .ico-moon { --ico: var(--ico-moon); }

.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav .brand { margin-bottom: .8rem; padding: .3rem .5rem 1rem; border-bottom: 1px solid var(--line); }
.admin-nav .item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 .93rem var(--font); text-decoration: none; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.admin-nav .item .ico { width: 18px; height: 18px; flex: none; background: currentColor; }
.admin-nav .item:hover { background: var(--bg-elev-2); color: var(--text); }
.admin-nav .item[aria-current="page"] { background: var(--ink); color: var(--ink-ink); border-left: 0; }
.admin-nav .item[aria-current="page"] .ico { background: var(--ink-ink); }
.admin-nav .alert-count { margin-left: auto; background: var(--accent); color: #fff; }
.admin-nav .group { margin: 1.1rem .75rem .3rem; }
.admin-nav form { margin: 0; }
.admin-tabbar { display: none; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.pg-head h1 { margin: 0; font-size: 1.7rem; }
.pg-head p { margin: .2rem 0 0; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem; }
.metric { display: grid; gap: .15rem; padding: .95rem 1.1rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 12px; text-decoration: none; }
a.metric:hover { border-top-color: var(--accent); color: var(--text); }
.metric.is-warn { border-top-color: var(--warn); } .metric.is-bad { border-top-color: var(--err); } .metric.is-ok { border-top-color: var(--ok); }
.metric b { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: .02em; }
.metric span { color: var(--muted); font-size: .85rem; }
.panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; display: grid; gap: .9rem; align-content: start; }
.panel > h2, .panel > h3 { margin: 0; font-size: 1.15rem; }
.panel > .lead { margin: -.4rem 0 0; color: var(--muted); font-size: .9rem; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.1rem; align-items: start; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .6rem; }
.actions form, .actions a { display: contents; }
.actions .btn { width: 100%; min-height: 46px; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { display: flex; align-items: baseline; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.row-list li:last-child { border-bottom: 0; }
.row-list time { flex: none; width: 5.2rem; color: var(--muted); font-size: .8rem; }
.row-list .who { font-weight: 600; flex: none; }
.row-list .what { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; min-width: 0; }
.ok-banner { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: 12px; }
.alert-list { margin: 0; padding-left: 1.2rem; }

@media (max-width: 860px) {
    .admin-top { padding: .55rem .9rem; border-bottom-width: 3px; }
    .admin-shell { min-height: 0; }
    body.is-admin { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .admin-nav { display: none; }
    .admin-main { padding: 1.1rem .85rem 2rem; }
    .admin-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--header-bg); border-top: 3px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .admin-tabbar a, .admin-tabbar .tab-more { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 62px; margin-top: -3px; border-top: 3px solid transparent; text-decoration: none; color: var(--muted); font: 600 .66rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
    .admin-tabbar .tab-more { background: transparent; border-inline: 0; border-bottom: 0; cursor: pointer; }
    .admin-tabbar a .ico, .admin-tabbar .tab-more .ico { width: 22px; height: 22px; background: var(--muted); }
    .admin-tabbar a[aria-current="page"], .admin-tabbar .tab-more[aria-current="page"], .admin-tabbar .tab-more[aria-expanded="true"] { color: var(--accent); border-top-color: var(--accent); }
    .admin-tabbar a[aria-current="page"] .ico, .admin-tabbar .tab-more[aria-current="page"] .ico, .admin-tabbar .tab-more[aria-expanded="true"] .ico { background: var(--accent); }
    .admin-tabbar .dot { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 .7rem/18px var(--font); text-align: center; }
    .pg-head h1 { font-size: 1.4rem; }
    .panels { grid-template-columns: 1fr; }
    .actions { grid-template-columns: 1fr 1fr; }
    .row-list li { flex-wrap: wrap; gap: .1rem .6rem; }
    .row-list time { width: auto; }
}

/* the "add to calendar" menu */
.cal-popover { min-width: 300px; }
.cal-item { align-items: flex-start; }
.cal-item span { display: grid; gap: .1rem; }
.cal-item small { color: var(--muted); font-weight: 500; font-size: .78rem; line-height: 1.3; }
@media (max-width: 700px) { .cal-menu { flex: 1 1 100%; } .cal-menu > .btn { width: 100%; } .cal-popover { min-width: 0; } }

/* ---------- tournaments: the form, the list, the poster, the public pages ---------- */
.form-wizard { display: grid; gap: 1.1rem; max-width: 760px; }
.form-wizard .field-row { gap: 1rem; }
.form-wizard [hidden] { display: none !important; }
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.kind-card { position: relative; display: grid; gap: .1rem; padding: 1rem 1.1rem; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.kind-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.kind-card b { font: 700 2rem/1 var(--font-display); letter-spacing: .04em; }
.kind-card span { font-weight: 600; }
.kind-card small { color: var(--muted); }
.kind-card:hover { border-color: var(--muted); }
.kind-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.kind-card:has(input:checked) b { color: var(--accent); }
.kind-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .7rem; flex-wrap: wrap; padding: .9rem 0 1rem; background: linear-gradient(180deg, transparent, var(--bg) 35%); }
details.panel > summary { display: flex; cursor: pointer; }

.t-card { display: flex; gap: 1.1rem; padding: 1rem; background: var(--bg-elev); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 14px; }
.t-card.is-live { border-left-color: var(--ok); }
.t-thumb { flex: none; width: 110px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t-kind { font: 700 1.8rem var(--font-display); color: var(--ink-ink); letter-spacing: .06em; }
.t-card.is-compact { padding: .7rem .9rem; }
.t-card.is-compact .t-thumb { width: 64px; }
.t-body { flex: 1; min-width: 0; display: grid; gap: .35rem; align-content: start; }
.t-body h3 { margin: 0; font-size: 1.25rem; }
.hero-chips-lite { display: flex; flex-wrap: wrap; gap: .35rem; }
.t-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.t-actions form { display: contents; }

.poster-layout { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 1.6rem; align-items: start; }
.poster-stage { position: sticky; top: 1rem; }
.poster-preview { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-elev-2); box-shadow: 0 24px 50px -28px rgba(17, 18, 21, .6); }
.poster-preview canvas { display: block; width: 100%; height: auto; }
.poster-current { width: 100%; max-width: 240px; border-radius: 10px; border: 1px solid var(--line-strong); }
.style-seg { width: 100%; display: flex; } .style-seg .seg-opt { flex: 1; justify-content: center; }

.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.1rem; }
.tour-card { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; text-decoration: none; transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.tour-card.is-team { border-top-color: var(--ink); }
.tour-card:hover { border-color: var(--ink); color: var(--text); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(17, 18, 21, .5); }
.tour-poster { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.tour-poster img { width: 100%; height: 100%; object-fit: cover; }
.tour-kind { font: 700 2.2rem var(--font-display); color: var(--ink-ink); letter-spacing: .06em; }
.tour-body { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.tour-body strong { font: 700 1.25rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.tour-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.tour-grid.is-past .tour-card { opacity: .8; border-top-color: var(--line-strong); }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start; }
.tour-poster-art { transform: none; }
.tour-poster-art img { border-radius: 10px; }
.kv.big { gap: .7rem 1.4rem; font-size: 1rem; }
.kv.big dt { font: 600 .75rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; padding-top: .2rem; }

@media (max-width: 900px) { .poster-layout, .tour-layout { grid-template-columns: 1fr; } .poster-stage { position: static; max-width: 420px; margin-inline: auto; width: 100%; } }
@media (max-width: 600px) {
    .kind-pick { grid-template-columns: 1fr; }
    .t-card { flex-direction: column; } .t-thumb { width: 100%; aspect-ratio: 16 / 9; } .t-thumb img { object-position: top; }
    .tour-card { grid-template-columns: 96px 1fr; gap: .8rem; }
    .tour-poster-art { max-width: 260px; }
}

/* ---------- the head of every secondary page: dark, compact ---------- */
.cal-hero .container { padding-block: 1rem 1.3rem; }
.cal-hero h1 { margin: .35rem 0 .3rem; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.cal-hero .hero-sub { margin: 0; font-size: 1rem; }
.cal-hero .hall-hero-grid { margin-top: .2rem; align-items: flex-end; }
.cal-hero .breadcrumbs { font-size: .82rem; }
.hero-select .select, .hero-select select { min-width: 12rem; }
@media (max-width: 600px) {
    .cal-hero .container { padding-block: .75rem 1rem; }
    .cal-hero h1 { font-size: 1.55rem; margin: .25rem 0 .2rem; }
    .cal-hero .hero-sub { font-size: .92rem; }
    .cal-hero .hall-hero-grid { gap: .7rem; }
    .cal-hero .hero-actions, .cal-hero .hero-select, .cal-hero .hero-select .fs { width: 100%; }
    .cal-hero .hero-actions .btn, .cal-hero .hero-actions > * { flex: 1 1 auto; }
}

/* ---------- statistics ---------- */
.chipnav { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 4; padding: .55rem 0; background: var(--bg); }
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a { flex: none; padding: .35rem .95rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font: 600 .82rem var(--font); text-decoration: none; color: var(--text); background: var(--bg-elev); transition: background .15s, color .15s, border-color .15s; }
.chipnav a:hover { background: var(--ink); color: var(--ink-ink); border-color: var(--ink); }
.stat-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.rank-list { background: var(--bg-elev); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.rank-row { display: grid; grid-template-columns: 2rem minmax(120px, 1.3fr) 2fr 5.2rem 3.2rem 4.4rem; gap: .8rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.rank-row:last-child { border-bottom: 0; }
.rank-row[hidden] { display: none; }
.rk { font: 700 1.1rem var(--font-display); color: var(--muted); text-align: center; }
.rk.is-top { color: var(--accent); }
.rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rn a { text-decoration: none; color: var(--text); } .rn a:hover { color: var(--accent); }
.rv { display: grid; text-align: right; line-height: 1.15; } .rv small, .rt small { color: var(--muted); font-size: .72rem; }
.rt { text-align: right; font-weight: 600; }
.rr { text-align: center; }
.pill { display: inline-block; min-width: 2.6rem; padding: .1rem .5rem; border-radius: var(--radius-pill); font: 700 .8rem var(--font); text-align: center; background: var(--bg-elev-2); }
.pill.is-up { background: rgba(31, 138, 76, .16); color: var(--ok); }
.pill.is-down { background: rgba(229, 36, 43, .13); color: var(--accent); }
.card-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .9rem; margin-top: .9rem; }
.card-wall[hidden] { display: none; }
.card-tile { position: relative; display: grid; gap: .35rem; }
.card-tile img { width: 100%; height: auto; aspect-ratio: 488 / 680; border-radius: 5%; box-shadow: 0 10px 22px -14px rgba(17, 18, 21, .7); background: var(--bg-elev-2); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.card-tile:hover img { transform: translateY(-4px); }
.card-tile-empty { aspect-ratio: 488 / 680; display: grid; place-items: center; padding: .6rem; text-align: center; border-radius: 5%; background: var(--bg-elev-2); font-weight: 600; }
.card-tile-rank { position: absolute; top: .4rem; left: .4rem; min-width: 1.7rem; padding: .1rem .4rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--ink-ink); font: 700 .8rem var(--font-display); text-align: center; }
.card-tile-info { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font-size: .8rem; color: var(--muted); }
.card-tile-info b { font: 700 1.15rem var(--font-display); color: var(--text); }
@media (max-width: 760px) {
    .stat-grid.is-3 { grid-template-columns: 1fr; }
    .rank-row { grid-template-columns: 1.6rem minmax(0, 1fr) 4.2rem 3rem; gap: .5rem .6rem; padding: .6rem .7rem; }
    .rank-row .rb { grid-column: 2 / -1; grid-row: 2; }
    .rank-row .rt { display: none; }
    .card-wall { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}

/* ---------- the league page ---------- */
.lega-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; padding: 1.4rem 1.6rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.lega-intro .lead { margin: .5rem 0 0; font: 1.12rem/1.55 var(--font-serif); color: var(--text); }
.lega-figures { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.lega-figures div { display: flex; flex-direction: column-reverse; align-items: center; padding: .4rem .5rem; text-align: center; border-right: 1px solid var(--line); }
.lega-figures div:last-child { border-right: 0; }
.lega-figures dd { margin: 0; font: 700 2.4rem/1 var(--font-display); }
.lega-figures dt { font: 600 .72rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.lega-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.lega-tile { position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.1rem 3rem 1.1rem 1.2rem; background: var(--bg-elev); border: 1px solid var(--line); border-left: 4px solid var(--ink); text-decoration: none; color: var(--text); transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.lega-tile b { font: 700 1.25rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.lega-tile span { color: var(--muted); font-size: .9rem; }
.lega-go { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 1.4rem; color: var(--muted); transition: transform .2s, color .15s; }
.lega-tile:hover { border-left-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(17, 18, 21, .45); color: var(--text); }
.lega-tile:hover .lega-go { color: var(--accent); transform: translate(4px, -50%); }
.lega-tiles.is-small .lega-tile { padding-block: .9rem; }
.lega-tiles.is-small .lega-tile b { font-size: 1.05rem; }
@media (max-width: 760px) {
    .lega-intro { grid-template-columns: 1fr; padding: 1.1rem; }
    .lega-figures dd { font-size: 2rem; }
}
.cal-hero + .section { padding-top: 1rem; }

/* ---------- the organiser: the thing to do now, the coming events, the steps of a stage ---------- */
.focus { position: relative; display: grid; gap: .8rem; padding: 1.5rem 1.6rem 1.6rem; color: #fff; background: #0b0c0e; border-radius: 16px; overflow: hidden; }
.focus::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 92% 0, rgba(229, 36, 43, .45), transparent 70%); pointer-events: none; }
.focus > * { position: relative; }
.focus-tag { justify-self: start; padding: .2rem .7rem; border-radius: var(--radius-pill); background: var(--accent); font: 700 .72rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.focus h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.1; }
.focus p { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, .78); }
.focus-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-start; margin-top: .4rem; }
.focus-actions form { display: contents; }
.focus-wide { flex: 1 1 100%; display: grid; gap: .6rem; }
.focus .btn:not(.btn-primary) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); color: #fff; }
.focus .btn:not(.btn-primary):hover { background: #fff; color: #0b0c0e; }
.focus .btn-ghost { background: transparent; border-color: transparent; text-decoration: underline; }
.focus .input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.focus .muted { color: rgba(255, 255, 255, .65); }
.focus details summary { cursor: pointer; color: rgba(255, 255, 255, .8); }
.focus .textarea { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.focus.is-calm { background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); }
.focus.is-calm h2 { color: var(--text); } .focus.is-calm p { color: var(--muted); }
.focus.is-calm::before { display: none; }
.file-btn { cursor: pointer; }
.upload-form { display: grid; gap: .7rem; justify-items: start; }

/* the standing typed by hand: rows are dragged by the handle, the position is only shown */
.rank-table td, .rank-table th { vertical-align: middle; }
.rank-table .pos-cell { width: 1%; white-space: nowrap; }
.rank-table .pos-box { display: flex; align-items: center; gap: .3rem; }
.rank-table .pos-n { display: inline-block; min-width: 1.5rem; text-align: center; font-family: var(--font-display); font-size: 1.15rem; }
.rank-table .grip { cursor: grab; touch-action: none; user-select: none; padding: .3rem .2rem; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.rank-table .grip:hover { color: var(--text); }
.rank-table .move { appearance: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-size: .7rem; line-height: 1; cursor: pointer; }
.rank-table .move:hover { color: var(--text); border-color: var(--text); }
.rank-table tr.is-dragging { background: var(--bg-elev); outline: 2px solid var(--accent); outline-offset: -2px; }
.rank-table tr.is-dragging .grip { cursor: grabbing; }

.ev-row { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .8rem; align-items: center; padding: .6rem .2rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); transition: background .15s; }
.ev-row:first-of-type { border-top: 0; }
.ev-row:hover { background: var(--bg-elev-2); color: var(--text); }
.ev-date { display: grid; place-items: center; align-content: center; width: 3.4rem; height: 3.4rem; border-radius: 10px; background: var(--ink); color: var(--ink-ink); line-height: 1; }
.ev-date b { font: 700 1.4rem var(--font-display); }
.ev-date small { font: 600 .66rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ev-body { display: grid; gap: .1rem; min-width: 0; }
.ev-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-body small { color: var(--muted); }
@media (max-width: 600px) {
    .focus { padding: 1.2rem 1.1rem 1.3rem; border-radius: 14px; }
    .focus-actions > .btn, .focus-actions form { flex: 1 1 100%; }
    .focus-actions .btn { width: 100%; }
    .ev-row { grid-template-columns: 3rem 1fr; } .ev-row .badge { grid-column: 2; justify-self: start; }
}
.stepper.is-compact { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.2rem; gap: .3rem; }
.stepper.is-compact::-webkit-scrollbar { display: none; }
.stepper.is-compact .step { flex: 1 0 auto; padding: .45rem .8rem; border-radius: var(--radius-pill); font-size: .74rem; white-space: nowrap; text-align: center; }
details.danger-zone { padding: .8rem 1.2rem; }
details.danger-zone > summary { cursor: pointer; }
.focus-actions form.inline-form { display: flex; gap: .5rem; align-items: center; }
@media (max-width: 600px) { .focus-actions form.inline-form .select { flex: 1; width: auto; } .focus-actions form.inline-form .btn { width: auto; flex: 1; } }
a.season-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: var(--text); transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1); }
a.season-row:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--text); }
a.season-row.is-current { border-left: 4px solid var(--accent); }
.season-row-main { display: grid; gap: .15rem; } .season-row-main strong { font: 700 1.2rem var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
details.advanced > summary { cursor: pointer; font-weight: 600; }
details.panel.advanced { gap: 0; }

/* the picture of a card next to its name */
.card-ref { cursor: help; border-bottom: 1px dotted var(--accent); }
.card-ref:hover, .card-ref:focus-visible { color: var(--accent); outline: 0; }
.card-peek { position: fixed; z-index: 90; width: 244px; height: auto; aspect-ratio: 488 / 680; border-radius: 5%; box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .65); pointer-events: none; background: var(--bg-elev-2); }
.card-peek[hidden] { display: none; }
@media (max-width: 600px) { .card-peek { width: 200px; } }

/* ---------- "Altro": the sheet that opens over the bottom bar of a phone ---------- */
.sheet, .sheet-backdrop { display: none; }
@media (max-width: 860px) {
    .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(8, 9, 11, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
    .sheet-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
    .sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: min(82vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: .4rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 4px solid var(--accent); border-radius: 18px 18px 0 0; box-shadow: 0 -24px 48px -20px rgba(0, 0, 0, .55); transform: translateY(105%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s; }
    .sheet.is-open { transform: none; visibility: visible; transition-delay: 0s; }
    .sheet-grip { width: 42px; height: 4px; margin: .35rem auto .8rem; border-radius: 4px; background: var(--line-strong); }
    .sheet-group { padding: .35rem 0 .7rem; }
    .sheet-group + .sheet-group { border-top: 1px solid var(--line); padding-top: .8rem; }
    .sheet-group h2 { margin: 0 0 .55rem; font: 700 .72rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
    .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .sheet-grid a { display: flex; align-items: center; gap: .65rem; padding: .75rem .8rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); }
    .sheet-grid a .ico { flex: none; width: 24px; height: 24px; background: var(--accent); }
    .sheet-grid a span { display: grid; font: 700 .95rem/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
    .sheet-grid a small { font: 400 .72rem var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: .15rem; }
    .sheet-grid a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
    .sheet-list { display: grid; }
    .sheet-list a, .sheet-list button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 46px; padding: .5rem .2rem; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; text-decoration: none; color: var(--text); font: 500 .95rem var(--font); cursor: pointer; }
    .sheet-list > :last-child, .sheet-list > form:last-child button { border-bottom: 0; }
    .sheet-list form { margin: 0; }
    .sheet-list .alert-count { width: auto; min-height: 0; padding: 0 .45rem; border: 0; margin-left: auto; }
    .sheet-list .ico { flex: none; width: 20px; height: 20px; background: var(--muted); }
    .sheet-list a[aria-current="page"] { color: var(--accent); font-weight: 700; }
    .sheet-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .3rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; }
    .sheet-legal a { color: var(--muted); }
    html.sheet-lock { overflow: hidden; }
}
.ico-more { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%275%27 cy=%2712%27 r=%272.2%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.2%27/%3E%3Ccircle cx=%2719%27 cy=%2712%27 r=%272.2%27/%3E%3C/svg%3E"); }
.ico-star { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2l3 6.5 7 .9-5.1 4.8 1.3 7-6.2-3.4-6.2 3.4 1.3-7L2 9.4l7-.9z%27/%3E%3C/svg%3E"); }
.ico-info { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v2h-2zm0 4h2v6h-2z%27/%3E%3C/svg%3E"); }

/* ---------- the date picker and the dates of a new season ---------- */
.dp { position: relative; display: flex; gap: .5rem; align-items: stretch; }
.dp-field { flex: 1; display: flex; align-items: center; gap: .6rem; text-align: left; cursor: pointer; min-height: 46px; color: var(--text); }
.dp-field .ico { flex: none; width: 18px; height: 18px; background: var(--muted); }
.dp-field.is-empty .dp-text, .dp.is-empty .dp-text { color: var(--muted); }
.dp-field[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dp-time { width: 5.4rem; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.dp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 308px; max-width: calc(100vw - 2rem); padding: .8rem .8rem .6rem; background: var(--bg-elev); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: 14px; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55); animation: dp-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes dp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dp-backdrop { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dp-title { font: 700 1.05rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.dp-nav { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.dp-nav:hover { background: var(--ink); color: var(--ink-ink); }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow span { padding: .3rem 0; text-align: center; font: 600 .68rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dp-day { aspect-ratio: 1; margin: 1px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font: 500 .92rem var(--font); cursor: pointer; transition: background .12s, color .12s; }
.dp-day:hover { background: var(--bg-elev-2); }
.dp-day.is-out { color: var(--muted); opacity: .45; }
.dp-day.is-today { box-shadow: inset 0 0 0 2px var(--line-strong); }
.dp-day.is-on, .dp-day.is-on:hover { background: var(--accent); color: #fff; opacity: 1; font-weight: 700; }
.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: space-between; margin-top: .3rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.dp-link { border: 0; background: none; color: var(--accent); font: 600 .85rem var(--font); cursor: pointer; padding: .3rem .2rem; }
.dp-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .dp-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(8, 9, 11, .55); }
    .dp-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; z-index: 61; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; animation: dp-up .3s cubic-bezier(.2, .8, .2, 1); }
    @keyframes dp-up { from { transform: translateY(100%); } to { transform: none; } }
    .dp-day { font-size: 1.02rem; }
}
.schedule { display: grid; gap: .5rem; }
.schedule[hidden] { display: none; }
.sched-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.sched-row[hidden] { display: none; }
.sched-n { font: 700 1.3rem var(--font-display); color: var(--accent); text-align: center; }
.sched-skip { white-space: nowrap; }
.sched-final { display: grid; gap: .5rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); }
@media (max-width: 600px) { .sched-row { grid-template-columns: 1.6rem minmax(0, 1fr); } .sched-skip { grid-column: 2; justify-self: start; } }

/* the logo of the kind of a tournament */
.tour-logo { display: block; width: clamp(150px, 22vw, 220px); height: auto; margin: 0 0 .9rem; }
.tour-kind-logo { width: 84%; height: auto; }
.kind-card b { display: block; height: 56px; }
.kind-card b img { height: 56px; width: auto; max-width: 100%; }
.kind-card:has(input:checked) b { color: inherit; }

/* ---------- the text editor (Quill) in the colours of the site ---------- */
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .5rem; } .md ul, .md ol { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.editor { --editor-min: 200px; }
.editor .ql-toolbar.ql-snow { border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--bg-elev-2); padding: .4rem .5rem; font-family: var(--font); }
.editor .ql-container.ql-snow { border: 1px solid var(--line-strong); border-radius: 0 0 10px 10px; background: var(--bg-elev); font: 1rem/1.6 var(--font); color: var(--text); }
.editor .ql-editor { min-height: var(--editor-min); padding: .8rem 1rem; }
.editor .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.editor .ql-editor h2 { font: 700 1.5rem var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin: .8rem 0 .4rem; }
.editor .ql-editor h3 { font: 700 1.2rem var(--font-display); text-transform: uppercase; margin: .7rem 0 .3rem; }
.editor .ql-editor blockquote { border-left: 4px solid var(--accent); color: var(--muted); margin: .5rem 0; padding-left: 1rem; }
.editor .ql-editor a { color: var(--accent); }
.editor:focus-within .ql-toolbar.ql-snow, .editor:focus-within .ql-container.ql-snow { border-color: var(--accent); }
.editor .ql-snow .ql-stroke { stroke: var(--text); }
.editor .ql-snow .ql-fill { fill: var(--text); }
.editor .ql-snow .ql-picker { color: var(--text); font-family: var(--font); }
.editor .ql-snow .ql-picker-options { background: var(--bg-elev); border-color: var(--line-strong); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }
.editor .ql-snow.ql-toolbar button:hover, .editor .ql-snow.ql-toolbar .ql-picker-label:hover, .editor .ql-snow.ql-toolbar .ql-picker-item:hover { color: var(--accent); }
.editor .ql-snow.ql-toolbar button:hover .ql-stroke, .editor .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.editor .ql-snow.ql-toolbar button:hover .ql-fill, .editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }
.editor .ql-snow.ql-toolbar button.ql-active, .editor .ql-snow.ql-toolbar .ql-picker-label.ql-active { color: var(--accent); }
.editor .ql-snow .ql-tooltip { background: var(--bg-elev); color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); border-radius: 10px; z-index: 5; }
.editor .ql-snow .ql-tooltip input[type=text] { background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; }
.editor .ql-snow .ql-tooltip a.ql-action::after, .editor .ql-snow .ql-tooltip a.ql-remove::before { color: var(--accent); }
.editor-mini .ql-toolbar.ql-snow { padding: .25rem .4rem; }

/* the actions of the next stage: side by side, as wide as the card */
.next-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
/* on a phone the two buttons share the width, side by side; on a computer they are as wide as their words */
@media (max-width: 600px) {
    .next-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .next-actions .btn { width: 100%; justify-content: center; text-align: center; padding-inline: .5rem; }
    .next-actions .btn:only-child { grid-column: 1 / -1; }
}

/* ---------- the registration of a deck, step by step ---------- */
#deckform:not(.is-wizard) .wiz-q, #deckform:not(.is-wizard) .wiz-help, #deckform:not(.is-wizard) .method-pick, #deckform:not(.is-wizard) .wiz-live { display: none; }
#deckform:not(.is-wizard) .wiz-step { margin-bottom: 1.4rem; }
#deckform:not(.is-wizard) [data-method] { display: block; }
#deckform:not(.is-wizard) [data-method][hidden] { display: block; }
.wiz-step[hidden], .wiz-progress[hidden], .wiz-nav[hidden], [data-method][hidden] { display: none !important; }
.wiz-progress { margin-bottom: 1.2rem; }
.wiz-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.wiz-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.wiz-progress ol { display: flex; gap: .3rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.wiz-progress li { flex: 1; }
.wiz-progress li button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .2rem 0; border: 0; background: none; color: var(--muted); font: 600 .78rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: default; text-align: left; }
.wiz-progress li.is-done button { color: var(--ok); cursor: pointer; }
.wiz-progress li.is-current button { color: var(--text); }
.wiz-progress .n { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid currentColor; font-size: .8rem; }
.wiz-progress li.is-current .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-progress li.is-done .n { background: var(--ok); border-color: var(--ok); color: #fff; }
.wiz-count { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }
.is-wizard .wiz-step { padding: 1.3rem 1.3rem 1.4rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; animation: wiz-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes wiz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wiz-q { margin: 0 0 .3rem; font-size: 1.6rem; outline: 0; }
.wiz-help { margin: 0 0 1.1rem; color: var(--muted); }
.wiz-error { margin: 1rem 0 0; padding: .7rem .9rem; border-left: 4px solid var(--accent); background: var(--accent-soft); font-weight: 600; }
.wiz-live { min-height: 1.4rem; margin-top: .6rem; font-size: .92rem; color: var(--muted); }
.wiz-live.is-ok { color: var(--ok); font-weight: 600; } .wiz-live.is-warn { color: var(--accent); font-weight: 600; }
.wiz-live.is-busy::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.1em; }
@keyframes spin { to { transform: rotate(360deg); } }
.wiz-how { margin-top: .8rem; font-size: .9rem; } .wiz-how summary { cursor: pointer; font-weight: 600; } .wiz-how ul { margin: .5rem 0 0; padding-left: 1.1rem; }

.method-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.method-card { position: relative; display: grid; gap: .2rem; padding: .9rem 1rem; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.method-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.method-card b { font: 700 1.15rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.method-card span { color: var(--muted); font-size: .85rem; }
.method-card.is-on, .method-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.method-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.verify-fixes { margin-top: .8rem; padding: .7rem .9rem; border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.verify-fixes ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.cardlist { margin-top: .6rem; }
.cardlist h4 { margin: .9rem 0 .4rem; padding-bottom: .3rem; border-bottom: 2px solid var(--ink); font: 700 .8rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cardlist h4:first-child { margin-top: .2rem; }
.cl-blocks { columns: 3 220px; column-gap: 1.6rem; }
.cl-block { break-inside: avoid; margin-bottom: 1rem; }
.cl-row { display: flex; gap: .6rem; padding: .15rem 0; font-size: .9rem; } .cl-row .qty { width: 1.6rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-row.is-bad { color: var(--accent); }
.cl-group { margin: 0 0 .15rem; font: 600 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.wiz-summary { display: grid; gap: .5rem; margin: 1rem 0; padding: 1rem 1.1rem; background: var(--bg-elev-2); border-radius: 12px; }
.wiz-summary div { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; }
.wiz-summary dt { font: 600 .74rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.wiz-summary dd { margin: 0; font-weight: 600; }

.wiz-nav { position: sticky; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .8rem 0 1rem; margin-top: 1rem; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
.wiz-nav .btn-primary { margin-left: auto; }
@media (max-width: 860px) { .wiz-nav { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 600px) {
    .method-pick { grid-template-columns: 1fr; }
    .is-wizard .wiz-step { padding: 1.1rem 1rem 1.2rem; }
    .wiz-q { font-size: 1.4rem; }
    .wiz-progress li:not(.is-current) .t { display: none; }
    .wiz-progress li.is-current { flex: 3; }
    .wiz-nav .btn-primary { flex: 1; }
}

/* a row of the home with one block only: it takes the whole width (the cards inside sit side by side) */
.front-cols.is-solo { grid-template-columns: 1fr; }
.front-cols.is-solo > .stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 2.5rem; align-items: start; }
.front-cols.is-solo > .stack > section { margin: 0; }

/* the code of the event, to copy into the companion app */
.code-box { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; padding: .85rem 1.1rem .85rem 1.2rem; border: 1px solid var(--line-strong); border-left: 6px solid var(--accent); border-radius: 12px; background: var(--bg-elev); box-shadow: 0 10px 24px -20px rgba(17, 18, 21, .55); }
.code-box > div { display: grid; gap: .35rem; min-width: 0; }
.code-box small { display: block; font: 600 .7rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.code-box b { justify-self: start; padding: .1rem .7rem .15rem; border-radius: 8px; background: var(--bg-elev-2); font: 700 1.9rem/1.2 var(--font-display); letter-spacing: .2em; word-break: break-all; user-select: all; }
.code-box .btn { flex: none; }
@media (max-width: 600px) { .code-box { padding: .75rem .9rem; } .code-box b { font-size: 1.5rem; } .code-box .btn { width: 100%; } }

/* a menu is never cut by the card around it, never wraps its words, and stays above the headers */
.focus { overflow: visible; }
.focus::before { border-radius: inherit; }
.fs-list { min-width: max-content; z-index: 80; }
.fs-opt { white-space: nowrap; }
.fs-opt span { white-space: nowrap; }
.fs.is-open { z-index: 70; }
/* the time always stays on the line of the date: the date shrinks, never the other way */
.dp { flex-wrap: nowrap; }
.dp-field { min-width: 0; }
.dp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-time { flex: 0 0 5.4rem; }
.dp.has-time { min-width: min(100%, 17rem); }
.field-row:has(.dp.has-time) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ---------- the "advanced" parts of a page: a folded row, and inside it options with their words and their button ---------- */
/* no overflow:hidden here: a menu opened inside must never be cut; the corners are rounded on the rows themselves */
details.more { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; }
details.more > summary { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font-weight: 600; transition: background .15s; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::marker { content: ""; }
details.more > summary:hover { background: var(--bg-elev-2); }
details.more > summary .ico { flex: none; width: 18px; height: 18px; background: var(--muted); }
details.more > summary small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .82rem; }
details.more[open] > summary { border-bottom: 1px solid var(--line); }
details.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.opt-body { padding: 1.1rem; }
.opt-list { display: grid; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1rem 1.1rem; }
.opt-row + .opt-row { border-top: 1px solid var(--line); }
.opt-text { display: grid; gap: .15rem; min-width: 0; }
.opt-text b { font: 700 1rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.opt-text span { color: var(--muted); font-size: .88rem; max-width: 52ch; }
.opt-ctl { display: flex; align-items: center; gap: .5rem; flex: none; }
.opt-ctl .select { width: auto; min-width: 8.5rem; }
.opt-row.is-danger { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.opt-row.is-danger .opt-text b { color: var(--accent); }
@media (max-width: 600px) {
    details.more > summary small { display: none; }
    .opt-row { flex-direction: column; align-items: stretch; gap: .8rem; }
    .opt-ctl { flex-direction: column; align-items: stretch; }
    .opt-ctl .select, .opt-ctl .btn { width: 100%; }
    .opt-ctl .fs { width: 100%; }
}

/* the symbol in a button has the colour of its text: white on red, black on white (never grey on red) */
.btn .ico, .btn-primary .ico, .btn-light .ico { background: currentColor; }

/* the formatted notes: lists that line up, no big gap when a list item is a paragraph, headings that do not float away */
.prose ul, .prose ol, .md ul, .md ol { margin: .4rem 0 .9rem; padding-left: 1.5rem; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose ul ul { list-style: circle; } .prose ul ul ul { list-style: square; }
.prose li > p, .md li > p { margin: 0; }
.prose li > ul, .prose li > ol { margin: .2rem 0 .2rem; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose p { margin: 0 0 .85rem; }
.prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.5rem; } .prose h3 { font-size: 1.2rem; }

details.more > summary { border-radius: 13px; }
details.more[open] > summary { border-radius: 13px 13px 0 0; }
.opt-list > .opt-row:last-child, .opt-body:last-child { border-radius: 0 0 13px 13px; }
details.more:has(.fs-list.is-open), details.more:has(.fs.is-open) { position: relative; z-index: 30; }

/* ---------- after sending a deck: a clear "done" page ---------- */
.done-card { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.5rem; background: color-mix(in srgb, var(--ok) 10%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-left: 6px solid var(--ok); border-radius: 14px; animation: wiz-in .45s cubic-bezier(.2, .8, .2, 1); }
.done-card h2 { margin: 0 0 .2rem; font-size: 1.6rem; }
.done-card p { margin: 0; }
.done-mark { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ok); }
.done-mark::after { content: ""; width: 1.5rem; height: .85rem; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(-45deg) translate(2px, -3px); }
.next-steps { counter-reset: n; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.next-steps > li { position: relative; display: grid; gap: .3rem; padding-left: 3rem; }
.next-steps > li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1rem var(--font-display); }
.next-steps > li > b { font: 700 1.1rem var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.next-steps > li > span { color: var(--muted); }
.next-steps .link-box { margin-top: .3rem; }
@media (max-width: 600px) { .done-card { padding: 1.1rem; gap: .9rem; } .done-card h2 { font-size: 1.35rem; } .done-mark { width: 2.8rem; height: 2.8rem; } .next-steps > li { padding-left: 2.6rem; } }

/* the head of a tournament: smaller, with the logo of the kind at a sensible size and the poster as it is, without a frame */
.tour-hero .container { padding-block: 1.1rem 1.5rem; }
.tour-hero .tour-logo { width: clamp(84px, 8vw, 116px); height: auto; margin: .5rem 0 .6rem; }
.tour-hero h1 { margin: .5rem 0 .4rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.tour-hero .hero-sub { margin: 0 0 .8rem; font-size: .98rem; }
.tour-hero .hero-chip { font-size: .72rem; padding: .22rem .65rem; }
.tour-hero .hero-actions { margin-top: .9rem; gap: .5rem; }
.tour-hero .hero-actions .btn-lg { padding: .62rem 1.15rem; font-size: .88rem; min-height: 0; }
.tour-hero .tour-poster-art { max-width: 300px; justify-self: end; }
.tour-hero .tour-poster-art img { border: 0; border-radius: 8px; box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .85); }
@media (max-width: 600px) {
    .tour-hero .container { padding-block: .7rem 1rem; }
    .tour-hero .breadcrumbs { margin-bottom: .45rem; font-size: .78rem; }
    /* logo on the left, the chips beside it: two rows of the old header become one */
    .tour-hero .deck-hero-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: center; }
    .tour-hero .tour-logo { width: 74px; margin: 0; grid-column: 1; grid-row: 1; }
    .tour-hero .hero-chips { grid-column: 2; grid-row: 1; gap: .3rem; }
    .tour-hero .hero-chip { font-size: .68rem; padding: .18rem .55rem; }
    .tour-hero h1 { grid-column: 1 / -1; margin: .65rem 0 .25rem; font-size: 1.45rem; line-height: 1.05; }
    .tour-hero .hero-sub { grid-column: 1 / -1; margin: 0; font-size: .86rem; line-height: 1.35; }
    /* the actions: one row, the main one takes the room, the share is a square icon */
    .tour-hero .hero-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: stretch; gap: .45rem; margin-top: .75rem; }
    .tour-hero .hero-actions > .btn { flex: 1 1 0; min-width: 0; min-height: 2.7rem; padding: .5rem .8rem; font-size: .82rem; letter-spacing: .03em; }
    .tour-hero .hero-actions > .btn + .btn:not(.btn-light) { flex-basis: 100%; }
    .tour-hero .hero-actions .share { flex: 0 0 2.7rem; }
    /* the menu is wider than the square button it opens from: it opens to the left, with room for the words */
    .tour-hero .hero-actions .share .popover { left: auto; right: 0; width: min(260px, calc(100vw - 2rem)); min-width: 0; transform-origin: top right; }
    .tour-hero .hero-actions .share .btn { width: 100%; height: 100%; min-height: 2.7rem; padding: 0; }
    .tour-hero .hero-actions .share .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tour-hero .tour-poster-art { max-width: 240px; justify-self: start; }
}

/* ---------- the calendar of the month in the organiser's dashboard ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; gap: .4rem; }
.cal-nav .btn { min-width: 2.4rem; justify-content: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); gap: 1px; }
.cal-dow { padding: .45rem .5rem; background: var(--bg-elev-2); font: 600 .72rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cal-day { display: flex; flex-direction: column; gap: .25rem; min-height: 5.4rem; padding: .35rem .4rem; background: var(--bg-elev); }
.cal-day .n { font: 600 .85rem var(--font-display); color: var(--muted); }
.cal-day.is-out { background: var(--bg); } .cal-day.is-out .n { opacity: .45; }
.cal-day.is-today .n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; }
.cal-ev { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 100%; padding: .18rem .5rem; border-radius: 6px; text-decoration: none; font-size: .78rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cal-ev b { font: 700 .8rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.cal-ev small { color: var(--muted); font-size: .7rem; }
a.cal-ev:hover { filter: brightness(.96); color: var(--text); box-shadow: 0 0 0 2px var(--line-strong); }
.cal-ev.is-final { background: color-mix(in srgb, var(--gold) 18%, transparent); border-left-color: var(--gold); }
.cal-ev.is-ipt, .cal-ev.is-pte { background: var(--bg-elev-2); border-left-color: var(--ink); }
.cal-ev.is-pte { border-left-style: double; border-left-width: 5px; }
.cal-ev.is-done { opacity: .6; }
.cal-ev.is-live { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-ev.is-draft { border-style: dashed; opacity: .8; }
.cal-agenda { display: none; margin: 0; padding: 0; list-style: none; }
.cal-agenda li { border-top: 1px solid var(--line); } .cal-agenda li:first-child { border-top: 0; }
.cal-agenda a { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .8rem; align-items: center; padding: .55rem 0; text-decoration: none; color: var(--text); }
@media (max-width: 760px) {
    .cal-grid, .cal-legend { display: none; }
    .cal-agenda { display: block; }
}
.cal-nav .btn { min-width: 2.7rem; min-height: 2.5rem; font-size: 1.3rem; line-height: 1; padding-block: 0; }

/* ---------- the privacy notice: an index, the essentials first, then each part in its own block ---------- */
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.legal-toc { position: sticky; top: 1rem; display: grid; gap: .6rem; padding: 1rem 1.1rem; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; font-size: .9rem; }
.legal-toc b { font: 700 .75rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.legal-toc a { text-decoration: none; } .legal-toc a:hover { color: var(--accent); }
.legal-chips { display: none; }
.legal-doc { display: grid; gap: 2.2rem; max-width: 820px; }
.legal-doc p { margin: 0 0 .8rem; line-height: 1.65; }
.legal-brief { padding: 1.3rem 1.4rem; background: var(--bg-elev); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 12px; }
.legal-brief h2 { margin: 0 0 .6rem; font-size: 1.4rem; }
.legal-brief ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.legal-sec { scroll-margin-top: 4rem; }
.legal-sec > h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; font-size: 1.5rem; }
.legal-sec > h2 > span:first-child { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--ink-ink); font: 700 1rem var(--font-display); }
.legal-owner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; padding: 1rem 1.2rem; background: var(--bg-elev-2); border-radius: 12px; }
.legal-owner > div { display: grid; gap: .1rem; } .legal-owner strong { font: 700 1.3rem var(--font-display); letter-spacing: .03em; text-transform: uppercase; } .legal-owner small { color: var(--muted); }
.legal-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.legal-grid.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.legal-card { padding: 1.1rem 1.2rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; }
.legal-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.legal-card > p { margin: 0 0 .7rem; color: var(--muted); font-size: .92rem; }
.is-compact .legal-card > p { margin: 0; color: var(--text); }
.legal-card dl { display: grid; gap: .55rem; margin: 0; }
.legal-card dt { font: 600 .72rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.legal-card dd { margin: .1rem 0 0; font-size: .95rem; line-height: 1.55; }
.legal-card.is-consent { border-left: 5px solid var(--ok); }
.legal-tag { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--text); font: 700 .68rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.legal-rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .7rem; margin: 0 0 1rem; }
.legal-rights div { display: grid; gap: .1rem; padding: .8rem 1rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; }
.legal-rights b { font: 700 1rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.legal-rights span { color: var(--muted); font-size: .9rem; }
.legal-how { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 1rem 1.2rem; background: var(--accent-soft); border-radius: 12px; }
.legal-how b { font: 700 1.1rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; } .legal-how p { margin: .2rem 0 0; }
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { display: none; }
    .legal-chips { display: flex; }
}

/* ---------- the guide of the organiser ---------- */
html:has(.guide-layout) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.guide-layout) { scroll-behavior: auto; } }

.guide-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1rem; padding: 1.6rem 1.8rem; background: var(--ink); color: var(--ink-ink); border-radius: 16px; border-bottom: 5px solid var(--accent); }
.guide-hero h1 { margin: .15rem 0 .35rem; color: inherit; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.guide-hero p { margin: 0; max-width: 46ch; color: inherit; opacity: .82; line-height: 1.5; }
.guide-kicker { font: 700 .74rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

.guide-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.6rem; }
.guide-quick a { display: grid; gap: .15rem; padding: .8rem .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.guide-quick a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }
.guide-quick b { font: 700 .95rem var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.guide-quick span { font-size: .8rem; line-height: 1.3; color: var(--muted); }

.guide-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }

/* the index: the part being read is lit */
.guide-toc { position: sticky; top: 1rem; display: grid; gap: .7rem; padding: 1rem .8rem .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; font-size: .9rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.guide-toc > b { padding-inline: .5rem; font: 700 .74rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.guide-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.guide-toc li a { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 500; line-height: 1.25; transition: background .15s, color .15s; }
.guide-toc li a i, .guide-chips a i { display: inline-grid; place-items: center; flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--bg-elev-2); color: var(--muted); font: 700 .78rem var(--font-display); font-style: normal; transition: background .15s, color .15s; }
.guide-toc li a:hover { background: var(--bg-elev-2); color: var(--text); }
.guide-toc li a.is-active { background: var(--accent-soft); color: var(--text); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.guide-toc li a.is-active i { background: var(--accent); color: #fff; }
.guide-progress { height: 4px; margin: .1rem .5rem 0; border-radius: 4px; background: var(--bg-elev-2); overflow: hidden; }
.guide-progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s linear; }
.guide-top { padding: .1rem .5rem; font-size: .8rem; color: var(--muted); text-decoration: none; }
.guide-top:hover { color: var(--accent); }

.guide-chips { display: none; }

/* the text: every part is a card */
.guide { display: grid; gap: 1.4rem; max-width: 880px; }
.guide p, .guide li { line-height: 1.65; }
.guide p { margin: 0 0 .75rem; }
.guide-sec { scroll-margin-top: calc(var(--guide-top, 0px) + 4.5rem); padding: 1.5rem 1.6rem 1.3rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; }
.guide-sec > h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); font-size: 1.55rem; line-height: 1.15; }
.guide-sec > h2 span { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--ink); color: var(--ink-ink); font: 700 1.2rem var(--font-display); }
.guide-sec h3 { margin: 1.6rem 0 .6rem; padding-left: .7rem; border-left: 4px solid var(--accent); font-size: 1.12rem; line-height: 1.2; }
.guide ul { padding-left: 1.3rem; display: grid; gap: .4rem; margin: .3rem 0 .9rem; }
.guide ul li::marker { color: var(--accent); }
.ui { display: inline-block; padding: .08rem .55rem; border-radius: 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--bg); font: 600 .84em var(--font); white-space: nowrap; }

/* steps: a numbered line */
.guide-steps { counter-reset: g; display: grid; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; }
.guide-steps > li { position: relative; padding: 0 0 1.4rem 3.4rem; counter-increment: g; }
.guide-steps > li:last-child { padding-bottom: .2rem; }
.guide-steps[start="5"] { counter-reset: g 4; }
.guide-steps > li::before { content: counter(g); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1.1rem var(--font-display); box-shadow: 0 0 0 4px var(--bg-elev); }
.guide-steps > li::after { content: ""; position: absolute; left: calc(1.15rem - 1px); top: 2.3rem; bottom: 0; width: 2px; background: var(--line-strong); }
.guide-steps > li:last-child::after { display: none; }
.guide-steps > li > b { display: block; margin: .25rem 0 .35rem; font: 700 1.1rem var(--font-display); letter-spacing: .03em; text-transform: uppercase; }

/* notes: one colour for each kind */
.callout { margin: 1rem 0; padding: .9rem 1.1rem; background: var(--bg-elev-2); border: 1px solid var(--line); border-left: 5px solid var(--ink); border-radius: 12px; }
.callout > b { display: block; margin-bottom: .25rem; font: 700 .82rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.callout p { margin: 0; }
.callout.is-tip { border-color: color-mix(in srgb, var(--ok) 35%, transparent); border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.callout.is-tip > b { color: var(--ok); }
.callout.is-warn { border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-left-color: var(--accent); background: var(--accent-soft); }
.callout.is-warn > b { color: var(--accent); }

/* questions */
.guide-faq { display: grid; gap: .5rem; }
.guide-faq details { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s; }
.guide-faq details[open] { border-color: var(--line-strong); }
.guide-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg-elev-2); font-size: 1.1rem; line-height: 1; }
.guide-faq details[open] > summary::after { content: "–"; background: var(--accent); color: #fff; }
.guide-faq details[open] > summary { border-bottom: 1px solid var(--line); }
.guide-faq p { margin: 0; padding: .85rem 1rem; }

/* the short list at the end */
.guide-sec.guide-cheat { padding: 1.5rem 1.7rem; background: var(--ink); border-color: var(--ink); color: var(--ink-ink); border-bottom: 5px solid var(--accent); }
.guide-cheat h2 { margin: 0 0 .9rem; padding: 0; border: 0; color: var(--ink-ink); font-size: 1.5rem; }
.guide-cheat ol { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: .55rem; }
.guide-cheat li { position: relative; counter-increment: c; padding-left: 2.4rem; }
.guide-cheat li::before { content: counter(c); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .9rem var(--font-display); }

@media (max-width: 1100px) { .guide-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .guide-layout { grid-template-columns: 1fr; }
    .guide-toc { display: none; }
    .guide-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-quick a:last-child { grid-column: 1 / -1; }
    /* the chips stay under the top bar and the one being read is lit */
    .guide-chips { display: flex; position: sticky; top: var(--guide-top, 3.6rem); z-index: 15; margin: 0 -.85rem 1rem; padding: .55rem .85rem; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
    .guide-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .35rem; }
    .guide-chips a i { width: 1.4rem; height: 1.4rem; font-size: .72rem; }
    .guide-chips a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .guide-chips a.is-active i { background: #fff; color: var(--accent); }
    .guide-sec { padding: 1.1rem 1rem; border-radius: 14px; }
    .guide-sec > h2 { font-size: 1.3rem; gap: .65rem; }
    .guide-sec > h2 span { width: 2.1rem; height: 2.1rem; border-radius: 10px; font-size: 1rem; }
    .guide-steps > li { padding-left: 2.9rem; }
    .guide-steps > li::before { width: 2rem; height: 2rem; font-size: 1rem; }
    .guide-steps > li::after { left: calc(1rem - 1px); top: 2rem; }
    .guide-hero { padding: 1.2rem 1.1rem; }
}
@media print { .guide-layout { display: block; } .guide-toc, .guide-chips, .guide-quick { display: none; } .guide-sec { border: 0; padding: 0; } .guide-faq details { break-inside: avoid; } }

/* ---------- a menu you can type in (the archetype of a deck): short when open, filtered while you write ---------- */
.combo { position: relative; }
.combo-input { padding-right: 2.4rem; background-image: var(--chevron, none); background-repeat: no-repeat; background-position: right .9rem center; background-size: 14px; cursor: text; }
.combo-input.is-set { font-weight: 600; }
.combo-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .55); animation: dp-in .16s cubic-bezier(.2, .8, .2, 1); }
.combo-list[hidden] { display: none; }
.combo-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1.25; }
.combo-list li.is-active { background: var(--bg-elev-2); }
.combo-list li[aria-selected="true"] { color: var(--accent); font-weight: 700; }
.combo-list li.combo-none { cursor: default; color: var(--muted); justify-content: center; }
.combo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-pips { display: inline-flex; gap: 2px; flex: none; }
.combo-pips .ms { font-size: .95rem; }
@media (max-width: 600px) { .combo-list { max-height: 40vh; } .combo-list li { padding: .65rem .75rem; font-size: 1rem; } }
/* while the list of a menu is open, the bar with "Indietro / Avanti" gives way */
#deckform:has(.combo-list:not([hidden])) .wiz-nav { visibility: hidden; }

/* ---------- the cookie policy ---------- */
.cookie-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .7rem; margin-bottom: 1rem; }
.cookie-kind { display: grid; gap: .2rem; padding: .8rem 1rem; background: var(--bg-elev-2); border-radius: 10px; border-top: 4px solid var(--line-strong); }
.cookie-kind b { font: 700 1.1rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.cookie-kind span { font-size: .9rem; color: var(--muted); }
.cookie-kind.is-always { border-top-color: var(--ink); } .cookie-kind.is-consent { border-top-color: var(--ok); } .cookie-kind.is-never { border-top-color: var(--accent); }
.cookie-change { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .8rem; border-top: 1px solid var(--line); }
.cookie-change p { margin: 0; }
.legal-tag.is-always { background: var(--bg-elev-2); color: var(--muted); }
.cookie-list { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); margin-bottom: 1rem; }
.cookie-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: 1rem; align-items: start; padding: .85rem 1.1rem; }
.cookie-row + .cookie-row { border-top: 1px solid var(--line); }
.cookie-row > div { display: grid; gap: .1rem; min-width: 0; } .cookie-row code { overflow-wrap: anywhere; font-weight: 600; } .cookie-row small { color: var(--muted); font: 600 .68rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.cookie-row p { margin: 0; font-size: .93rem; }
.cookie-time { justify-self: end; padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--bg-elev-2); font-size: .8rem; font-weight: 600; text-align: right; }
@media (max-width: 700px) { .cookie-row { grid-template-columns: 1fr; gap: .4rem; } .cookie-time { justify-self: start; text-align: left; } }
.legal-sec > h2 .legal-tag { flex: none; white-space: nowrap; margin-left: .2rem; }

/* the names of the file that look like a known player: the question and its answers, in the row itself */
tr.is-ask > td { background: color-mix(in srgb, #f4b942 14%, transparent); }
tr.is-ask > td:first-child { box-shadow: inset 4px 0 0 #f4b942; }
.match-ask { display: grid; gap: .35rem; min-width: 260px; max-width: 420px; }
.match-ask p { margin: 0 0 .15rem; font-size: .92rem; }
.match-ask .choice { padding: .35rem .7rem; }
.match-other { display: none; }
.match-ask:has(input[value="other"]:checked) .match-other { display: block; }
.match-ask .match-other { display: none; }
.match-ask:has(input[value="other"]:checked) .match-other { display: block; }
@media (max-width: 640px) {
  .match-ask { min-width: 0; max-width: none; }
  .match-ask .choice { padding: .3rem .55rem; font-size: .9rem; }
}
/* the menu of "another player" is enhanced into a .fs control: it shows only when that answer is chosen */
.match-ask .fs { display: none; }
.match-ask:has(input[value="other"]:checked) .fs { display: block; }

/* the organiser's form: the choice of how the list is given is shown, only the chosen way is open */
#deckform[data-admin="1"]:not(.is-wizard) .method-pick { display: grid; }
#deckform[data-admin="1"]:not(.is-wizard) [data-method][hidden] { display: none; }
.combo-list .combo-note { flex: none; color: var(--ok); font: 700 .68rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.name-box { position: relative; }
.name-suggest { top: calc(100% - .4rem); }
.hint.is-ok { color: var(--ok); font-weight: 600; }

/* ---------- admin players: names that may be the same person ---------- */
.merge-list { display: grid; margin: 0; padding: 0; list-style: none; }
.merge-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.merge-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .55rem; min-width: 0; }
.merge-names .muted { font-size: .8rem; }
.merge-why { padding: .1rem .55rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .74rem; font-weight: 600; }
.merge-list form { margin: 0; }
@media (max-width: 600px) { .merge-list li { align-items: stretch; } .merge-list li .cluster { width: 100%; } .merge-list li .cluster form:first-child { flex: 1 1 100%; } .merge-list li .cluster .btn { width: 100%; } }

/* ---------- tournament page: "add to calendar" right under the header ---------- */
.tour-cal { background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.tour-cal .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding-block: .8rem; }
.tour-cal p { margin: 0; }
.tour-cal .cal-menu { flex: 0 0 auto; }
@media (min-width: 701px) { .tour-cal .cal-popover { left: auto; right: 0; transform-origin: top right; } }
@media (max-width: 700px) { .tour-cal .container { flex-direction: column; align-items: stretch; gap: .5rem; } .tour-cal p { font-size: .9rem; } .tour-cal .cal-menu { flex: 1 1 auto; } }

/* ---------- the public calendar: the month as a grid (the same one of the organiser), the list of the month under it ---------- */
.cal-month { display: grid; gap: .9rem; }
.cal-month .cal-grid { display: grid; }
.cal-month .cal-day .n { appearance: none; justify-self: start; border: 0; background: none; padding: 0; line-height: 1.6rem; }
.cal-month button.n { min-width: 1.6rem; border-radius: 50%; color: var(--text); font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cal-month button.n:hover { color: var(--accent); }
.cal-month .cal-day.is-picked { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-month .cal-ev b { overflow: hidden; text-overflow: ellipsis; }
.cal-month .cal-ev { flex: none; }
.cal-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.cal-filters .chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cal-list-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; }
.cal-list-head h3 { margin: 0; }
.cal-month .linkish { appearance: none; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.cal-month .cal-legend { display: flex; }
@media (max-width: 760px) {
    /* on a phone the grid stays, with a dot for each event (tap the day to see them below) */
    .cal-month .cal-grid { display: grid; }
    .cal-month .cal-legend { display: flex; }
    .cal-month .cal-day { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: .2rem; min-height: 3.6rem; padding: .25rem .3rem; }
    .cal-month .cal-day .n { flex: 1 0 100%; font-size: .8rem; }
    .cal-month .cal-ev { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 50%; background: var(--accent); font-size: 0; overflow: hidden; }
    .cal-month .cal-ev b, .cal-month .cal-ev small { display: none; }
    .cal-month .cal-ev.is-final { background: var(--gold); }
    .cal-month .cal-ev.is-ipt, .cal-month .cal-ev.is-pte { background: var(--ink); }
    .cal-month .cal-ev.is-done { opacity: .45; }
    .cal-month .cal-dow { padding-inline: 0; letter-spacing: .04em; }
}
.cal-month [hidden] { display: none !important; }
.rank-table .move.is-remove { margin-left: .3rem; }
.rank-table .move.is-remove:hover { color: var(--bad, #c0392b); border-color: var(--bad, #c0392b); }
.standing-table tbody + tbody { border-top: 2px solid var(--line-strong); }
.standing-table tr.group-note td { padding-block: .3rem .5rem; background: var(--bg); }
.standing-table tbody.is-moved tr[data-player] { background: var(--accent-soft); }
.standing-table .input { min-height: 2.2rem; padding-block: .25rem; }
.standing-table .badge { margin-left: .35rem; }

/* the points of each stage under the name, on a phone: a small box for each (label above, points below) */
.stage-chips { display: none; flex-wrap: nowrap; gap: .2rem; margin-top: .4rem; }
.stage-chips span { display: grid; flex: 1 1 0; justify-items: center; min-width: 0; max-width: 2.6rem; padding: .15rem 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); line-height: 1.1; }
.stage-chips small { color: var(--muted); font: 600 .55rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.stage-chips b { font: 700 .88rem var(--font-display); }
.stage-chips .is-dropped b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.stage-chips .is-wins { margin-left: .25rem; border-color: var(--line-strong); background: var(--bg-elev-2); }
@media (max-width: 600px) { .stage-chips { display: flex; } }

/* phone: the most played cards three to a row, and the titles of the calendar list a little smaller */
@media (max-width: 600px) {
    .card-wall { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .card-tile-rank { top: .25rem; left: .25rem; min-width: 1.35rem; padding: .05rem .3rem; font-size: .68rem; }
    .card-tile-info { flex-direction: column; align-items: flex-start; gap: 0; font-size: .68rem; }
    .card-tile-info b { font-size: .98rem; }
    .tl-main strong { font-size: 1rem; line-height: 1.15; }
    .tl-main .small { font-size: .78rem; }
}
.code-box.mb-2 { margin-bottom: 1.2rem; }
.code-box.mt-1 { margin-block: 1rem; }

/* "Condividi la classifica": the choices on one side, the picture and the text on the other (one column on a phone) */
.share-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 960px) { .share-grid { grid-template-columns: 330px minmax(0, 1fr); } .share-grid > form { position: sticky; top: 1rem; } }
.share-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 420px)); }