/* Shared football backdrop; content stays on a light surface. */
html { background: #326e28; }
body { min-height: 100vh; padding: 24px; background: linear-gradient(#0f2e0d66, #0f2e0d66), url('/design/turf-photo.webp') 0 0 / 300px 300px, #3f8429; font-size: 20px; }
/* ������ ����� ����� ��� �������: ���� �������� � �� ���� */
.home-shell { max-width: 1380px; border-color: #d0dec9; box-shadow: 0 32px 80px rgb(4 20 3 / .5), 0 8px 24px rgb(4 20 3 / .3); }
.home-header { min-height: 78px; padding: 18px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.league-clock { text-align: right; line-height: 1.3; white-space: nowrap; }
.league-clock-face { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.league-clock-time { color: var(--home-green-hover); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.league-clock-zone { font-size: 12px; color: var(--home-muted); }
.league-clock-date { display: block; font-size: 14px; color: var(--home-muted); font-variant-numeric: tabular-nums; }
.home-brand { font-size: 28px; justify-self: start; }
.home-header nav { font-size: 18px; gap: 24px; }
.home-footer { padding: 18px 32px; background: #edf5e8; border-color: #ccddc4; color: #496240; font-size: 16px; }
@media (max-width: 1100px) {
  .home-header { grid-template-columns: minmax(0, 1fr) auto; }
  .home-header nav { grid-column: 1 / -1; grid-row: 2; }
  .league-clock { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px) {
  body { padding: 16px; }
  .home-header { padding-inline: 24px; }
  .home-footer { padding-inline: 24px; }
}
@media (max-width: 600px) {
  body { padding: 0; font-size: 18px; }
  .home-header { padding: 18px 20px; }
  .home-brand { font-size: 23px; grid-column: 1 / -1; gap: 12px; }
  .home-brand img { height: 46px; }
  .league-clock { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: baseline; gap: 16px; text-align: left; }
  .league-clock-time { font-size: 22px; }
  .home-header nav { font-size: 16px; gap: 14px; }
  .home-footer { padding: 18px 20px; font-size: 16px; }
}
@media (max-width: 360px) {
  .home-header nav { gap: 12px; flex-wrap: wrap; }
  .home-login { padding-inline: 12px; }
}
/* VIP-звезда перед названием клуба или именем менеджера */
/* Размер задаёт сама иконка: правила вида «#tabtit img», «.list img» растягивают картинки внутри и звезду тоже */
.vip-star { display: inline-block; flex: none; width: 1em !important; height: 1em !important; margin-right: .3em; vertical-align: -.12em; object-fit: contain; }
/* Sticky header: one bar on wide screens, --sticky is its height (anchors and sticky side blocks start below it). */
:root { --sticky: 0px; }
html { scroll-padding-top: var(--sticky); }
@media (min-width: 1101px) {
  :root { --sticky: 79px; }
  .home-shell > .home-header { position: sticky; top: 0; z-index: 50; }
}
/* Tap targets: at least 44px tall on phones (inline links inside text stay as they are). */
@media (max-width: 600px) {
  .home-header nav a, .home-footer nav a, .page-side nav a, .cup-cards a { display: inline-flex; align-items: center; min-height: 44px; }
  .home-header nav { gap: 10px 14px; }
  .home-footer nav { gap: 0 14px; }
  .home-login { min-width: 44px; }
  .cup-cards a { width: 100%; box-sizing: border-box; }
  .home-footer p a { display: inline-block; padding: 13px 0; }
  .home-main summary { padding-block: 10px; }
}
/* Phones: the cabinet bar becomes a bottom tab bar. */
@media (max-width: 600px) {
  :root:has(.cab-navigation) { --sticky: 0px; }
  body:has(.cab-navigation) { padding-bottom: 57px; }
  .cab-navigation { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0; overflow: visible; border-top: 1px solid var(--home-line); border-bottom: 0; box-shadow: 0 -4px 16px rgb(0 0 0 / .08); }
  .cab-navigation a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2px; border-top: 3px solid transparent; border-bottom: 0; font-size: 13px; text-align: center; }
}


/* Time wheel (select[data-wheel]): two scroll-snap columns, 5 rows, band in the middle */
.wheel{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;width:200px;max-width:100%;height:190px;margin:6px 0 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 28%,#000 72%,#0000);mask-image:linear-gradient(#0000,#000 28%,#000 72%,#0000)}
.wheel-band{position:absolute;left:8px;right:8px;top:76px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);pointer-events:none}
.wheel-col{position:relative;width:70px;height:190px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;padding:76px 0;box-sizing:border-box;outline:none;overscroll-behavior:contain;touch-action:pan-y}
.wheel-col::-webkit-scrollbar{display:none}
.wheel-i{height:38px;line-height:38px;text-align:center;font-size:22px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.3);scroll-snap-align:center;cursor:pointer;user-select:none}
.wheel-i.near{color:rgba(255,255,255,.55)}
.wheel-i.on{color:#fff;font-weight:600}
.wheel-sep{font-size:22px;font-weight:600;color:#fff;z-index:1}
.wheel-col:focus-visible{box-shadow:inset 0 0 0 2px rgba(60,200,110,.6);border-radius:10px}
.cup-rep{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.cup-rep:hover{text-decoration-style:solid}