/* Field guide: native modal focus containment, readable parchment cards. */
#field-guide{width:min(900px,94vw);max-width:94vw;height:min(740px,90dvh);max-height:90dvh;padding:24px;border:2px solid #a7ac78;background:#203b30;color:#f3e8c6;font-family:var(--font-ui);font-size:18px;box-sizing:border-box;overflow:auto}
#field-guide::backdrop{background:#071b15cc}
#field-guide header{display:flex;align-items:center;justify-content:space-between;gap:16px}
#field-guide h2{font-family:var(--font-nature);font-size:38px;margin:0;font-weight:400}
#field-guide h3{font-family:var(--font-ui);font-size:22px;margin:0;font-weight:400}
#field-guide button{font-family:var(--font-ui);font-size:17px;padding:10px 14px;color:#f3e8c6}
#field-guide :focus-visible{outline:3px solid #f4d885;outline-offset:3px}
.guide-meta{color:#cbd5ad;font-size:16px}
.guide-entry{display:flex;gap:18px;padding:18px 0;border-top:1px solid #8eaa7966}
.guide-entry p{line-height:1.5;margin:8px 0 0}.guide-entry svg{width:70px;height:100px;flex-shrink:0}
@media(max-width:520px){#field-guide{padding:16px}#field-guide h2{font-size:30px}.guide-entry svg{width:45px;height:70px}}

/* One vertical menu; gold markers float outside the current choice. */
#overlay:has(.pause-menu){position:fixed;z-index:100;overflow:auto;padding:20px;align-items:flex-start}
.overlay-inner.pause-menu{width:min(440px,100%);max-width:440px;margin:auto;padding:22px 48px;text-shadow:none}
#overlay .pause-menu button{text-shadow:none}
.learn-menu{max-height:calc(100dvh - 40px);overflow-y:auto}
.pause-menu .pause-guide-links{display:flex;flex-direction:column;gap:8px;margin:20px 0 0}
.pause-guide-links button{position:relative;display:block;width:100%;min-height:42px;padding:9px 12px;font-family:var(--font-ui);font-size:20px;line-height:1.2}
.pause-guide-links button::before,.pause-guide-links button::after{content:"";position:absolute;top:50%;width:13px;height:18px;background:#f1cc69;filter:drop-shadow(0 0 5px #e8b94e77);opacity:0;pointer-events:none;transform:translateY(-50%)}
.pause-guide-links button::before{left:-29px;clip-path:polygon(0 0,100% 50%,0 100%)}
.pause-guide-links button::after{right:-29px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.pause-guide-links button:is(:hover,:focus)::before,.pause-guide-links button:is(:hover,:focus)::after{opacity:1;animation:pause-marker-float 1.6s ease-in-out infinite alternate}
.pause-guide-links:has(button:hover) button:not(:hover)::before,.pause-guide-links:has(button:hover) button:not(:hover)::after{opacity:0;animation:none}
.pause-guide-links button:is(:hover,:focus){color:#ffe5a2}
.pause-menu-break{width:100%;border:0;border-top:1px solid #baa76b77;margin:15px 0 8px}
.pause-menu #resume{font-family:var(--font-event);font-size:36px;min-height:62px;margin:0;padding:12px 18px}
.sound-menu-controls{margin:22px auto 8px;text-align:left;max-width:280px;padding:14px 16px;background:#1b3328;border:2px solid #65704b66}
.sound-menu-controls label{display:block;margin:0 0 10px;color:#e4e8c8;font-size:16px}
.sound-menu-controls .checkbox{display:flex;align-items:center;gap:9px}
.sound-menu-controls input[type=range]{display:block;width:100%;accent-color:var(--accent)}
.sound-menu-controls output{float:right;color:var(--accent)}
.visual-menu .sound-menu-controls{max-width:340px;margin-top:12px;padding:12px 16px}
.visual-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:13px 0}
.sound-menu-controls .visual-slider{display:block;min-width:0;margin:0;font-size:13px}
.visual-slider span{display:inline-block;max-width:calc(100% - 40px)}
.visual-slider input{margin-top:4px}
.visual-menu .visual-help{margin:2px 0 12px;font-size:11px;line-height:1.35;color:#b8c6a9}
.sound-menu-controls .haze-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 12px;font-size:13px}
#vapor-haze-color{width:56px;height:30px;padding:2px;border:1px solid #a4b382;border-radius:4px;background:#172b22;cursor:pointer}
#vapor-reset{width:100%;padding:7px 10px}
@media(max-width:420px){.visual-sliders{grid-template-columns:1fr}}
.sound-menu-copy,.sound-menu-note{font-size:14px!important}
.sound-menu-note{margin:14px 0 0;color:#b8c6a9!important}
@keyframes pause-marker-float{from{transform:translateY(-50%) scale(.92)}to{transform:translateY(-50%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.pause-guide-links button:is(:hover,:focus)::before,.pause-guide-links button:is(:hover,:focus)::after{animation:none}}
@media(max-height:660px){.overlay-inner.pause-menu{padding-top:14px;padding-bottom:14px}.pause-menu h2{font-size:28px;margin:6px 0}.pause-menu .pause-guide-links{gap:5px;margin-top:12px}.pause-guide-links button{min-height:36px;font-size:18px;padding:7px 10px}.pause-menu-break{margin:9px 0 5px}.pause-menu #resume{min-height:52px;font-size:32px}}

/* Static backdrops avoid filtering a live full-screen canvas behind a menu. */
#overlay:has(.pause-menu){backdrop-filter:none;-webkit-backdrop-filter:none;background:#10231cf5}
#overlay:has(.visual-menu){background:#10231c99}
.visual-menu{max-height:calc(100dvh - 40px);overflow-y:auto}
.pause-menu:focus{outline:none}
.pause-guide-links button,.pause-guide-links button:is(:hover,:focus,:focus-visible){border-color:transparent;border-image:none;background:none;box-shadow:none;filter:none;outline:none}
.pause-guide-links button::before,.pause-guide-links button::after{filter:none}
.guide-portrait{width:112px;height:120px;flex:0 0 112px;display:grid;place-items:center;background:#294638;border-radius:50% 50% 12px 12px;overflow:hidden}
.guide-entry .guide-portrait :is(svg,img){width:100%;height:100%;object-fit:contain}
.guide-entry .guide-portrait svg{padding:10px}
.guide-entry{content-visibility:auto;contain-intrinsic-size:auto 160px}
@media(max-width:520px){.guide-portrait{width:76px;height:86px;flex-basis:76px}}

#overlay .pause-menu #resume{color:#f1d994;font-size:34px;font-family:var(--font-ui);text-shadow:none}

#field-guide header{align-items:flex-start;gap:24px;margin-bottom:24px}
#field-guide #guide-title{font-size:clamp(38px,5vw,60px);line-height:1.12;margin:8px 0 0}
#field-guide #guide-close{flex-shrink:0;margin-top:8px}
@media(max-width:600px){#field-guide header{flex-direction:column;gap:12px}#field-guide #guide-close{margin-top:0}}

/* Compact charm reference: effects and flavor text have separate roles. */
#charm-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-size:14px}
#charm-rarity-filter{font:inherit;color:#f3e8c6;background:#203b30;border:1px solid #9aab78;padding:8px 12px}
#charm-filter-count{color:#cbd5ad;font-size:13px}
#field-guide .guide-charm{gap:16px;padding:14px 0;contain-intrinsic-size:auto 175px}
#field-guide .guide-charm h3{font-size:20px;line-height:1.2}
#field-guide .guide-charm .guide-meta{font-size:12px;margin:5px 0 9px}
#field-guide .guide-charm .guide-portrait{width:84px;height:96px;flex-basis:84px}
.charm-details{margin:0;font-size:14px;line-height:1.4}
.charm-details ul{margin:0;padding-left:17px}
.charm-details li+li{margin-top:3px}
.charm-description{color:#c4ccb7;font-size:13px}

#field-guide .charm-details .charm-affixes{color:#f3e8c6;font-size:14px;line-height:1.45}
#field-guide .charm-details .charm-description{color:#b8c3aa;font-size:12px;line-height:1.5;margin:12px 0 0}

/* Catalog pages open as a two-page field book: collection at left, notes at right. */
#field-guide.catalog-book{width:min(1180px,96vw);height:min(780px,92dvh);max-width:96vw;max-height:92dvh;padding:18px 26px 24px;overflow:hidden;border:3px solid #746340;border-radius:8px;background:
  linear-gradient(90deg,transparent 49.4%,#1b2924aa 49.5%,#b6a77855 50%,#1b2924aa 50.5%,transparent 50.6%),
  repeating-linear-gradient(0deg,#e4d6ad 0,#e4d6ad 3px,#ddcda2 4px,#e4d6ad 6px);
  color:#26352f;box-shadow:0 22px 70px #07120dcc,inset 0 0 0 3px #b29b65,inset 0 0 45px #6f5b3266;text-shadow:none}
#field-guide.catalog-book button{text-shadow:none}
#field-guide.catalog-book::backdrop{background:#07130fd9}
#field-guide.catalog-book header{height:82px;margin:0;padding:0 8px;color:#26352f;align-items:center}
#field-guide.catalog-book header>div{display:flex;align-items:baseline;gap:13px;min-width:0}
#field-guide.catalog-book #guide-title{font-size:clamp(32px,4vw,48px);margin:0;color:#26352f;text-shadow:none}
#field-guide.catalog-book header .guide-meta{color:#715f3f;text-transform:uppercase;letter-spacing:.15em;font-size:12px}
#field-guide.catalog-book #guide-close{margin:0;color:#2c3b34;background:#d7c79b;border:1px solid #81714d;box-shadow:inset 0 1px #fff3c9}
#field-guide.catalog-book #charm-filters{position:absolute;z-index:3;top:88px;left:34px;margin:0;flex-wrap:nowrap;color:#5a4d35}
#field-guide.catalog-book #charm-rarity-filter{display:inline-block;width:auto;margin:0;color:#293830;background:#e7d9ae;border-color:#8d7a51;padding:6px 10px}
#field-guide.catalog-book #charm-filter-count{color:#65573d}
#field-guide.catalog-book #guide-content{height:calc(100% - 82px);min-height:0}
.guide-book-layout{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);height:100%;min-height:0}
.guide-index{display:block;min-height:0;overflow:auto;margin:0;padding:10px 26px 34px 8px;color:inherit;font-size:initial;scrollbar-color:#86724b transparent}
.catalog-book #charm-filters:not([hidden])~#guide-content .guide-index{padding-top:58px}
.guide-book-spine{position:relative;background:linear-gradient(90deg,#6c765d,#aeb899 28%,#5d6954 50%,#aeb899 72%,#65705a);border-left:1px solid #465244;border-right:1px solid #465244;box-shadow:0 0 13px #493d2877}
.guide-book-spine::before,.guide-book-spine::after{content:"";position:absolute;left:-4px;width:44px;height:9px;background:linear-gradient(#b8c2a2,#6d7861);border:1px solid #4b5848;border-radius:2px;box-shadow:0 1px 2px #3d493c}
.guide-book-spine::before{top:16%}.guide-book-spine::after{bottom:16%}
.guide-index-group h3{margin:12px 0 8px!important;padding-bottom:5px;border-bottom:1px solid #8b785355;color:#5b4c32!important;font-family:var(--font-ui)!important;font-size:15px!important;text-transform:uppercase;letter-spacing:.12em}
.guide-index-group:first-child h3{margin-top:0!important}
.guide-index-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#field-guide .guide-index-item{min-width:0;aspect-ratio:1;padding:6px;border:1px solid #8a7958;background:#efe3bd;color:#334139;box-shadow:inset 0 0 0 2px #fbf0ce,0 2px 3px #76633b33;display:grid;place-items:center;overflow:hidden}
#field-guide .guide-index-item:is(:hover,:focus-visible),#field-guide .guide-index-item.selected{background:#d7c591;border-color:#456653;box-shadow:inset 0 0 0 2px #f8eabd,0 0 0 2px #557862}
#field-guide .guide-index-item .guide-portrait{width:100%;height:74px;display:grid;place-items:center;background:transparent;border-radius:0;overflow:hidden}
#field-guide .guide-index-item .guide-portrait :is(img,svg){width:100%;height:100%;padding:0;object-fit:contain;filter:drop-shadow(0 2px 1px #55482f44)}
.guide-index-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.guide-book-detail{min-height:0;overflow:auto;padding:12px 16px 40px 34px;color:#304139}
.guide-detail-art{height:min(260px,35vh);display:grid;place-items:center;margin:0 auto 12px}
.guide-detail-art :is(img,svg){width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px #57472955)}
.guide-detail-art .carved-charm{max-width:190px}.guide-detail-art .guide-shrine-art{max-width:200px}
.guide-book-detail h3{font-family:var(--font-nature)!important;font-size:clamp(29px,3.4vw,44px)!important;line-height:1.05;margin:4px 0 16px!important;color:#293a31}
.guide-book-detail .guide-kicker{margin:0;color:#756345;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.guide-book-detail>p:not(.guide-kicker,.guide-warning){font-size:16px;line-height:1.55;color:#3e493f}
.guide-book-detail .charm-affixes,.guide-detail-list{margin:12px 0 18px;padding:14px 18px 14px 34px;border-block:1px solid #8d7b5655;color:#263d31;font-size:15px;line-height:1.45;background:#f4e9c633}
.guide-book-detail li+li{margin-top:7px}
.guide-book-detail .charm-description{font-style:italic;color:#63583f!important}
.guide-warning{padding:10px 12px;border-left:4px solid #8d4054;background:#9c596222;color:#673345;font-size:14px;font-weight:bold}

@media(max-width:820px){
  #field-guide.catalog-book{padding:14px 16px 18px}
  #field-guide.catalog-book header{height:72px}
  #field-guide.catalog-book header>div{display:block}
  #field-guide.catalog-book header .guide-meta{display:none}
  #field-guide.catalog-book #guide-content{height:calc(100% - 72px)}
  .guide-book-layout{grid-template-columns:minmax(0,44%) 20px minmax(0,56%)}
  .guide-index{padding-right:12px}
  .guide-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-book-detail{padding-left:18px}
}

/* Hand-bound botanical folio: leather cover, layered paper and engraved specimen plates. */
#field-guide.catalog-book{border:12px solid #35473c;border-radius:18px 12px 12px 18px;background:
 radial-gradient(ellipse at 5% 0%,#8b663236,transparent 45%),
 radial-gradient(ellipse at 95% 100%,#926d3533,transparent 42%),
 linear-gradient(90deg,#c7b37e 0%,#ecdfb8 5%,#eee2c0 43%,#b6a175 49%,#7a6746 50%,#c6b382 51%,#f0e5c6 57%,#eadcb5 94%,#c6b07a 100%);
 box-shadow:0 28px 85px #020c0be6,0 0 0 1px #182b22,0 0 0 3px #9c8856,0 7px 0 3px #20362b,inset 0 0 0 1px #a79360,inset 0 0 0 4px #e0cfa1,inset 0 0 0 5px #b59e6c,inset 0 0 35px #7c603944;
 isolation:isolate;padding:16px 26px 24px}
#field-guide.catalog-book::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('assets/ui/compendium-engraving.svg') left top/330px 330px no-repeat,url('assets/ui/compendium-engraving.svg') right bottom/330px 330px no-repeat;opacity:.4}
#field-guide.catalog-book::after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:6px;border-block:1px solid #8e785955;background:repeating-linear-gradient(0deg,#a9926544 0 1px,#ede0b7 1px 2px);pointer-events:none}
#field-guide.catalog-book::backdrop{background:radial-gradient(ellipse at center,#283f32c9,#07120ff5)}
#field-guide.catalog-book header{border-bottom:1px solid #9a815a55;padding-bottom:12px;margin-bottom:0}
#field-guide.catalog-book header>div{display:block}
#field-guide.catalog-book header .guide-meta{font-size:10px;letter-spacing:.25em;color:#77613e}
#field-guide.catalog-book #guide-title{font-size:clamp(30px,3.7vw,44px);line-height:1.08}
#field-guide.catalog-book #guide-close{background:linear-gradient(100deg,#304d3e,#46634b);border:1px solid #213b2e;border-radius:3px;color:#eee0b4;font-size:12px;letter-spacing:.06em;padding:12px 16px;box-shadow:inset 0 0 0 3px #425a43,inset 0 0 0 4px #a9976155,0 3px 5px #55472c33}
.guide-book-layout{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
.guide-book-spine{background:linear-gradient(90deg,#69563b00,#74634788 30%,#d8c39288 42%,#776447 49%,#bea674 56%,#6c583a66 75%,#69563b00);border:0;box-shadow:none}
.guide-book-spine::before,.guide-book-spine::after{left:8px;width:11px;height:66px;border:0;border-radius:0;box-shadow:1px 1px 2px #57412766;background:repeating-linear-gradient(0deg,transparent 0 9px,#7e603b 9px 10px,#dcc28d 10px 12px,transparent 12px 20px);transform:rotate(-14deg)}
.guide-index{padding-top:16px;padding-right:22px;scrollbar-width:thin}
.guide-index-caption{font-size:10px;letter-spacing:.1em;color:#81704f;margin:0 0 16px}
.guide-index-group h3{display:flex;align-items:center;gap:12px;font-size:11px!important;border:0;letter-spacing:.16em;color:#6a5638!important;margin:16px 0 12px!important}
.guide-index-group h3::after{content:"";flex:1;height:3px;border-block:1px solid #aa966155}
.guide-index-grid{gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
#field-guide .guide-index-item{position:relative;border:1px solid #a18b60;border-radius:4px 9px 4px 9px;background:radial-gradient(ellipse at 45% 28%,#f8efd5cc,#d0bd8880);box-shadow:inset 0 0 0 3px #eeddb7,inset 0 0 0 4px #b09b6366,0 2px 3px #73614122;padding:10px;transition:background .18s,box-shadow .18s,transform .18s}
#field-guide .guide-index-item::before{content:"";position:absolute;inset:7px;border:1px solid #b7a17355;border-radius:50%;pointer-events:none}
#field-guide .guide-index-item.selected{background:radial-gradient(ellipse at 45% 25%,#6f855b,#354d3d);border-color:#d2b577;box-shadow:inset 0 0 0 3px #334d3c,inset 0 0 0 4px #c1ab71,0 3px 6px #35432e44}
#field-guide .guide-index-item.selected::before{border-color:#b3be8666}
#field-guide .guide-index-item.selected::after{content:"◆";position:absolute;bottom:1px;right:5px;font-size:10px;color:#e1c78c}
#field-guide .guide-index-item:hover{transform:translateY(-2px);background:#efe2ba;box-shadow:inset 0 0 0 3px #f6eccf,0 4px 8px #6c563d44}
#field-guide .guide-index-item .guide-portrait{height:100%;aspect-ratio:1;position:relative;z-index:1}
#field-guide .guide-index-item .guide-portrait :is(img,svg){filter:drop-shadow(1px 4px 2px #423a2d55)}
#field-guide .guide-book-detail{padding:14px 16px 28px 28px;scrollbar-width:thin;scrollbar-color:#9c865b transparent}
.guide-detail-art{position:relative;isolation:isolate;height:clamp(180px,29vh,235px);margin:0 0 20px;background:radial-gradient(ellipse at center,#faf2d6a0,transparent 68%)}
.guide-detail-art>img,.guide-detail-art>svg{position:relative;z-index:1;width:72%;height:85%;max-width:230px;filter:drop-shadow(2px 8px 4px #584a3655)}
.guide-specimen-ring{position:absolute;width:190px;height:190px;max-height:88%;aspect-ratio:1;border:1px solid #a18b594d;border-radius:50%;box-shadow:0 0 0 7px #e7d7ad,0 0 0 8px #a18b5933,inset 0 0 0 8px #e7d7ad,inset 0 0 0 9px #a18b5933;transform:rotate(-12deg);background:repeating-conic-gradient(from 0deg,#a18b5922 0deg 1deg,transparent 1deg 30deg)}
.guide-specimen-ring::before,.guide-specimen-ring::after{content:"✦";position:absolute;top:43%;left:-19px;color:#958054;font-size:17px;background:#e8dab3}
.guide-specimen-ring::after{left:auto;right:-19px}
.guide-specimen-label{position:absolute;bottom:-3px;font-size:9px;letter-spacing:.2em;color:#947e53}
.guide-book-detail .guide-kicker{font-size:10px;line-height:1.65;letter-spacing:.08em;color:#786344}
.guide-book-detail h3{font-size:clamp(30px,3vw,40px)!important;margin:8px 0!important}
.guide-flourish{display:flex;align-items:center;gap:10px;color:#9a8151;font-size:12px;margin:8px 0 15px}
.guide-flourish::before,.guide-flourish::after{content:"";height:3px;flex:1;border-block:1px solid #a18b5944}
.guide-book-detail .charm-affixes,.guide-detail-list{background:#fcf5df55;border:1px solid #a68d5944;border-left:3px solid #78805c;border-radius:0 8px 8px 0;font-size:13px;padding:12px 15px 12px 27px}
.guide-book-detail>p:not(.guide-kicker,.guide-warning){font-size:14px;line-height:1.65}
.guide-book-detail .carved-charm .charm-footprint,.guide-index-item .carved-charm .charm-footprint{display:none}
@media(max-width:820px){.guide-index-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-book-layout{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.guide-specimen-ring{width:150px;height:150px}.guide-index-caption{font-size:9px}#field-guide.catalog-book #charm-filters{left:22px;gap:6px;font-size:11px}#field-guide.catalog-book #charm-filter-count{font-size:10px}}
@media(max-width:560px){#field-guide.catalog-book{border-width:7px;padding:12px}#field-guide.catalog-book header{gap:10px;flex-direction:row;align-items:center;min-height:90px}#field-guide.catalog-book #guide-title{font-size:28px}#field-guide.catalog-book #guide-close{max-width:108px;font-size:10px;padding:9px}#field-guide.catalog-book #charm-filters{flex-wrap:wrap}.guide-book-layout{grid-template-columns:1fr}.guide-index-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#field-guide .guide-index-item{grid-template-rows:auto;padding:8px}#field-guide .guide-index-item .guide-portrait{height:100%}#field-guide .guide-book-detail{padding:18px 8px}.guide-specimen-ring{width:150px;height:150px}}
@media(prefers-reduced-motion:reduce){#field-guide .guide-index-item{transition:none}#field-guide .guide-index-item:hover{transform:none}}
@media(max-width:560px){
  #field-guide.catalog-book{overflow:auto;height:94dvh;padding:12px;background:radial-gradient(ellipse at top left,#c9b58255,transparent 65%),#eadfbc}
  #field-guide.catalog-book header{height:auto;min-height:92px;align-items:flex-start}
  #field-guide.catalog-book #guide-close{font-size:13px;padding:8px}
  #field-guide.catalog-book #charm-filters{position:static;margin:0 0 10px}
  #field-guide.catalog-book #guide-content{height:auto;min-height:calc(94dvh - 130px)}
  .catalog-book #charm-filters:not([hidden])~#guide-content .guide-index{padding-top:8px}
  .guide-book-layout{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(210px,38vh) auto;height:auto}
  .guide-index{padding:8px 4px 16px;overflow:auto}
  .guide-book-spine{display:none}
  .guide-index-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #field-guide .guide-index-item{grid-template-rows:auto;font-size:10px}
  #field-guide .guide-index-item .guide-portrait{height:100%}
  .guide-book-detail{overflow:visible;border-top:5px double #88744e;padding:20px 8px 30px}
  .guide-detail-art{height:180px}
}

/* Every reference chapter shares the folio, with page turns anchored at its outer edges. */
#field-guide.catalog-book .guide-book-layout{height:calc(100% - 52px)}
#field-guide .guide-section-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;margin:0;padding:6px 0 0;border-top:1px solid #9a815a55;color:#6b593b}
#field-guide .guide-section-nav button{display:flex;align-items:center;gap:10px;min-height:44px;max-width:43%;padding:6px 10px;background:transparent;border:0;border-radius:3px;box-shadow:none;color:#665336;font-size:11px;line-height:1.3;text-align:left}
#field-guide .guide-section-nav button:last-child{text-align:right;justify-content:flex-end}
#field-guide .guide-section-nav button:hover{background:#c5ae7440;color:#2d4937}
.guide-page-triangle{display:block;flex:0 0 18px;width:18px;height:24px;background:#54734b;clip-path:polygon(100% 0,0 50%,100% 100%);filter:drop-shadow(0 1px 1px #4c3c26)}
[data-guide-turn="1"] .guide-page-triangle{transform:rotate(180deg)}
.guide-chapter-count{flex-shrink:0;font-size:10px;letter-spacing:.12em;color:#8e7952}
.guide-lessons .guide-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#field-guide .guide-lessons .guide-index-item{aspect-ratio:auto;grid-template-rows:76px auto;gap:8px;min-height:124px}
#field-guide .guide-lessons .guide-index-item .guide-portrait{height:76px;aspect-ratio:auto}
#field-guide .guide-lessons .guide-index-item .guide-portrait :is(img,svg){width:76px;height:76px;max-height:76px;min-height:0;object-fit:contain}
.guide-lessons .guide-index-name{position:static;clip:auto;width:auto;height:auto;white-space:normal;margin:0;font-size:11px;line-height:1.4;color:#4e5038}
.guide-lessons .selected .guide-index-name{color:#f1e5bd}
.guide-lessons .selected:hover .guide-index-name{color:#354c38}
#field-guide .guide-lessons .guide-detail-art{height:150px}
#field-guide .guide-lessons .guide-detail-art>img{width:125px;height:125px;max-height:125px;min-height:0;align-self:start}
.guide-lessons .guide-specimen-ring{width:125px;height:125px}
.guide-lessons .charm-description{font-style:normal}
#field-guide .guide-tutorial-link{width:100%;margin:0 0 14px;padding:10px 12px;border:1px solid #8a8357;color:#3f5b40;background:#bcc39444;font-size:11px;line-height:1.4}
@media(max-width:560px){#field-guide.catalog-book .guide-book-layout{height:auto}.guide-section-nav{position:sticky;bottom:0;z-index:4;background:#eadfbc}#field-guide .guide-section-nav button{font-size:9px;padding:4px;gap:6px}.guide-page-triangle{flex-basis:14px;width:14px;height:20px}#field-guide .guide-lessons .guide-index-item{grid-template-rows:52px auto;min-height:90px}#field-guide .guide-lessons .guide-index-item .guide-portrait{height:52px}.guide-lessons .guide-index-name{font-size:9px}}