:root{
  --bg:#000;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);
  --stroke-soft:rgba(255,255,255,.07);
  --text:#f4f4f5;
  --muted:rgba(244,244,245,.52);
  --accent:#8b7dff;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --vh:100dvh;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}

/* фоновое свечение, цвет подхватывается от текущего плаката */
/* фоновая анимация */
.bgv{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  opacity:.66;pointer-events:none;
  background:#000;
}

.glow{
  position:fixed;inset:-20%;z-index:1;pointer-events:none;
  background:
    radial-gradient(48% 38% at 22% 18%, var(--accent) 0%, transparent 62%),
    radial-gradient(52% 42% at 82% 78%, var(--accent) 0%, transparent 60%);
  opacity:.14;filter:blur(60px);
  transition:background 1.1s ease, opacity 1.1s ease;
}
.veil{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.30) 18%,
    rgba(0,0,0,.30) 70%, rgba(0,0,0,.92) 100%);
}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.glass{
  background:var(--glass);
  border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}

.app{
  position:relative;z-index:3;
  max-width:100vw;overflow:hidden;
  height:var(--vh);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--safe-top) + 10px) 14px calc(var(--safe-bottom) + 12px);
  gap:10px;
}

/* --- верх --- */
.topbar{display:flex;align-items:center;gap:8px}
.pill{border-radius:999px;padding:8px 14px;font-size:13px;letter-spacing:.04em}
.counter{margin-right:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.icon-btn{padding:8px 11px;line-height:1;font-size:14px}
.icon-btn:active{transform:scale(.94)}

/* --- карусель --- */
.stage{position:relative;min-height:0;min-width:0;overflow:hidden}
.track{
  position:absolute;inset:0;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.track::-webkit-scrollbar{display:none}

.slide{
  flex:0 0 100%;width:100%;height:100%;min-width:0;
  scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;
  padding:4px 2px;
}
.frame{
  position:relative;display:flex;flex:0 1 auto;min-width:0;min-height:0;
  max-width:100%;max-height:100%;
  border-radius:0;overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke-soft);
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  transform:scale(.9);opacity:.35;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), opacity .45s ease;
  will-change:transform;
}
.slide.active .frame{transform:scale(1);opacity:1}
.frame img{
  display:block;flex:0 0 auto;
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.frame.voted::after{
  content:"";position:absolute;inset:0;
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 40px -6px var(--accent);
  pointer-events:none;
}
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  /* плакаты бывают светлые — стрелки должны читаться поверх любого */
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.nav svg path{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.nav svg{width:17px;height:17px}
.nav.prev{left:-2px}
.nav.next{right:-2px}
.nav:active{transform:translateY(-50%) scale(.9)}
.nav[disabled]{opacity:.25}

/* --- низ --- */
.bottom{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}

.seenrow{display:flex;align-items:center;gap:10px;width:100%}
.progress{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.seen{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}
.seen.done{color:var(--accent)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.28),var(--accent));transition:width .35s cubic-bezier(.2,.8,.25,1)}

.vote-row{display:flex;gap:8px;width:100%;max-width:420px;align-items:stretch}
.cancel{
  flex:0 0 auto;width:52px;border-radius:18px;
  display:grid;place-items:center;font-size:15px;color:var(--muted);
}
.cancel:active{transform:scale(.95)}
.vote{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 20px;border-radius:18px;
  font-size:15.5px;font-weight:600;letter-spacing:.01em;
  transition:transform .18s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vote:active{transform:scale(.975)}
.vote[disabled]{opacity:.45}
.vote.is-mine{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border-color:var(--accent);
  box-shadow:0 8px 34px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.16);
}
.vote.confirming{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  border-color:var(--accent);
  box-shadow:0 10px 38px -10px var(--accent), inset 0 1px 0 rgba(255,255,255,.18);
  animation:appear .22s ease;
}
@keyframes appear{from{transform:translateY(4px);opacity:.6}to{transform:none;opacity:1}}
.vote.pulse{animation:pulse .5s ease}
@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
.hint{font-size:11.5px;color:var(--muted);letter-spacing:.02em}

/* --- результаты --- */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-inner{
  width:100%;max-height:82vh;border-radius:26px 26px 0 0;
  padding:18px 16px calc(var(--safe-bottom) + 18px);
  display:flex;flex-direction:column;gap:12px;
  animation:up .3s cubic-bezier(.2,.8,.25,1);
}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{margin:0;font-size:18px;letter-spacing:.02em}
.sheet-sub{font-size:12.5px;color:var(--muted)}
.sheet-list{overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke-soft)}
.row.mine{border-color:var(--accent)}
.row .place{width:26px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.row .rt{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rv{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.row .bar{position:absolute}

/* --- прочее --- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 96px);transform:translate(-50%,14px);
  z-index:30;padding:11px 16px;border-radius:14px;font-size:13.5px;
  background:rgba(20,20,22,.86);border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transition:all .28s cubic-bezier(.2,.8,.25,1);max-width:86vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.screen-msg{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:var(--bg)}
.card-msg{border-radius:20px;padding:22px;max-width:340px;text-align:center}
.msg-title{font-size:16px;font-weight:600;margin-bottom:8px}
.msg-text{font-size:13.5px;color:var(--muted);line-height:1.5}

.skeleton{
  width:min(72vw,340px);aspect-ratio:3/4;border-radius:22px;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 70%);
  background-size:200% 100%;animation:shine 1.4s infinite linear;
}
@keyframes shine{to{background-position:-200% 0}}

@media (min-width:620px){
  .app{max-width:560px;margin:0 auto}
  .nav.prev{left:-10px}
  .nav.next{right:-10px}
}