html:has(.skill-rail) { scroll-padding-top:calc(var(--skill-header-height,143px) + 18px); }
/* Shared header skill progress: the character and profile link stay in place
   while either the native app or a legacy activity changes underneath. */
.top:has(>.skill-rail), .arcade-header:has(>.skill-rail) { padding-bottom:55px; }
.skill-rail { --skill-progress:0; --skill-rail-height:clamp(8px,.7vw,10px); --skill-runner-width:56px; --skill-runner-height:40px; position:absolute; inset:auto 0 0; height:44px; margin:0; overflow:visible; color:inherit; font-family:var(--wp-font-reading, sans-serif); }
.skill-rail-link { position:relative; display:block; height:100%; padding:0; color:inherit; cursor:pointer; text-decoration:none; }
.skill-rail-link:focus-visible { outline:2px solid #edc968; outline-offset:-2px; }
.skill-rail-track { position:absolute; inset:auto 0 2px; height:var(--skill-rail-height); background:rgba(255,255,255,.17); }
.skill-rail-fill { display:block; width:calc(var(--skill-progress)*100%); height:100%; background:#edc968; }
/* Keep the whole stride visible, with Barsik's paws resting within the line. */
.skill-rail-runner { position:absolute; bottom:-1px; width:var(--skill-runner-width); height:var(--skill-runner-height); left:clamp(0px,calc(var(--skill-progress)*100% - var(--skill-runner-width)/2),calc(100% - var(--skill-runner-width))); pointer-events:none; }
.skill-rail-runner img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.skill-rail.is-moving .skill-rail-runner { transition:left .7s cubic-bezier(.2,.65,.3,1); }
.skill-rail.is-moving .skill-rail-fill { transition:width .7s cubic-bezier(.2,.65,.3,1); }
.skill-rail.is-moving .skill-rail-runner img { animation:barsik-progress-trot .22s ease-in-out 3; }
@keyframes barsik-progress-trot { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-2px) rotate(-2deg); } }
.skill-rail.is-unavailable .skill-rail-track { background:rgba(255,255,255,.1); }
@media(max-width:640px) { .skill-rail { --skill-runner-width:48px; --skill-runner-height:36px; } }
@media(min-width:992px) { .arcade-workspace .sidebar { top:var(--arcade-header-height,143px); height:calc(100vh - var(--arcade-header-height,143px)); } }
.arcade-workspace .card.sticky-top,.arcade-workspace .sticky-dashboard { top:calc(var(--arcade-header-height,143px) + 16px); }
@media(prefers-reduced-motion:reduce) {
  .skill-rail.is-moving .skill-rail-runner,.skill-rail.is-moving .skill-rail-fill { transition:none; }
  .skill-rail.is-moving .skill-rail-runner img { animation:none; }
}