/* One font everywhere: Inter (self-hosted, Cyrillic + Latin), the same on every device */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/design/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/design/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
button, input, select, textarea, summary { font-family: inherit; }
/* Theme: tokens for the dark (default) and light palettes, motion settings, corners, header/footer, menus.
   Chosen in /settings, stored in localStorage by ui.js: html[data-theme], html[data-motion]. */
:root {
  color-scheme: dark;
  --surface: #14301f; --surface-2: #1a3b28; --surface-3: #24503a; --line-strong: #3a6049;
  --home-text: #e8f1ea; --home-muted: #9bb5a4; --home-line: #2b4c39;
  --home-green: #6fcf4e; --home-green-hover: #8be06c; --home-defense: #4a9a32;
  --btn: #3f8429; --btn-hover: #4a9a32;
  --hdr-bg: #0f2217; --hdr-line: #1f3a2a; --hdr-text: #cfe0d3; --hdr-strong: #fff; --hdr-hover: #ffffff14; --hdr-active: #ffffff1f; --hdr-accent: #8fe06b; --hdr-muted: #8fa89a;
  --menu-bg: #0f2217; --menu-line: #2b4c39;
  --amber-text: #ffc044; --err-text: #ff8f86; --err-bg: #3d2420; --warn-bg: #3a331c;
  --crest-bg: #eef3ee; --sector-ink: #ffffff;
  --page-bg: #0a1a12; --ov1: #07140e66; --ov2: #07140e99;
  --shell-shadow: 0 30px 90px #000a, 0 0 0 1px #ffffff14;
  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  --dur: .18s; --ease: cubic-bezier(.22, 1, .36, 1);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme=light] {
  color-scheme: light;
  --surface: #ffffff; --surface-2: #f1f9ec; --surface-3: #d8f0c8; --line-strong: #cfd8cb;
  --home-text: #101725; --home-muted: #5d6a7e; --home-line: #dfe5e9;
  --home-green: #2f9a1c; --home-green-hover: #26801a; --home-defense: #36962a;
  --btn: #34a01f; --btn-hover: #2b8a19;
  --hdr-bg: #ffffff; --hdr-line: #dfe5e9; --hdr-text: #3a4a3f; --hdr-strong: #101725; --hdr-hover: #0f22170d; --hdr-active: #d8f0c8; --hdr-accent: #2f9a1c; --hdr-muted: #5d6a7e;
  --menu-bg: #ffffff; --menu-line: #dfe5e9;
  --amber-text: #8a5600; --err-text: #a72821; --err-bg: #fbeceb; --warn-bg: #fdf6e8;
  --crest-bg: #f4f7f3; --sector-ink: #3a331c;
  --page-bg: #e3f3da; --ov1: #07140e40; --ov2: #07140e73;
  --shell-shadow: 0 24px 70px #1a3a2638, 0 0 0 1px #0f221712;
}
html[data-motion=off] { --dur: 0s; }
html[data-motion=calm] { --dur: .12s; }
html[data-motion=smooth] { --dur: .18s; }
/* Page background: night stadium under a dark veil (a smaller file on phones). */
html { background: var(--page-bg); font-family: var(--font); scroll-behavior: smooth; scrollbar-color: var(--line-strong) transparent; }
html[data-motion=off] { scroll-behavior: auto; }
::selection { background: var(--btn); color: #fff; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(var(--ov1), var(--ov2)), url('/design/bg-stadium.webp') center bottom / cover no-repeat, var(--page-bg); }
@media (max-width: 700px) {
body::before { background: linear-gradient(var(--ov1), var(--ov2)), url('/design/bg-stadium.webp') 14% bottom / cover no-repeat, var(--page-bg); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Shell, header, footer */
.home-shell { max-width: 1240px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shell-shadow); }
.home-header { min-height: 0; padding: 14px 32px; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.home-brand { color: var(--hdr-strong); font-size: 24px; transition: transform var(--dur) var(--ease); }
.home-brand:hover { text-decoration: none; transform: translateY(-1px); }
.home-brand b { color: var(--hdr-accent); }
.home-brand img { height: 44px; transition: transform var(--dur) var(--ease); }
.home-brand:hover img { transform: rotate(-6deg) scale(1.06); }
.home-header nav { gap: 6px; font-size: 16px; }
.home-header nav a:not(.home-login) { position: relative; padding: 10px 16px; border-radius: var(--radius-sm); color: var(--hdr-text); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.home-header nav a:not(.home-login):hover { color: var(--hdr-strong); background: var(--hdr-hover); text-decoration: none; }
.home-header nav a[aria-current=page] { color: var(--hdr-strong); background: var(--hdr-active); }
.league-clock-time { color: var(--hdr-accent); }
.league-clock-zone, .league-clock-date { color: var(--hdr-muted); }
.home-footer { background: var(--hdr-bg); border-color: var(--hdr-line); color: var(--hdr-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.home-footer a { transition: color var(--dur) var(--ease); }
.home-footer a:hover { color: var(--hdr-strong); text-decoration: none; }
@media (min-width: 601px) {
.cab-navigation { display: none; }
}
/* Buttons and fields */
.home-login, .home-cta, .cab-action, .cabinet-main :is(input[type=submit], input[type=button], button) { border-radius: var(--radius-sm); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.home-login, .home-cta { background: var(--btn); }
.home-login:hover, .home-cta:hover { background: var(--btn-hover); }
.home-login { margin-left: 10px; }
.home-login:hover, .home-cta:hover, .cab-action:hover, .cabinet-main :is(input[type=submit], input[type=button], button):not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px #0000003a; }
.home-login:active, .home-cta:active, .cab-action:active, .cabinet-main :is(input[type=submit], input[type=button], button):not(:disabled):active { transform: translateY(0) scale(.98); box-shadow: none; }
.cabinet-main :is(input, select, textarea) { border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cabinet-main :is(input, select, textarea):focus { border-color: var(--home-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-green) 28%, transparent); outline: none; }
/* Cards: soft corners, lift on hover */
img[src*="/images/game/club-"], img[src*="/images/clubs/"] { background: none; }
.cup-cards a, #table .list a, .vip-opt { border-radius: var(--radius-sm); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cup-cards a:hover, #table .list a:hover, .vip-opt:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #00000040; text-decoration: none; }
.cabinet-main :is(.cab-club, .match-panel, .cup-status, .cab-profile, .match-result, .request-club, .match-empty, #score), .page-content, .cl-card { border-radius: var(--radius); }
/* Game sectors */
.matches-main #game button.sector { transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.matches-main #game button.sector:hover:not(:disabled) { transform: scale(1.05); }
.matches-main #game button.sector[aria-pressed=true] { animation: sector-pop calc(var(--dur) * 1.2) var(--ease); }
@keyframes sector-pop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* Expandable blocks (details) open at once: a height animation made the content below jump */
details > summary { cursor: pointer; transition: color var(--dur) var(--ease); }
.dropdown-list:not([hidden]) { animation: menu-in .12s ease-out; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
/* Profile menu */
.user-menu { position: relative; margin-left: 10px; }
.user-menu > .home-login { margin-left: 0; display: inline-flex; align-items: center; gap: 10px; border: 0; font: inherit; cursor: pointer; }
.user-menu > .home-login::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur) var(--ease), margin var(--dur) var(--ease); }
.user-menu.open > .home-login::after { margin-top: 3px; transform: rotate(-135deg); }
.user-menu-list { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; min-width: 230px; padding: 8px; background: var(--menu-bg); border: 1px solid var(--menu-line); border-radius: var(--radius); box-shadow: 0 22px 50px #00000066; opacity: 0; visibility: hidden; transition: opacity .12s ease-out, visibility 0s linear .12s; }
.user-menu.open .user-menu-list { opacity: 1; visibility: visible; transition-delay: 0s; }
.user-menu-list a, .user-menu-list button { display: block; width: 100%; box-sizing: border-box; padding: 11px 16px; line-height: 1.3; border: 0; border-radius: var(--radius-sm); background: none; color: var(--hdr-text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.user-menu-list a:hover, .user-menu-list button:hover { background: var(--hdr-hover); color: var(--hdr-strong); text-decoration: none; transform: none; box-shadow: none; }
.user-menu-list form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--menu-line); }
/* Settings page */
.settings-group { margin: 0 0 32px; }
.settings-group h2 { margin: 0 0 6px; }
.settings-group p { margin: 0 0 16px; color: var(--home-muted); }
.settings-options { display: flex; flex-wrap: wrap; gap: 14px; }
.cabinet-main button.settings-option { display: grid; gap: 10px; min-width: 170px; padding: 14px; border: 2px solid var(--home-line); border-radius: var(--radius); background: var(--surface-2); color: var(--home-text); font: inherit; font-size: 17px; font-weight: 400; text-align: left; cursor: pointer; min-height: 0; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cabinet-main button.settings-option:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 12px 28px #00000033; }
.cabinet-main button.settings-option[aria-checked=true] { border-color: var(--home-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-green) 25%, transparent); }
.cabinet-main button.settings-option small { color: var(--home-muted); font-size: 14px; }
.settings-swatch { height: 64px; border-radius: var(--radius-sm); border: 1px solid #00000033; }
.settings-swatch.dark { background: linear-gradient(#0f2217 28%, #14301f 28%); }
.settings-swatch.light { background: linear-gradient(#ffffff 28%, #f0f4ee 28%); }
.settings-demo { display: flex; align-items: center; gap: 4px; height: 64px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--surface-3); }
.settings-demo i { width: 14px; height: 14px; border-radius: 50%; background: var(--home-green); animation: demo-bounce calc(var(--dur) * 3) var(--ease) infinite alternate; }
.settings-demo i:nth-child(2) { animation-delay: calc(var(--dur) * .3); }
.settings-demo i:nth-child(3) { animation-delay: calc(var(--dur) * .6); }
@keyframes demo-bounce { to { transform: translateY(-14px); } }
html[data-motion=off] .settings-demo i { animation: none; }
.settings-note { color: var(--home-muted); font-size: 15px; }
/* Phones: bottom tab bar replaces the header links for signed-in players */
@media (max-width: 600px) {
.cab-navigation { background: var(--hdr-bg); border-top-color: var(--hdr-line); }
.cab-navigation a { color: var(--hdr-text); }
.cab-navigation a[aria-current=page] { color: var(--hdr-accent); }
body:has(.cab-navigation) .home-header nav > a:not(.home-login) { display: none; }
.home-header { padding: 12px 16px; }
.home-brand { grid-column: 1; font-size: 22px; }
.home-header nav { grid-column: 1 / -1; gap: 2px; justify-content: flex-end; }
.home-header nav a:not(.home-login) { padding-inline: 10px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
:root { --dur: 0s; }
}
.clubs-intro .club-breadcrumbs, .clubs-intro .club-breadcrumbs a { color: #fff; }
html.zb-wait body { opacity: 0; }
body { transition: opacity .2s ease; }
.matches-main #game button.sector0[aria-pressed=true] { color: var(--sector-ink); }
/* Landing (home page): centered hero, numbers, three steps, scheme. */
.landing { padding: 0 38px 12px; }
@media (max-width: 900px) {
.landing { padding: 0 20px 8px; }
}
/* ---- Landing extras: pitch lines, crest strip, league now ---- */
.landing { position: relative; isolation: isolate; }
.crest-strip { margin: 0 -38px 44px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.crest-track { display: flex; gap: 20px; width: max-content; padding: 6px 0; animation: crest-run 70s linear infinite; }
.crest-track img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; }
.crest-strip:hover .crest-track { animation-play-state: paused; }
@keyframes crest-run { to { transform: translateX(-50%); } }
html[data-motion=off] .crest-track, html[data-motion=calm] .crest-track { animation: none; }
@media (prefers-reduced-motion: reduce) {
.crest-track { animation: none; }
}
@keyframes live-pulse { to { box-shadow: 0 0 0 10px transparent; } }
/* ---- About page ---- */
.about-lead { margin: 0 0 6px; color: var(--home-muted); font-size: 20px; line-height: 1.6; text-align: center; }
.about-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 8px; }
.about-toc a { padding: 8px 15px; border: 1px solid var(--home-line); border-radius: 999px; background: var(--surface-2); font-size: 15px; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.about-toc a:hover { border-color: var(--home-green); background: var(--surface-3); text-decoration: none; transform: translateY(-2px); }
.about-section { margin-top: 46px; scroll-margin-top: calc(var(--sticky) + 18px); }
.about-section h2 { margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--home-green); font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.about-section h3 { margin: 22px 0 6px; color: var(--home-green); font-size: 18px; font-weight: 600; }
.about-section p { margin: 0 0 12px; line-height: 1.65; }
.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 20px; }
.about-cards > div { padding: 18px 20px; border: 1px solid var(--home-line); border-radius: var(--radius); background: var(--surface-2); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.about-cards > div:hover { transform: translateY(-3px); border-color: var(--home-green); }
.about-cards h3 { margin: 0 0 6px; color: var(--home-text); }
.about-cards p { margin: 0; color: var(--home-muted); font-size: 15px; line-height: 1.5; }
.about-example { margin: 18px 0; padding: 16px 20px; border-left: 4px solid var(--amber-text); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-2); }
.about-example h3 { margin: 0 0 4px; color: var(--amber-text); }
.about-example p { margin: 0; }
.about-end { margin: 54px 0 12px; padding: 28px; border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.about-end p { margin: 0 0 18px; }
.about-end a:not(.home-cta) { text-decoration: underline; text-underline-offset: 3px; }
/* ---- Settings: swatches of the three site versions ---- */

/* ---- Version "compact": flat, no decorations ---- */

/* ---- Version "classic": the old site look, every section in the menu, no animations ---- */

.home-cta, .cab-action, .cabinet-main :is(input[type=submit], input[type=button], button)) { border: 1px solid #1f4d18; border-radius: 0; background: linear-gradient(#5aa646, #2f6b25); color: #fff; box-shadow: inset 0 1px 0 #ffffff66; transform: none; text-shadow: 0 1px 0 #00000055; }

/* Cabinet: one big tap to start a match */
.cab-play { margin: 4px 0 10px; }
.cabinet-main .cab-play input[type=submit] { min-height: 56px; padding: 0 36px; font-size: 19px; border-radius: var(--radius-sm); }
.cab-play-more { margin: 0; }
#rand-scheme { min-height: 48px; padding: 0 26px; }
@media (max-width: 600px) {
.cabinet-main .cab-play input[type=submit], .cab-play-more input, #rand-scheme { width: 100%; }
.cab-play-more input { margin-bottom: 8px; }
}
.cabinet-main button#rand-scheme { background: transparent; border: 1px solid var(--line-strong); color: var(--home-text); }
.cabinet-main button#rand-scheme:hover:not(:disabled) { background: var(--surface-3); border-color: var(--home-green); }
.cabinet-main button#rand-scheme:disabled { opacity: .5; }
@media (max-width: 600px) {
.cab-club { display: grid; grid-template-columns: 1fr; justify-items: stretch; text-align: center; }
.cab-club > img { margin: 0 auto; }
.cab-club > div { min-width: 0; }
.cabinet-main .cab-play input[type=submit], .cab-play-more input { box-sizing: border-box; max-width: 100%; }
#send { width: 100%; min-height: 56px; font-size: 19px; }
}
/* Phones: a slim header (logo and profile button on one line, no clock) so the game starts on the first screen */
@media (max-width: 600px) {
.home-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 14px; }
.home-brand { grid-column: auto; flex: 1 1 auto; font-size: 21px; }
.home-brand img { height: 36px; }
.home-header nav { grid-column: auto; flex: 0 0 auto; }
body:not(:has(.cab-navigation)) .home-header nav { flex: 1 0 100%; justify-content: space-between; }
.league-clock { display: none; }
.user-menu > .home-login, .home-header .home-login { min-height: 44px; }
}
@media (max-width: 600px) {
.home-header nav { width: auto; }
body:not(:has(.cab-navigation)) .home-header nav { width: 100%; }
}

.cab-bonus, .premium-bonus { margin: 6px 0 0; color: var(--amber-text); font-size: 15px; }
.premium-bonus { margin: 0 0 14px; }
.premium-wallet .premium-bonus { grid-column: 1 / -1; order: 10; margin: 4px 0 0; }
/* Flags are round (Circle Flags); club crests sit on a soft round plate with a thin ring */
img.flag, .dropdown-icon { background: none !important; border-radius: 50% !important; box-shadow: 0 0 0 1px #00000026, 0 3px 8px #00000040; object-fit: cover; }

/* ======== Game feel: quick, springy, light (transform and opacity only) ======== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
html { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
a, button, input, select, summary, label, [role=radio] { touch-action: manipulation; }
/* View transitions (opted in by header.php only on the start screens and on the first page after sign-in): the window grows into the cabinet and the photo changes. Ordinary page changes have none: they blanked the page for a moment. */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.home-header { view-transition-name: site-header; }
.cab-navigation { view-transition-name: tab-bar; }
}
/* Touch devices: no sticky hover lifts, a springy press instead */
@media (hover: none) {
:is(.home-login, .home-cta, .cab-action, .cup-cards a, #table .list a, .vip-opt, .about-cards > div, .about-toc a, .settings-option, .cabinet-main :is(input[type=submit], input[type=button], button)):hover { transform: none; box-shadow: none; }
:is(.home-login, .home-cta, .cab-action, .cup-cards a, #table .list a, .vip-opt, .about-toc a, .settings-option, .cabinet-main :is(input[type=submit], input[type=button], button), .cab-navigation a, .user-menu-list a, .user-menu-list button) { transition: transform .32s var(--spring), background-color .15s ease, border-color .15s ease; }
:is(.home-login, .home-cta, .cab-action, .cup-cards a, #table .list a, .vip-opt, .about-toc a, .settings-option, .cabinet-main :is(input[type=submit], input[type=button], button):not(:disabled), .cab-navigation a, .user-menu-list a, .user-menu-list button):active { transform: scale(.94); transition-duration: .05s; }
.matches-main #game button.sector:hover:not(:disabled) { transform: none; }
.matches-main #game button.sector:active:not(:disabled) { transform: scale(.88); transition-duration: .05s; }
}
html[data-motion=off] :is(.home-login, .home-cta, .cab-action, .cabinet-main button):active { transform: none; }
/* Result: the score pops in, goals and saves appear one after another */
.matches-main #score td[rowspan] { animation: score-pop .55s var(--spring) .1s both; }
@keyframes score-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.matches-main .gate-view span { animation: gate-in .3s var(--spring) both; }
.matches-main .gate-view span:nth-child(1) { animation-delay: .10s; }
.matches-main .gate-view span:nth-child(2) { animation-delay: .14s; }
.matches-main .gate-view span:nth-child(3) { animation-delay: .18s; }
.matches-main .gate-view span:nth-child(4) { animation-delay: .22s; }
.matches-main .gate-view span:nth-child(5) { animation-delay: .26s; }
.matches-main .gate-view span:nth-child(6) { animation-delay: .30s; }
.matches-main .gate-view span:nth-child(7) { animation-delay: .34s; }
.matches-main .gate-view span:nth-child(8) { animation-delay: .38s; }
.matches-main .gate-view span:nth-child(9) { animation-delay: .42s; }
@keyframes gate-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-motion=off] :is(.matches-main #score td[rowspan], .gate-view span) { animation: none; }
/* Timer: warm up in the last minute */
#time h2 { transition: color .3s ease; }
/* ======== Phones ======== */
@media (max-width: 700px) {
body { padding-bottom: 0; }
.cab-navigation { padding-bottom: env(safe-area-inset-bottom); }
.cab-navigation a { min-height: 56px; }
body:has(.cab-navigation) { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
.cabinet-main :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]), select, textarea), .dropdown-button { font-size: 16px; }
/* Game: counter, random and send stay under the thumb above the tab bar */
form:has(#send) > .center { position: sticky; bottom: calc(57px + env(safe-area-inset-bottom)); z-index: 15; display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px 10px; margin: 0 -14px; padding: 10px 14px 12px; background: var(--surface); border-top: 1px solid var(--home-line); box-shadow: 0 -10px 24px #0000004d; text-align: left; }
form:has(#send) > .center h3 { grid-column: 1 / -1; margin: 0; font-size: 17px; }
form:has(#send) > .center p { margin: 0; }
#gate-msg { grid-column: 1 / -1; font-size: 14px; }
#gate-msg:empty { display: none; }
#rand-scheme, #send { width: 100%; min-height: 52px; }
}
@media (max-width: 700px) {
.home-brand { min-height: 44px; }
.home-footer nav a { padding-inline: 6px; }
.club-breadcrumbs a, .clubs-intro summary, .cab-profile a, .cab-profile summary { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 700px) {
#rand-scheme { font-size: 16px; padding: 0 6px; white-space: nowrap; }
}
img[src*="/images/game/"] { object-fit: contain; }
@media (max-width: 700px) {
details > summary { display: flex; align-items: center; min-height: 44px; }
}
/* ======== Settings window: bottom sheet on phones, dialog on desktop ======== */
.sheet { width: min(480px, 100%); max-height: min(86vh, 760px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--home-text); box-shadow: 0 30px 90px #000b; overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .28s var(--ease); }
.sheet.closing { animation: sheet-out .16s ease-in forwards; }
.sheet::backdrop { background: #02080566; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(24px) scale(.98); } }
.sheet-grip { display: none; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 8px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 500; }
.sheet-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--home-text); font-size: 28px; line-height: 1; cursor: pointer; }
.sheet-body { display: grid; gap: 22px; padding: 10px 22px calc(26px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.sheet-body h3 { margin: 0 0 8px; color: var(--home-muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 46px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--home-text); font: inherit; font-size: 16px; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .3s var(--spring); }
.seg button:active { transform: scale(.94); }
.seg button[aria-checked=true] { background: var(--btn); color: #fff; font-weight: 600; box-shadow: 0 4px 12px #00000040; }
.sheet-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--home-text); font-size: 17px; }
.sheet-link::after { content: ""; width: 9px; height: 9px; border: solid var(--home-muted); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.sheet-link:hover { border-color: var(--home-green); text-decoration: none; }
.sheet-note { margin: 0; color: var(--home-muted); font-size: 14px; }
@media (max-width: 700px) {
.sheet { width: 100%; max-height: 90vh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-bottom: 0; }
.sheet-grip { display: block; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
}
html[data-motion=off] .sheet[open], html[data-motion=off] .sheet.closing { animation: none; }
/* ======== Text size ======== */
html[data-text=large] { zoom: 1.12; }
/* ======== File input in the site style ======== */
.file-pick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.file-pick-btn { min-height: 48px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--home-text); font: inherit; font-size: 16px; cursor: pointer; }
.file-pick-name { color: var(--home-muted); font-size: 15px; overflow-wrap: anywhere; }
/* ======== Back to top ======== */
.to-top { position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--hdr-bg); color: var(--hdr-text); box-shadow: 0 8px 24px #00000066; cursor: pointer; animation: rise .25s var(--ease) both; }
.to-top[hidden] { display: none; }
@media (min-width: 701px) {
.to-top { bottom: 24px; right: 24px; }
}
/* ======== Phones: compact lists, easier pages ======== */
@media (max-width: 700px) {
#table .list:not(.countries) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#table .list:not(.countries) a { flex-direction: column; justify-content: center; gap: 8px; min-height: 124px; padding: 12px 8px; text-align: center; }
#table .list:not(.countries) img { width: 60px; height: 60px; }
#table .list:not(.countries) .club-list-copy { display: grid; gap: 2px; justify-items: center; min-width: 0; width: 100%; }
#table .list:not(.countries) .club-list-copy > span { overflow-wrap: anywhere; font-size: 16px; line-height: 1.2; }
#table .list:not(.countries) small { font-size: 13px; }
#table .list.countries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#table .list.countries a { min-height: 60px; padding: 8px 10px; gap: 10px; font-size: 16px; }
#table .list.countries img { width: 36px; height: 36px; }
.clubs-goal { display: none; }
.clubs-intro { padding-block: 22px; }
.cab-profile .cab-sec { width: 100%; margin-top: 8px; }
.cabinet-main table#cabinet td { display: block; width: 100%; }
}
/* Profile menu must sit above the page content on every width */
@media (max-width: 1100px) {
.home-header { position: relative; z-index: 50; }
}
.user-menu-list { background: var(--menu-bg); }
@media (max-width: 700px) {
.sheet { max-width: 100%; }
.user-menu-list { position: fixed; top: 64px; right: 12px; left: 12px; min-width: 0; }
}
/* Club crests (also the small webp thumbnails in /images/game/s/): a soft plate under transparent logos */
img[src*="/images/game/"]:not(.flag):not(.dropdown-icon):not([src*="/user-"]):not([src*="/tmp-"]):not([src*="/mod-"]) { object-fit: contain; }
/* ======== Feedback 2026-10-10 ======== */
/* 1. No underlines anywhere: links are told apart by colour, buttons and cards by their shape */
a, a:hover, a:focus, .cabinet-main a:not(.cab-action), .about-end a:not(.home-cta), .page-content a, .cab-edit-link, .club-breadcrumbs a, .page-side a { text-decoration: none !important; }
.page-content p a, .page-content li a, .cabinet-main p a:not(.cab-action), .cabinet-main li a:not(.cab-action), .cab-edit-link, .club-breadcrumbs a, .about-end a:not(.home-cta) { color: var(--home-green); }
.page-content p a:hover, .page-content li a:hover, .cabinet-main p a:hover, .cabinet-main li a:hover, .cab-edit-link:hover { color: var(--home-green-hover); background: color-mix(in srgb, var(--home-green) 12%, transparent); border-radius: 6px; }
a:focus-visible { outline: 3px solid var(--home-green); outline-offset: 3px; border-radius: 6px; }
.cup-cards a time, .cup-cards a span { text-decoration: none !important; }
/* 2. Clubs: a slim banner with fine lawn instead of the big plate with the goal picture */
.clubs-intro { grid-template-columns: minmax(0, 1fr); margin: -28px -32px 22px; padding-right: 0; border-bottom-width: 2px; }
.clubs-intro .clubs-goal { display: none; }
.clubs-intro > div { padding: 20px 32px 18px; }
.clubs-intro h1 { margin-bottom: 4px; font-size: clamp(26px, 3.2vw, 36px); }
.clubs-intro .club-breadcrumbs { margin-bottom: 6px; font-size: 15px; }
@media (max-width: 700px) {
.clubs-intro > div { padding: 14px 16px 12px; }
.clubs-intro { margin: -22px -16px 16px; }
}
/* 3. Mini goals show the sector numbers (small, readable) */
.gate-view { --cell: 30px; }
.gate-view span { display: grid; place-items: center; font-size: 11px; font-weight: 600; line-height: 1; color: var(--home-muted); }
.gate-view .goal { color: #fff; }
.gate-view .save { color: #1f0b00; }
.gate-view .idle { color: var(--home-muted); }
#cab #match .gate-view, .match-result .gate-view { --cell: 24px; }
.gate-view.gate-big span { font-size: inherit; }
/* link colour must not leak into cards and tiles */
#table .list a, .cup-cards a, .about-toc a, .sheet-link { color: inherit; }
/* more of the stadium is visible: narrower panel, lighter veil */
.home-shell { max-width: 1140px; }
:root { --ov1: #07140e40; --ov2: #07140e73; }
html[data-theme=light] { --ov1: #07140e40; --ov2: #07140e73; }
/* Cabinet: last matches, one compact row each: gate | crest | name  score  name | crest | gate */
#cab #match { gap: 6px; }
#cab #match table { display: grid; grid-template-columns: 70px 76px minmax(0, 1fr) auto minmax(0, 1fr) 76px 70px; align-items: center; gap: 0 10px; padding: 8px 14px; }
#cab #match tbody, #cab #match tr { display: contents; }
#cab #match td { padding: 0; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cab #match tr:nth-child(1) > td:nth-child(1) { grid-area: 1 / 3 / 3 / 4; text-align: right; }
#cab #match tr:nth-child(1) > td:nth-child(3) { grid-area: 1 / 5 / 3 / 6; text-align: left; }
#cab #match tr:nth-child(1) > td:nth-child(2) { grid-area: 2 / 4 / 3 / 5; font-size: 11px; color: var(--home-muted); text-align: center; line-height: 1.2; }
#cab #match tr:nth-child(1) > td:nth-child(2) br { display: none; }
#cab #match tr:nth-child(2) > td:nth-child(1) { grid-area: 1 / 2 / 3 / 3; }
#cab #match tr:nth-child(2) > td:nth-child(2) { grid-area: 1 / 4 / 2 / 5; font-size: 24px; text-align: center; padding: 0 6px; line-height: 1.1; }
#cab #match tr:nth-child(2) > td:nth-child(3) { grid-area: 1 / 6 / 3 / 7; }
#cab #match tr:nth-child(3) > td:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
#cab #match tr:nth-child(3) > td:nth-child(2) { display: none; }
#cab #match tr:nth-child(3) > td:nth-child(3) { grid-area: 1 / 7 / 3 / 8; }
#cab #match img { width: 76px; height: 76px; display: block; }
#cab #match .gate-view { --cell: 19px; }
#cab #match .gate-view span { font-size: 10px; }
@media (max-width: 700px) {
#cab #match table { grid-template-columns: 54px 46px minmax(0, 1fr) auto minmax(0, 1fr) 46px 54px; gap: 0 5px; padding: 8px 8px; }
#cab #match img { width: 46px; height: 46px; }
#cab #match td { font-size: 13px; }
#cab #match tr:nth-child(1) > td:nth-child(2) { font-size: 12px; }
#cab #match tr:nth-child(2) > td:nth-child(2) { font-size: 18px; padding: 0 2px; }
#cab #match tr:nth-child(1) > td:nth-child(2) { display: none; }
#cab #match .gate-view { --cell: 14px; }
#cab #match .gate-view span { font-size: 8px; }
#cab #match .gate-nums { font-size: 10px; }
}
/* Cabinet club card: all buttons in one row (phones: main button, then two side by side) */
.cab-club > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cab-club > div > h2, .cab-club > div > .cab-rating { flex: 1 0 100%; margin: 0; }
.cab-club .cab-play, .cab-club .cab-play-more { margin: 0; display: contents; }
.cab-club .cab-play-more input { margin: 0; }
@media (max-width: 600px) {
.cab-club { padding: 16px; gap: 12px; }
.cab-club > img { width: 84px; height: 84px; }
.cab-club .cab-play { flex: 1 0 100%; display: block; }
.cab-club .cab-play-more input { flex: 1 1 0; width: auto; margin: 0; min-width: 0; padding: 0 8px; }
}
#cab #match table { grid-template-columns: max-content 44px minmax(0, 1fr) auto minmax(0, 1fr) 44px max-content; }
#cab #match td:has(> .gate-view) { overflow: visible; }
#cab #match tr:nth-child(1) > td:nth-child(2) br { display: inline; content: " "; }
@media (max-width: 700px) {
#cab #match table { grid-template-columns: max-content 34px minmax(0, 1fr) auto minmax(0, 1fr) 34px max-content; }
}
@media (max-width: 600px) {
.cab-club .cab-play-more input { font-size: 14px; padding: 0 4px; }
}
#cab #match .gate-view { --cell: 17px; }
#cab #match .gate-view span { font-size: 9px; }
.cabinet-main .cab-club .cab-play input[type=submit] { padding: 0 24px; }
@media (max-width: 700px) {
#cab #match tr:nth-child(1) > td:nth-child(1), #cab #match tr:nth-child(1) > td:nth-child(3) { display: none; }
#cab #match table { grid-template-columns: max-content 1fr auto 1fr max-content; }
#cab #match tr:nth-child(2) > td:nth-child(1) { grid-area: 1 / 2 / 3 / 3; justify-self: end; }
#cab #match tr:nth-child(2) > td:nth-child(2) { grid-area: 1 / 3 / 3 / 4; font-size: 22px; }
#cab #match tr:nth-child(2) > td:nth-child(3) { grid-area: 1 / 4 / 3 / 5; justify-self: start; }
#cab #match tr:nth-child(3) > td:nth-child(3) { grid-area: 1 / 5 / 3 / 6; }
#cab #match .gate-view { --cell: 22px; }
#cab #match .gate-view span { font-size: 12px; }
}
@media (min-width: 601px) {
.cab-club { padding: 18px 24px; gap: 20px; }
.cab-club > img { width: 96px; height: 96px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Game screen: compact header per gate, compact timer, centered sector numbers */
.matches-main #time { width: fit-content; min-width: 0; margin: 0 auto 14px; padding: 8px 28px; }
.matches-main #time h2 { margin: 0; text-align: center; }
.matches-main #game > tbody > tr:first-child > td { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding-bottom: 6px; }
.matches-main #game > tbody > tr:first-child > td br { display: none; }
.matches-main #game > tbody > tr:first-child > td img { width: 48px; height: 48px; border-radius: 10px; }
.matches-main #game > tbody > tr:first-child > td h3 { margin: 0; font-size: 20px; }
.matches-main #game .gate-note { font-size: 20px; }
@media (max-width: 600px) {
.matches-main #game > tbody > tr:first-child > td img { width: 36px; height: 36px; }
.matches-main #game > tbody > tr:first-child > td h3 { font-size: 17px; }
}
@media (max-width: 360px) {
.cab-club .cab-play-more input { font-size: 13px; letter-spacing: -.01em; }
}
@media (max-width: 360px) {
#cab #match .gate-view { --cell: 13px; }
#cab #match .gate-view span { font-size: 8px; }
}
/* Site-wide notice from the admin and the admin strip (only for a signed-in admin) */
.site-notice { padding: 8px 16px; background: var(--home-green); color: #06160a; font-size: 15px; text-align: center; }
/* Кнопка входа в админку: поверх страницы, вне игрового поля */
.admin-bar { position: fixed; left: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.admin-bar-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--home-line); border-radius: 999px; background: rgba(10, 24, 17, .86); backdrop-filter: blur(8px); color: var(--home-green-hover); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: background .15s, border-color .15s; }
.admin-bar-btn:hover { background: var(--home-green-hover); border-color: transparent; color: #04140a; }
.admin-bar-edit { color: var(--home-muted); font-weight: 500; }
@media (min-width: 1500px) { .admin-bar { top: 14px; bottom: auto; } }
.stat-strip { display: none; justify-content: center; padding: 8px; }
.hdr-info { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hdr-info .stat-pill { font-size: 13px; }
.hdr-info .stat-it { gap: 5px; padding: 4px 12px; }
.hdr-info .stat-it svg, .hdr-info .stat-of { display: none; }
@media (min-width: 601px) { .home-header { padding-top: 18px; padding-bottom: 18px; } }
@media (max-width: 600px) { .stat-strip { display: flex; } }
.stat-pill { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--home-line); border-radius: 999px; background: var(--surface-2); color: var(--home-muted); font-size: 14px; white-space: nowrap; }
.stat-it { display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; color: inherit; text-decoration: none; }
.stat-it + .stat-it { border-left: 1px solid var(--home-line); }
.stat-it svg { width: 18px; height: 18px; flex: none; }
.stat-it b { color: var(--home-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--home-green); box-shadow: 0 0 6px var(--home-green); }
.stat-boost:hover b { color: var(--home-green-hover); }
@media (max-width: 700px) { .stat-pill { font-size: 12px; } .stat-it { gap: 5px; padding: 6px 9px; } .stat-it svg, .stat-of { display: none; } }
/* Guest start screen: one photo, one window (login, banner, links); no header or footer */
body.home-page, body.auth-stage-page { padding: 0; }
body.home-page::before, body.auth-stage-page::before { background: url('/design/stage-photo-v2.webp') center / cover no-repeat, var(--page-bg); }
.home-page .home-shell, .auth-stage-page .home-shell { max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; }
.home-page .home-main, .auth-stage-page .cabinet-main { padding: 0; max-width: none; margin: 0; }
.auth-stage { padding-top: 24px; padding-bottom: 24px; }
.auth-stage .cab-auth-copy { max-height: none; overflow: hidden; }
.landing-stage { display: flex; justify-content: flex-end; align-items: center; min-height: 100svh; height: auto; padding: 24px clamp(20px, 3vw, 56px); box-sizing: border-box; }
.stage-window {
  position: relative; z-index: 3; width: 100%; max-width: 440px; box-sizing: border-box; padding: 34px 36px 26px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, #0f2a17ee, #06150bf2 75%); border: 1px solid #96e68c33;
  box-shadow: 0 40px 90px #000a, 0 12px 28px #0008, inset 0 1px 0 #ffffff24; }
.stage-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; color: var(--home-text); font-size: 38px; font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.stage-brand b { color: var(--home-green); }
.stage-brand img { width: 48px; height: auto; }
.stage-window h2, .stage-window .cab-intro h1 { margin: 0 0 14px; font-size: 30px; font-weight: 400; line-height: 1.15; }
.stage-window .cab-intro p { margin: 0 0 14px; color: var(--home-muted); font-size: 17px; }
.stage-window label { display: block; margin: 14px 0 6px; font-size: 17px; }
.stage-window input[type=email], .stage-window input[type=password], .stage-window input[type=text] { width: 100%; box-sizing: border-box; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--home-text); font: inherit; font-size: 17px; }
.stage-window input:focus-visible { outline: 3px solid #8be06c; outline-offset: 2px; }
.stage-window input[type=submit] { display: block; width: 100%; min-height: 54px; margin-top: 20px; border: 1px solid var(--home-green); border-radius: var(--radius-sm); background: var(--btn); color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.stage-window input[type=submit]:hover { background: #4a9a32; }
.stage-forgot { display: block; margin-top: 16px; padding: 8px 0; text-align: center; color: var(--home-green); }
.stage-register { display: flex; justify-content: center; align-items: center; min-height: 52px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--home-text); font-size: 17px; text-decoration: none; }
.stage-register:hover { background: var(--surface-2); }
.stage-window hr { margin: 16px 0; border: 0; border-top: 1px solid #ffffff1f; }
.stage-window .cab-auth-link { margin-top: 16px; text-align: center; font-size: 17px; color: var(--home-muted); }
.stage-window #cabinet tr { margin-bottom: 14px; }
.stage-window .crest-strip { margin: 24px -36px 0; }
.stage-window .crest-track { gap: 14px; padding: 4px 0; }
.stage-window .crest-track img { width: 52px; height: 52px; background: #ffffff2e; }
.stage-links { display: flex; justify-content: center; gap: 22px; margin-top: 14px; font-size: 15px; }
.stage-links a { color: var(--home-muted); text-decoration: none; }
.stage-links a:hover { color: var(--home-text); }
@media (max-width: 760px) {
.landing-stage { align-items: flex-end; justify-content: center; padding: min(30svh, 240px) 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.stage-window { padding: 20px 18px 12px; border-radius: 20px; }
.stage-brand { font-size: 28px; gap: 10px; margin-bottom: 10px; }
.stage-brand img { width: 38px; }
.stage-window h2, .stage-window .cab-intro h1 { margin-bottom: 8px; font-size: 24px; }
.stage-window label { margin: 10px 0 4px; font-size: 15px; }
.stage-window input[type=email], .stage-window input[type=password], .stage-window input[type=text] { min-height: 48px; font-size: 16px; }
.stage-window input[type=submit] { min-height: 50px; margin-top: 14px; }
.stage-forgot { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 2px; padding: 0; }
.stage-window hr { margin: 6px 0 10px; }
.stage-register { min-height: 48px; margin-top: 0; }
.stage-window .crest-strip { margin: 14px -18px 0; }
.stage-window .crest-track img { width: 44px; height: 44px; }
.stage-links { gap: 6px; margin-top: 6px; }
}
@media (max-height: 780px) { .stage-window .crest-strip { display: none; } }
.stage-links a, .stage-links span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; }
@media (max-width: 760px) { .stage-links a { min-height: 44px; } .stage-links { gap: 2px 6px; } }
@media (max-width: 700px) {
body.home-page::before, body.auth-stage-page::before { background: url('/design/stage-photo-m-v2.webp') center / cover no-repeat, var(--page-bg); }
}
/* Inputs at 16px: iOS does not zoom the page on focus */
@media (max-width: 760px) { input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea { font-size: 16px; } }
}
@media (prefers-reduced-motion: no-preference) {
body::before { view-transition-name: stage-bg; }
.stage-window { view-transition-name: stage-window; }
::view-transition-group(stage-window) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(stage-window), ::view-transition-new(stage-window) { height: 100%; }
}
/* Info windows inside the start window: it grows, the page content is shown in it */
.stage-window { transition: max-width .45s cubic-bezier(.22, 1, .36, 1); }
.stage-window.stage-open { max-width: 780px; max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.stage-open > :not(.stage-brand):not(.stage-doc) { display: none; }
.stage-back { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--home-text); font: inherit; font-size: 16px; cursor: pointer; }
.stage-back:hover { background: var(--surface-2); }
.stage-doc-body { font-size: 17px; line-height: 1.55; }
.stage-doc-body h1 { margin: 0 0 14px; font-size: 30px; font-weight: 400; text-align: left; }
.stage-doc-body h2, .stage-doc-body h3 { margin: 22px 0 8px; font-weight: 500; }
.stage-doc-body p, .stage-doc-body li { color: var(--home-text); }
.stage-doc-body a { color: var(--home-green); }
.stage-doc-body .about-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; }
.stage-doc-body table { width: 100%; border-collapse: collapse; }
.stage-doc-body td { padding: 4px 0; vertical-align: top; }
.stage-doc-body input[type=text], .stage-doc-body input[type=email], .stage-doc-body textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--home-text); font: inherit; }
.stage-doc-body input[type=submit], .stage-doc-body button { min-height: 48px; padding: 0 22px; border: 1px solid var(--home-green); border-radius: var(--radius-sm); background: var(--btn); color: #fff; font: inherit; cursor: pointer; }
.stage-doc-body .about-lead, .stage-doc-body .center { text-align: left; }
/* Light theme: the start window turns bright, the photo stays as it is */
html[data-theme=light] .stage-window hr { border-top-color: #0f22171f; }
html[data-theme=light] .stage-window .crest-track img { background: #f1f9ec; box-shadow: 0 2px 8px #0f221726; }
html[data-theme=light] .stage-window input[type=submit]:hover { background: #2b8a19; }
.stage-links span { color: var(--home-muted); }
.stage-links { flex-wrap: wrap; }
/* Field markings: only in the start window on the home page, drawn in percentages so they fit its size */
.stage-field { position: absolute; inset: 14px; z-index: -1; pointer-events: none; border: 2px solid color-mix(in srgb, var(--home-green) 32%, transparent); border-radius: 10px; }
.stage-field i { position: absolute; display: block; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--home-green) 32%, transparent); }
.stage-field .h { left: 0; right: 0; top: 50%; margin-top: -1px; height: 0; border-width: 2px 0 0; }
.stage-field .c { left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.stage-field .t, .stage-field .b { left: 50%; width: 52%; height: 11%; transform: translateX(-50%); }
.stage-field .t { top: -2px; border-top: 0; }
.stage-field .b { bottom: -2px; border-bottom: 0; }
.stage-field .t2, .stage-field .b2 { left: 50%; width: 26%; height: 4%; transform: translateX(-50%); }
.stage-field .t2 { top: -2px; border-top: 0; }
.stage-field .b2 { bottom: -2px; border-bottom: 0; }
html[data-theme=light] .stage-field, html[data-theme=light] .stage-field i { border-color: color-mix(in srgb, var(--home-green) 40%, transparent); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Attack / defense counts under each gate */
.gate-nums { display: flex; flex-direction: column; align-items: center; margin-top: 4px; font-size: 11px; line-height: 1.25; color: var(--home-muted); text-align: center; }
.gate-nums i { font-style: normal; }
.gate-big + .gate-nums { font-size: 14px; margin: 6px 0 0; }
/* no jump of the page and the photo when the scrollbar comes and goes between sections */
html { overflow-y: scroll; scrollbar-gutter: stable; }
html:has(body.home-page, body.auth-stage-page) { overflow-y: auto; scrollbar-gutter: auto; }

/* Cabinet last matches, final sizes: the club crest is the main thing and is larger than the gate picture */
#cab #match table { grid-template-columns: max-content 88px minmax(0, 1fr) auto minmax(0, 1fr) 88px max-content; }
#cab #match img { width: 88px; height: 88px; }
#cab #match .gate-view { --cell: 17px; }
#cab #match .gate-view span { font-size: 10px; }
#cab #match .gate-nums { font-size: 11px; }
@media (max-width: 700px) {
#cab #match table { grid-template-columns: max-content 1fr auto 1fr max-content; }
#cab #match img { width: 58px; height: 58px; }
#cab #match .gate-view { --cell: 12px; }
#cab #match .gate-view span { font-size: 8px; }
#cab #match .gate-nums { font-size: 10px; }
}
@media (max-width: 360px) { #cab #match img { width: 52px; height: 52px; } #cab #match .gate-view { --cell: 11px; } }

/* Play page: both request panels have the same buttons (size, position) */
.matches-main .match-request input[type=submit] { min-width: 220px; min-height: 52px; padding: 12px 22px; font-size: 18px; line-height: 1.2; }
.matches-main .request-bot > div { flex: 1 1 180px; }
@media (max-width: 700px) { .matches-main .match-request input[type=submit] { width: 100%; } .matches-main .request-bot > div { flex: 0 0 auto; } }
/* Game page, phone: the sticky action bar never runs past the screen edge */
@media (max-width: 760px) {
form:has(#send) > .center { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
#send { min-width: 0; padding: 0 8px; font-size: 17px; }
#rand-scheme { min-width: 0; }
}

/* Scheme page: compact, everything above the fold; the action bar is always visible */
.matches-workspace:has(#game) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 14px; }
.matches-workspace:has(#game) > .matches-intro { grid-column: 1; margin: 0 0 8px; }
.matches-workspace:has(#game) > .matches-intro h1 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
.matches-workspace:has(#game) > #time { grid-column: 2; margin: 0 0 8px; padding: 2px 18px; }
.matches-workspace:has(#game) > #time h2 { font-size: 26px; }
.matches-workspace:has(#game) > form { grid-column: 1 / -1; min-width: 0; }
.matches-main #game { gap: 0 14px; margin: 0 auto 6px; }
.matches-main #game > tbody > tr > td { padding: 12px 14px; }
.matches-main #game > tbody > tr:first-child > td { padding-bottom: 2px; }
.matches-main #game > tbody > tr:last-child > td { padding-top: 0; }
.matches-main #game td > div[role=group] { min-height: 0; aspect-ratio: 1.6; width: min(100%, calc((100svh - 330px) * 1.6)); min-width: 220px; padding: 5% 13% 9%; }
.matches-main #game > tbody > tr:first-child > td img { width: 40px; height: 40px; }
.matches-main #game > tbody > tr:first-child > td h3 { font-size: 18px; }
.matches-main #game .gate-note { font-size: 18px; }
@media (min-width: 761px) {
  form:has(#send) > .center { position: sticky; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--home-line); box-shadow: 0 -8px 20px #0000003d; }
  form:has(#send) > .center h3 { margin: 0; font-size: 18px; }
  form:has(#send) > .center p { margin: 0; }
  form:has(#send) > .center #gate-msg { flex: 1 0 100%; margin: 0; min-height: 0; font-size: 14px; text-align: center; }
  #rand-scheme, #send { width: auto; min-height: 46px; padding: 0 24px; font-size: 17px; }
}
@media (max-width: 760px) {
  .matches-workspace:has(#game) > .matches-intro h1 { font-size: 24px; }
  .matches-workspace:has(#game) > #time { padding: 0 12px; }
  .matches-workspace:has(#game) > #time h2 { font-size: 22px; }
  .matches-main #game > tbody > tr > td { padding: 8px 10px; }
  .matches-main #game td > div[role=group] { width: min(100%, calc((100svh - 300px) * 1.6)); min-width: 200px; aspect-ratio: 1.7; }
  .matches-main #game > tbody > tr:last-child > td:first-child { margin-bottom: 8px; }
  .matches-main #game > tbody > tr:first-child > td img { width: 32px; height: 32px; }
  .matches-main #game > tbody > tr:first-child > td h3 { font-size: 16px; }
  .matches-main #game .gate-note { font-size: 16px; }
}

/* Tighter layout for all signed-in and reading pages: content starts higher, less air between blocks */
.home-header { padding-top: 8px; padding-bottom: 8px; }
.cab-workspace { padding: 20px 32px 28px; }
.cabinet-main h1 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 38px); }
.matches-workspace { --match-gap: 10px; --match-inset: 16px; --match-section-gap: 18px; }
.matches-intro { margin-bottom: 14px; }
.matches-intro h1 { margin-bottom: 6px; }
.matches-intro p { font-size: 17px; }
.match-request p, .matches-main .match-empty { font-size: 17px; }
.match-panel-heading { padding: 10px 0 12px; }
.cab-club { padding: 16px 20px; gap: 14px; }
#cab { gap: 16px 28px; }
.about-section { margin-top: 28px; }
.home-footer { padding: 14px 32px; gap: 12px; }
@media (max-width: 900px) { .cab-workspace { padding: 16px 20px 22px; } }
@media (max-width: 700px) {
  .home-header { padding: 6px 12px; }
  .cab-workspace { padding: 12px 14px 18px; }
  .cabinet-main h1 { margin-bottom: 10px; font-size: 26px; }
  .matches-workspace { --match-inset: 12px; --match-section-gap: 14px; }
  .cab-club { padding: 14px; gap: 10px; }
  .about-section { margin-top: 20px; }
}
@media (max-width: 700px) { .cabinet-main button.settings-option { min-width: 0; flex: 1 1 140px; } }
.page-main { padding: 14px 28px 20px; }
.page-content { padding: 16px 22px; }
@media (max-width: 700px) { .page-main { padding: 10px 12px 16px; } .page-content { padding: 12px 14px; } }

/* "Разработка: aimatik.ru" sits exactly between the two penalty-area lines at the bottom of the field markings */
.stage-window { padding-bottom: 12px; }
.stage-links { margin-bottom: 86px; }
.auth-tall .stage-links { margin-bottom: 106px; }
@media (max-width: 760px) { .stage-links { margin-bottom: 80px; } .auth-tall .stage-links { margin-bottom: 100px; } }
.stage-links span { position: absolute; left: 0; right: 0; bottom: calc(12px + 7.5%); z-index: 1; display: block; min-height: 0; margin: 0; padding: 0; line-height: 1.2; text-align: center; transform: translateY(50%); pointer-events: auto; }
.stage-open .stage-links span { display: none; }

/* Cups: groups (tables + tour results) and card price tag */
.cup-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cup-group { padding: 12px; border: 1px solid var(--home-line); border-radius: var(--radius-sm); background: var(--surface); }
.cup-group h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.cup-group table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cup-group th { padding: 4px 6px; color: var(--home-muted); font-weight: 400; text-align: left; }
.cup-group td { padding: 5px 6px; border-top: 1px solid var(--home-line); white-space: nowrap; }
.cup-group td:first-child { width: 22px; color: var(--home-muted); }
.cup-group td .cup-club { gap: 6px; }
.cup-group td .cup-club img { width: 22px; height: 22px; }
.cup-group tr.cup-qual td { background: color-mix(in srgb, var(--home-green) 14%, transparent); }
.cup-group tr[data-own] td { box-shadow: inset 0 0 0 1px var(--home-green); }
.cup-tours { margin: 10px 0 0; padding: 0; list-style: none; color: var(--home-muted); font-size: 13px; line-height: 1.6; }
.cup-tours span { display: inline-block; min-width: 40px; opacity: .8; }
.cup-tours b { color: var(--home-text); font-weight: 600; }
@media (max-width: 700px) { .cup-groups { grid-template-columns: minmax(0, 1fr); } }
.cup-champ { overflow-x: auto; }
.cup-champ table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cup-champ th { padding: 6px 8px; color: var(--home-muted); font-weight: 400; text-align: left; white-space: nowrap; }
.cup-champ td { padding: 6px 8px; border-top: 1px solid var(--home-line); white-space: nowrap; }
.cup-champ td:first-child { width: 28px; color: var(--home-muted); }
.cup-champ td .cup-club img { width: 22px; height: 22px; }
.cup-champ tr.cup-qual td { background: color-mix(in srgb, var(--home-green) 10%, transparent); }
.cup-champ tr[data-own] td { box-shadow: inset 0 0 0 1px var(--home-green); }
.cup-tours-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }

/* Tournament cards: time + name on top, "what they play for" under, status last; nothing overlaps */
.cup-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cup-cards li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cup-cards a { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cup-cards a time { flex: none; }
.cup-cards a span { min-width: 0; overflow-wrap: anywhere; }
.cup-stake { margin: 0; font-size: 15px; line-height: 1.35; color: var(--home-text); }
.cup-stake i { font-style: normal; color: var(--home-muted); }
.cup-stake b { font-weight: 600; color: var(--amber-text); }
.cup-cards small { margin-top: 0; }
@media (max-width: 700px) { .cup-cards { grid-template-columns: minmax(0, 1fr); } }

/* Tournament themes: tabs with cup picture and progress */
.theme-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.theme-tabs a { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 2px; padding: 12px; border: 1px solid var(--home-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--home-text); text-decoration: none; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.theme-tabs a:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.theme-tabs a[aria-current=page] { border-color: var(--amber-text); background: var(--surface-2); }
.theme-tabs img { grid-row: 1 / 4; width: 52px; height: 60px; border-radius: 6px; object-fit: cover; align-self: center; }
.theme-tabs b { font-weight: 600; }
.theme-tabs small { color: var(--home-muted); font-size: 14px; line-height: 1.3; }
.theme-tabs i { font-style: normal; color: var(--amber-text); font-size: 14px; font-weight: 600; }
@media (max-width: 1100px) { .theme-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .theme-tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Theme page: facts and per-theme sections on the tournaments home */
.theme-facts { display: grid; gap: 0; margin: 0; }
.theme-facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--home-line); }
.theme-facts div:first-child { border-top: 0; padding-top: 0; }
.theme-facts dt { color: var(--home-muted); }
.theme-facts dd { margin: 0; overflow-wrap: anywhere; }
.theme-section .match-panel-heading h2 { display: flex; align-items: center; gap: 10px; }
.theme-section .match-panel-heading img { width: 26px; height: 30px; border-radius: 4px; object-fit: cover; }
.theme-line { margin: 0 0 12px; color: var(--home-muted); }
@media (max-width: 600px) { .theme-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Player trophies: collection, progress, order */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.trophy-grid li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; border: 1px solid var(--home-line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.trophy-grid img { display: block; width: 65px; height: 75px; border-radius: 8px; object-fit: cover; }
.trophy-grid .trophy-art { display: block; width: 150px; height: 150px; border-radius: 8px; background: no-repeat 100% center / auto 100%; }
.trophy-grid img[src*="/city/"] { width: 150px; height: 150px; object-fit: contain; }
.trophy-grid li.trophy-gold { border-color: var(--amber-text); background: linear-gradient(180deg, color-mix(in srgb, var(--amber-text) 18%, var(--surface)), var(--surface)); box-shadow: 0 0 0 1px var(--amber-text), 0 0 22px color-mix(in srgb, var(--amber-text) 45%, transparent); }
.trophy-grid li.trophy-gold img { filter: saturate(1.25) brightness(1.08) drop-shadow(0 0 10px var(--amber-text)); }
.trophy-grid li.trophy-gold b { color: var(--amber-text); font-weight: 600; }
.trophy-theme .match-panel-heading h2 a { color: inherit; }
.trophy-theme form { margin-top: 14px; }
.trophy-grid b { font-weight: 500; overflow-wrap: anywhere; }
.trophy-grid small { color: var(--home-muted); }
.trophy-grid li.trophy-used { opacity: .55; }
.trophy-need { margin: 0 0 14px; padding: 0; list-style: none; }
.trophy-need li { padding: 6px 0 6px 28px; position: relative; }
.trophy-need li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); }
.trophy-need li.ok::before { background: var(--home-green); }
.trophy-need li.no::before { background: var(--err-text); }
.trophy-ord { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tord { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--home-line); border-radius: 12px; }
.tord img { grid-row: 1 / span 4; width: 52px; height: 60px; object-fit: contain; }
.tord small { color: var(--home-muted); }
.tord-st { margin-top: 4px; font-weight: 600; color: var(--home-muted); }
.tord.st1 .tord-st { color: var(--home-green); }
.tord.st3 { border-color: var(--home-green); box-shadow: 0 0 14px color-mix(in srgb, var(--home-green) 55%, transparent); }
.tord.st3 .tord-st { color: var(--home-green); }
.tord.st3 img { filter: drop-shadow(0 0 8px var(--home-green)); }
.tord.st2 .tord-st { color: var(--err-text); }
.tord.st4 { opacity: .6; }
.tord.st4 img { filter: grayscale(1); }
.trophy-archive { margin-top: 14px; }
.trophy-archive summary { display: inline-block; cursor: pointer; padding: 6px 14px; border: 1px solid var(--home-line); border-radius: 999px; color: var(--home-muted); list-style: none; }
.trophy-archive summary::-webkit-details-marker { display: none; }
.trophy-archive[open] summary { color: inherit; }
@media (max-width: 700px) {
  .trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .trophy-grid li { padding: 12px 8px; }
  .trophy-need li { overflow-wrap: anywhere; }
}
.cups-workspace form:has(input[name=order]) input[type=submit] { width: 100%; max-width: 420px; white-space: normal; line-height: 1.25; }

/* Logo: "Евро" + green "лига", the tagline under it (header, start window) */
.home-brand span, .stage-brand span { display: inline-flex; flex-direction: column; line-height: 1.05; }
.home-brand small, .stage-brand small { margin-top: 3px; color: var(--hdr-muted, var(--home-muted)); font-size: .42em; font-weight: 400; letter-spacing: .02em; white-space: nowrap; }
.stage-brand small { color: var(--home-muted); font-size: 14px; letter-spacing: 0; }
@media (max-width: 760px) { .stage-brand small { font-size: 12px; } .home-brand small { font-size: 10px; } }
.home-brand span, .stage-brand span { display: inline-block; white-space: nowrap; }
.home-brand span > b, .stage-brand span > b { font-weight: inherit; }
.home-brand small, .stage-brand small { display: block; }
.home-brand img { flex: none; }
.stage-brand img { flex: none; }

/* Goal photo (goal-v2.webp, crop 1330x630): the 3x3 sector grid fills the opening between the posts and the crossbar exactly.
   Paddings are in % of the width (px of the crop: left 58, right 56, top 54, bottom 70). Same photo on PC and phones.
   Icons are shared by the game screen (pressed sectors), the result page and the legend. */
:root {
  --ic-goal: url("/design/ball.webp?v=1");
  --ic-glove: url("/design/glove-v2.webp");
  --ic-idle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3L41 9L39 29Q35 40 24 45Q13 40 9 29L7 9Z' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='2.2' stroke-dasharray='4 3.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gate-shine: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0) 50%);
  --gate-goal-bg: var(--gate-shine), linear-gradient(#3aa845, #1f7a2c);
  --gate-save-bg: var(--gate-shine), linear-gradient(#ff7a1a, #ff6600);
  --gate-def-bg: rgba(255,102,0,.72);
}
.matches-main #game td > div[role=group], .matches-main #score .gate-big {
  --pad: 4.06% 4.21% 5.26% 4.36%; --ratio: 1330 / 630;
  box-sizing: border-box; aspect-ratio: var(--ratio); min-height: 0; padding: var(--pad);
  background: url('/design/goal-v2.webp?v=1') center / 100% 100% no-repeat; border-radius: 10px;
  box-shadow: 0 10px 28px #0006;
}
html[data-theme=light] :is(.matches-main #game td > div[role=group], .matches-main #score .gate-big) { background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)), url('/design/goal-v2.webp?v=1'); box-shadow: 0 10px 26px #1a3a2640, 0 0 0 1px #0f221726; }
.matches-main #game td > div[role=group] { width: min(100%, calc((100svh - 330px) * 2.1)); min-width: 260px; }
.matches-main #game td > div[role=group] table { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.matches-main #game td > div[role=group] tbody, .matches-main #game td > div[role=group] tr { display: contents; }
.matches-main #game td > div[role=group] table td { min-width: 0; height: auto; padding: 3px; border: 0; }
.matches-main #score .gate-big { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0; width: 100%; max-width: 440px; }

/* Cells: rounded, evenly inset, thin light outline; the net shows through */
.matches-main #game button.sector, .matches-main #score .gate-big span {
  box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: rgba(255,255,255,.3) no-repeat center / auto 56%; border-color: rgba(255,255,255,.65); backdrop-filter: blur(1.5px);
  color: #fff; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 5px #000, 0 1px 3px #000;
}
.matches-main #score .gate-big span { margin: 3px; padding: 3px 7px; place-items: start; font-size: clamp(10px, 2.8vw, 13px); }
.matches-main #game button.sector { min-height: 0; }
.matches-main #game button.sector:hover:not(:disabled):not([aria-pressed=true]) { background-color: rgba(255,255,255,.45); border-color: #fff; }
.matches-main #game button.sector[aria-pressed=true] { place-items: start; justify-content: start; align-content: start; text-align: left; padding: 3px 7px; font-size: clamp(10px, 2.8vw, 13px); }
.matches-main #game button.sector0[aria-pressed=true]::before, .matches-main #score .gate-big :is(.goal, .save)::after { content: none; }
.matches-main #game button.sector0[aria-pressed=true], .matches-main #score .gate-big .goal {
  background: var(--ic-goal) center / auto 64% no-repeat, var(--gate-goal-bg); color: #fff; border-color: rgba(160,240,170,.95);
  box-shadow: inset 0 0 12px rgba(255,255,255,.2), 0 0 12px rgba(63,200,80,.4);
}
/* Attack = football, defense = goalkeeper glove. Saved shot: white cell with the glove */
.matches-main #score .gate-big .save, .matches-main #game button.sector1[aria-pressed=true] {
  background: var(--ic-glove) center / auto 70% no-repeat, var(--gate-save-bg); color: #fff; border-color: #ffd2b0;
  box-shadow: inset 0 0 0 1px #ffd2b0, 0 0 12px rgba(255,102,0,.45);
}
.matches-main #score .gate-big .idle { background: var(--ic-glove) center / auto 62% no-repeat, var(--gate-def-bg); border: 1px dashed #ffd2b0; opacity: 1; }
.matches-main #score .gate-big .idle { background-blend-mode: normal; }
.matches-main .gate-legend span::before { width: 26px; height: 26px; border: 0 !important; border-radius: 7px !important; background: #143222 center / 78% no-repeat !important; }
.matches-main .gate-legend .goal::before { background-image: var(--ic-goal) !important; }
.matches-main .gate-legend .save::before { background-image: var(--ic-glove), var(--gate-save-bg) !important; background-size: auto 80%, cover !important; background-position: center !important; }
.matches-main .gate-legend .idle::before { background-image: var(--ic-glove) !important; background-size: auto 80% !important; background-color: #b34700 !important; box-shadow: inset 0 0 0 1px #ffd2b0; }

/* Phones: the long link block in the footer is one button that opens a bottom sheet (fewer things on screen, thumb-friendly) */
.foot-more { display: none; }
@media (max-width: 760px) {
  .home-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 14px; }
  .home-footer > nav { display: none; }
  .foot-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface-2); color: var(--home-text); font: inherit; font-size: 15px; cursor: pointer; }
  .home-footer > p { margin: 0; font-size: 13px; color: var(--home-muted); }
}
#menu-sheet .sheet-body { gap: 0; }
#menu-sheet nav { display: grid; }
@media (max-width: 760px) { .home-footer { padding-right: 70px; } .cup-penalty-actions { display: flex; flex-wrap: wrap; gap: 10px; } .cup-penalty-actions > * { flex: 1 1 160px; } }

/* New logo (a picture, not a shield): header, start window; the wordmark is in capitals */
.home-brand { gap: 12px; letter-spacing: .02em; }
.home-brand img { height: 64px; width: auto; }
.home-brand span { font-size: 24px; }
.stage-brand { gap: 14px; font-size: 36px; letter-spacing: .02em; margin-bottom: 18px; }
.stage-brand img { width: 96px; height: auto; }
@media (max-width: 1100px) { .home-brand img { height: 56px; } }
@media (max-width: 760px) {
  .home-brand img { height: 48px; }
  .home-brand span { font-size: 20px; }
  .stage-brand { font-size: 27px; gap: 10px; margin-bottom: 8px; }
  .stage-brand img { width: 68px; }
}

/* Logo lock-up: name on top, tagline under it in small capitals stretched to the width of the name (fitted by ui.js; static fallback below) */
.brand-fit { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-name { display: block; white-space: nowrap; line-height: 1; }
.home-brand small.brand-sub, .stage-brand small.brand-sub { display: block; margin-top: 5px; font-size: .34em; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; line-height: 1; white-space: nowrap; color: color-mix(in srgb, var(--home-green) 72%, #fff 28%); opacity: .92; }
.home-brand small.brand-sub { color: color-mix(in srgb, var(--hdr-accent) 70%, #fff 30%); }
.stage-brand small.brand-sub { margin-top: 7px; }
.home-brand small.brand-sub { margin-top: 4px; }

/* Rounded game windows: gate cards, the scheme bar */
.matches-main #game > tbody > tr:first-child > td { border-radius: var(--radius) var(--radius) 0 0; }
.matches-main #game > tbody > tr:last-child > td { border-radius: 0 0 var(--radius) var(--radius); }
@media (min-width: 761px) { form:has(#send) > .center { border: 1px solid var(--home-line); border-radius: var(--radius); } }
/* Header: the nav gets the free middle space instead of an equal third, so the counters under the clock never run under it */
@media (min-width: 1101px) {
  body .home-header { grid-template-columns: auto minmax(max-content, 1fr) auto; column-gap: 12px; padding-inline: 26px; }
  .home-header nav { gap: 2px; font-size: 17px; justify-self: start; align-self: center; margin-left: 0; }
  .home-header nav a:not(.home-login) { padding: 10px 16px; }
  .hdr-info { gap: 8px; }
  .home-header .home-login { min-height: 46px; padding-inline: 20px; font-size: 17px; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  body .hdr-tools { gap: 22px; }
  body .hdr-gear { width: 38px; }
  body .hdr-gear::before { left: -11px; }
  body .home-header { column-gap: 8px; }
  .hdr-info .stat-pill { font-size: 12px; }
  .hdr-info .stat-it { padding: 4px 8px; }
  .home-header nav { gap: 0; font-size: 15px; }
  .home-header nav a:not(.home-login) { padding: 10px 11px; }
  .home-header .home-login { padding-inline: 16px; font-size: 15px; }
}
/* Gear: centred on the whole clock + counters block, divider as tall as the block */
body .hdr-tools { align-items: stretch; gap: 24px; }
body .hdr-gear { width: 42px; height: auto; border-radius: var(--radius-sm); }
body .hdr-gear svg { width: 27px; height: 27px; }
@media (min-width: 1101px) { body .hdr-gear::before { left: -12px; top: 0; bottom: 0; } }

/* Managers list and profile (/managers) */
.man-wrap { overflow-x: auto; margin-top: 18px; }
.man-list { width: 100%; border-collapse: collapse; }
.man-list th, .man-list td { padding: 10px 12px; text-align: left; vertical-align: middle; }
.man-list th { color: var(--home-muted); font-weight: 400; white-space: nowrap; }
.man-list td:first-child, .man-list td:last-child { white-space: nowrap; }
.man-list tr.own td { background: rgba(34, 197, 94, .08); }
.craft-tree { position: relative; width: min(100%, 500px); aspect-ratio: 1; margin: 6px auto 16px; }
.craft-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.craft-lines line { stroke: var(--home-line); stroke-width: .5; stroke-dasharray: 1.5 1.5; }
.craft-lines line.on { stroke: var(--amber-text); stroke-width: .8; stroke-dasharray: none; }
.craft-hub { position: absolute; left: 50%; top: 50%; width: 32%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; z-index: 1; }
.craft-tree .craft-hub img { width: 90%; height: auto; opacity: .45; filter: grayscale(.8); }
.craft-hub.ready img { opacity: 1; filter: drop-shadow(0 0 14px var(--amber-text)); }
.craft-hub b { font-size: 14px; font-weight: 500; line-height: 1.2; }
.craft-hub b, .craft-hub small { padding: 1px 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.craft-hub small { color: var(--home-muted); }
.craft-hub.ready small { color: var(--amber-text); }
.craft-slot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 2px dashed var(--home-line); border-radius: 50%; background: var(--surface-3); z-index: 1; }
.craft-tree .craft-slot img { width: 68%; height: 68%; opacity: .2; filter: grayscale(1); }
.craft-slot span { position: absolute; font-weight: 600; color: var(--home-muted); }
.craft-slot.on { border: 2px solid var(--amber-text); background: color-mix(in srgb, var(--amber-text) 14%, var(--surface-3)); cursor: pointer; transition: transform .2s; }
.craft-slot.on:hover, .craft-slot.sel { transform: translate(-50%, -50%) scale(1.08); }
.craft-tree .craft-slot.on img { opacity: 1; filter: drop-shadow(0 0 6px var(--amber-text)); }
.craft-extra, .craft-info { margin: 0 0 12px; text-align: center; color: var(--home-muted); }
.craft-info b { color: var(--amber-text); font-weight: 600; }
.craft-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.craft-old { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--home-line); border-radius: 12px; cursor: pointer; opacity: .6; transition: opacity .2s; }
.craft-old:hover, .craft-old.sel { opacity: 1; border-color: var(--amber-text); }
.craft-old img { width: 48px; height: 58px; object-fit: contain; filter: grayscale(.7); }
.craft-old small { color: var(--home-muted); font-size: 12px; }
@media (max-width: 600px) { .craft-hub b { font-size: 12px; } .craft-slot { width: 22%; } }
.trophy-pic { position: relative; display: inline-block; }
.trophy-n { position: absolute; right: -10px; bottom: -6px; min-width: 28px; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--home-text); font-style: normal; font-weight: 700; font-size: 13px; text-align: center; box-shadow: 0 1px 3px #0f221726; }
.trophy-grid li.trophy-named img { object-fit: contain; }
.craft-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.craft-tabs a { padding: 6px 12px; border: 1px solid var(--home-line); border-radius: 999px; color: inherit; text-decoration: none; }
.craft-tabs a[aria-current] { border-color: var(--amber-text); color: var(--amber-text); }
.craft-tabs b { font-weight: 600; }
.named-apply label { display: block; margin: 14px 0 6px; color: var(--home-muted); }
.named-apply textarea { resize: vertical; }
.named-apply .cup-note { margin: 12px 0; }
.cabinet-main .named-apply input[type=submit] { margin-top: 18px; min-height: 54px; padding: 14px 30px; font-size: 18px; }
.named-text { position: relative; }
.named-text textarea { display: block; width: 100%; box-sizing: border-box; padding-bottom: 60px; resize: none; }
.named-text .file-pick { position: absolute; right: 12px; bottom: 12px; left: 12px; justify-content: flex-end; flex-wrap: nowrap; }
body .cabinet-main .named-text .file-pick-btn { min-height: 36px; padding: 0 14px; font-size: 14px; flex: none; }
.named-text .file-pick-name { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.craft-hub[role=button] { cursor: pointer; }
.craft-hub[role=button]:hover img, .craft-hub[role=button]:focus-visible img { opacity: .75; }
.craft-hub.ready[role=button]:hover img { opacity: 1; }
.craft-tree .craft-hub img { width: auto; max-width: 100%; max-height: min(150px, 27vw); object-fit: contain; }
.craft-dialog { width: min(92vw, 640px); max-height: 86vh; padding: 18px; border: 1px solid var(--home-line); border-radius: 16px; background: var(--surface); color: inherit; }
.craft-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.craft-dialog .match-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
:root body .cabinet-main .craft-dialog button.craft-close { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none; background-image: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.craft-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
:root body .cabinet-main .craft-dialog .craft-pick button { display: grid; text-shadow: none; transform: none; place-items: center; min-height: 0; padding: 8px 4px; border: 2px solid transparent; border-radius: 12px; box-shadow: none; background: var(--surface-3); background-image: none; cursor: pointer; }
:root body .cabinet-main .craft-dialog .craft-pick button:hover, :root body .cabinet-main .craft-dialog .craft-pick button[aria-current] { transform: none; box-shadow: none; border-color: var(--amber-text); background: var(--surface-3); }
.craft-pick img { width: 100%; height: 110px; object-fit: contain; }
.craft-create { display: grid; gap: 8px; max-width: 360px; margin: 0 auto 12px; }

.craft-back { margin: 0; padding: 14px 0 0; }
.craft-back a { display: inline-block; width: auto; padding: 6px 14px; border: 1px solid var(--home-line); border-radius: 999px; color: inherit; text-decoration: none; }
.craft-legends { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.craft-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; height: 100%; border: 1px solid var(--home-line); border-radius: 12px; color: inherit; text-decoration: none; text-align: center; transition: border-color .2s; }
.craft-card:hover, .craft-card.ready { border-color: var(--amber-text); }
.craft-card-art { display: block; width: 100%; height: 90px; border-radius: 8px; background: var(--surface-3) no-repeat 100% center / auto 100%; }
.craft-card small { color: var(--home-muted); }
.craft-card.ready small { color: var(--amber-text); }

/* Кубки Легенд: крупные окна, список, древо и выбор кубка */
.craft { padding-bottom: 20px; }
.craft .match-panel-heading h2 { font-size: 34px; letter-spacing: -.01em; }
.craft .match-panel-heading > span { font-size: 18px; color: var(--amber-text); font-weight: 600; }
.craft-back a { padding: 10px 22px; font-size: 18px; font-weight: 600; color: var(--amber-text); border-color: color-mix(in srgb, var(--amber-text) 45%, var(--home-line)); background: color-mix(in srgb, var(--amber-text) 8%, transparent); transition: background .2s, transform .2s; }
.craft-back a:hover { background: color-mix(in srgb, var(--amber-text) 18%, transparent); transform: translateX(-2px); }
.craft-legends { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.craft-card { gap: 8px; padding: 14px 14px 18px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 70%, transparent), transparent); transition: transform .2s, border-color .2s, box-shadow .2s; }
.craft-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.craft-card.ready { box-shadow: 0 0 22px color-mix(in srgb, var(--amber-text) 35%, transparent); }
.craft-card-art { height: 150px; border-radius: 12px; background-position: 100% center; background-size: auto 100%; }
.craft-card b { font-size: 20px; line-height: 1.2; font-weight: 600; }
.craft-card small { font-size: 16px; }
.craft-tree { width: min(100%, 680px); margin: 10px auto 24px; }
.craft-slot { width: 22%; border-width: 3px; }
.craft-slot span { font-size: 26px; }
.craft-slot.on { box-shadow: 0 0 22px color-mix(in srgb, var(--amber-text) 45%, transparent); }
.craft-lines line { stroke-width: .7; }
.craft-lines line.on { stroke-width: 1.1; }
.craft-hub { width: 38%; gap: 6px; cursor: pointer; transition: transform .25s; }
.craft-hub:hover { transform: translate(-50%, -50%) scale(1.05); }
.craft-hub:hover img { opacity: 1; }
.craft-hub b { font-size: 22px; font-weight: 600; padding: 3px 14px; }
.craft-hub small { font-size: 17px; padding: 2px 12px; }
.craft-extra, .craft-info { font-size: 19px; line-height: 1.45; margin: 0 auto 16px; max-width: 640px; }
.craft-create { max-width: 460px; gap: 12px; }
.craft-create input[type=submit] { min-height: 56px; font-size: 20px; font-weight: 600; border-radius: 14px; }
.craft-dialog { width: min(94vw, 860px); padding: 28px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.craft-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.craft-dialog .match-panel-heading { margin-bottom: 20px; }
.craft-dialog .match-panel-heading h2 { font-size: 30px; }
:root body .cabinet-main .craft-dialog button.craft-close { width: 48px; height: 48px; font-size: 34px; border-radius: 50%; }
.craft-pick { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
:root body .cabinet-main .craft-dialog .craft-pick button { padding: 14px 8px; border-radius: 18px; transition: transform .2s, border-color .2s; }
:root body .cabinet-main .craft-dialog .craft-pick button:hover { transform: translateY(-3px); border-color: var(--amber-text); }
.craft-pick img { height: 150px; }
@media (max-width: 600px) {
  .craft .match-panel-heading h2 { font-size: 26px; }
  .craft-legends { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .craft-card b { font-size: 17px; }
  .craft-card-art { height: 110px; }
  .craft-hub b { font-size: 16px; }
  .craft-hub small { font-size: 14px; }
  .craft-slot span { font-size: 20px; }
  .craft-extra, .craft-info { font-size: 17px; }
  .craft-dialog { padding: 18px; }
  .craft-pick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .craft-pick img { height: 100px; }
}