/* Мини-инста в телефонах */
.reels{position:absolute;inset:0;overflow:hidden;overflow:clip;background:#000;color:#fff;font-family:Onest,system-ui,sans-serif;outline:none;user-select:none;-webkit-user-select:none}
.rstack{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,.8,.25,1);touch-action:none;cursor:pointer}
.rstack.jump{transition:none}
.reels.flash::after{content:"";position:absolute;inset:0;background:#000;opacity:.5;pointer-events:none;animation:rfl .26s forwards}
@keyframes rfl{to{opacity:0}}
.rs{position:absolute;left:0;right:0;height:100%;overflow:hidden}
.rs video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.rland .rs video{object-fit:contain;background:#000}
.rcap{position:absolute;left:12px;right:56px;bottom:46px;font-size:13px;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none}
.rcap b{display:block;font:800 18px/1.2 Unbounded,sans-serif;margin-bottom:2px}
.rbts{position:absolute;top:44px;left:10px;right:10px;background:#FFE100;color:#06140A;font:800 12px/1.2 Onest,sans-serif;padding:6px 10px;border-radius:99px;text-align:center;transform:rotate(-2deg);z-index:2}
.rtop{position:absolute;top:0;left:0;right:0;height:42px;padding:14px 14px 0;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#0008,#0000);pointer-events:none;z-index:3}
.rtop b{font:800 17px/1 Onest,sans-serif}
.rtop svg,.rside svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rside{position:absolute;right:6px;bottom:56px;display:flex;flex-direction:column;gap:14px;z-index:4}
.rside button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 11px/1 Onest,sans-serif;min-width:38px;filter:drop-shadow(0 1px 4px #0009)}
.rside button svg{width:28px;height:28px}
.rl.on svg{fill:#ff3040;stroke:#ff3040}
.rl.pop svg{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.rl,.rc{display:none!important}
html.social .rl,html.social .rc{display:flex!important}
.rbot{position:absolute;left:12px;right:56px;bottom:14px;display:flex;align-items:center;gap:8px;font:700 13px/1 Onest,sans-serif;z-index:3;pointer-events:none;text-shadow:0 1px 4px #0009}
.rbot img{width:26px;height:26px;border-radius:99px;object-fit:cover;background:#333;border:1.5px solid #fff}
.rbot b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.rbot i{font-style:normal;border:1.5px solid #fff;border-radius:8px;padding:4px 8px;font-size:11px}
.rbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff33;z-index:4}
.rbar i{display:block;height:100%;width:0;background:#fff}
.rhint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000a;padding:8px 14px;border-radius:99px;font:700 13px Onest;pointer-events:none;z-index:5;animation:hint 2.4s 1.2s ease-in-out 3;opacity:0}
.rhint.gone{display:none}
@keyframes hint{0%,100%{opacity:0;transform:translate(-50%,-30%)}30%,70%{opacity:1;transform:translate(-50%,-60%)}}
.rsheet{position:absolute;left:0;right:0;bottom:0;height:68%;background:#fff;color:#06140A;border-radius:18px 18px 0 0;z-index:6;transform:translateY(102%);transition:transform .35s cubic-bezier(.3,.8,.25,1);display:flex;flex-direction:column}
.reels.sheet .rsheet{transform:none}
.rsh{display:flex;justify-content:center;align-items:center;padding:10px 12px 6px;border-bottom:1px solid #eee;position:relative;font-size:14px}
.rx{all:unset;cursor:pointer;position:absolute;right:12px;top:4px;font-size:24px;line-height:1}
.rsheet ul{list-style:none;margin:0;padding:8px 12px;overflow-y:auto;flex:1;font-size:13px;line-height:1.35}
.rsheet li{margin:0 0 8px;overflow-wrap:anywhere}
.rsheet li b{font-weight:800}
.rsheet li.seed b::after{content:" 🥚";font-size:11px}
.rsheet li.ld{opacity:.6;text-align:center;margin-top:16px}
.rsheet form{display:flex;gap:4px;padding:8px;border-top:1px solid #eee}
.rsheet input{min-width:0;border:1px solid #ddd;border-radius:99px;padding:8px 10px;font:500 13px Onest,sans-serif}
.rsheet input[name=n]{width:30%}.rsheet input[name=t]{flex:1}
.rsheet form button{all:unset;cursor:pointer;width:34px;display:flex;align-items:center;justify-content:center}
.rsheet form button svg{width:22px;height:22px;fill:none;stroke:#0095f6;stroke-width:2;stroke-linejoin:round}
.rerr{margin:0;padding:0 12px 8px;color:#e5232e;font-size:12px;min-height:0}
/* горизонтальный телефон: интерфейс помельче */
.rland .rtop{height:34px;padding-top:8px}.rland .rside{bottom:30px;gap:8px}.rland .rside svg{width:22px;height:22px}
.rland .rcap{bottom:34px}.rland .rbot{bottom:8px}.rland .rsheet{height:86%}
.screen:has(.reels){overflow:clip}

/* аватарки в комментариях */
.rsheet li{display:flex;gap:8px;align-items:flex-start}
.rsheet .cav{flex:none;width:28px;height:28px;border-radius:99px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.rav{all:unset;cursor:pointer;flex:none;width:34px;height:34px;border-radius:99px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;font-size:18px}
.ravs{display:none;flex-wrap:wrap;gap:4px;padding:6px 8px 0;border-top:1px solid #eee}
.ravs.open{display:flex}
.ravs button{all:unset;cursor:pointer;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.ravs button.on{background:#e8f6ec;outline:2px solid #00B140}

/* подколка «паузы не будет» */
.rtease{position:absolute;left:calc(100% + 22px);top:28%;width:230px;z-index:20;background:#FFE100;color:#06140A;font:700 15px/1.3 Onest,sans-serif;padding:12px 14px;border-radius:16px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translateX(-10px) rotate(2deg);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.rtease::before{content:"";position:absolute;left:-9px;top:22px;border:9px solid transparent;border-left:0;border-right-color:#FFE100}
.rtease.left{left:auto;right:calc(100% + 22px);transform:translateX(10px) rotate(-2deg)}
.rtease.left::before{left:auto;right:-9px;border:9px solid transparent;border-right:0;border-left-color:#FFE100}
.rtease.inside{left:12px;right:12px;top:58px;width:auto}
.rtease.inside::before{display:none}
.rtease.show{opacity:1;transform:none}
.reels.hintsnd .rsnd{animation:sndpulse .8s ease-in-out 5}
@keyframes sndpulse{50%{transform:scale(1.5);filter:drop-shadow(0 0 8px #FFE100)}}
@media (max-width:700px){.rtease{left:12px;right:12px;top:58px;width:auto}.rtease::before{display:none}}

/* последняя подколка стоит прямо у кнопки звука и тычет в неё стрелкой */
.rtease.snd{transform:none}
.rtease.snd.show{transform:none}
.rtease.snd::before{display:block!important;left:auto;right:-12px;top:auto;bottom:10px;border:10px solid transparent;border-right:0;border-left:12px solid #FFE100}
.rtease.snd::after{content:"→";position:absolute;right:-40px;bottom:2px;font:900 26px/1 Onest;color:#FFE100;text-shadow:0 1px 4px #000a;animation:pokesnd .6s ease-in-out infinite}
@keyframes pokesnd{50%{transform:translateX(6px)}}

/* горизонтальные фильмы: без надписи Reels */
.rland .rtop{display:none}

/* ===== мобилка и экраны (по исследованию МОЗГОВ) ===== */
.rstack{touch-action:pan-y}
.reels.fs .rstack{touch-action:none}
.rfs svg{width:24px!important;height:24px!important}
.rclose{display:none}
html.reelsfs{overflow:hidden}
.reels.fs{position:fixed;inset:0;z-index:300;border-radius:0;height:100vh;height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.reels.fs .rclose{display:flex;all:unset;cursor:pointer;position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:9;width:40px;height:40px;border-radius:99px;background:#0008;color:#fff;font:400 30px/40px Onest;text-align:center}
.reels.fs .rtop{padding-right:64px}
.reels.fs .rfs{display:none}
.rplay{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;width:72px;height:72px;border-radius:99px;background:#000a;color:#fff;font-size:30px;text-align:center;line-height:72px}
.reels.needtap::before{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;width:72px;height:72px;border-radius:99px;background:#000a;color:#fff;font-size:30px;text-align:center;line-height:72px;pointer-events:none}
.reels.armed{box-shadow:inset 0 0 0 2px #00B14066}
@media (max-width:700px){
  .rsheet{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:85dvh;min-height:55dvh;z-index:320;border-radius:20px 20px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.35);overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
  .ravs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ravs button{flex:none}
  .rsheet input{font-size:16px}
}

/* iPhone v17: тап-зоны не меньше 44×44, подписи от 12px */
.rside button{min-width:44px;min-height:44px;justify-content:center;font-size:12px}
.rbot i{font-size:12px}
.rx{width:44px;height:44px;display:flex;align-items:center;justify-content:center;right:2px;top:-4px}
.rsheet form button{width:44px;height:44px}
.rav{width:44px;height:44px}
.reels.fs .rclose{width:44px;height:44px;line-height:44px}
