/* Shared woodland rails. Content keeps its native scrolling and focus behavior. */
body.faunara-game .fa-scroll-surface {
  scrollbar-width: none !important;
  scrollbar-color: auto !important;
  scroll-padding: 8px 28px 28px 8px;
}
body.faunara-game .fa-scroll-surface::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
body.faunara-game .fa-scroll-surface[data-fa-scroll-y] { padding-right:calc(var(--fa-scroll-padding-right, 0px) + 24px) !important; }
body.faunara-game .fa-scroll-surface[data-fa-scroll-x] { padding-bottom:calc(var(--fa-scroll-padding-bottom, 0px) + 24px) !important; }
.fa-scroll-layer { position:fixed; inset:0; pointer-events:none; z-index:2147483000; overflow:hidden; }
.fa-scroll-rail { position:absolute; pointer-events:auto; touch-action:none; user-select:none; width:24px; }
.fa-scroll-rail[hidden] { display:none !important; }
.fa-scroll-rail[data-axis="x"] { height:24px; width:auto; }
.fa-scroll-track, .fa-scroll-thumb-art { position:absolute; width:12px; left:6px; top:0; bottom:0; border-radius:7px; overflow:hidden; background:#59412b; box-shadow:inset 0 0 0 1px #c6a05b; pointer-events:none; }
.fa-scroll-thumb { position:absolute; width:24px; left:0; top:0; cursor:grab; touch-action:none; outline:none; }
.fa-scroll-thumb-art { width:14px; left:5px; background:#62845a; box-shadow:inset 0 0 0 1px #d8b567, inset 0 0 4px #173c32; }
.fa-scroll-thumb:hover .fa-scroll-thumb-art { filter:brightness(1.18); }
.fa-scroll-thumb:focus-visible .fa-scroll-thumb-art { outline:2px solid #164e47; outline-offset:2px; box-shadow:0 0 0 4px #fff2cb; }
.fa-scroll-thumb[data-dragging] { cursor:grabbing; }
.fa-scroll-thumb[data-dragging] .fa-scroll-thumb-art { filter:brightness(1.25); }
/* Three CSS sprite windows preserve the painted caps without changing source pixels. */
.fa-scroll-art-piece { position:absolute; left:0; right:0; background-repeat:no-repeat; pointer-events:none; }
.fa-scroll-track .fa-scroll-art-piece { background-image:url('./assets/ui/faunara/scrollbars/wood-track.png'); background-size:966% auto; }
.fa-scroll-track .fa-scroll-art-start { top:0; height:14px; background-position:center top; }
.fa-scroll-track .fa-scroll-art-end { bottom:0; height:14px; background-position:center bottom; }
.fa-scroll-track .fa-scroll-art-middle { top:14px; bottom:14px; background-size:966% 140%; background-position:center; }
.fa-scroll-thumb-art .fa-scroll-art-piece { background-image:url('./assets/ui/faunara/scrollbars/leaf-handle.png'); background-size:602% auto; }
.fa-scroll-thumb-art .fa-scroll-art-start { top:0; height:17px; background-position:center 11.9%; }
.fa-scroll-thumb-art .fa-scroll-art-end { bottom:0; height:17px; background-position:center 88.1%; }
.fa-scroll-thumb-art .fa-scroll-art-middle { top:17px; bottom:17px; background-size:602% 240%; background-position:center; }
/* Rotate just the artwork: hit targets and keyboard axes remain horizontal. */
.fa-scroll-rail[data-axis="x"] > .fa-scroll-track { left:0; top:18px; bottom:auto; height:var(--fa-scroll-length); transform:rotate(-90deg); transform-origin:top left; }
.fa-scroll-rail[data-axis="x"] .fa-scroll-thumb { width:auto; height:24px; }
.fa-scroll-rail[data-axis="x"] .fa-scroll-thumb-art { left:0; top:19px; bottom:auto; height:var(--fa-scroll-thumb-length); transform:rotate(-90deg); transform-origin:top left; }
@media (pointer:coarse) {
  .fa-scroll-rail::before { content:''; position:absolute; inset:0 -5px; }
  .fa-scroll-rail[data-axis="x"]::before { inset:-5px 0; }
}
@media (forced-colors:active) {
  .fa-scroll-art-piece { display:none; }
  .fa-scroll-track { background:Canvas; border:1px solid CanvasText; }
  .fa-scroll-thumb-art { background:Highlight; border:1px solid ButtonText; }
}