/* Separate parchment leaves keep the landscape visible around the guide. */
#hud .modal-shade:has(.skill-guide-panel) { background: #18201742; backdrop-filter: none; }
#hud .skill-guide-panel {
  --guide-paper: repeating-linear-gradient(3deg, #87683d05 0 1px, transparent 1px 4px), linear-gradient(100deg, #c6b18b, #e0ceaa 7%, #dfcba6 85%, #c9b58e);
  width: 760px; height: min(570px, calc(100dvh - 64px)); max-width: calc(100vw - 48px);
  padding: 0; border: 0; border-image: none; background: none; box-shadow: none; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  translate: clamp(0px, calc((100vw - 840px) / 2), 36px) -16px;
}
#hud .skill-guide-panel::before { display: none; }
#hud .skill-guide-panel > header { position: relative; flex-shrink: 0; margin: 0 204px 18px 0; padding: 12px 22px 14px; justify-content: center; text-align: center; border: 0; background: var(--guide-paper); box-shadow: inset 7px 0 #f2e3c43b, inset -7px 0 #92734425, 0 4px 0 #79613b55; }
#hud .skill-guide-panel > header::before, #hud .skill-guide-panel > header::after { content: ''; position: absolute; width: 11px; inset: -4px auto -5px -9px; background: linear-gradient(90deg, #af966d, #decca7 70%, #b49b72); clip-path: polygon(0 0, 100% 3%, 100% 96%, 0 100%, 25% 76%, 14% 22%); }
#hud .skill-guide-panel > header::after { left: auto; right: -9px; transform: rotate(180deg); }
#hud .skill-guide-panel > header p { margin: 0 0 6px; font-size: 10px; letter-spacing: 3px; color: #705533; }
#hud .skill-guide-panel > header h2 { color: #543b1b; font-size: clamp(28px, 3.5vw, 36px); line-height: 1.1; font-variant: normal; }
#hud .skill-guide-panel #close-panel { position: absolute; top: 9px; right: -202px; margin: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 3px double #8b7048; background: #d8c296; box-shadow: inset 0 0 0 2px #ecd8ae70, 0 2px 5px #211b1533; }
#hud .skill-guide-panel #close-panel .icon { width: 28px; height: 28px; stroke-width: 2.5; }
#hud .skill-guide-panel #close-panel:hover { background: #efdcaf; }
#hud .skill-guide-panel > .panel-body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; flex: 1; min-height: 0; overflow: visible; padding: 0; background: none; }
#hud .skill-guide-panel > footer { display: none; }
#hud .guide-page { display: flex; flex-direction: column; min-height: 0; padding: 16px 18px 22px; background: var(--guide-paper); border-inline: 5px ridge #d5bf94; box-shadow: 0 5px 15px #1d1a1726, inset 0 0 28px #8c693118; clip-path: polygon(0 0, 16% 1%, 17% 0, 47% 1%, 69% 0, 99% 1%, 100% 28%, 99.5% 73%, 100% 98%, 95% 100%, 81% 98.5%, 59% 99%, 35% 98%, 12% 100%, 0 98%, .5% 62%); }
#hud .guide-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 14px; margin-bottom: 4px; border-bottom: 3px double #9c7c485c; }
#hud #guide-section-name { font-size: 21px; color: #65441f; }
#hud .guide-page-heading small { font-size: 8px; letter-spacing: 1.6px; text-align: right; }
#hud #guide-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #9c8050 #bba37a44; scrollbar-width: auto; padding-right: 10px; }
#hud .guide-story { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 18px 0 4px; }
#hud .guide-story > .icon { width: 52px; height: 52px; object-fit: contain; }
#hud .guide-story h3, #hud .guide-entry h3 { margin: 0 0 7px; color: #594021; font-size: 18px; font-weight: 500; }
#hud .guide-story p, #hud .guide-entry p { margin: 0; font-size: 15px; line-height: 1.5; color: #4c3e2b; }
#hud .guide-note { font-size: 14px; line-height: 1.55; margin: 16px 0 6px; color: #665035; }
#hud .guide-entries { list-style: none; margin: 0; padding: 0; }
#hud .guide-entry { display: grid; grid-template-columns: 36px 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #96774633; }
#hud .guide-entry:last-child { border-bottom: 0; }
#hud .guide-entry > .icon { width: 48px; height: 48px; object-fit: contain; }
#hud .guide-entry h3 { font-size: 18px; margin-bottom: 4px; }
#hud .guide-entry p { font-size: 13px; }
#hud .guide-requirement { text-align: center; }
#hud .guide-requirement b { display: block; font-size: 26px; font-weight: 400; line-height: 1.2; }
#hud .guide-requirement small { font-size: 8px; letter-spacing: 1px; }
#hud .guide-entry .guide-availability { display: block; color: #4d6034; font-size: 11px; margin-top: 6px; }
#hud .guide-entry.locked .guide-availability { color: #865336; }
#hud .guide-sidebar { min-height: 0; overflow-y: auto; padding: 6px 4px; }
#hud .guide-sections { position: relative; display: flex; flex-direction: column; padding: 10px 7px; border-block: 7px ridge #d9c49b; background: var(--guide-paper); box-shadow: 0 3px 6px #30261426; }
#hud .guide-sections button { font: 18px Georgia, serif; padding: 10px 6px; text-align: center; border: 1px solid transparent; }
#hud .guide-sections button:hover { background: #f5e6c24a; }
#hud .guide-sections button[aria-selected='true'] { background: #ad875a26; border-color: #95734266; color: #793f28; box-shadow: inset 3px 0 #87522e; }
#hud .guide-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 4px; text-align: center; }
#hud .guide-emblem { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; border: 4px double #d0bb84c7; background: radial-gradient(circle, #e6d4accc, #c0a479a3); box-shadow: 0 4px 16px #151e2033; margin-bottom: 7px; }
#hud .guide-emblem > .icon { width: 66px; height: 66px; }
#hud .skill-guide-panel .guide-progress > strong { font-size: 22px; font-weight: 400; color: #ffedc8; text-shadow: 0 1px 3px #302717; }
#hud .skill-guide-panel .guide-progress > strong small { font-size: 14px; color: #f5e5be; }
#hud .skill-guide-panel .guide-progress > span, #hud .skill-guide-panel .guide-progress > small, #hud .skill-guide-panel .guide-close-hint { color: #ffedc8; text-shadow: 0 1px 3px #302717, 0 0 5px #302717; }
#hud .skill-guide-panel .guide-progress > span { font-size: 14px; }
#hud .skill-guide-panel .guide-progress > small { font-size: 12px; }
#hud .guide-progress .skill-progress { width: 100%; height: 8px; }
#hud .skill-guide-panel .guide-close-hint { font-size: 11px; text-align: center; margin-top: 17px; }
#hud .skill-guide-panel :is(button, [tabindex]):focus-visible { outline: 2px solid #79472c; outline-offset: 2px; }
#hud .skill-tile:hover { background: #eee0be85; border-color: #88633f; }
@media (max-width: 680px) {
  #hud .skill-guide-panel { height: min(570px, calc(100dvh - 40px)); max-width: calc(100vw - 36px); translate: 0 -6px; }
  #hud .skill-guide-panel > header { margin: 0 55px 16px 0; padding: 12px; }
  #hud .skill-guide-panel #close-panel { right: -55px; width: 40px; height: 40px; }
  #hud .skill-guide-panel > .panel-body { display: flex; flex-direction: column-reverse; gap: 12px; }
  #hud .guide-sidebar { flex-shrink: 0; padding: 0; overflow: visible; }
  #hud .guide-sections { flex-direction: row; padding: 4px; border-block-width: 4px; }
  #hud .guide-sections button { flex: 1; font-size: 14px; padding: 9px 4px; }
  #hud .guide-progress, #hud .skill-guide-panel .guide-close-hint { display: none; }
  #hud .guide-page { flex: 1; padding: 16px 12px 24px; }
  #hud .guide-page-heading small { display: none; }
  #hud .guide-story { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-top: 18px; }
  #hud .guide-story > .icon { width: 44px; height: 44px; }
  #hud .guide-story p { font-size: 14px; }
  #hud .guide-entry { grid-template-columns: 32px 42px minmax(0, 1fr); gap: 8px; }
  #hud .guide-entry > .icon { width: 42px; height: 42px; }
  #hud .guide-entry h3, #hud .guide-story h3 { font-size: 18px; }
}

#hud .guide-weapon-group { border-bottom: 1px solid #96774655; }
#hud .guide-weapon-group summary { cursor: pointer; padding: 14px 4px; color: #594021; font: 19px Georgia, serif; }
#hud .guide-weapon-group[open] summary { border-bottom: 1px solid #96774633; }
#hud .guide-production-category > summary { display:list-item; }
#hud .guide-production-category > summary small { display:block;margin:5px 0 0 18px;color:#7b6240;font:11px Georgia,serif; }
#hud .guide-production-segment h4 { margin:19px 0 3px;padding:8px 0;border-bottom:2px solid #96774655;color:#624526;font:16px Georgia,serif; }
#hud .guide-production-stage { display:block;margin-bottom:7px;color:#805936;font-size:10px;letter-spacing:.04em;text-transform:uppercase; }
#hud .guide-production-materials { display:block;color:#493921; }
#hud .guide-production-metrics, #hud .guide-production-equipment { display:block;margin-top:7px;font-size:12px;color:#67543a; }
#hud .guide-production-future { display:block;margin-top:7px;padding-left:8px;border-left:2px solid #96774680;color:#855631;font-size:12px; }
#hud .guide-armor-pieces { list-style: none; margin: -.25rem 0 .8rem; padding: 0 .8rem; }
#hud .guide-armor-pieces summary { cursor: pointer; color: #63513c; padding: .5rem 0; }
#hud .guide-prayer-open { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0;padding:9px;border:1px solid #b38c55;background:#9e754a20;color:#735332;font:14px Georgia,serif;cursor:pointer; }
.guide-prayer-open .icon { width:29px;height:29px; }