.branch-streak-hud {
  position:fixed;z-index:34;left:50%;bottom:max(34px,env(safe-area-inset-bottom));
  transform:translateX(-50%);width:min(304px,calc(100vw - 32px));box-sizing:border-box;
  padding:12px 20px 13px;border:1px solid #a9814c;border-radius:5px 8px 6px 7px;
  background:radial-gradient(ellipse at 18% 14%,#fff7ddaf,transparent 70%),
    repeating-linear-gradient(12deg,#9673430b 0 1px,transparent 1px 5px),
    linear-gradient(105deg,#dfbf89,#f8e8c4 16%,#f5e3bc 83%,#dcb781);
  box-shadow:inset 0 0 0 3px #fff0c55c,inset 0 0 15px #946c352a,0 6px 16px #241b1638;
  color:#49351f;text-align:center;font:800 13px/1.3 "Lucida Console","Courier New",monospace;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  opacity:1;visibility:visible;transition:opacity .32s ease,transform .32s ease,visibility 0s;
  isolation:isolate;overflow:hidden;
}
.branch-streak-hud.hidden {opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s;}
.branch-streak-hud::after {content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 36% 87%,#f39a3560 0,#39241bc9 35%,#141416ef 72%),
    repeating-linear-gradient(15deg,#b2732417 0 2px,transparent 2px 6px);
  clip-path:inset(100% 0 0 0);
}
.branch-streak-hud.is-burning::after {animation:branch-streak-char var(--branch-burn-duration,.8s) ease-in forwards;}
.branch-streak-hud > strong {display:block;font-size:14px;letter-spacing:.015em;text-shadow:.3px 0 currentColor;}
.branch-streak-marks {display:flex;justify-content:center;gap:17px;margin-top:5px;}
.branch-streak-notch {display:block;width:23px;height:28px;opacity:.22;filter:grayscale(1);}
.branch-streak-notch.earned {opacity:1;filter:drop-shadow(0 1px 0 #fff5d2);}
.branch-streak-notch svg {width:100%;height:100%;overflow:visible;fill:none;stroke:#684329;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;}
.branch-streak-notch svg path + path {stroke:#ad8147;stroke-width:1.2;}
@keyframes branch-streak-char {0%{opacity:0;clip-path:inset(100% 0 0 0)}18%{opacity:.56;clip-path:inset(80% 0 0 0)}55%{opacity:.9;clip-path:inset(34% 0 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-width:680px),(pointer:coarse){.branch-streak-hud{bottom:max(105px,env(safe-area-inset-bottom));}}
@media(prefers-reduced-motion:reduce){.branch-streak-hud,.branch-streak-hud.hidden{transition-duration:0s;transform:translateX(-50%)}.branch-streak-hud.is-burning::after{animation-duration:.1s}}