*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000;color:#fff;
  font-family:Roboto,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
button{font-family:inherit;border:0;cursor:pointer}

/* ---------- video feed ---------- */
.feed{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#3a2f2c,#0d0b0b 75%)}
.feed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease}
.feed video.on{opacity:1}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:5;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;pointer-events:none}
.ad{position:absolute;left:12px;top:calc(env(safe-area-inset-top,0px) + 14px);
  width:20px;height:20px;border-radius:50%;background:rgba(20,20,20,.85);
  font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}
.logo{position:absolute;left:36px;top:calc(env(safe-area-inset-top,0px) + 8px);
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(145deg,#2c9aa8,#2f6f86 60%,#35557a);
  display:flex;align-items:center;justify-content:center;opacity:.9}
.tabs{text-align:center;font-size:18px;font-weight:500;letter-spacing:.2px;line-height:1}
.tabs span{color:rgba(255,255,255,.5)}
.tabs b{color:#fff;font-weight:700;margin-left:6px}
.segs{display:flex;justify-content:center;gap:5px;margin-top:9px}
.seg{width:22px;height:4px;border-radius:3px;background:rgba(255,255,255,.85);overflow:hidden;position:relative}
.seg i{position:absolute;inset:0;width:0;background:#f37b7b}
.seg.done i{width:100%}

/* ---------- cookie banner ---------- */
.cookie{position:fixed;z-index:6;right:10px;top:calc(env(safe-area-inset-top,0px) + 6px);
  display:flex;align-items:center;gap:10px;background:rgba(30,30,30,.95);
  padding:8px 8px 8px 12px;border-radius:4px;font-size:13px;max-width:calc(100% - 20px)}
.cookie a{color:#fff;text-decoration:underline}
.cookie button{background:#6f5100;color:#fff;font-weight:700;font-size:13px;
  padding:8px 10px;border-radius:3px;white-space:nowrap}

/* ---------- right rail ---------- */
.rail{position:fixed;z-index:5;right:8px;top:24%;width:58px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.ava{position:relative;width:50px;height:50px;border-radius:50%;
  border:3px solid #e01c1c;box-shadow:0 0 6px rgba(224,28,28,.7);
  background:#444 center/cover no-repeat;margin-bottom:6px}
.ava em{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  background:#d20000;color:#fff;font-style:normal;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:3px;letter-spacing:.3px}
.rbtn{background:none;color:rgba(255,255,255,.75);display:flex;flex-direction:column;
  align-items:center;font-size:14px;font-weight:700;gap:3px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rbtn svg{width:34px;height:34px;fill:rgba(215,215,215,.9)}
.rbtn.liked svg{fill:#f37b7b}
.rbtn small{font-size:13px;color:rgba(230,230,230,.8);font-weight:700}
.rbtn.mute svg{width:26px;height:26px}

/* ---------- quiz modal ---------- */
.modal{position:fixed;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(calc(100vw - 140px),290px);background:rgba(34,34,34,.95);border-radius:4px;
  padding:18px 16px 16px;text-align:center;transition:opacity .2s ease}
.modal.fade{opacity:0}
.modal h2{font-size:18px;font-weight:700;line-height:1.3}
.modal h2.big{font-size:17px;line-height:1.4}
.modal p{font-size:12.5px;line-height:1.4;margin-top:6px;color:#eee}
.btns{display:flex;justify-content:center;gap:10px;margin-top:14px}
.btns button{background:#4a4a4a;color:#fff;font-weight:700;font-size:12.5px;
  min-width:86px;height:30px;padding:0 16px;border-radius:15px}
.btns button:active{background:#5c5c5c}
button:focus-visible{outline:2px solid #f37b7b;outline-offset:2px}

@media (max-width:980px){
  .cookie{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);right:10px;left:auto}
}
@media (max-width:520px){
  .modal{width:min(calc(100vw - 130px),290px);padding:16px 12px 14px}
  .btns button{min-width:0;padding:0 14px}
  .cookie{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);right:10px;left:10px}
  .tabs{font-size:17px}
  .segs{margin-top:8px}
  .seg{width:18px}
}
@media (prefers-reduced-motion:reduce){.feed video,.modal{transition:none}}

/* ---------- перехват "назад" ---------- */
.backgate{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px}
.backgate.is-open{display:flex;animation:bgIn .25s ease both}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.backgate__in{width:min(86vw,300px);background:rgba(34,34,34,.97);border-radius:4px;
  padding:22px 16px 14px;text-align:center}
.backgate .ava{margin:0 auto 16px;width:64px;height:64px}
.backgate h2{font-size:18px;font-weight:700;line-height:1.3}
.backgate p{font-size:13px;line-height:1.4;color:#ddd;margin-top:6px}
.backgate__close{display:block;margin:12px auto 0;background:none;color:rgba(255,255,255,.45);
  font-size:12px;text-decoration:underline;padding:4px}