/* ════════════════════════════════════════════════════════════════════════
   clubs-map.css — карта клубов России и афиша на /clubs.
   Подключается ТОЛЬКО на этой странице (тяжёлый блок, остальным не нужен).

   Устройство:
     .psm-hero          — витрина во всю ширину: слева карта, справа список городов
       .psm-stage       — сцена: SVG-страна (слои в defs собирает clubs-map.js)
       .psm-pins        — пины городов (DOM поверх SVG: анимации и палец)
       .psm-frame       — улицы Яндекса, включаются при выборе города
     .psm-side          — колонка городов / клубов выбранного города
     .psm-feed          — лента ближайших игр под картой

   Правила: только transform/opacity в анимациях, никаких SVG-фильтров на
   контуре страны (перерисовка всего кадра), тёмная база + красный акцент.
   ════════════════════════════════════════════════════════════════════════ */

.psm{ position:relative; }
/* Кнопка под картой на лендинге: своего отступа у неё не было,
   и она прилипала к нижней кромке витрины. */
.psm-more{ margin-top:clamp(20px,2.6vw,32px); }
.psm-more .btn{ gap:10px; }

/* Секция карты живёт на своей подложке: вертикальный ритм как у .section,
   но без разделительной линии и красной засветки сверху. */
.section-map{ padding-block:var(--section-y); position:relative; }
.psm-section{ padding-top:0; scroll-margin-top:92px; }

/* ── токены карты ── */
.psm-hero{
  --psm-land-hi:#262a33;          /* север земли */
  --psm-land-lo:#101219;          /* юг земли */
  --psm-coast:rgba(226,233,244,.42);
  --psm-seam:rgba(226,233,244,.085);
  --psm-grid:rgba(226,233,244,.05);
  --psm-dot:rgba(199,206,218,.05);
  --psm-mark:rgba(199,206,218,.34);   /* немые города-ориентиры */
  --psm-side-w:clamp(228px,21vw,278px);
}

/* ════════════════ витрина: карта + колонка городов ════════════════ */
.psm-hero{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--psm-side-w);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  background:
    radial-gradient(120% 100% at 20% 8%, rgba(228,18,30,.11), transparent 58%),
    linear-gradient(180deg,#0b0c11 0%,#07080b 100%);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* Высоту задаёт САМА витрина, а не колонка городов: иначе список из 14 строк
   тянет ряд вниз и под картой остаётся мёртвая полоса. */
.psm-hero{ height:clamp(400px, 42vw, 600px); }
.psm-hero__map{ position:relative; min-width:0; overflow:hidden; height:100%; }
/* На узких экранах колонка городов уезжает под карту, а сама витрина выходит
   на всю ширину экрана: 40 лишних пикселей на телефоне — это заметно.
   aspect-ratio здесь обязательно снимать: вместе с min-height она задаёт
   ширину блока по пропорции, и карта вылезает за экран. */
@media (max-width:1023px){
  .psm-hero{ grid-template-columns:minmax(0,1fr); height:auto; }
  .psm-hero__map{ width:100%; height:clamp(280px, 82vw, 440px); }
}
@media (max-width:760px){
  .psm-hero{ margin-inline:calc(var(--gutter, 20px) * -1); border-radius:0;
             border-left:0; border-right:0; }
}

/* Сцена: рисуется движком. На обзорном кадре touch-action:pan-y — вертикаль
   одного пальца ЛИСТАЕТ СТРАНИЦУ (иначе карта посреди длинной страницы
   становится ловушкой для скролла), а горизонталь ведёт карту.
   Приближённая карта (.is-free) забирает жест целиком: по ней надо возить,
   а кнопка «вся страна» возвращает обзор и вместе с ним прокрутку. */
.psm-stage{ position:absolute; inset:0; touch-action:pan-y; cursor:grab; }
.psm-stage.is-free{ touch-action:none; }
.psm-stage.is-grab{ cursor:grabbing; }
.psm-stage__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }

/* Скелет до готовности геометрии */
.psm-skel{ position:absolute; inset:0; display:grid; place-items:center; gap:10px;
          color:var(--ink-3); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.psm-skel::after{ content:""; position:absolute; inset:0;
          background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.045) 45%,transparent 70%);
          background-size:220% 100%; animation:psmSkel 1.6s linear infinite; }
@keyframes psmSkel{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }

/* ── слои страны ── */
/* Ореол: обводки идут ПОД заливкой, наружу торчит только половина каждой. */
.psm-halo3,.psm-halo2,.psm-halo1{ fill:none; stroke:url(#psmHaloGrad); stroke-linejoin:round;
          vector-effect:non-scaling-stroke; }
.psm-halo3{ stroke-width:30; opacity:.28; }
.psm-halo2{ stroke-width:13; opacity:.34; }
.psm-halo1{ stroke-width:4;  opacity:.5; }
.psm-land{ fill:url(#psmLandGrad); }
.psm-bevel{ fill:none; stroke:rgba(0,0,0,.55); stroke-width:2.2; }   /* внутренняя фаска кромки */
.psm-dots{ fill:url(#psmDots); }
.psm-grid{ fill:none; stroke:var(--psm-grid); stroke-width:.5; vector-effect:non-scaling-stroke; }
.psm-seams{ fill:none; stroke:var(--psm-seam); stroke-width:.6; stroke-linejoin:round;
          vector-effect:non-scaling-stroke; }
.psm-coast{ fill:none; stroke:var(--psm-coast); stroke-width:1.1; stroke-linejoin:round;
          vector-effect:non-scaling-stroke; }
.psm-heat{ fill:url(#psmHeat); animation:psmBreath 9s ease-in-out infinite; }
@keyframes psmBreath{ 0%,100%{ opacity:.82 } 50%{ opacity:1 } }
/* Ориентир — ПОЛОЕ кольцо: другая форма, а не другой цвет. Красное на этой
   карте значит «наш клуб», и ничего больше. */
.psm-mark__d{ fill:none; stroke:rgba(199,206,218,.30); stroke-width:.9; }
.psm-mark__t{ fill:rgba(199,206,218,.56); font:500 10.5px/1 var(--font-ui); letter-spacing:.02em;
          paint-order:stroke fill; stroke:rgba(5,6,8,.92); stroke-width:3px; stroke-linejoin:round; }
.psm-mark{ transition:opacity .2s ease; }

/* Печать заведения: держит восток листа и подписывает карту брендом. */
.psm-seal__r{ fill:none; stroke:rgba(199,206,218,.085); stroke-width:1; vector-effect:non-scaling-stroke; }
.psm-seal__t{ fill:rgba(199,206,218,.13); font:600 11px/1 var(--font-ui); letter-spacing:.42em; }
.psm-seal__m{ fill:none; stroke:rgba(199,206,218,.17); stroke-width:1.1;
          font:800 38px/1 var(--font-display); letter-spacing:.02em; }
.psm-seal{ transition:opacity .2s ease; }
.psm-hero.is-focusing .psm-seal{ opacity:.35; }

/* Виньетка по краю кадра — чистый CSS, ни одного узла в SVG.
   Рамки-«листа» здесь больше нет: свечение страны её пересекало, и линия
   читалась как обрезка карты, а не как рамка. */
.psm-hero__map::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
          background:radial-gradient(125% 95% at 50% 42%, transparent 54%, rgba(0,0,0,.5) 100%); }
@media (max-width:760px){
  .psm-pin__l{ font-size:10.5px; }
  .psm-pin__l i{ font-size:9px; }
}

/* Земля притухает, когда пользователь ведёт мышь по пину или карточке игры */
.psm-scene{ transition:opacity .18s ease; }
.psm-hero.is-focusing .psm-scene{ opacity:.72; }

/* Нитка от сдвинутой точки к настоящему месту города: там, где соседи стоят
   вплотную, точки расходятся, и связь с местом показывает именно она. */
.psm-tether{ fill:none; stroke:rgba(255,120,132,.42); stroke-width:1; stroke-linecap:round; }

/* ── пины городов ── */
.psm-pins{ position:absolute; inset:0; pointer-events:none; }
.psm-pin{ position:absolute; left:0; top:0; width:var(--s,28px); height:var(--s,28px);
          margin:0; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto;
          will-change:transform; }
.psm-pin.is-off{ display:none; }
/* Палец всегда попадает: невидимая зона 44px поверх маленькой точки. */
.psm-pin::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
          transform:translate(-50%,-50%); border-radius:50%; }
.psm-pin__d{ position:relative; display:grid; place-items:center; width:100%; height:100%;
          border-radius:50%; color:#fff;
          /* цифра живёт внутри точки, а точка на обзоре мельче — иначе «13» вылезает */
          font:700 clamp(9px, calc(var(--s,28px) * .42), 12.5px)/1 var(--font-ui);
          font-variant-numeric:tabular-nums;
          background:radial-gradient(120% 120% at 32% 26%, #FF4351 0%, #D6132155 62%, rgba(214,19,33,.72) 100%);
          border:1.5px solid rgba(255,120,132,.62);
          box-shadow:0 0 0 5px rgba(228,18,30,.10), 0 8px 20px rgba(0,0,0,.55),
                     inset 0 1px 0 rgba(255,255,255,.24);
          transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease; }
.psm-pin__d::before{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px;
          margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#fff; opacity:.92; }
.psm-pin.has-n .psm-pin__d::before{ display:none; }
/* Город, где в выбранном окне есть игры */
.psm-pin.is-live .psm-pin__d{ box-shadow:0 0 0 5px rgba(228,18,30,.16), 0 10px 24px rgba(228,18,30,.45),
                     inset 0 1px 0 rgba(255,255,255,.24); }
.psm-pin__ping{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
          border:1.5px solid rgba(255,89,101,.65); opacity:0; }
.psm-pin.is-live .psm-pin__ping{ animation:psmPing 2.8s cubic-bezier(0,0,.2,1) infinite;
          animation-delay:var(--pd,0ms); }
@keyframes psmPing{ 0%{ transform:scale(1); opacity:.55 } 70%{ opacity:0 } 100%{ transform:scale(2.5); opacity:0 } }
/* Город без игр в выбранном окне — приглушён, но не спрятан */
.psm-pin.is-dim .psm-pin__d{ background:rgba(228,18,30,.20); border-color:rgba(255,120,132,.30);
          box-shadow:inset 0 1px 0 rgba(255,255,255,.10); color:var(--ink-2); }
.psm-pin.is-dim .psm-pin__d::before{ background:rgba(255,255,255,.55); }

.psm-pin__l{ position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
          white-space:nowrap; pointer-events:none; font:600 11.5px/1.25 var(--font-ui);
          color:rgba(255,255,255,.86); text-shadow:0 1px 3px #000, 0 0 10px rgba(0,0,0,.85); }
.psm-pin__l i{ display:block; font-style:normal; font-size:10px; font-weight:500; color:var(--ink-3); }
.psm-pin.no-label .psm-pin__l{ display:none; }
.psm-pin.lab-up .psm-pin__l{ top:auto; bottom:calc(100% + 6px); }
.psm-pin.lab-right .psm-pin__l{ left:calc(100% + 8px); top:50%; transform:translateY(-50%); }
.psm-pin.lab-left .psm-pin__l{ left:auto; right:calc(100% + 8px); top:50%; transform:translateY(-50%); }
.psm-pin:hover .psm-pin__d,
.psm-pin.is-hi .psm-pin__d{ transform:scale(1.14); border-color:rgba(255,255,255,.55); }
.psm-pin:hover .psm-pin__l, .psm-pin.is-hi .psm-pin__l{ display:block; color:#fff; }
.psm-pin:focus-visible{ outline:none; }
.psm-pin:focus-visible .psm-pin__d{ box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 10px 24px rgba(0,0,0,.6); }
.psm-pin.is-on .psm-pin__d{ transform:scale(1.2); border-color:#fff;
          box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 14px 30px rgba(228,18,30,.5),
                     inset 0 1px 0 rgba(255,255,255,.28); }
/* Пока курсор на другом городе — этот отходит на второй план */
.psm-hero.is-focusing .psm-pin:not(.is-hi):not(.is-on){ opacity:.42; }
.psm-pin{ transition:opacity .18s ease; }

/* Линия-поводок от строки города к его точке */
.psm-lead{ position:absolute; left:0; top:0; height:1px; transform-origin:0 50%; pointer-events:none;
          background:linear-gradient(90deg, rgba(255,89,101,.05), rgba(255,89,101,.6));
          opacity:0; transition:opacity .16s ease; }
.psm-lead.is-on{ opacity:1; }

.psm-me{ position:absolute; left:0; top:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
          border-radius:50%; background:#fff; pointer-events:none;
          box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.6); }
.psm-me[hidden]{ display:none; }

/* ── вступление: страна проявляется с запада на восток ──
   Маска-градиент шире сцены и едет по ней: страна «проявляется» волной, а по
   границе волны идёт красная полоса света. Анимируется положение маски и
   transform полосы — ни одного пересчёта геометрии. */
.psm-hero.is-intro .psm-stage__svg{
          -webkit-mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.55) 47%,transparent 58%);
                  mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.55) 47%,transparent 58%);
          -webkit-mask-size:260% 100%;  mask-size:260% 100%;
          -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
          animation:psmWipe 1.15s cubic-bezier(.32,.72,.3,1) both; }
@keyframes psmWipe{ from{ -webkit-mask-position:100% 0; mask-position:100% 0 }
                    to  { -webkit-mask-position:0% 0;   mask-position:0% 0 } }

.psm-wipe{ position:absolute; top:-6%; bottom:-6%; left:0; width:26%; z-index:2; pointer-events:none;
          background:linear-gradient(90deg, transparent, rgba(255,58,72,.12) 46%, rgba(255,105,116,.42) 74%,
                     rgba(255,226,229,.55) 84%, transparent 97%);
          mix-blend-mode:screen; filter:blur(.5px);
          animation:psmBar 1.15s cubic-bezier(.32,.72,.3,1) both; }
@keyframes psmBar{ from{ transform:translateX(-115%) } to{ transform:translateX(400%) } }

.psm-pin.is-drop{ animation:psmPinIn .5s linear both; animation-delay:var(--dd,0ms); }
.psm-pin.is-drop .psm-pin__d{ animation:psmDrop .5s cubic-bezier(.34,1.4,.64,1) both;
          animation-delay:var(--dd,0ms); }
@keyframes psmPinIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes psmDrop{ from{ transform:scale(.25) translateY(-12px) } to{ transform:scale(1) translateY(0) } }

/* ── стекло управления ── */
.psm-ctrl{ position:absolute; right:10px; bottom:10px; z-index:3; display:grid; gap:6px; }
.psm-ctrl[hidden]{ display:none; }
.psm-ctrl__b{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; cursor:pointer;
          color:var(--ink-2); background:rgba(10,11,15,.72); border:1px solid var(--line-strong);
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          transition:color .18s ease, border-color .18s ease, background .18s ease; }
.psm-ctrl__b:hover{ color:var(--ink); border-color:var(--red-deep); background:rgba(16,17,23,.9); }
.psm-ctrl__b svg{ width:17px; height:17px; }
.psm-ctrl__b[disabled]{ opacity:.35; cursor:default; }
@media (pointer:coarse){ .psm-ctrl__b{ width:44px; height:44px; } }
@media (max-width:1023px){
  .psm-ctrl{ grid-auto-flow:column; grid-auto-columns:max-content; right:8px; bottom:8px; }
  .psm-stat{ left:10px; right:10px; bottom:auto; top:10px; }
}

.psm-stat{ position:absolute; left:14px; right:64px; bottom:12px; z-index:2; display:flex;
          align-items:flex-start; flex-wrap:wrap; gap:6px; pointer-events:none; }
.psm-stat span{ display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px; border-radius:var(--r-pill);
          font:600 11.5px/1 var(--font-ui); color:var(--ink-2); background:rgba(9,10,14,.62);
          border:1px solid var(--line); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.psm-stat b{ font-family:var(--font-display); font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:600px){ .psm-stat span:nth-child(n+3){ display:none; } }

.psm-scale{ position:absolute; left:14px; bottom:52px; z-index:2; display:flex; align-items:center; gap:7px;
          pointer-events:none; font-size:11px; color:var(--ink-3); text-shadow:0 1px 3px rgba(0,0,0,.9);
          opacity:0; transition:opacity .25s ease; }
.psm-scale.is-on{ opacity:1; }
.psm-scale i{ display:block; height:5px; border:1px solid rgba(255,255,255,.4); border-top:0; }

.psm-tip{ position:absolute; left:0; top:0; z-index:5; pointer-events:none; max-width:250px;
          padding:9px 13px; border-radius:13px; font-size:12.5px; line-height:1.5; color:var(--ink-2);
          background:rgba(12,13,18,.96); border:1px solid var(--line-strong);
          box-shadow:0 20px 44px rgba(0,0,0,.62); }
.psm-tip[hidden]{ display:none; }
.psm-tip b{ display:block; color:var(--ink); font-size:13.5px; font-weight:700; }
.psm-tip i{ display:block; font-style:normal; margin-top:3px; color:var(--red-ink); font-size:12px; }

/* Подсказка про масштаб: появляется, когда колесо ушло странице. */
.psm-nudge{ position:absolute; left:50%; bottom:54px; z-index:5; transform:translate(-50%,6px);
          padding:9px 15px; border-radius:var(--r-pill); pointer-events:none; white-space:nowrap;
          font:600 12.5px/1 var(--font-ui); color:var(--ink);
          background:rgba(12,13,18,.94); border:1px solid var(--line-strong);
          box-shadow:0 16px 38px rgba(0,0,0,.6);
          opacity:0; transition:opacity .18s ease, transform .18s ease; }
.psm-nudge.is-on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:760px){ .psm-nudge{ display:none; } }
@media (prefers-reduced-motion: reduce){ .psm-nudge{ transition:none; } }

/* ── колонка городов ── */
.psm-side{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0;
          overflow:hidden; border-left:1px solid var(--line); background:rgba(255,255,255,.014); }
@media (max-width:1023px){ .psm-side{ border-left:0; border-top:1px solid var(--line); } }
/* [hidden] у элемента с display:flex не работает — правило сильнее атрибута. */
.psm-side__h{ display:flex; align-items:center; gap:8px; padding:14px 16px 10px;
          font:700 11px/1 var(--font-ui); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.psm-side__h[hidden]{ display:none; }
.psm-side__l[hidden]{ display:none; }
.psm-side__h b{ margin-left:auto; font-size:12px; letter-spacing:0; color:var(--ink-2);
          font-variant-numeric:tabular-nums; }
.psm-side__l{ list-style:none; margin:0; padding:0 8px 10px; overflow:auto; flex:1;
          scrollbar-width:thin; }
@media (max-width:1023px){
  .psm-side__l{ display:flex; gap:7px; overflow-x:auto; padding:4px 14px 14px;
                scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .psm-side__l[hidden]{ display:none; }
  .psm-side__l::-webkit-scrollbar{ display:none; }
}
.psm-city{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:0;
          border-radius:10px; cursor:pointer; text-align:left; text-decoration:none;
          font:600 13.5px/1.2 var(--font-ui); color:var(--ink-2); background:none;
          transition:background .16s ease, color .16s ease; }
.psm-city + .psm-city{ margin-top:1px; }
.psm-city__n{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psm-city__c{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--ink-3);
          font-variant-numeric:tabular-nums; }
/* Время ближайшей игры: ради него сюда и приходят. */
.psm-city__t{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--red-ink);
          font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.psm-city__t:empty{ display:none; }
.psm-city.is-on .psm-city__t{ color:#fff; }
.psm-city__g{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--red);
          box-shadow:0 0 0 3px rgba(228,18,30,.18); }
.psm-city__g[hidden]{ visibility:hidden; }
@media (max-width:1023px){ .psm-city__g[hidden]{ display:none; } }
.psm-city:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.psm-city.is-on{ background:var(--red-grad); color:#fff; box-shadow:0 8px 20px rgba(228,18,30,.26); }
.psm-city.is-on .psm-city__c{ color:rgba(255,255,255,.8); }
.psm-city.is-on .psm-city__g{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28); }
.psm-city.is-mute{ opacity:.62; }
@media (max-width:1023px){
  .psm-city{ flex:0 0 auto; width:auto; scroll-snap-align:start; min-height:40px;
             border-radius:var(--r-pill); padding:0 14px; gap:7px;
             border:1px solid var(--line); background:rgba(255,255,255,.035); }
  .psm-city__n{ flex:0 0 auto; }
  .psm-city + .psm-city{ margin-top:0; }
  .psm-city.is-on{ border-color:transparent; }
}
.psm-side__foot{ padding:10px 16px 14px; font-size:11.5px; line-height:1.45; color:var(--ink-3);
          border-top:1px solid var(--line); }
@media (max-width:1023px){ .psm-side__foot{ display:none; } }

/* ── улицы Яндекса внутри выбранного города ── */
.psm-frame{ position:absolute; inset:0; z-index:6; background:#0b0c10; opacity:0;
          transition:opacity .32s ease; }
.psm-frame[hidden]{ display:none; }
.psm-frame.is-vis{ opacity:1; }
.psm-frame__map{ width:100%; height:100%; border:0; display:block; transition:opacity .2s ease;
          filter:invert(1) hue-rotate(180deg) grayscale(.82) brightness(.86) contrast(1.08); }
.psm-frame.is-load .psm-frame__map{ opacity:.4; }
.psm-back{ position:absolute; left:12px; top:12px; z-index:7; display:inline-flex; align-items:center;
          gap:7px; height:38px; padding:0 14px 0 11px; border-radius:var(--r-pill); cursor:pointer;
          font:600 12.5px/1 var(--font-ui); color:var(--ink);
          background:rgba(12,13,18,.88); border:1px solid var(--line-strong);
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          transition:border-color .18s ease, color .18s ease; }
.psm-back[hidden]{ display:none; }
.psm-back:hover{ border-color:var(--red-deep); }
.psm-back svg{ width:16px; height:16px; transform:rotate(180deg); color:var(--red-ink); }

/* ── клубы выбранного города (в колонке) ── */
.psm-places{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.psm-places[hidden]{ display:none; }
.psm-places__h{ display:flex; align-items:center; gap:9px; padding:13px 16px 9px; }
.psm-places__back{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto;
          border-radius:8px; cursor:pointer; color:var(--ink-2);
          background:rgba(255,255,255,.05); border:1px solid var(--line); }
.psm-places__back svg{ width:14px; height:14px; transform:rotate(180deg); }
.psm-places__back:hover{ color:var(--ink); border-color:var(--red-deep); }
.psm-places__h b{ flex:1 1 auto; min-width:0; font-family:var(--font-display); font-weight:700;
          font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psm-places__h span{ flex:0 0 auto; min-width:20px; padding:2px 7px; border-radius:var(--r-pill);
          font-size:11.5px; font-weight:700; color:var(--ink-2); background:rgba(255,255,255,.06);
          font-variant-numeric:tabular-nums; }
.psm-places__all{ white-space:nowrap; }
.psm-places__all{ margin-left:auto; height:28px; padding:0 11px; border-radius:var(--r-pill);
          cursor:pointer; font:600 11.5px/1 var(--font-ui); color:var(--ink-2);
          background:rgba(255,255,255,.05); border:1px solid var(--line); }
.psm-places__all[hidden]{ display:none; }
.psm-places__all:hover{ color:var(--ink); border-color:var(--red-deep); }
.psm-places__l{ list-style:none; margin:0; padding:0 8px 12px; overflow:auto; flex:1; min-height:0;
          -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
                  mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent); }
.psm-place + .psm-place{ margin-top:2px; }
.psm-place__b{ display:flex; align-items:center; gap:10px; width:100%; padding:8px; cursor:pointer;
          text-align:left; border-radius:11px; background:none; border:1px solid transparent;
          transition:background .18s ease, border-color .18s ease; }
.psm-place__b:hover{ background:rgba(255,255,255,.05); }
.psm-place.is-on .psm-place__b{ background:var(--red-soft); border-color:rgba(228,18,30,.34); }
.psm-place__b img{ width:32px; height:32px; flex:0 0 auto; border-radius:9px; object-fit:contain;
          background:rgba(255,255,255,.05); padding:3px; }
.psm-place__mono{ display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto;
          border-radius:9px; background:var(--red-soft); color:var(--red-ink); font-weight:800; font-size:14px; }
.psm-place__t{ min-width:0; }
.psm-place__t b{ display:block; font-size:13px; font-weight:700; color:var(--ink);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psm-place__t i{ display:block; margin-top:2px; font-style:normal; font-size:11.5px; color:var(--ink-3);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psm-place__acts{ display:none; flex-wrap:wrap; gap:6px; padding:2px 8px 10px 8px; }
.psm-place.is-on .psm-place__acts{ display:flex; }
.psm-act{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px;
          border-radius:var(--r-pill); text-decoration:none; font:600 11.5px/1 var(--font-ui);
          color:var(--ink-2); background:rgba(255,255,255,.05); border:1px solid var(--line);
          transition:color .18s ease, border-color .18s ease, background .18s ease; }
.psm-act svg{ width:13px; height:13px; }
.psm-act:hover{ color:var(--ink); border-color:var(--red-deep); }
.psm-act--go{ color:#fff; background:var(--red-grad); border-color:transparent; }
.psm-act--go:hover{ color:#fff; }
@media (pointer:coarse){ .psm-act{ min-height:38px; padding:0 13px; } }

/* ════════════════ лента ближайших игр ════════════════ */
/* Общие стили ленты живут в content.css — она нужна ещё и на /club/<slug>.
   Здесь только то, чем витрина отличается: карточки во всю ширину страницы
   ложатся в несколько колонок, поэтому и подъём при наведении вертикальный. */
.psm-feed{ margin-top:clamp(18px,2.4vw,26px); }
.psm-day__list{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.psm-day__h{ margin:24px 0 12px; }
.psm-game:hover{ transform:translateY(-2px); }
/* В несколько колонок карточка узкая: длинное название лучше перенести,
   чем обрезать многоточием на середине слова. */
.psm-day__list .psm-game__title{ white-space:normal; display:-webkit-box;
          -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.psm-day__list .psm-game{ align-items:flex-start; }
.psm-day__list .psm-game__when{ padding-top:2px; }
.psm-game.is-hi{ border-color:rgba(228,18,30,.42);
          background:linear-gradient(180deg, rgba(40,32,36,.85) 0%, rgba(22,20,25,.85) 100%); }

/* Меньше движения — гасим всё, что двигается; карта остаётся рабочей. */
@media (prefers-reduced-motion: reduce){
  .psm-pin.is-drop{ animation:none; }
  .psm-pin.is-live .psm-pin__ping{ animation:none; opacity:0; }
  .psm-heat{ animation:none; }
  .psm-skel::after{ animation:none; }
  .psm-hero.is-intro .psm-stage__svg{ animation:none; -webkit-mask-image:none; mask-image:none; }
  .psm-wipe{ display:none; }
  .psm-game, .psm-pin__d, .psm-scene, .psm-frame{ transition:none; }
}