/*
 * UI skin: the supplied "Complete UI Essential Pack" (Crusenho, CC BY 4.0, flat theme) drawn as pixel 9-slice frames on the menu, camp, journal
 * and options controls. The sprites are cream paper with ink outlines, so they sit on the existing paper look. Loaded last.
 * Sprites: assets/ui/skin/UI_Flat_*.png (copied by tools/build-pack-assets.mjs). Attribution: CREDITS.md and the in-game Controls screen.
 * Every rule is a restyle only: no id, class or behaviour changes.
 */

.sb-button,#coastal-camp nav button,#main-menu .mm-back,.camp-command button,.sb-confirm button{
 image-rendering:pixelated;border-style:solid;border-width:16px 16px 20px 16px;background:none!important;box-shadow:none!important;border-radius:0;
 border-image:url("assets/ui/skin/UI_Flat_Button02a_1.png") 8 8 10 8 fill/16px 16px 20px 16px stretch;
 padding:0 4px;min-height:0;clip-path:none;color:#14191a;margin:-2px 0;transition:transform .08s}
.sb-button:hover,#coastal-camp nav button:hover,#main-menu .mm-back:hover{border-image-source:url("assets/ui/skin/UI_Flat_Button02a_3.png");transform:translateY(-1px)}
.sb-button:active,#coastal-camp nav button:active,#main-menu .mm-back:active{border-image-source:url("assets/ui/skin/UI_Flat_Button02a_2.png");transform:translateY(1px)}
.sb-button:disabled,#coastal-camp nav button:disabled{border-image-source:url("assets/ui/skin/UI_Flat_Button02a_4.png");opacity:.7}
#main-menu .mm-back{color:#14191a}
/* the call-to-action buttons use the orange frame */
.sb-button.sb-primary,.camp-command .primary,button.primary{
 border-width:12px;border-image:url("assets/ui/skin/UI_Flat_Frame03a.png") 6 fill/12px stretch;color:#1a1204;text-shadow:none;background:none!important}
.sb-button.sb-primary:hover{filter:brightness(1.08)}
.sb-button.sb-primary::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;background:url("assets/ui/skin/UI_Flat_IconPlay01a.png") center/contain no-repeat;image-rendering:pixelated}
/* the back / return button points left */
#main-menu .mm-back::before,.sb-head .sb-button:first-child::before{image-rendering:pixelated}

/* selection brackets: the pack's four corner pieces around whatever is focused or hovered */
.mm-card.focus::after,.mm-opt.focus::after,.camp-choice:focus-visible::after,.sb-battle:focus-visible::after,.sb-relic:focus-visible::after,.pad-focus::after{
 content:'';position:absolute;inset:-6px;pointer-events:none;z-index:6;image-rendering:pixelated;
 background:url("assets/ui/skin/UI_Flat_Select01a_1.png") 0 0/28px 28px no-repeat,url("assets/ui/skin/UI_Flat_Select01a_2.png") 100% 0/28px 28px no-repeat,
  url("assets/ui/skin/UI_Flat_Select01a_3.png") 0 100%/28px 28px no-repeat,url("assets/ui/skin/UI_Flat_Select01a_4.png") 100% 100%/28px 28px no-repeat}
.camp-choice,.sb-battle,.sb-relic{position:relative}
.pad-focus{outline:0!important;box-shadow:none!important;position:relative}
.camp-choice.equipped{border-image:url("assets/ui/skin/UI_Flat_Frame03a.png") 6 fill/10px stretch;border-width:10px;image-rendering:pixelated}

/* options: toggle switches and slider tracks from the pack */
#mm-options .mm-sw{width:30px;height:30px;border:0;border-radius:0;background:url("assets/ui/skin/UI_Flat_IconCross01b.png") center/22px auto no-repeat,url("assets/ui/skin/UI_Flat_FrameSlot01b.png") center/100% 100% no-repeat;image-rendering:pixelated}
#mm-options .mm-sw::after{display:none}
#mm-options .mm-sw.on{background-image:url("assets/ui/skin/UI_Flat_IconCheck01a.png"),url("assets/ui/skin/UI_Flat_FrameSlot02b.png");background-size:26px auto,100% 100%}
#mm-options .mm-slider{width:170px;height:20px;clip-path:none;background:none;border-style:solid;border-width:8px 8px 10px 8px;border-image:url("assets/ui/skin/UI_Flat_Bar06a.png") 4 4 5 4 fill/8px 8px 10px 8px stretch;image-rendering:pixelated;box-sizing:border-box}
#mm-options .mm-slider i{top:0;bottom:0;margin:-3px 0 -3px -3px;background:url("assets/ui/skin/UI_Flat_BarFill01e.png") 0 0/100% 100% no-repeat;image-rendering:pixelated;max-width:calc(100% + 6px)}
#mm-options .mm-slider::after{content:'';position:absolute;top:-6px;bottom:-6px;width:10px;left:var(--v,0);margin-left:-5px;background:url("assets/ui/skin/UI_Flat_Handle03a.png") center/100% 100% no-repeat;image-rendering:pixelated;display:none}
#mm-options .mm-opt2.focus .mm-slider{filter:none}
#mm-options .mm-opt2.focus .mm-slider i{background:url("assets/ui/skin/UI_Flat_BarFill01c.png") 0 0/100% 100% no-repeat}

/* main-menu stat bars, and the pause / journal text field */
#mm-main .mm-stat i{height:10px;background:url("assets/ui/skin/UI_Flat_Bar06a.png") 0 0/100% 100% no-repeat;image-rendering:pixelated;padding:0}
#mm-main .mm-stat i u{background:url("assets/ui/skin/UI_Flat_BarFill01a.png") 0 0/100% 100% no-repeat;image-rendering:pixelated;height:60%;margin-top:20%}
.sb-save-tools input,.sb-save-tools textarea,#stormbound input[type=text],#stormbound textarea{border-style:solid;border-width:10px;border-image:url("assets/ui/skin/UI_Flat_InputField01a.png") 5 fill/10px stretch;image-rendering:pixelated;background:none;color:#14191a}

/* boon icons in the HUD sit in the pack's slot frames */
#boon-row .boon-icon{position:relative;image-rendering:pixelated}
#boon-row .boon-icon::before{content:'';position:absolute;inset:-4px;z-index:-1;background:url("assets/ui/skin/UI_Flat_FrameSlot02a.png") 0 0/100% 100% no-repeat;image-rendering:pixelated}

/* banners: chapter and notification titles */
#sb-toast,#notification strong,#objective-alert{image-rendering:auto}
#sb-toast{border-style:solid;border-width:12px 20px;border-image:url("assets/ui/skin/UI_Flat_Banner01a.png") 6 10 fill/12px 20px stretch;background:none;box-shadow:none;image-rendering:pixelated;color:#14191a}

/* merit gem (Legacy Collection gems sheet, yellow set) and the wildlife field notes */
.gem{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;background:url("assets/ui/gems.png") -448px -32px/848px 176px no-repeat;image-rendering:pixelated;transform:scale(1.25)}
.opus-bestiary .wl-pic{display:block;width:100%;height:150px;margin:8px 0;background-repeat:no-repeat;background-position:0 50%;background-size:cover;image-rendering:pixelated}
.opus-bestiary .wl-pic{aspect-ratio:auto}
.opus-bestiary article.unseen .wl-pic{filter:brightness(0) opacity(.45)}
.opus-bestiary article.unseen{opacity:.8}