:root{
  --bg:#F5F5FA;
  --surface:#FFFFFF;
  --ink:#181829;
  --ink-soft:#5C5C72;
  --primary:#4B2E83;
  --primary-soft:#EFE9F9;
  --accent:#FF5C8A;
  --accent-2:#FFC53D;
  --line:#E4E1F0;
  --success:#22B573;
  --success-soft:#E3FAF0;
  --radius:18px;
  --topbar-h:64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overscroll-behavior:none;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* legacy Edge/IE */
}
html::-webkit-scrollbar{display:none;} /* Chrome/Safari */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;
}
body.no-scroll{overflow:hidden;}
html.no-scroll{overflow:hidden; height:100%;}
[inert]{pointer-events:none !important; user-select:none;}

/* ===== PULL TO REFRESH ===== */
.ptr-indicator{
  position:fixed;
  top:calc(var(--topbar-h) + 10px);
  left:50%;
  transform:translate(-50%, -60px);
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
  border-radius:50%;
  box-shadow:0 8px 22px rgba(24,24,41,0.16), 0 2px 6px rgba(24,24,41,0.08);
  z-index:80;
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
  pointer-events:none;
  will-change:transform;
}
.ptr-indicator.pulling{transition:opacity .2s ease;} /* no transform transition while dragging — follows the finger 1:1 */
.ptr-spinner{width:22px; height:22px; transform:rotate(-90deg);}
.ptr-track{fill:none; stroke:var(--line); stroke-width:3;}
.ptr-arc{
  fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:100.5; stroke-dashoffset:100.5;
  transition:stroke-dashoffset .1s linear;
}
.ptr-indicator.refreshing .ptr-spinner{animation:ptr-spin .7s linear infinite;}
.ptr-indicator.refreshing .ptr-arc{
  stroke-dasharray:60 40.5;
  stroke-dashoffset:0;
  transition:none;
}
@keyframes ptr-spin{ to{ transform:rotate(270deg); } }
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:-0.01em;}
.display{font-family:'Unbounded', sans-serif;}
button{font-family:inherit; border:none; background:none;}
a{text-decoration:none; color:inherit;}

/* ===== TOP NAV ===== */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:12px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
  min-height:var(--topbar-h);
}
.brand{display:flex; align-items:center; gap:9px; cursor:pointer; flex-shrink:0;}
.brand-logo{
  width:34px; height:34px; flex-shrink:0;
  object-fit:contain; border-radius:9px;
  background:var(--primary-soft);
}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-text span{font-family:'Unbounded'; font-weight:700; font-size:15px; color:var(--ink);}
.brand-text small{font-size:9.5px; color:var(--ink-soft); font-weight:500; letter-spacing:.03em;}

/* Right-hand cluster of the topbar: language switch, about — kept
   together and pinned to the right edge via .topbar-spacer before it.
   Search lives on the left, right after the brand. */
.topbar-actions{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  color:var(--ink-soft);
  transition:background .15s, color .15s;
  position:relative;
}
.icon-btn:hover{background:var(--primary-soft); color:var(--primary);}
.icon-btn svg{width:19px; height:19px;}
/* ===== EXPANDABLE SEARCH ===== */
.search-item{
  display:flex; align-items:center;
  height:40px; width:40px; flex-shrink:0;
  border-radius:12px;
  color:var(--ink-soft);
  overflow:hidden;
  transition:width .3s cubic-bezier(.4,0,.2,1), background .2s, box-shadow .2s;
}
.search-item:hover{background:var(--primary-soft); color:var(--primary);}
.search-item.active{
  width:min(46vw, 220px);
  background:var(--primary-soft);
  color:var(--primary);
  box-shadow:0 0 0 1.5px var(--primary) inset;
}
.search-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex-shrink:0;
  color:inherit; cursor:pointer;
}
.search-icon-btn svg{width:19px; height:19px;}
.search-input{
  flex:1; min-width:0; height:100%;
  border:none; background:none; outline:none;
  font-family:'Inter', sans-serif; font-size:13px; color:var(--ink);
  padding:0; opacity:0;
  transition:opacity .2s ease .08s;
}
.search-item.active .search-input{
  opacity:1; padding-right:14px;
}
.search-input::placeholder{color:var(--ink-soft);}

/* ===== LANGUAGE SWITCH ===== */
.lang-switch{position:relative; flex-shrink:0;}
.lang-switch-btn{
  display:flex; align-items:center; gap:5px;
  height:40px; padding:0 12px; border-radius:12px;
  font-family:'Unbounded'; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft); cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s;
}
.lang-switch-btn:hover{background:var(--primary-soft); color:var(--primary);}
.lang-switch.open .lang-switch-btn{
  background:var(--primary-soft); color:var(--primary);
  box-shadow:0 0 0 1.5px var(--primary) inset;
}
.lang-switch-btn .lang-chevron{width:13px; height:13px; transition:transform .2s ease; flex-shrink:0;}
.lang-switch.open .lang-chevron{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:168px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 28px -8px rgba(24,24,41,0.22), 0 2px 8px rgba(24,24,41,0.08);
  padding:6px; z-index:35;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:10px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500; color:var(--ink-soft);
  text-align:left; transition:background .12s, color .12s;
}
.lang-option:hover{background:var(--primary-soft); color:var(--primary);}
.lang-option.active{background:var(--primary-soft); color:var(--primary); font-weight:600;}
.lang-option .lang-option-code{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  min-width:26px; padding:3px 0; text-align:center; flex-shrink:0;
  border-radius:6px; background:var(--bg); color:inherit;
}
.lang-option.active .lang-option-code{background:var(--primary); color:#fff;}
.lang-switch-btn .lang-option-code{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11px;
}

.topbar-spacer{flex:1; min-width:6px;}

/* ===== LAYOUT ===== */
.layout{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  max-width:1180px;
  margin:0 auto;
  width:100%;
  overflow:hidden;
}

/* ===== FILTER BAR (button that opens drawer) ===== */
.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:20px;
  width:100%;
  max-width:100%;
}
.filter-btn{
  display:flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  background:var(--ink); color:#fff;
  font-family:'Unbounded'; font-size:12.5px; font-weight:600;
  cursor:pointer; flex-shrink:0;
}
.filter-btn svg{width:15px; height:15px;}
.filter-count{
  background:var(--accent); color:#fff; font-family:'Inter'; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.tabs{display:flex; gap:8px; flex-wrap:wrap;}
.tab{
  font-family:'Unbounded'; font-size:12px; font-weight:600;
  padding:10px 16px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink-soft); cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.tab.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.tab:not(.active):hover{border-color:var(--primary); color:var(--primary);}

/* ===== FILTER DRAWER ===== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(24,24,41,0.45);
  z-index:40; opacity:0; pointer-events:none; transition:opacity .2s;
  backdrop-filter:blur(2px);
}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:min(340px, 86vw);
  background:var(--surface);
  z-index:41;
  transform:translateX(-100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:20px 0 40px -20px rgba(0,0,0,0.25);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.drawer-head h3{font-family:'Unbounded'; font-size:15px;}
.drawer-close{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer;
}
.drawer-close:hover{background:var(--primary-soft); color:var(--primary);}
.drawer-close svg{width:18px; height:18px;}
.drawer-body{padding:18px 20px; overflow-y:auto; flex:1;}
.drawer-foot{
  padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; flex-shrink:0;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.drawer-foot .btn-primary{
  flex:1; background:var(--primary); color:#fff; font-family:'Unbounded'; font-size:12.5px; font-weight:600;
  padding:13px; border-radius:12px; text-align:center; cursor:pointer;
}
.drawer-foot .btn-ghost{
  background:var(--bg); color:var(--ink-soft); font-family:'Unbounded'; font-size:12.5px; font-weight:600;
  padding:13px 16px; border-radius:12px; cursor:pointer; border:1px solid var(--line);
}

.filter-group{margin-bottom:24px;}
.filter-group summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Unbounded'; font-size:11.5px; font-weight:700;
  color:var(--ink); text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--ink);
}
.filter-group summary::-webkit-details-marker{display:none;}
.filter-group summary::after{content:'▾'; font-size:10px; color:var(--ink-soft); transition:transform .15s;}
.filter-group:not([open]) summary::after{transform:rotate(-90deg);}
.filter-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 2px; cursor:pointer; border-radius:8px;
}
.filter-row:hover{background:var(--primary-soft);}
.filter-row input{
  width:17px; height:17px; accent-color:var(--primary); cursor:pointer; flex-shrink:0;
}
.filter-row label{font-size:14px; color:var(--ink-soft); cursor:pointer;}
.filter-row input:checked + span{color:var(--ink); font-weight:600;}
.filter-row span{font-size:14px; color:var(--ink-soft); cursor:pointer;}

/* ===== MAIN FEED ===== */
.feed{padding:22px 24px 60px; width:100%; max-width:100%; overflow:hidden;}

.card-list{display:flex; flex-direction:column; gap:20px;}
.empty-state{
  text-align:center; color:var(--ink-soft); font-size:14px;
  padding:48px 20px; background:var(--surface); border:1.5px dashed var(--line);
  border-radius:var(--radius);
}
.event-card{
  position:relative;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:24px 24px 20px 42px;
  transition:box-shadow .15s, transform .15s;
  overflow:hidden;
  cursor:pointer;
}
.event-card:hover{box-shadow:0 12px 28px -12px rgba(75,46,131,0.22); transform:translateY(-2px);}
.featured-ribbon{
  position:absolute; left:0; top:0; bottom:0; width:20px;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.featured-ribbon span{
  font-family:'Unbounded'; font-size:8.5px; font-weight:700; letter-spacing:.14em;
  color:#fff; writing-mode:vertical-rl; transform:rotate(180deg);
}

/* Event image: shown only from tablet width up — on mobile the card stays
   text-only and a full banner would eat too much vertical space in a
   single-column feed. Only rendered at all when the event actually has a
   photo (see js/i18n.js) — no gradient placeholder, so events without art
   just don't reserve this space. A real <img> with object-fit:cover is used
   instead of a CSS background so photos of any source aspect ratio are
   cropped cleanly rather than distorted. */
.card-media{
  display:none;
  width:100%;
  aspect-ratio:21/8;
  border-radius:12px;
  margin-bottom:18px;
  overflow:hidden;
  background-color:var(--primary-soft);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.card-heading{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0;}
.card-title{font-family:'Unbounded'; font-size:clamp(16px,4vw,20px); font-weight:700; color:var(--ink); line-height:1.25;}
.prize-tag{
  font-family:'JetBrains Mono'; font-size:12px; font-weight:600;
  background:var(--success-soft); color:var(--success);
  padding:5px 11px; border-radius:8px; white-space:nowrap;
}
/* Entry fee ("вступительный взнос") — deliberately a different color from
   .prize-tag so the two are never visually confused with each other. */
.fee-tag{
  font-family:'JetBrains Mono'; font-size:12px; font-weight:600;
  background:#FFF3D9; color:#9A6B00;
  padding:5px 11px; border-radius:8px; white-space:nowrap;
}
.urgent-badge{
  font-size:11px; font-weight:700; color:#fff; background:var(--accent);
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.72;}}

.reg-dates{font-size:13px; color:var(--ink-soft); margin-top:10px;}
.reg-dates .mono{color:var(--ink); font-weight:600;}

.tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.chip{
  font-size:11px; font-weight:600; color:var(--primary);
  background:var(--primary-soft); padding:5px 10px; border-radius:8px;
}
.chip.city{color:var(--ink-soft); background:var(--bg); border:1px solid var(--line);}

.card-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.view-details{
  font-size:13.5px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:6px; cursor:pointer;
}
.view-details svg{width:14px; height:14px; transition:transform .15s;}
.view-details:hover svg{transform:translateX(3px);}
.closing-strip{
  font-family:'Unbounded'; font-size:10px; font-weight:700; letter-spacing:.05em;
  color:var(--accent-2); background:#FFF7E3; padding:7px 12px; border-radius:8px;
}

/* ===== RESPONSIVE ===== */

/* Tablet and up: show the event image and give cards more breathing room —
   a single narrow column of text-only cards looks sparse on a wide screen. */
@media (min-width: 761px){
  .card-media{display:block;}
  .feed{padding:32px 32px 70px;}
  .event-card{padding:26px 28px 22px 46px;}
  .card-list{gap:24px;}
}

/* small tablet portrait */
@media (max-width: 760px){
  .topbar{padding:10px 14px; gap:6px; flex-wrap:nowrap;}
  .brand-text small{display:none;}
  .brand-logo{width:30px; height:30px;}
  .topbar-actions{gap:2px;}
  .icon-btn{width:42px; height:42px;}
  .icon-btn svg{width:19px; height:19px;}
  .search-item{width:42px; height:42px;}
  .search-icon-btn{width:42px; height:42px;}
  .search-icon-btn svg{width:19px; height:19px;}
  .search-item.active{width:min(50vw, 200px);}
  .lang-switch-btn{height:42px; padding:0 9px; gap:4px;}
  .feed{padding:16px 14px 50px;}
  .event-card{padding:20px 18px 18px 36px;}
  .featured-ribbon{width:16px;}
  .card-top{flex-direction:column; align-items:flex-start;}
  .card-bottom{flex-direction:row; justify-content:space-between;}
}

/* iPhone */
@media (max-width: 480px){
  html, body{overflow-x:hidden; position:relative; width:100%; max-width:100vw;}
  .layout, .feed, .card-list, .event-card{max-width:100%; overflow-x:hidden;}
  .brand-text{flex-direction:row; align-items:baseline; gap:4px; white-space:nowrap;}
  .brand-text span{font-size:13px;}
  .brand-text small{display:block; font-size:8.5px;}
  .topbar{gap:4px;}
  .topbar-actions{gap:0;}
  .icon-btn{width:40px; height:40px;}
  .icon-btn svg{width:18px; height:18px;}
  .search-item{width:40px; height:40px;}
  .search-icon-btn{width:40px; height:40px;}
  .search-icon-btn svg{width:18px; height:18px;}
  .search-item.active{width:min(58vw, 190px);}
  .search-input{font-size:12.5px;}
  .lang-switch-btn{height:40px; padding:0 8px; gap:3px;}
  .lang-menu{min-width:150px;}
  .filter-bar{
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .filter-bar::-webkit-scrollbar{display:none;}
  .filter-btn span.label-text{display:none;}
  .filter-btn{padding:11px 13px; flex-shrink:0;}
  .tabs{flex-wrap:nowrap;}
  .tab{flex-shrink:0;}
  .card-heading{gap:10px;}
  .urgent-badge, .prize-tag{font-size:10.5px;}
}

/* ===== EVENT DETAILS MODAL ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(24,24,41,0.5);
  z-index:50; opacity:0; pointer-events:none; transition:opacity .2s;
  backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-panel{
  width:100%; max-width:520px;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  padding:26px 26px calc(24px + env(safe-area-inset-bottom));
  position:relative;
  transform:translateY(24px);
  opacity:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .2s;
  max-height:88vh; overflow-y:auto;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* legacy Edge/IE */
}
.modal-panel::-webkit-scrollbar{display:none;} /* Chrome/Safari */
.modal-overlay.open .modal-panel{transform:translateY(0); opacity:1;}
.modal-close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer;
}
.modal-close:hover{background:var(--primary-soft); color:var(--primary);}
.modal-close svg{width:18px; height:18px;}
.modal-media{
  width:calc(100% + 52px);
  margin:-26px -26px 18px;
  aspect-ratio:16/9;
  overflow:hidden;
  background-color:var(--primary-soft);
  border-radius:22px 22px 0 0;
}
.modal-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.modal-media.is-empty{display:none; margin-bottom:0;}
.modal-head{margin-bottom:16px;}
.modal-title{font-family:'Unbounded'; font-size:19px; font-weight:700; line-height:1.3;}
.modal-meta{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.modal-money-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.modal-prize{
  display:inline-flex; font-family:'JetBrains Mono'; font-size:13px; font-weight:600;
  background:var(--success-soft); color:var(--success);
  padding:7px 13px; border-radius:9px;
}
.modal-fee{
  display:inline-flex; font-family:'JetBrains Mono'; font-size:13px; font-weight:600;
  background:#FFF3D9; color:#9A6B00;
  padding:7px 13px; border-radius:9px;
}
.modal-description{font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:16px;}
.modal-foot{display:flex; gap:10px; margin-top:22px;}
.modal-foot .btn-primary{
  flex:1; background:var(--primary); color:#fff; font-family:'Unbounded'; font-size:12.5px; font-weight:600;
  padding:13px; border-radius:12px; text-align:center; cursor:pointer;
}
.modal-foot .btn-ghost{
  background:var(--bg); color:var(--ink-soft); font-family:'Unbounded'; font-size:12.5px; font-weight:600;
  padding:13px 16px; border-radius:12px; cursor:pointer; border:1px solid var(--line);
}

@media (min-width: 640px){
  .modal-overlay{align-items:center;}
  .modal-panel{border-radius:22px;}
}

@media (max-width: 480px){
  .modal-panel{padding:22px 20px calc(20px + env(safe-area-inset-bottom));}
  .modal-media{width:calc(100% + 40px); margin:-22px -20px 16px;}
  .modal-title{font-size:17px;}
}