/* Редизайн 500: поверх существующих слоёв. Загружается последним. */

/* ---------- 1. Токены ---------- */
:root{
  --blue:#1747d4;
  --blue-deep:#0d2f8f;
  --navy:#0a1d52;
  --lime:#c8f02e;
  --paper:#f4f3ee;
  --ink:#15181f;
  --line:rgba(10,29,82,.14);
  --shadow-soft:0 1px 0 rgba(10,29,82,.06),0 18px 40px -26px rgba(10,29,82,.45);
  --radius:6px;
}

/* ---------- 2. Герой: сцена корта, без налезания ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy)}
.hero-media img,.hero-media video{filter:saturate(1.08) contrast(1.04)}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,29,82,.92) 0%,rgba(10,29,82,.55) 45%,rgba(10,29,82,.15) 100%),
    linear-gradient(0deg,rgba(10,29,82,.85) 0%,rgba(10,29,82,0) 45%);
}
/* линии разметки корта поверх фото */
.hero::after{
  content:'';position:absolute;z-index:1;pointer-events:none;
  inset:auto -10% -18% auto;width:72%;height:90%;
  border:2px solid rgba(200,240,46,.35);
  transform:perspective(900px) rotateX(58deg) rotateZ(-8deg);
  transform-origin:bottom right;
  background:
    linear-gradient(rgba(200,240,46,.35),rgba(200,240,46,.35)) center/2px 100% no-repeat,
    linear-gradient(rgba(200,240,46,.35),rgba(200,240,46,.35)) center/100% 2px no-repeat;
}
.hero-content{z-index:2}
.hero-word{font-size:clamp(96px,17vw,260px);line-height:.82;letter-spacing:-.05em;color:#fff}
.hero-club{font-size:clamp(22px,3.1vw,44px)!important;letter-spacing:.14em!important;margin-top:.22em!important;color:var(--lime)!important;font-weight:700}
.hero-content>p{font-size:clamp(15px,1.5vw,20px);letter-spacing:.02em;color:rgba(255,255,255,.88);margin-top:22px}
.hero-actions .button{box-shadow:0 18px 40px -18px rgba(200,240,46,.6)}
.hero-bottom{z-index:2}
/* мяч, отскакивающий по сцене: CSS, без физики */
.hero-content .eyebrow{color:var(--lime)}
@media (prefers-reduced-motion:no-preference){
  .hero-content .eyebrow i{animation:ballBounce 1.6s cubic-bezier(.5,0,.5,1) infinite}
}
@keyframes ballBounce{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-8px) scaleY(1.04)}50%{transform:translateY(0) scaleY(.9)}}

/* ---------- 3. Шапка ---------- */
.header{height:84px;background:rgba(244,243,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.header nav a{font-size:12px;letter-spacing:.05em}
.brand img{width:170px}

/* ---------- 4. Ритм секций и заголовков ---------- */
.section{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.section-label{margin-bottom:clamp(28px,3.5vw,56px)}
.section-label span{letter-spacing:.16em;font-size:11px}
h2{letter-spacing:-.06em}

/* ---------- 5. Кнопки ---------- */
.button,.header-book,.service-action{border-radius:var(--radius)}
.button:hover:where(html.has-mouse-hover *),.header-book:hover:where(html.has-mouse-hover *),.service-action:hover:where(html.has-mouse-hover *){transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(10,29,82,.55)}
.button:active,.header-book:active,.service-action:active{transform:translateY(0) scale(.98)}
.button:focus-visible,.header-book:focus-visible,.service-action:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* ---------- 6. Раскрытия: стрелка вниз, при открытии вверх ---------- */
details>summary>span{font-size:0;line-height:0;display:inline-block;width:12px;height:12px;position:relative;vertical-align:middle}
details>summary>span:before{content:'';position:absolute;left:1px;top:2px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .45s cubic-bezier(.22,1,.36,1)}
details[open]>summary>span:before{transform:rotate(-135deg);top:5px}
summary{cursor:pointer}

/* ---------- 7. Карточки: услуги, тренеры, тарифы ---------- */
.service,.coach,.tariff-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);background:#fff}
.service-photo img,.coach img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.service:hover:where(html.has-mouse-hover *) .service-photo img,.coach:hover:where(html.has-mouse-hover *) img{transform:scale(1.035)}
.tariff-card{padding:clamp(22px,2.6vw,36px)}
.tariff-card h3{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;margin-bottom:14px}
table{border-collapse:collapse;width:100%}
table th,table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,29,82,.6)}

/* ---------- 8. Галерея: компактная, без доминирования ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--navy)}
.gallery-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.gallery-photo:hover:where(html.has-mouse-hover *) img{transform:scale(1.04)}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 9. Мобильная версия ---------- */
@media (max-width:760px){
  :root{--gutter:20px}
  .header{height:68px;padding:0 16px}
  .brand img{width:132px}
  .header-book{display:none}
  .hero{min-height:88vh}
  .hero-word{font-size:clamp(96px,36vw,170px);letter-spacing:-.055em}
  .hero-club{font-size:clamp(20px,6vw,30px)!important;letter-spacing:.12em!important}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .button{width:100%;justify-content:space-between}
  .branch-strip{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tariff-grid{grid-template-columns:1fr}
  .section{padding-top:64px;padding-bottom:64px}
  h2{font-size:clamp(36px,11vw,56px)}
}
@media (max-width:380px){.hero-word{font-size:76px}}


/* ---------- 11. Текст внутри светлых карточек: тёмный, контрастный ---------- */
.service,.coach,.tariff-card{color:var(--ink)}
.service h3,.coach h3,.tariff-card h3,.service-price,.service summary,.coach summary,.service p,.coach p,.tariff-card p,.service .eyebrow,.coach .eyebrow{color:var(--navy)}
.service p,.coach p,.tariff-card p{color:#3b4256}
.service-price{color:var(--blue)}
.service .eyebrow,.coach .eyebrow{color:#5a6280}
summary{color:var(--navy)}
.service details p,.coach details p,.tariff-card details p{color:#3b4256!important;opacity:1!important}
.service details,.coach details{border-color:var(--line)}

/* ---------- 12. Раскрытия: одна чистая стрелка в круге, без поворота всего круга ---------- */
details>summary>span{display:grid!important;place-items:center;width:34px!important;height:34px!important;border-radius:50%;background:rgba(10,29,82,.07)!important;transform:none!important;font-size:0!important;line-height:0!important;position:relative;flex-shrink:0;transition:background .45s cubic-bezier(.22,1,.36,1)}
details>summary>span:before{content:'';position:static;display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .45s cubic-bezier(.22,1,.36,1)}
details[open]>summary>span{background:rgba(200,240,46,.55)!important;transform:none!important}
details[open]>summary>span:before{transform:translateY(2px) rotate(-135deg)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ---------- 13. Карточка тренера: воздух между элементами ---------- */
.coach-body{padding:26px 26px 28px!important}
.coach-body .eyebrow{display:block;margin-bottom:12px}
.coach h3{margin:0 0 22px!important;min-height:0!important;font-size:clamp(26px,2.4vw,34px)!important;line-height:1.08}
.coach details{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}
.coach details summary{font-size:15px;font-weight:600}
.coach-body>a{display:flex;justify-content:space-between;align-items:center;width:100%}
.coach img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.coach-body{padding:22px 20px 24px!important}}

/* единственная стрелка: готовая SVG, поворот вверх при открытии */
details>summary>span:before{display:none!important}
.disclosure-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(10,29,82,.07);transition:background .45s cubic-bezier(.22,1,.36,1)}
.disclosure-icon svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
details[open]>summary .disclosure-icon{background:rgba(200,240,46,.6)}
details[open]>summary .disclosure-icon svg{transform:rotate(180deg)}

/* ---------- 14. Кнопки: явная заливка-шторка, стрелка выезжает, нажатие давит ---------- */
.button,.header-book,.service-action{
  --wipe:var(--lime);
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--navy);
  background-image:linear-gradient(var(--wipe),var(--wipe));
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  transition:background-size .55s cubic-bezier(.7,0,.2,1),color .35s ease,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .45s ease!important;
  will-change:transform;
}
.button.lime,.hero-actions .button.lime{--wipe:var(--navy);background-color:var(--lime);color:var(--navy)}
.button.outline{--wipe:var(--navy);background-color:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.button:hover:where(html.has-mouse-hover *),.header-book:hover:where(html.has-mouse-hover *),.service-action:hover:where(html.has-mouse-hover *){background-size:100% 100%!important;transform:translateY(-3px)}
.button.lime:hover:where(html.has-mouse-hover *),.hero-actions .button.lime:hover:where(html.has-mouse-hover *){color:var(--lime);box-shadow:0 18px 36px -14px rgba(10,29,82,.6)!important}
.button:not(.lime):not(.outline):hover:where(html.has-mouse-hover *),.header-book:hover:where(html.has-mouse-hover *),.service-action:hover:where(html.has-mouse-hover *){color:var(--navy);box-shadow:0 18px 36px -14px rgba(10,29,82,.5)!important}
.button.outline:hover:where(html.has-mouse-hover *){color:var(--lime)}
.button:active,.header-book:active,.service-action:active{transform:translateY(0) scale(.96)!important;transition-duration:.12s!important}
.button span,.header-book span,.service-action span{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.button:hover:where(html.has-mouse-hover *) span,.header-book:hover:where(html.has-mouse-hover *) span,.service-action:hover:where(html.has-mouse-hover *) span{transform:translate(4px,-4px) rotate(0deg)}
.button:focus-visible,.header-book:focus-visible,.service-action:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .button,.header-book,.service-action,.button span,.header-book span,.service-action span{transition:none!important}
}

/* ---------- 15. Схема корта на телефоне: строго по центру, на всю ширину панели ---------- */
@media (max-width:760px){
  .rules-left{display:flex;flex-direction:column;align-items:center;text-align:center}
  .rules-left h2{align-self:stretch;text-align:left}
  .rules-left .court{width:100%!important;max-width:420px!important;height:auto!important;margin:22px auto 0!important;display:block}
  .about-court{display:flex;justify-content:center}
  .about-court .court{width:100%!important;max-width:420px!important;height:auto!important;margin:0 auto!important;display:block}
}

/* ---------- 16. Раскрытия: одна чёткая стрелка в круге (CSS-шеврон, SVG скрыт) ---------- */
details>summary>.disclosure-icon{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(10,29,82,.08);color:var(--navy);flex-shrink:0;transition:background .45s cubic-bezier(.22,1,.36,1),color .45s ease}
details>summary>.disclosure-icon svg{display:none!important}
details>summary>.disclosure-icon:after{content:'';display:block;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
details[open]>summary>.disclosure-icon{background:var(--navy);color:var(--lime)}
details[open]>summary>.disclosure-icon:after{transform:translateY(3px) rotate(-135deg)}
details>summary:hover:where(html.has-mouse-hover *)>.disclosure-icon{background:rgba(10,29,82,.16)}
details[open]>summary:hover:where(html.has-mouse-hover *)>.disclosure-icon{background:var(--blue-deep)}

/* ---------- 17. Одна стрелка на раскрытие: поворачивается только CSS-шеврон, контейнер и SVG не вращаются ---------- */
details>summary>.disclosure-icon,
details[open]>summary>.disclosure-icon,
details[data-closing]>summary>.disclosure-icon{transform:none!important;background:rgba(10,29,82,.08)!important;color:var(--navy)!important}
details[open]>summary>.disclosure-icon{background:var(--navy)!important;color:var(--lime)!important}
details>summary>.disclosure-icon svg,details[open]>summary>.disclosure-icon svg{display:none!important;transform:none!important}
details>summary>.disclosure-icon::before{display:none!important}
details>summary>.disclosure-icon::after{transform:translateY(-3px) rotate(45deg)!important}
details[open]>summary>.disclosure-icon::after{transform:translateY(3px) rotate(-135deg)!important}
details>summary>span::before,details[open]>summary>span::before{display:none!important}

/* ---------- 18. Мобильная полоска быстрых разделов под шапкой ---------- */
.m-chips{display:none}
@media (max-width:760px){
  .m-chips{display:block;position:sticky;top:68px;z-index:19;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 8px 18px -16px rgba(10,29,82,.5)}
  .m-chips-track{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .m-chips-track::-webkit-scrollbar{display:none}
  .m-chips a{flex:0 0 auto;scroll-snap-align:start;padding:9px 14px;border-radius:999px;border:1.5px solid var(--navy);color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s ease,color .3s ease,transform .25s ease}
  .m-chips a:active{transform:scale(.95)}
  .m-chips a:hover:where(html.has-mouse-hover *),.m-chips a:focus-visible{background:var(--navy);color:var(--lime)}
  .m-chips a.m-chip-tel{background:var(--lime);border-color:var(--lime);color:var(--navy)}
  .m-chips a.m-chip-tel:hover:where(html.has-mouse-hover *){background:var(--navy);color:var(--lime);border-color:var(--navy)}
  .m-chips a{scroll-margin-left:16px}
  html{scroll-padding-top:150px}
}

/* ---------- 19. Схема корта по центру: панель по ширине корта ---------- */
.about-court{width:min(100%,560px);margin:0 auto;display:flex;justify-content:center}
.about-court .court{width:100%!important;max-width:none!important;height:auto!important;margin:0 auto!important;display:block}

/* ---------- 20. Раскрытие: одинаковая задержка открытия и закрытия, стрелка с перехлёстом ---------- */
details>summary>.disclosure-icon,details>summary>.disclosure-icon:after{transition-duration:640ms!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important}
details[open]>summary>.disclosure-icon:after{animation:discOpen 640ms cubic-bezier(.22,1,.36,1) both}
details[data-closing]>summary>.disclosure-icon:after{animation:discClose 640ms cubic-bezier(.22,1,.36,1) both}
details[open]>summary>.disclosure-icon{animation:discPop 640ms cubic-bezier(.22,1,.36,1) both}
details[data-closing]>summary>.disclosure-icon{animation:discPopBack 640ms cubic-bezier(.22,1,.36,1) both}
@keyframes discOpen{0%{transform:translateY(-3px) rotate(45deg)}55%{transform:translateY(4px) rotate(-148deg)}100%{transform:translateY(3px) rotate(-135deg)}}
@keyframes discClose{0%{transform:translateY(3px) rotate(-135deg)}55%{transform:translateY(-4px) rotate(52deg)}100%{transform:translateY(-3px) rotate(45deg)}}
@keyframes discPop{0%{transform:scale(1)}30%{transform:scale(.86)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes discPopBack{0%{transform:scale(1)}30%{transform:scale(1.1)}65%{transform:scale(.94)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){details>summary>.disclosure-icon,details>summary>.disclosure-icon:after{animation:none!important}}

/* ---------- 21. Контраст: тёмная карточка промо-тренировки — светлый текст ---------- */
#service-1 .service-body h3,#service-1 .service-body p,#service-1 .service-body summary,#service-1 .eyebrow,#service-1 .eyebrow *{color:#f4f3ee!important}
#service-1 .service-price{color:var(--lime)!important}
#service-1 details{border-color:rgba(244,243,238,.25)!important}
#service-1 .disclosure-icon{background:rgba(244,243,238,.16)!important;color:#f4f3ee!important}
#service-1 details[open]>summary>.disclosure-icon{background:var(--lime)!important;color:var(--navy)!important}
#service-1 .service-action{background-color:var(--lime)!important;color:var(--navy)!important}
#service-1 .service-action:hover:where(html.has-mouse-hover *){color:var(--lime)!important}

/* ---------- 22. Выравнивание карточки услуги: одна левая линия для всех элементов ---------- */
.service .service-body{padding:clamp(24px,2.6vw,36px)!important;display:flex;flex-direction:column;align-items:stretch;gap:0}
.service .service-body>*{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.service h3{hyphens:none!important;-webkit-hyphens:none!important;word-break:normal;overflow-wrap:normal;margin-bottom:18px}
.service .eyebrow{margin-bottom:12px}
.service .service-price{margin-bottom:18px}
.service details{margin:0 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service details>summary{padding:16px 0;font-size:15px;font-weight:600;list-style:none}
.service details>p{padding:0 0 16px}
.service .service-action{width:100%;box-sizing:border-box;justify-content:space-between;padding:20px 24px!important;margin:0}

/* ---------- 23. Этикет: поле с ареной, анимированные правила поверх корта ---------- */
.etiquette-intro .court-etiq{display:block;width:100%;max-width:440px;height:auto;margin:28px 0 0;border-radius:20px;box-shadow:0 30px 60px -30px rgba(10,29,82,.55)}

/* ---------- 25. Заголовок героя: ровные зазоры между буквами на всех ширинах ---------- */
.hero .hero-word{letter-spacing:-.01em!important;font-kerning:normal;word-spacing:0}

/* ---------- 26. Фото в блоке о спорте: без искажения пропорций ---------- */
.about-photo{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:20px}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 24. Как играть: заголовок и корт целиком в окне, закреплены слева, вопросы справа ---------- */
.rules-grid{align-items:start}
@media (min-width:901px){
  .rules-left{position:sticky;top:104px;align-self:start}
  .rules-left h2{font-size:clamp(24px,2.4vw,34px);line-height:1.02;margin:0}
  .rules-court{display:flex;justify-content:center;margin-top:6px}
  .rules-court .court{display:block;height:calc(100vh - 190px);width:auto;max-width:100%;margin:0 auto}
}
/* ---------- 27. Этикет: без заглушек корта, игроки из схемы этикета ---------- */
.court-etiq .court-players,.court-etiq .court-ball{display:none}

/* ---------- 28. Этикет: корт слева, три правила справа одно под другим, высоты совпадают ---------- */
#etiquette{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
#etiquette .etiquette-intro{display:flex;flex-direction:column;align-items:center;text-align:center}
#etiquette .etiquette-intro h2{margin:0}
#etiquette .court-etiq{width:100%;max-width:440px;height:auto;margin:28px auto 0}
#etiquette .rules-right{display:flex;flex-direction:column;gap:18px;margin:0}
#etiquette .rules-right details{background:#fff;border-radius:18px;box-shadow:var(--shadow-soft);padding:0 28px;border:0;overflow:hidden}
#etiquette .rules-right summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:28px 0;font-size:20px;font-weight:700;color:var(--navy);list-style:none}
#etiquette .rules-right details>p{padding:0 0 28px;color:#3b4256;font-size:16px;line-height:1.6}
@media (max-width:900px){
  #etiquette{grid-template-columns:1fr;gap:32px}
  #etiquette .rules-right{gap:14px}
}

/* ---------- 29. Режим ракетки: переключатель в шапке, курсор скрыт только в этом режиме ---------- */
@media (hover:hover) and (pointer:fine){
  html.racket-mode,html.racket-mode *{cursor:none!important}
  .racket-cursor-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}
}
.racket-toggle{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;background:none;border:0;padding:6px 4px;color:var(--navy);font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.racket-toggle .rt-track{position:relative;display:inline-block;width:38px;height:22px;border-radius:999px;background:rgba(10,29,82,.16);transition:background .35s ease}
.racket-toggle .rt-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(10,29,82,.35);transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s ease}
.racket-toggle[aria-pressed="true"] .rt-track{background:var(--navy)}
.racket-toggle[aria-pressed="true"] .rt-knob{transform:translateX(16px);background:var(--lime)}
.racket-toggle:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:6px}
@media (pointer:coarse),(max-width:760px){.racket-toggle{display:none}}

/* ---------- 30. Удар мяча по любой ссылке: инлайн-ссылки получают размер для трансформа ---------- */
a.impact-active{display:inline-block}


/* ---------- 31. Раскрытие на светлой карточке услуги: при наведении текст синий, а не светло-лаймовый ---------- */
.service:not(#service-1) details summary:hover:where(html.has-mouse-hover *),.service:not(#service-1) details summary:focus-visible{color:var(--blue)!important;background:rgba(10,29,82,.05)!important}
.service:not(#service-1) details summary:hover:where(html.has-mouse-hover *)>.disclosure-icon,.service:not(#service-1) details summary:focus-visible>.disclosure-icon{color:var(--navy)!important}


/* ---------- 32. Подпись разработчика в подвале: ведёт в личку Telegram ---------- */
.dev-credit{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--navy);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s ease}
.dev-credit:hover:where(html.has-mouse-hover *),.dev-credit:focus-visible{color:var(--blue)}


/* ---------- 33. Заголовок «Как играть»: компактный, чтобы корт поднялся выше ---------- */
.rules-left h2{font-size:clamp(26px,2.2vw,34px)!important;line-height:1.02!important;margin:0!important}
.rules-left h2{max-width:7.5em!important}
@media (max-width:900px){.rules-left h2{font-size:clamp(32px,8vw,44px)!important}}


/* ---------- 34. Читаемость заголовков: буквы не слипаются ---------- */
h1,h2,h3{letter-spacing:-.01em!important;line-height:1.1!important}


/* ---------- 35. Читаемость по всему сайту: нет слипания букв ни в тексте, ни в кнопках ---------- */
h1,h2,h3,h4,.hero-word,.hero-club,.quick-phone,.branch-phone a,.hero p{letter-spacing:-.01em!important}
p,li,td,th,dd,dt,summary,blockquote,figcaption,label,input,textarea,strong,em,.lead,.about-copy p{letter-spacing:0!important}
a,button{letter-spacing:.02em!important}


/* ---------- 36. Типографская шкала: единые размеры и трекинг ---------- */
/* заголовки разделов одного масштаба; «Как играть» остаётся компактным (раздел 33) */
#about h2,#formats h2,#prices h2,#coaches h2,#gallery h2,#etiquette h2,#contacts h2{font-size:clamp(34px,8.4vw,44px)!important;line-height:1.06!important}
@media (min-width:901px){
 #about h2,#formats h2,#prices h2,#coaches h2,#gallery h2,#etiquette h2,#contacts h2{font-size:clamp(38px,4vw,56px)!important}
}
/* цены: без слипания цифр */
.service-price{font-size:clamp(44px,12vw,68px)!important;letter-spacing:-.01em!important;line-height:1.02!important}
/* подзаголовки и метки: читаемый трекинг */
.hero-club{letter-spacing:.06em!important}


/* ---------- 37. Телефон: заголовок героя не выходит за экран ---------- */
@media (max-width:760px){
  .hero h1{max-width:100%;overflow:hidden}
  .hero-word{font-size:clamp(60px,25vw,116px)!important;white-space:nowrap}
  .hero-club{white-space:normal}
}


/* ---------- 38. Узкие экраны: карточки услуг не выходят за край ---------- */
.service h3{overflow-wrap:anywhere}
@media (max-width:400px){
  .service .service-body{padding:20px!important}
  .service h3{font-size:clamp(24px,7.4vw,30px)!important}
}
@media (max-width:900px){
  .service-price{font-size:clamp(40px,11vw,56px)!important}
}


/* ---------- 39. Адрес под шапкой: крупнее и читаемее ---------- */
.quick-branch>div>span{font-size:clamp(17px,1.6vw,20px)!important;font-weight:600!important;letter-spacing:0!important;line-height:1.35}


/* ---------- 40. Как играть: корт ближе к заголовку и не прижат к низу экрана ---------- */
@media (min-width:901px){
  .rules-court{margin-top:0}
  .rules-court .court{height:calc(100vh - 230px);margin-top:-30px}
}


/* ---------- 41. Касание: основные зоны не меньше 44 px (протокол Творца, раздел 6) ---------- */
@media (pointer:coarse), (max-width:760px){
  .menu-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .m-chips a{min-height:44px;display:inline-flex;align-items:center}
  .quick-phone{min-height:44px;display:inline-flex;align-items:center}
  .quick-book{min-height:44px;display:inline-flex;align-items:center}
  .film-toggle{min-height:44px;min-width:44px}
  .corporate-wa,.address-map,.text-link,.mobile-book{min-height:44px;display:inline-flex;align-items:center}
  .corporate-wa{min-height:44px!important}
  .text-link{min-width:44px;justify-content:center}
  footer a{min-height:44px;display:inline-flex;align-items:center}
}


/* ---------- 42. Страница не шире экрана: доли пикселя в шапке и полоске разделов ---------- */
html,body{overflow-x:clip}
.header,.m-chips,main,footer{max-width:100%}


/* ---------- 43. Ландшафт телефона (низкая высота): меньше служебных полос сверху и снизу ---------- */
@media (max-height:500px) and (orientation:landscape){
  .m-chips{display:none}
  .mobile-book{position:static!important;bottom:auto!important}
}


/* ---------- 44. Подписи сцен под видео: не меньше 12 px (протокол: читаемый вспомогательный текст) ---------- */
.film-chapters button,.film-chapters span,.film-chapters .scene-number{font-size:12px!important;line-height:1.3!important}

/* ---------- 10. Движение ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal *,.hero-content .eyebrow i{transition:none!important;animation:none!important}
}

/* Touch feedback ends on release, with no emulated hover or delayed colour wipe. */
@media (hover:none),(pointer:coarse){
 a,button,summary,summary>span,summary>.disclosure-icon,summary>.disclosure-icon:after,.button span,.service-action span{transition-duration:120ms!important;transition-delay:0s!important}
 .button,.header-book,.service-action,.quick-book,.sport-button,.text-link{background-image:none!important}
 .button:active,.service-action:active,.quick-book:active,.sport-button:active{transform:scale(.98)!important;filter:brightness(1.08)}
 .impact-active{animation:none!important}
}

@media(max-width:760px){
 .quick-branch>div>span{display:block;min-height:2.7em}
 .quick-branch>div{gap:3px}
}
.tap-impact-ball{position:fixed;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;z-index:10001;pointer-events:none;background:radial-gradient(circle at 30% 24%,#e8ff86 0%,#b6dc36 35%,#88af21 66%,#42661a 100%);box-shadow:inset -3px -4px 5px #30500b66,0 3px 8px #07163033;will-change:transform,opacity;overflow:hidden}
.tap-impact-ball:before,.tap-impact-ball:after{content:'';position:absolute;width:19px;height:34px;top:-4px;border:1.5px solid #f4ffc4;border-radius:50%}
.tap-impact-ball:before{left:-12px;transform:rotate(-24deg)}.tap-impact-ball:after{right:-12px;transform:rotate(-24deg)}
@media(prefers-reduced-motion:reduce){.tap-impact-ball{display:none}}

.coach-photo{display:block;width:100%;padding:0;border:0;background:transparent;overflow:hidden;cursor:pointer;border-radius:0;text-align:inherit}
.coach-photo>img{display:block}
.coach-photo:focus-visible{outline:3px solid var(--blue);outline-offset:-4px}

/* Native dialog and its backdrop are above ordinary z-index layers. */
.racket-cursor-layer[popover],.click-ball-layer[popover]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;pointer-events:none}
.tap-impact-ball[popover]{position:fixed;right:auto;bottom:auto;padding:0;border:0;max-width:none;max-height:none;pointer-events:none}
.racket-cursor-layer::backdrop,.click-ball-layer::backdrop,.tap-impact-ball::backdrop{background:transparent;pointer-events:none}

/* Keep a usable cursor if the browser cannot lift effects above a modal. */
@supports not selector(:popover-open){html.racket-mode dialog,html.racket-mode dialog *{cursor:auto!important}}