/* Лендінг Кубільні.

   Палітра й типографіка перенесені з макета: тепле майже-чорне тло
   (#14100C), картки на тон світліші, персиковий акцент #FBC385, великі
   заголовки й радіуси 20px.

   Два свідомі відступи від макета:

   1. Заголовки набрані Onest, а не Bricolage Grotesque. У Bricolage немає
      кирилиці — українські заголовки з нього мовчки падали б на системний
      шрифт, і сторінка виглядала б випадково зібраною. Onest варіативний
      (100–900), тож жирність 800 із макета збереглась.
   2. Інлайнових style="" немає: CSP пускає лише style-src 'self'. Усе, що
      в макеті задано атрибутом, тут живе класами — зокрема заповненість
      місць (.w0….w100, крок 5).

   Шрифти роздаються з нашого домену: сторінка має відкриватись і без
   доступу до сторонніх серверів. */

/* Onest — варіативний (wght 100–900), підмножини з кирилицею. */
@font-face{
  font-family:"Onest";
  src:url("/static/fonts/onest-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Onest";
  src:url("/static/fonts/onest-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Onest";
  src:url("/static/fonts/onest-cyrillic.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Onest";
  src:url("/static/fonts/onest-cyrillic-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body.land{font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Onest",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}

/* ============ публічний лендінг ============ */
.land{background:#14100C;color:#F2E9DF;font-size:16px;line-height:1.6;min-height:100vh;
  --L-bg:#14100C;--L-bg2:#191410;--L-card:#1D160F;--L-deep:#100D09;
  --L-line:#251D16;--L-line2:#2F251C;--L-line3:#3A2E22;
  --L-ink:#F2E9DF;--L-ink2:#BFAF9D;--L-mut:#9C8B79;--L-mut2:#A8937C;--L-dim:#6B5B4B;
  --L-hon:#FBC385;--L-hon-lt:#FFD9A8;--L-on-hon:#1A1209;
  --L-brick:#FBC385;
  --L-good:#8FBF6E;--L-warn:#E08A5A;--L-crit:#C97C5A}
.land ::selection{background:var(--L-hon);color:var(--L-on-hon)}
.land ::placeholder{color:#7C6B5A}
.land h1,.land h2,.land h3{font-family:var(--disp);letter-spacing:-.02em;
  font-weight:800;text-wrap:balance}

/* ---- Шапка ---- */
.lnav{position:sticky;top:0;z-index:50;background:rgba(20,16,12,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid #2A2119}
.lnav-in{max-width:1240px;margin:0 auto;padding:10px 28px;
  display:flex;align-items:center;gap:28px}
.lnav .logo{flex:none;display:flex;align-items:center}
.lnav .logo img{height:58px;width:auto}
.lnav nav{display:flex;gap:24px;flex:1;flex-wrap:wrap;font-size:15px}
.lnav nav a{color:var(--L-ink2);text-decoration:none}
.lnav nav a:hover{color:var(--L-hon)}

/* Годинник клубу: крапка + два рядки. Рахується на сервері. */
.lstatus{flex:none;display:flex;align-items:center;gap:9px;border:1px solid var(--L-line2);
  border-radius:999px;padding:8px 15px 8px 12px;background:var(--L-bg2)}
.lstatus .dot{width:9px;height:9px;border-radius:999px;flex:none}
.lstatus.on .dot{background:var(--L-good);box-shadow:0 0 0 4px rgba(143,191,110,.15)}
.lstatus.off .dot{background:var(--L-crit);box-shadow:0 0 0 4px rgba(201,124,90,.15)}
.lstatus .txt{display:flex;flex-direction:column;line-height:1.25}
.lstatus b{font-size:13.5px;font-weight:600}
.lstatus.on b{color:var(--L-good)}
.lstatus.off b{color:var(--L-crit)}
.lstatus span{font-size:11.5px;color:#8A7869}

/* ---- Кнопки ---- */
.lbtn{display:inline-block;border:1px solid var(--L-line3);color:var(--L-ink);
  padding:15px 26px;border-radius:999px;font-weight:500;font-size:16px;
  text-decoration:none;cursor:pointer;font-family:inherit;background:transparent}
.lbtn:hover{border-color:var(--L-hon);color:var(--L-hon)}
.lbtn.p{background:var(--L-hon);color:var(--L-on-hon);border-color:var(--L-hon);font-weight:600}
.lbtn.p:hover{background:var(--L-hon-lt);border-color:var(--L-hon-lt);color:var(--L-on-hon)}
.lbtn.sm{padding:11px 19px;font-size:15px}
.lbtn.w100{width:100%;text-align:center}

/* ---- Герой ---- */
.hero{max-width:1240px;margin:0 auto;padding:84px 28px 60px}
.kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--L-line3);
  border-radius:999px;padding:7px 16px;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--L-mut2);margin:0}
.hero h1{font-size:clamp(38px,6.2vw,66px);line-height:1.02;margin:22px 0 0}
.hero h1 em{color:var(--L-hon);font-style:italic}
.hero .sub{font-size:19px;line-height:1.6;color:var(--L-ink2);margin:20px 0 0;
  max-width:34em;text-wrap:pretty}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;align-items:center}
.cta-form{margin:0}

/* Знижка, привезена з гри. Помітна рамка навмисно: це те, заради чого
   людина перейшла на головну, і воно згорає. */
.hpromo{display:flex;align-items:center;gap:16px;margin-top:28px;max-width:34em;
  padding:16px 20px;border:1px solid var(--L-hon);border-radius:18px;
  background:rgba(251,195,133,.07)}
.hpromo b{font-family:var(--disp);font-size:34px;line-height:1;color:var(--L-hon);flex:none}
.hpromo-t{display:flex;flex-direction:column;gap:3px}
.hpromo-t span{font-size:15px;color:var(--L-ink2)}
.hpromo-n{font-size:13.5px;line-height:1.5;color:var(--L-mut)}
@media (max-width:520px){.hpromo{flex-direction:column;align-items:flex-start;gap:8px}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;
  border-top:1px solid #241C15;padding-top:26px}
.facts b{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--L-hon);
  display:block;line-height:1.2}
.facts span{font-size:14px;color:var(--L-mut);margin-top:4px;display:block}

/* ---- Секції ---- */
.lsec{max-width:1240px;margin:0 auto;padding:72px 28px 0}
.lsec h2{font-size:clamp(28px,4vw,42px);margin:0}
.lead{color:var(--L-mut);margin:10px 0 0;font-size:16px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}

/* ---- Івенти ---- */
.events{margin-top:28px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.ev{background:var(--L-card);border:1px solid #2A2119;border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column}
.evcover{width:100%;height:190px;object-fit:cover;background:#241B12}
.ev-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ev .dt{font-size:13.5px;color:var(--L-hon);letter-spacing:.04em}
.ev h3{font-size:21px;font-weight:600;line-height:1.2;margin:0}
.ev p{font-size:14.5px;line-height:1.55;color:var(--L-mut2);margin:0;flex:1;text-wrap:pretty}
.seats{display:flex;align-items:center;gap:10px}
.seatbar{flex:1;height:6px;border-radius:999px;background:#2A2119;overflow:hidden;display:block}
.seatfill{display:block;height:6px;background:var(--L-hon);border-radius:999px}
.seatfill.low{background:var(--L-warn)}
.seatfill.out{background:#4A3B2E}
.seats-note{font-size:13px;color:var(--L-mut);white-space:nowrap}
.seats-note.low{color:var(--L-warn)}
.seats-note.out{color:var(--L-dim)}
.ev-foot{border-top:1px solid #2A2119;padding-top:14px;margin-top:2px;
  display:flex;flex-direction:column;gap:10px}
.fee{font-family:var(--disp);font-size:20px;color:var(--L-hon)}
.evform{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.evform .span2{grid-column:span 2}

/* ---- Кімнати ---- */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;margin-top:28px}
.room{margin:0;background:var(--L-bg2);border:1px solid var(--L-line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column}
.room img{width:100%;height:180px;object-fit:cover}
.room .noimg{height:180px;background:#241B12;display:flex;align-items:center;
  justify-content:center;color:var(--L-dim);font-size:13px}
.room figcaption{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.room-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.room-head b{font-family:var(--disp);font-size:19px;font-weight:600}
.rseats{font-size:13px;color:var(--L-mut);white-space:nowrap}
.room p{font-size:14.5px;line-height:1.55;color:var(--L-mut2);margin:0;flex:1;text-wrap:pretty}
.room-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--L-line);padding-top:14px}
.rprice{font-family:var(--disp);font-size:18px;color:var(--L-hon)}

/* ---- Ціни ---- */
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:28px}
.rate{border:1px solid var(--L-line);border-radius:20px;padding:26px 24px;
  background:var(--L-bg2);position:relative}
.rate.hot{border-color:var(--L-line3);background:var(--L-card)}
.rate .nm{font-size:14px;color:var(--L-mut);letter-spacing:.08em;text-transform:uppercase}
.rate .pr{font-family:var(--disp);font-size:38px;font-weight:800;color:var(--L-hon);margin-top:12px}
.rate .pr span{font-size:16px;color:var(--L-mut);font-weight:400}
.rate p{font-size:15px;color:var(--L-mut2);margin:10px 0 0}
.tagm{position:absolute;top:-11px;left:24px;background:var(--L-hon);color:var(--L-on-hon);
  border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600}

/* ---- Бронь ---- */
.bookwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;background:var(--L-bg2);
  border:1px solid var(--L-line);border-radius:24px;padding:38px}
.bookwrap h2{font-size:clamp(26px,3.4vw,38px)}
.bookwrap .lead{color:var(--L-mut2);margin-top:14px;line-height:1.6}
.steps{margin-top:28px;display:flex;flex-direction:column;gap:14px;
  font-size:15px;color:var(--L-ink2)}
.step{display:flex;gap:10px}
.stepn{color:var(--L-hon)}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lgrid .full{grid-column:span 2}
.lfl{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--L-mut)}
.linp{background:var(--L-bg);border:1px solid var(--L-line2);border-radius:12px;
  padding:13px 14px;color:var(--L-ink);font:inherit;font-size:15px;width:100%}
.linp:focus{outline:none;border-color:var(--L-hon)}
.timerow{display:flex;align-items:center;gap:8px}
.timerow .linp{flex:1;min-width:0;padding-left:12px;padding-right:12px}
.timedash{color:var(--L-dim)}
/* Прапорець «ведучий»: справжній checkbox лишається доступним для
   клавіатури й читалок, а квадратик малюємо сусіднім елементом. */
.hostbox{display:flex;align-items:center;gap:14px;border:1px solid var(--L-line2);
  border-radius:16px;padding:14px 16px;cursor:pointer;background:var(--L-bg)}
.hostbox input{position:absolute;opacity:0;width:0;height:0}
.hostmark{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--L-line2);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  color:var(--L-on-hon);background:transparent}
.hostbox input:checked ~ .hostmark{background:var(--L-hon);border-color:var(--L-hon)}
.hostbox input:checked ~ .hostmark::after{content:"✓"}
.hostbox input:focus-visible ~ .hostmark{outline:2px solid var(--L-hon);outline-offset:2px}
.hosttxt{display:flex;flex-direction:column;gap:3px}
.hosttxt b{font-size:15px;font-weight:600}
.hosttxt span{font-size:13px;color:var(--L-mut)}
.costrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid var(--L-line2);padding-top:16px;margin-top:4px}
.costrow .note{font-size:14px;color:var(--L-mut)}
.costsum{font-family:var(--disp);font-size:30px;font-weight:800;color:var(--L-hon)}

/* ---- Сертифікати й «про тривоги» ---- */
.ordergrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.orderbox{background:var(--L-bg2);border:1px solid var(--L-line);border-radius:24px;padding:34px}
.orderbox h2{font-size:clamp(24px,3vw,32px)}
.orderbox .lead{margin:12px 0 24px;color:var(--L-mut2)}
.orderform{display:flex;flex-direction:column;gap:12px}
.orderform .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.safebox{background:radial-gradient(120% 100% at 20% 0%, #241B12 0%, #17120D 70%);
  border:1px solid var(--L-line);border-radius:24px;padding:34px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.safebox .kick{font-size:13px;color:var(--L-mut);letter-spacing:.1em;text-transform:uppercase}
.safebox p{font-size:17px;line-height:1.6;color:#DCCFC0;margin:14px 0 0;text-wrap:pretty}
.safelinks{display:flex;gap:22px;flex-wrap:wrap;font-size:15px}
.safelinks a{color:var(--L-hon);text-decoration:none}
.safelinks a:hover{color:var(--L-hon-lt)}

/* ---- Галерея ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;margin-top:26px}
.gal figure{margin:0}
.gal img{width:100%;height:250px;object-fit:cover;border-radius:18px}
.gal figcaption{font-size:14px;color:var(--L-mut);margin-top:10px}

/* ---- Повідомлення форм ---- */
.lok,.lerr{padding:13px 16px;border-radius:14px;margin:18px 0 0;font-size:15px}
.lok{background:rgba(143,191,110,.12);border:1px solid rgba(143,191,110,.45);color:#CDE3BC}
.lerr{background:rgba(201,124,90,.12);border:1px solid rgba(201,124,90,.45);color:#F0C4AC}

/* ---- Підвал ---- */
.lfoot{margin-top:84px;border-top:1px solid var(--L-line);background:var(--L-deep)}
.lsec-in{max-width:1240px;margin:0 auto;padding:48px 28px;display:grid;
  grid-template-columns:1.2fr 1fr 1fr;gap:36px;align-items:start}
.lfoot img{width:180px;height:auto}
.lfoot .col{font-size:15px;line-height:1.9;color:var(--L-mut2)}
.lfoot b{color:var(--L-ink);font-weight:600;display:block;margin-bottom:8px}
.lfoot a{color:var(--L-hon);text-decoration:none}
.lfoot a:hover{color:var(--L-hon-lt)}
.lfoot-legal{max-width:1240px;margin:0 auto;padding:0 28px 40px;font-size:13.5px;
  color:var(--L-dim);display:flex;gap:18px;flex-wrap:wrap}
.lfoot-legal a{color:var(--L-dim)}
.lfoot-legal a:hover{color:var(--L-mut)}
.alert-note{border:1px solid rgba(251,195,133,.25);border-left:3px solid var(--L-hon);
  border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.6}

/* ---- Ширина смужки місць: класи замість інлайнових стилів (CSP) ---- */
.w0{width:0}
.seatfill.w5{width:5%}.seatfill.w10{width:10%}.seatfill.w15{width:15%}.seatfill.w20{width:20%}
.seatfill.w25{width:25%}.seatfill.w30{width:30%}.seatfill.w35{width:35%}.seatfill.w40{width:40%}
.seatfill.w45{width:45%}.seatfill.w50{width:50%}.seatfill.w55{width:55%}.seatfill.w60{width:60%}
.seatfill.w65{width:65%}.seatfill.w70{width:70%}.seatfill.w75{width:75%}.seatfill.w80{width:80%}
.seatfill.w85{width:85%}.seatfill.w90{width:90%}.seatfill.w95{width:95%}.seatfill.w100{width:100%}

/* ---------- Кабінет гостя ---------- */
.cab{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.cab h1{margin:0 0 20px}
.cbox{background:var(--L-bg2);border:1px solid var(--L-line);
      border-radius:20px;padding:22px 24px}
.cbox h2{margin:0 0 12px;font-size:22px}
.cbox form{display:flex;flex-direction:column;gap:10px}
.cbox label{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--L-mut)}
.cbox input{padding:12px 14px;border-radius:12px;border:1px solid var(--L-line2);
            background:var(--L-bg);color:var(--L-ink);font:inherit}
.cbox input:focus{outline:none;border-color:var(--L-hon)}
.cbox button{align-self:flex-start;padding:12px 22px;border:0;border-radius:999px;
             background:var(--L-hon);color:var(--L-on-hon);font:inherit;font-weight:600;cursor:pointer}
.cbox button:hover{background:var(--L-hon-lt)}
.cbox button.ghost{background:transparent;color:var(--L-hon);border:1px solid var(--L-hon)}
/* Вхід через Telegram. Стоїть над формами й виглядає інакше свідомо:
   це не «ще один спосіб», а той, яким варто скористатись. */
.ctg{margin-bottom:16px;border-color:var(--L-hon)}
.btg{display:inline-flex;align-items:center;gap:9px}
.btg::before{content:"";width:19px;height:19px;flex:none;
  background:currentColor;-webkit-mask:var(--tg-ico) center/contain no-repeat;
  mask:var(--tg-ico) center/contain no-repeat}
:root{--tg-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1.1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.2 13.1l-4.8-1.5c-1-.3-1.1-1 .2-1.5l18.8-7.2c.9-.3 1.6.2 1.5 1.4z'/%3E%3C/svg%3E")}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mt20{margin-top:20px}
.chint{color:var(--L-mut);font-size:13px;margin:10px 0 0}
.cmsg{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:15px}
.cmsg-ok{background:rgba(143,191,110,.12);border:1px solid rgba(143,191,110,.45)}
.cmsg-err{background:rgba(201,124,90,.12);border:1px solid rgba(201,124,90,.45)}
.crow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:16px}
.cstats div{display:flex;flex-direction:column;gap:2px;color:var(--L-mut);font-size:13px}
.cstats span{font-size:24px;font-weight:700;color:var(--L-ink)}
.cplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cplan{border:1px solid var(--L-line2);border-radius:16px;padding:16px 18px}
.cplan h3{margin:0 0 6px;font-size:19px}
.cprice{color:var(--L-hon);font-weight:700;margin:0 0 10px}
.cplan ul,.cbenefits{margin:0;padding-left:18px;color:var(--L-mut);font-size:14px;line-height:1.7}
.cevents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cevents li{display:flex;align-items:center;justify-content:space-between;gap:16px;
            border-bottom:1px solid var(--L-line);padding-bottom:12px;flex-wrap:wrap}
.ctable{width:100%;border-collapse:collapse;font-size:14px}
.ctable th{text-align:left;color:var(--L-mut);font-weight:600;font-size:12px;
           text-transform:uppercase;letter-spacing:.04em;padding:8px 10px}
.ctable td{padding:8px 10px;border-top:1px solid var(--L-line)}
.cpay{margin-right:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--L-line2);
      background:var(--L-bg);color:var(--L-ink);font:inherit;font-size:14px}

/* Юридичні сторінки: суцільний текст у тому ж каркасі, що й кабінет. */
.ldoc h2{margin:22px 0 8px;font-size:17px}
.ldoc h2:first-child{margin-top:0}
.ldoc p{margin:0 0 10px;line-height:1.65}
.ldoc ul{margin:0 0 12px;padding-left:20px;line-height:1.65}
.ldoc li{margin-bottom:5px}

/* ---------- Вужчі екрани ---------- */
@media (max-width:1000px){
  .bookwrap{grid-template-columns:1fr;gap:28px;padding:28px}
  .ordergrid{grid-template-columns:1fr}
  .lsec-in{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  /* Липка шапка на телефоні з'їдала б третину екрана: логотип, статус,
     кнопка й посилання в три ряди. Тому тут вона звичайна, а посилання
     стають одним рядком, який гортається вбік. */
  .lnav{position:static}
  .lnav-in{padding:10px 18px;gap:12px;flex-wrap:wrap}
  .lnav .logo img{height:44px}
  .lnav nav{order:3;flex-basis:100%;gap:18px;font-size:14px;
    flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  .lstatus{margin-left:auto}
  .lnav .lbtn{order:2;flex-basis:100%;text-align:center}
  .hero{padding:44px 18px 36px}
  .lsec{padding:52px 18px 0}
  .facts{grid-template-columns:1fr;gap:14px;margin-top:34px}
  .cgrid{grid-template-columns:1fr}
  .lgrid,.evform,.orderform .two{grid-template-columns:1fr}
  .lgrid .full,.evform .span2{grid-column:span 1}
  .lfoot-legal{padding:0 18px 32px}
  .lsec-in{padding:36px 18px}
}

/* ---------- Кабінет: вкладки, Multipass, календар, бронь ---------- */
.ctabs{display:flex;gap:6px;flex-wrap:wrap}
.ctab{padding:9px 16px;border-radius:999px;border:1px solid var(--L-line2);
      color:var(--L-ink2);font-size:14.5px;text-decoration:none}
.ctab:hover{border-color:var(--L-hon);color:var(--L-hon)}
.ctab.on{background:var(--L-hon);border-color:var(--L-hon);color:var(--L-on-hon);font-weight:600}
/* Кнопка виходу стоїть поруч із вкладками, поза .cbox — тож стилі
   кнопок кабінету на неї не поширюються, і без цього правила вона
   лишалась би системно-сірою. */
.cab .crow > form{margin:0}
.cab .crow button{padding:9px 16px;border-radius:999px;background:transparent;
  border:1px solid var(--L-line2);color:var(--L-mut);font:inherit;font-size:14.5px;cursor:pointer}
.cab .crow button:hover{border-color:var(--L-crit);color:var(--L-crit)}

.mpass{background:radial-gradient(120% 100% at 15% 0%, #241B12 0%, #17120D 70%)}
.mp-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mp-photo{width:120px;height:120px;border-radius:20px;object-fit:cover;flex:none;
          border:1px solid var(--L-line2)}
.mp-empty{display:flex;align-items:center;justify-content:center;color:var(--L-dim);
          font-size:13px;background:var(--L-bg)}
.mp-id h2{margin:4px 0 0}
.mp-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--L-hon)}
/* Знижка за гру в Multipass. Помітна рамка навмисно: це те, що згорає,
   і гість має побачити її, а не знайти. */
.mp-promo{display:flex;flex-direction:column;gap:3px;margin-top:16px;
  padding:14px 16px;border:1px solid var(--L-hon);border-radius:14px;
  background:rgba(251,195,133,.07)}
.mp-promo b{font-family:var(--disp);font-size:26px;color:var(--L-hon);line-height:1}
.mp-promo span{font-size:14px;color:var(--L-mut)}
.mp-promo .chint{margin:4px 0 0}
.mp-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.mp-stats div{display:flex;flex-direction:column;color:var(--L-mut);font-size:13px}
.mp-stats span{font-size:22px;font-weight:700;color:var(--L-ink)}
.cbox textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--L-line2);
               background:var(--L-bg);color:var(--L-ink);font:inherit;resize:vertical}
.cbox textarea:focus{outline:none;border-color:var(--L-hon)}
.cbox select{padding:11px 12px;border-radius:10px;border:1px solid var(--L-line2);
             background:var(--L-bg);color:var(--L-ink);font:inherit}

/* Календар: сім колонок, порожній день теж видно — «у середу нічого»
   це теж відповідь на питання «коли прийти». */
.ccal{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));gap:8px;min-width:840px}
.cday{border:1px solid var(--L-line);border-radius:14px;padding:10px;background:var(--L-bg);
      display:flex;flex-direction:column;gap:8px;min-height:120px}
.cday.today{border-color:var(--L-hon)}
.cday.past{opacity:.45}
.cday.wknd .cday-h b{color:var(--L-hon)}
.cday-h{display:flex;align-items:baseline;gap:6px}
.cday-h b{font-size:19px}
.cday-h span{font-size:12px;color:var(--L-mut);text-transform:uppercase;letter-spacing:.06em}
.cslot{border:1px solid var(--L-line2);border-left:3px solid var(--L-hon);border-radius:10px;
       padding:8px 9px;display:flex;flex-direction:column;gap:5px;background:var(--L-card)}
.cslot-t{font-size:13.5px;font-weight:600;line-height:1.25}
.cslot-m{font-size:12px;color:var(--L-mut)}
.cslot form{display:flex;flex-direction:column;gap:6px;margin:0}
.cslot .cpay{margin:0;font-size:12.5px;padding:7px 8px}
.cbox button.small{align-self:stretch;padding:8px 12px;font-size:13px}
.cempty{color:var(--L-dim);font-size:13px}

.cbook{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cchk{flex-direction:row;align-items:center;gap:9px;color:var(--L-ink2)}
.cchk input{width:18px;height:18px;flex:none}

@media (max-width:760px){
  .ccal{grid-template-columns:repeat(7,140px);min-width:0}
  .cbook{grid-template-columns:1fr 1fr}
  .mp-photo{width:92px;height:92px}
}
.scroll-x{overflow-x:auto}

/* ---- Сторінка одного івента (/e/{id}) ----

   Окрема адреса потрібна для Telegram-каналу: посилання має відкривати
   саме цю подію, а не головну, де її ще треба знайти. Верстка тут та сама,
   що на лендінгу, — інший лише порядок: спершу картинка й дата, потім
   форма запису, і аж тоді ті, хто вже йде. */
.evpage{max-width:1240px;margin:0 auto;padding:0 0 40px}
.evhero{display:block;width:100%;max-height:420px;object-fit:cover;
  background:#241B12;border-bottom:1px solid var(--L-line)}
.evhead{max-width:1240px;margin:0 auto;padding:48px 28px 0}
.evhead h1{font-size:clamp(32px,5.2vw,54px);line-height:1.05;margin:18px 0 0}
.evhead .sub{font-size:18px;line-height:1.6;color:var(--L-ink2);margin:18px 0 0;
  max-width:44em;text-wrap:pretty}
.evmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:18px;margin-top:32px;border-top:1px solid #241C15;padding-top:22px}
.evmeta b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--L-mut);font-weight:500}
.evmeta span{display:block;font-family:var(--disp);font-size:20px;color:var(--L-ink);
  margin-top:5px;line-height:1.25}
.evhead .seats{margin-top:22px}

.evsignup{display:grid;grid-template-columns:1.2fr 1.2fr .6fr auto;gap:10px;
  margin-top:22px;align-items:center}
.evback{display:flex;gap:12px;flex-wrap:wrap}

/* Хто вже йде: лише імʼя й ініціал — це вітрина компанії, а не список
   контактів. Телефони й прізвища сюди не потрапляють узагалі. */
.guests{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.guest{border:1px solid var(--L-line2);border-radius:999px;padding:7px 15px;
  font-size:14.5px;color:var(--L-ink2);background:var(--L-card)}
.guest.more{color:var(--L-hon);border-color:var(--L-line3)}

.evpage .hint{color:var(--L-mut);font-size:13.5px;margin:14px 0 0;line-height:1.6}
.evpage .hint a{color:var(--L-hon)}
.evlink{color:inherit;text-decoration:none}
.evlink:hover{color:var(--L-hon)}
.evmore{font-size:14px;color:var(--L-hon);text-decoration:none}
.evmore:hover{color:var(--L-hon-lt)}

@media (max-width:760px){
  .evsignup{grid-template-columns:1fr 1fr}
  .evsignup button{grid-column:span 2}
  .evhero{max-height:240px}
}

/* ---- Команда і картка майстра (/team, /m/{id}) ----

   Гість іде не на «Каркасон», а на конкретного ведучого: у клубі кажуть
   «сьогодні веде Олег». Тому в майстра є власна сторінка, а його імʼя на
   сторінці івента — посилання на неї. */
.teamh1{font-size:clamp(32px,5vw,52px);margin:18px 0 0}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;margin-top:28px}
.tcard{background:var(--L-card);border:1px solid #2A2119;border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .15s}
.tcard:hover{border-color:var(--L-hon)}
.tcard img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#241B12;display:block}
.tcard .noimg{width:100%;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;background:#241B12;color:var(--L-dim);
  font-family:var(--disp);font-size:28px}
.tbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px}
.trole{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--L-hon)}
.tbody b{font-size:19px;font-weight:600;line-height:1.2}
.tfav{font-size:13.5px;color:var(--L-mut);line-height:1.5}

.mcard{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;
  margin-top:28px}
.mphoto{width:280px;height:280px;object-fit:cover;border-radius:24px;
  background:#241B12;display:block}
.mphoto.noimg{display:flex;align-items:center;justify-content:center;
  color:var(--L-dim);font-family:var(--disp);font-size:40px}
.mbody h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;margin:16px 0 0}
.mabout{font-size:17px;line-height:1.65;color:var(--L-ink2);margin:20px 0 0;
  max-width:44em;text-wrap:pretty;white-space:pre-line}
.mfav{margin-top:24px;border-top:1px solid #241C15;padding-top:18px}
.mfav b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--L-mut);font-weight:500}
.mfav span{display:block;font-family:var(--disp);font-size:19px;color:var(--L-ink);
  margin-top:6px;line-height:1.35}
.mlink{color:var(--L-hon);text-decoration:none;border-bottom:1px solid transparent}
.mlink:hover{border-bottom-color:var(--L-hon)}

@media (max-width:760px){
  .mcard{grid-template-columns:1fr;gap:20px}
  .mphoto{width:100%;height:auto;aspect-ratio:1/1}
}

/* ---- /voda: рекламна сторінка з наліпки на авто ----

   Людина стоїть на світлофорі за тією машиною, тримає телефон однією рукою
   й має секунд тридцять. Тому все велике, кнопка під великий палець унизу
   екрана, жодних картинок, які треба чекати. */
.vd{max-width:520px;margin:0 auto;padding:0 20px 40px;min-height:100vh;
  display:flex;flex-direction:column}
.vd-top{text-align:center;padding:26px 0 6px}
.vd-logo{width:150px;height:auto}
.vd-hook{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--L-mut)}

.vd-game{text-align:center;padding:18px 0 6px}
.vd-game h1{font-family:var(--disp);font-size:clamp(24px,7vw,32px);line-height:1.15;
  margin:0}
.vd-game h1 b{color:var(--L-hon)}

.vd-slots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.vd-slot{width:46px;height:46px;border-radius:12px;border:1px dashed var(--L-line3);
  display:flex;align-items:center;justify-content:center;padding:8px}
.vd-slot.filled{border-style:solid;border-color:var(--L-hon);background:var(--L-card)}
.vd-slot .vd-pips{width:100%;height:100%;gap:8%}

/* [hidden] мусить перемагати display:block кнопок і панелей. Без !important
   браузер лишає display від класу, і після трьох кидків на екрані висіла
   кнопка «Стоп!», якій там уже нічого робити. */
[hidden]{display:none !important}

/* Кубик. Крапки розставляються гріднею 3×3 — так грань читається миттєво,
   а не «скільки там кружечків». */
.vd-die{width:min(58vw,220px);height:min(58vw,220px);margin:22px auto 0;
  border-radius:26px;background:var(--L-card);border:2px solid var(--L-line3);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, border-color .12s ease}
.vd-die.spin{border-color:var(--L-hon)}
.vd-die.snap{transform:scale(.93);border-color:var(--L-hon)}
.vd-pips{width:72%;height:72%;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6%}
.vd-pips i{width:100%;aspect-ratio:1;border-radius:50%;background:var(--L-hon);
  align-self:center;justify-self:center}
/* Розкладка крапок по гранях — як на справжньому кубику. */
.vd-pips.p1 i:nth-child(1){grid-area:2/2}
.vd-pips.p2 i:nth-child(1){grid-area:1/1}.vd-pips.p2 i:nth-child(2){grid-area:3/3}
.vd-pips.p3 i:nth-child(1){grid-area:1/1}.vd-pips.p3 i:nth-child(2){grid-area:2/2}
.vd-pips.p3 i:nth-child(3){grid-area:3/3}
.vd-pips.p4 i:nth-child(1){grid-area:1/1}.vd-pips.p4 i:nth-child(2){grid-area:1/3}
.vd-pips.p4 i:nth-child(3){grid-area:3/1}.vd-pips.p4 i:nth-child(4){grid-area:3/3}
.vd-pips.p5 i:nth-child(1){grid-area:1/1}.vd-pips.p5 i:nth-child(2){grid-area:1/3}
.vd-pips.p5 i:nth-child(3){grid-area:2/2}.vd-pips.p5 i:nth-child(4){grid-area:3/1}
.vd-pips.p5 i:nth-child(5){grid-area:3/3}
.vd-pips.p6 i:nth-child(1){grid-area:1/1}.vd-pips.p6 i:nth-child(2){grid-area:1/3}
.vd-pips.p6 i:nth-child(3){grid-area:2/1}.vd-pips.p6 i:nth-child(4){grid-area:2/3}
.vd-pips.p6 i:nth-child(5){grid-area:3/1}.vd-pips.p6 i:nth-child(6){grid-area:3/3}

.vd-score{margin-top:16px;font-size:15px;color:var(--L-mut)}
.vd-score b{color:var(--L-ink);font-family:var(--disp);font-size:19px}

.vd-btn{display:block;width:100%;margin-top:16px;padding:17px 22px;border-radius:999px;
  border:1px solid var(--L-line3);background:transparent;color:var(--L-ink);
  font:inherit;font-size:17px;font-weight:600;text-align:center;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.vd-btn.p{background:var(--L-hon);border-color:var(--L-hon);color:var(--L-on-hon)}
.vd-btn.ghost{color:var(--L-mut2)}
.vd-btn:disabled{opacity:.5}
.vd-hint{margin-top:10px;font-size:13.5px;color:var(--L-dim);min-height:1.2em}

.vd-result{margin-top:18px}
.vd-prize{border:1px solid var(--L-hon);border-radius:20px;padding:22px 18px;
  background:rgba(251,195,133,.07);display:flex;flex-direction:column;gap:6px}
.vd-prize-l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--L-mut)}
/* Код має лишатись одним рядком. Розірваний навпіл «ВОДА-XUXYNC» читається
   як два різні слова, а його ще й називають уголос на стійці. Тому розмір
   рахується від довжини рядка (11 символів), а не від ширини екрана, і
   перенос заборонений. */
.vd-code{font-family:var(--disp);font-size:clamp(20px,6.4vw,30px);color:var(--L-hon);
  line-height:1.15;letter-spacing:.02em;white-space:nowrap;
  overflow-wrap:normal;word-break:keep-all}
.vd-prize-t{font-size:17px;color:var(--L-ink)}
.vd-prize-n{font-size:13.5px;line-height:1.5;color:var(--L-mut)}
.vd-lose{font-size:17px;color:var(--L-ink2);margin:0}

.vd-about{margin-top:34px;padding-top:26px;border-top:1px solid var(--L-line)}
.vd-about h2{font-family:var(--disp);font-size:24px;margin:0}
.vd-about p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--L-mut2)}
.vd-facts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.vd-facts div{display:flex;gap:10px;align-items:baseline}
.vd-facts b{font-family:var(--disp);font-size:16px;color:var(--L-hon);min-width:86px}
.vd-facts span{font-size:14.5px;color:var(--L-mut)}
.vd-btn.w{margin-top:20px}

/* Реєстрація після перемоги. Форма — це блок, тож кнопка всередині має
   поводитись як решта кнопок фіналу, а не як елемент форми. */
.vd-reg{margin-top:18px}
.vd-reg .vd-btn{width:100%;margin-top:0}

.vd-foot{margin-top:auto;padding-top:28px;text-align:center;font-size:13.5px;
  color:var(--L-mut);line-height:1.7}
.vd-foot a{color:var(--L-hon);text-decoration:none}
.vd-status{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;
  padding:6px 13px;border:1px solid var(--L-line3);border-radius:999px;font-size:13px}
.vd-status .dot{width:7px;height:7px;border-radius:50%;background:var(--L-dim)}
.vd-status.on .dot{background:#8FBF6E}
.vd-legal{margin-top:10px;font-size:12.5px;color:var(--L-dim)}
.vd-tip{margin-top:8px;font-size:14px;line-height:1.5;color:var(--L-hon)}

/* ---- /voda, гра «Вежа» ----

   Вежа хитається безперервно; блок витягується дотиком. Світла риска
   посередині — вертикаль: без неї «рівно» доводиться вгадувати на око,
   і гра перетворюється на лотерею. */
.vd-tower-wrap{position:relative;height:min(62vh,340px);margin:22px auto 0;
  width:100%;display:flex;align-items:flex-end;justify-content:center;
  -webkit-tap-highlight-color:transparent;cursor:pointer}
.vd-plumb{position:absolute;left:50%;top:0;bottom:14px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--L-line3) 22%,var(--L-line3));
  opacity:.75}
.vd-tower{position:relative;transform-origin:50% 100%;
  display:flex;flex-direction:column-reverse;gap:4px;padding-bottom:10px;
  will-change:transform}
.vd-block{display:block;width:120px;height:20px;border-radius:5px;
  background:var(--L-hon);border:1px solid rgba(20,16,12,.25);
  box-shadow:inset 0 -3px 0 rgba(20,16,12,.13);
  transition:opacity .16s ease, transform .16s ease}
/* Кожен другий трохи інший — щоб вежа читалась як складена з блоків,
   а не як суцільна смуга. */
.vd-block:nth-child(even){background:var(--L-hon-lt);width:112px}
.vd-block.gone{opacity:0;transform:translateX(70px) rotate(12deg)}
.vd-tower.shake{animation:vdshake .18s ease}
@keyframes vdshake{0%,100%{margin-left:0}35%{margin-left:-3px}70%{margin-left:3px}}
.vd-tower.fall{transition:transform .7s cubic-bezier(.5,0,.85,.6);
  transform:rotate(78deg) !important}
.vd-base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:190px;height:10px;border-radius:4px;background:var(--L-line3)}
.vd-towergame h1{margin-bottom:2px}

/* ---- /voda: спільне для нових ігор ---- */
.vd-lead{margin-top:10px;font-size:15px;line-height:1.5;color:var(--L-mut)}

/* Памʼять. Пари відрізняються формою, а не лише кольором: інакше гра не
   працює для тих, хто погано розрізняє відтінки. */
.vd-timer{height:5px;border-radius:999px;background:#2A2119;overflow:hidden;
  margin-top:18px}
.vd-timer-bar{display:block;height:5px;width:100%;background:var(--L-hon);
  border-radius:999px;transition:width .1s linear}
.vd-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}
.vd-card{aspect-ratio:3/4;border-radius:14px;border:1px solid var(--L-line3);
  background:var(--L-card);display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease, background .15s ease}
.vd-card .vd-face{opacity:0;transform:scale(.6);transition:opacity .15s, transform .15s}
.vd-card.open,.vd-card.done{background:rgba(251,195,133,.1);border-color:var(--L-hon)}
.vd-card.open .vd-face,.vd-card.done .vd-face{opacity:1;transform:scale(1)}
.vd-card.done{opacity:.45}
.vd-face{width:46%;aspect-ratio:1;background:var(--L-hon);display:block}
.vd-face.sq{border-radius:4px}
.vd-face.ci{border-radius:50%}
.vd-face.tr{background:none;width:0;height:0;aspect-ratio:auto;
  border-left:15px solid transparent;border-right:15px solid transparent;
  border-bottom:26px solid var(--L-hon)}
.vd-face.rh{border-radius:4px;transform:rotate(45deg)}
.vd-card.open .vd-face.rh,.vd-card.done .vd-face.rh{transform:rotate(45deg) scale(1)}
.vd-face.st{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,
  21% 91%,32% 57%,2% 35%,39% 35%)}
.vd-face.hx{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}

/* Лічба: кубики спалахують і зникають. */
.vd-table{min-height:150px;margin-top:18px;border:1px dashed var(--L-line3);
  border-radius:18px;padding:16px;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:center}
.vd-table-msg{font-size:15.5px;color:var(--L-mut);margin:0;text-align:center}
.vd-minidie{width:52px;height:52px;border-radius:11px;background:var(--L-card);
  border:1px solid var(--L-line3);display:flex;align-items:center;
  justify-content:center;flex:none}
.vd-minidie .vd-pips{width:72%;height:72%;gap:8%}
.vd-answers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.vd-answer{padding:15px 0;border-radius:14px;border:1px solid var(--L-line3);
  background:transparent;color:var(--L-ink);font:600 19px/1 var(--disp),system-ui;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.vd-answer.ok{background:var(--L-hon);border-color:var(--L-hon);color:var(--L-on-hon)}
.vd-answer.bad{border-color:var(--L-warn);color:var(--L-warn)}

/* Реакція: одна велика мішень, у неї й цілиться палець. */
.vd-target{width:min(70vw,260px);height:min(70vw,260px);margin:22px auto 0;
  border-radius:32px;background:var(--L-card);border:2px solid var(--L-line3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .08s, border-color .08s}
.vd-target-txt{font-family:var(--disp);font-size:26px;color:var(--L-ink2)}
.vd-target.waiting{border-color:#3A2E22}
.vd-target.waiting .vd-target-txt{color:var(--L-dim)}
.vd-target.go{background:var(--L-hon);border-color:var(--L-hon)}
.vd-target.go .vd-target-txt{color:var(--L-on-hon)}
.vd-target.false{border-color:var(--L-warn)}
.vd-target.false .vd-target-txt{color:var(--L-warn)}

@media (max-width:360px){
  .vd-cards{gap:7px}
  .vd-answers{gap:6px}
  .vd-answer{font-size:17px;padding:13px 0}
}

/* ============ Вікно Telegram ============
   Сторінка входу в кабінет із месенджера. Її бачать частку секунди, тож
   уся робота тут — не блимнути порожнечею й не змусити читати. */
.tga{max-width:520px;margin:0 auto;padding:28px 18px 40px;text-align:center}
.tga-logo{width:96px;height:auto;margin:10px auto 22px;display:block;opacity:.9}
.tga-box{background:var(--L-card);border:1px solid var(--L-line3);
  border-radius:20px;padding:24px 20px}
.tga-box h1{font:400 26px/1.2 var(--disp),system-ui;margin:0 0 12px;color:var(--L-ink)}
.tga-box p{margin:0 0 14px;color:var(--L-ink2);font-size:16px;line-height:1.5}
.tga-note{color:var(--L-dim);font-size:14px}
.tga-wait{color:var(--L-dim);font-size:17px;margin:8px 0}
.tga-fallback{margin-top:10px}
.tga-btn{display:inline-block;margin-top:6px;padding:15px 26px;border-radius:14px;
  border:0;background:var(--L-hon);color:var(--L-on-hon);text-decoration:none;
  font:600 17px/1 var(--disp),system-ui;cursor:pointer;
  -webkit-tap-highlight-color:transparent}

/* Кабінет усередині вікна месенджера: своєї шапки в нього немає, і зайвий
   відступ згори з'їдав би екран, якого там і так менше. */
body.land .tga{padding-top:18px}
.tga-diag{margin-top:14px;color:var(--L-dim);font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-word}

/* Кабінет у вікні Telegram і на вузькому екрані.
   Вимірювання на телефоні 360×600: заголовок плюс вкладки у два рядки
   з'їдали 188px — майже третину вікна ще до першого рядка даних. Заголовок
   у вікні месенджера прибрано в розмітці (Telegram і так підписує вікно),
   а вкладки тут стають одним рядком, який гортається пальцем. */
.cab-tg{padding-top:10px}
.cwide{display:inline}
.cnarrow{display:none}
@media (max-width:560px){
  /* Вкладкам — увесь рядок: інакше «Вийти» поруч відкушує від них місце,
     і остання вкладка ховається за краєм екрана. Кнопка стає під ними — у
     вікні Telegram її взагалі немає, тож там рядок лишається один. */
  .crow{flex-wrap:wrap;align-items:center;gap:10px}
  .ctabs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .ctabs::-webkit-scrollbar{display:none}
  .ctab{flex:none;white-space:nowrap;padding:8px 12px;font-size:13.5px}
  .cwide{display:none}
  .cnarrow{display:inline}
}

/* ---------- Стрічка історії в кабінеті ----------
   Не таблиця. Таблиця з трьох колонок на телефоні перетворюється на кашу з
   переносів, а гість тут читає не дані, а свої вечори: дата кубиком ліворуч,
   назва більшим кеглем, дрібниці під нею. */
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hist-i{display:flex;gap:14px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--L-line)}
.hist-i:last-child{border-bottom:0}
.hist-d{flex:none;width:46px;text-align:center;line-height:1.1;padding-top:2px}
.hist-d b{display:block;font:700 20px/1 var(--disp),system-ui;color:var(--L-ink)}
.hist-d span{font-size:12px;color:var(--L-dim)}
.hist-i.up .hist-d b{color:var(--L-hon)}
.hist-b{min-width:0}
.hist-t{font-size:16px;color:var(--L-ink);line-height:1.3}
.hist-m{margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:13px;color:var(--L-dim)}
.hist-y{color:var(--L-dim)}
.hist-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;
  border:1px solid var(--L-line3);color:var(--L-ink2)}
.hist-tag.free{border-color:var(--L-good);color:var(--L-good)}
.hist-tag.promo{border-color:var(--L-hon);color:var(--L-hon)}
.hist-tag.wait{border-color:var(--L-warn);color:var(--L-warn)}
.hist-tag.ev{border-color:var(--L-line3);color:var(--L-dim)}

/* Блок «спочатку увійдіть» замість форми броні. Не заглушка й не помилка:
   це звичайний крок, і виглядати він має як запрошення, а не як відмова. */
.lgate{background:var(--L-card);border:1px solid var(--L-line3);border-radius:20px;
  padding:26px 24px;text-align:center}
.lgate h3{margin:0 0 10px;font:400 22px/1.25 var(--disp),system-ui;color:var(--L-ink)}
.lgate p{margin:0 0 16px;color:var(--L-ink2);font-size:15px;line-height:1.5}
.lgate .note{color:var(--L-dim);font-size:13px;margin:12px 0 0}
.lgate form{margin:0}

/* Пояснення замість форми броні в кабінеті — для акаунта без Telegram. */
.cgate{border:1px solid var(--L-line3);border-radius:16px;padding:18px 18px 16px;
  background:var(--L-bg2)}
.cgate p{margin:0 0 10px}
.cgate form{margin-top:4px}