/* robotatut.pl - historie: filmy i podswietlona obwodka awatara */

/* pasek postepu trwa tyle, ile historia */
.stv-bars i.on::after{animation:stgo var(--stdur,6s) linear forwards}

/* film w kolku i w przegladarce */
.sts .stc-in video{width:100%;height:100%;object-fit:cover;border-radius:50%;
  display:block;border:2px solid var(--paper)}
.sts .stc-v{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:15px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.65);pointer-events:none}
.stv-f video{max-width:100%;max-height:82vh;display:block;margin:0 auto;background:#000}

.stv-snd{background:none !important;border:0 !important;cursor:pointer;font-size:17px;
  line-height:1;padding:2px 6px !important;box-shadow:none !important;min-height:0 !important}
.stv-snd[hidden]{display:none !important}

/* --- obwodka awatara swieci, gdy jest aktywna historia --- */
.phero .pring.has-story .stary{display:block}
.phero .pring .stary{display:none;position:absolute;inset:-7px;border-radius:50%;
  padding:3px;
  background:conic-gradient(from 210deg,#A6790F,#F7E9AE 25%,#A6790F 50%,#F7E9AE 75%,#A6790F);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:starot 9s linear infinite;pointer-events:none}
@keyframes starot{to{transform:rotate(360deg)}}
.phero .pring.has-story{filter:drop-shadow(0 0 12px rgba(247,233,174,.35))}

/* licznik historii przy awatarze */
.phero .pring .stnum{position:absolute;left:2px;top:2px;min-width:22px;height:22px;
  padding:0 6px;display:none;align-items:center;justify-content:center;border-radius:11px;
  background:linear-gradient(135deg,#A6790F,#F7E9AE);color:#14130F;
  font-family:var(--f-display,inherit);font-weight:800;font-size:11px;line-height:1;
  border:2px solid var(--paper)}
.phero .pring.has-story .stnum{display:flex}

/* --- menu pod awatarem: zmien zdjecie albo dodaj historie --- */
.pavatar{position:relative;flex:0 0 auto}
.phero .pring{background:none;border:0;padding:0;appearance:none}
.phero .pring .pcam,.phero .pring .stnum{display:none !important}
.pmenu{position:absolute;left:0;top:calc(100% + 8px);z-index:40;min-width:220px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.38)}
.pmenu[hidden]{display:none}
.pmenu-i{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:left;padding:13px 14px;min-height:48px;cursor:pointer}
.pmenu-i:last-child{border-bottom:0}
.pmenu-i:hover,.pmenu-i:focus{background:rgba(255,255,255,.07)}

/* --- obwodka historii: zloto plynie jak woda --- */
.phero .pring .stary{animation-duration:4.5s;background:conic-gradient(from 210deg,#8A6208,#F7E9AE 18%,#FFF7D6 26%,#C79A1B 40%,#8A6208 55%,#F7E9AE 72%,#FFF7D6 80%,#8A6208)}
.phero .pring.has-story .stary::after{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,255,255,.9) 72%,transparent 84% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:stashine 2.6s linear infinite;filter:blur(.7px)}
@keyframes stashine{to{transform:rotate(360deg)}}
.phero .pring.has-story{animation:stapulse 3.4s ease-in-out infinite}
@keyframes stapulse{0%,100%{filter:drop-shadow(0 0 9px rgba(247,233,174,.26))}50%{filter:drop-shadow(0 0 19px rgba(247,233,174,.52))}}
@media (prefers-reduced-motion:reduce){
  .phero .pring .stary,.phero .pring.has-story .stary::after,.phero .pring.has-story{animation:none}
}