/* One vertical menu; selection markers come from the shared woodland theme. */
#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-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-adjustments summary{cursor:pointer;color:var(--accent);padding:6px 0;font-size:14px}
.visual-adjustments summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#visual-save:empty{display:none}
#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}
@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}
#overlay .pause-menu #resume{color:#f1d994;font-size:34px;font-family:var(--font-ui);text-shadow:none}

/* A single field-book pattern: chapter tabs, specimen grid, readable notes. */
#field-guide.catalog-book{
  --guide-ink:#293e31;--guide-muted:#68583e;--guide-paper:#eee1bd;
  width:min(1180px,96vw);max-width:96vw;height:min(800px,92dvh);max-height:92dvh;
  box-sizing:border-box;padding:18px 26px 12px;border:10px solid #35473c;border-radius:15px 10px 10px 15px;
  color:var(--guide-ink);font:11px/1.8 var(--font-ui);text-shadow:none;overflow:hidden;
  background:radial-gradient(ellipse at top left,#ae88532b,transparent 55%),linear-gradient(90deg,#d2bd8d,#eee1bd 7%,#eee1bd 46%,#c3ac7d 50%,#f3e7c8 55%,#eee1bd 94%,#d2bd8d);
  box-shadow:0 24px 70px #020c0bcc,0 0 0 2px #ac935e,0 6px 0 2px #20362b,inset 0 0 0 1px #a79360,inset 0 0 0 4px #e0cfa1;
  isolation:isolate;
}
#field-guide.catalog-book[open]{display:flex;flex-direction:column}
#field-guide.catalog-book::backdrop{background:radial-gradient(ellipse at center,#213c2dc9,#07120ff0)}
#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/300px no-repeat,url('assets/ui/compendium-engraving.svg') right bottom/300px no-repeat;opacity:.16}
#field-guide.catalog-book header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 12px}
#field-guide.catalog-book #guide-title{margin:0;color:var(--guide-ink);font:400 clamp(32px,4vw,46px)/1.1 var(--font-nature);text-shadow:none}
#field-guide.catalog-book button{font-weight:400;text-shadow:none;cursor:pointer;border-image:none;filter:none}
#field-guide.catalog-book #guide-close{display:flex;align-items:center;gap:12px;min-height:40px;padding:7px 14px;border:1px solid #6b7652;border-radius:4px;background:#354f3d;color:#f8eaca;font:11px/1.6 var(--font-ui);box-shadow:inset 0 0 0 3px #4b6245}
#field-guide.catalog-book kbd{font:9px/1.6 var(--font-ui);opacity:.8}
#field-guide.catalog-book :focus-visible{outline:3px solid #426e51;outline-offset:3px}
#field-guide.catalog-book #guide-close:focus-visible{outline-color:#9d672e}
#guide-chapters{display:flex;flex-shrink:0;gap:4px;border-bottom:2px solid #7b6948;margin:0 0 12px;padding:0 4px}
#field-guide.catalog-book #guide-chapters button{flex:1;min-width:0;min-height:44px;padding:8px 6px;border:1px solid #aa9263;border-bottom:0;border-radius:6px 6px 0 0;background:#d5c297;color:#534a32;font:400 19px/1.2 var(--font-nature);white-space:nowrap;box-shadow:inset 0 2px #fff1c566}
#field-guide.catalog-book #guide-chapters button[aria-selected=true]{background:#354f3d;color:#f6e4b7;border-color:#354f3d;box-shadow:inset 0 2px #90a07166}
#field-guide.catalog-book #guide-chapters button:hover{background:#496047;color:#fff0c9}
#charm-filters{display:flex;align-items:center;flex-shrink:0;gap:12px;margin:0 4px 12px;color:var(--guide-muted);font:10px/1.8 var(--font-ui)}
#charm-filters[hidden]{display:none}
#charm-rarity-filter{width:auto;padding:7px 10px;border:1px solid #9b875e;border-radius:3px;color:var(--guide-ink);background:#f6eacb;font:11px/1.7 var(--font-ui)}
#charm-filter-count{margin-left:auto;font-size:10px}
#guide-content{display:flex;flex-direction:column;flex:1;min-height:0;outline-offset:-3px!important}
.guide-book-layout{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.04fr);flex:1;min-height:0}
.guide-index{overflow:auto;min-height:0;padding:4px 18px 20px 4px;scrollbar-width:thin;scrollbar-color:#94805a transparent;scroll-padding:6px}
.guide-index-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:var(--guide-muted);font-size:10px;min-height:32px}
.guide-index-group h3{display:flex;align-items:center;gap:12px;margin:18px 0 10px;color:var(--guide-muted);font:400 11px/1.8 var(--font-ui)}
.guide-index-group:first-child h3{margin-top:4px}
.guide-index-group h3::after{content:'';flex:1;height:1px;background:#a18b5955}
.guide-index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
#field-guide.catalog-book .guide-index-item{position:relative;display:grid;grid-template-rows:auto minmax(2.6em,auto);align-content:start;gap:4px;min-width:0;padding:7px 5px 8px;border:1px solid #a18b60;border-radius:4px 8px 4px 8px;background:radial-gradient(ellipse at 45% 28%,#f8efd5cc,#d0bd8866);color:#374331;box-shadow:inset 0 0 0 2px #eeddb7,0 2px 3px #73614122;font:10px/1.7 var(--font-ui);transition:background .12s,box-shadow .12s}
#field-guide.catalog-book .guide-index-item.selected{background:radial-gradient(ellipse at 45% 25%,#647c53,#354d3d);color:#fff0c9;border-color:#c4a968;box-shadow:inset 0 0 0 2px #354d3d,inset 0 0 0 3px #c1ab71,0 2px 4px #35432e33}
#field-guide.catalog-book .guide-index-item:hover:not(:disabled):not([aria-disabled="true"]){background:#e8d6a7;box-shadow:inset 0 0 0 2px #f6eccf,0 2px 5px #6c563d44}
#field-guide.catalog-book .guide-index-item.selected:hover:not(:disabled):not([aria-disabled="true"]){background:#496047;color:#fff0c9}
#field-guide.catalog-book .guide-portrait{display:grid;place-items:center;width:100%;height:clamp(52px,9vh,80px);background:none;overflow:hidden;pointer-events:none}
#field-guide.catalog-book .guide-portrait :is(img,svg){display:block;width:100%;height:100%;max-height:130px;object-fit:contain;filter:drop-shadow(1px 3px 2px #423a2d44)}
.guide-index-name{display:block;text-align:center;overflow-wrap:anywhere}
.guide-book-spine{position:relative;background:linear-gradient(90deg,transparent,#74634755 30%,#d8c39288 42%,#77644788 49%,#bea674 56%,#6c583a55 75%,transparent)}
.guide-book-spine::before,.guide-book-spine::after{content:'';position:absolute;left:6px;width:11px;height:65px;background:repeating-linear-gradient(0deg,transparent 0 9px,#7e603b 9px 10px,#dcc28d 10px 12px,transparent 12px 20px);transform:rotate(-14deg)}
.guide-book-spine::before{top:16%}.guide-book-spine::after{bottom:16%}
#field-guide.catalog-book .guide-book-detail{min-height:0;overflow:auto;padding:8px 8px 24px 24px;scrollbar-width:thin;scrollbar-color:#94805a transparent;outline-offset:-3px;overflow-wrap:break-word}
.guide-detail-heading{display:flex;align-items:center;gap:20px;border-bottom:3px double #a18b5966;padding:0 0 16px;margin-bottom:18px}
.guide-detail-heading>div:last-child{flex:1;min-width:0}
.guide-detail-art{display:grid;place-items:center;position:relative;isolation:isolate;flex:0 0 140px;width:140px;height:150px;background:radial-gradient(ellipse at center,#faf2d6a0,transparent 68%)}
.guide-detail-art>img,.guide-detail-art>svg{z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 5px 3px #584a3644)}
.guide-specimen-ring{position:absolute;width:120px;height:120px;border:1px solid #a18b594d;border-radius:50%;box-shadow:0 0 0 6px #e7d7ad66,0 0 0 7px #a18b5933;background:repeating-conic-gradient(#a18b591a 0deg 1deg,transparent 1deg 30deg)}
#field-guide.catalog-book .guide-book-detail h3{margin:6px 0 0;color:var(--guide-ink);font:400 clamp(29px,3vw,40px)/1.12 var(--font-nature)}
.guide-kicker{margin:0;color:var(--guide-muted);font:10px/1.8 var(--font-ui)}
.guide-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin:0 0 20px;padding:14px 0;border-bottom:1px solid #a18b5955;font-variant-numeric:tabular-nums}
.guide-facts dt{color:var(--guide-muted);font-size:10px}
.guide-facts dd{margin:2px 0 0;color:#294735;font-size:13px;line-height:1.65}
#field-guide.catalog-book .charm-description{margin:0 0 18px;color:#354333;font:12px/1.9 var(--font-ui)}
#field-guide.catalog-book .guide-book-detail .charm-affixes,#field-guide.catalog-book .guide-detail-list{margin:0 0 18px;padding:0 0 0 20px;color:#354333;font:11px/1.9 var(--font-ui)}
#field-guide.catalog-book .guide-book-detail li+li{margin-top:10px}
#field-guide.catalog-book .guide-stat-note{margin:0;color:var(--guide-muted);font:10px/1.8 var(--font-ui)}
.guide-warning{padding:10px 12px;border-left:3px solid #985342;background:#9c59621a;color:#743c2f;font:11px/1.9 var(--font-ui)}
.guide-controls{margin:0 0 20px;font:11px/1.8 var(--font-ui)}
.guide-controls>div{display:grid;grid-template-columns:minmax(100px,.9fr) minmax(0,1.2fr);align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #a18b5944}
.guide-controls>div:first-child{padding-top:0}
.guide-controls dt{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.guide-controls dd{margin:0;color:var(--guide-ink)}
#field-guide.catalog-book .guide-controls kbd{display:inline-block;max-width:100%;padding:5px 7px;border:1px solid #9b875e;border-bottom-width:2px;border-radius:3px;background:#f6eacb;color:#354f3d;font:9px/1.6 var(--font-ui);opacity:1;overflow-wrap:break-word}
.guide-detail-art .charm-footprint,.guide-index-item .charm-footprint{display:none}
#field-guide.catalog-book .guide-section-nav{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:8px 0 0;padding:6px 0 0;border-top:1px solid #9a815a55;color:var(--guide-muted)}
#field-guide.catalog-book .guide-section-nav button{display:flex;align-items:center;gap:10px;min-height:38px;max-width:43%;padding:5px 8px;border:0;border-radius:3px;background:none;color:#4e573b;box-shadow:none;font:11px/1.7 var(--font-ui);text-align:left}
#field-guide.catalog-book .guide-section-nav button:last-child{text-align:right;justify-content:flex-end}
#field-guide.catalog-book .guide-section-nav button:hover{background:#c5ae7433;color:#2d4937}
.guide-page-triangle{display:block;flex:0 0 12px;width:12px;height:18px;background:#54734b;clip-path:polygon(100% 0,0 50%,100% 100%)}
[data-guide-turn="1"] .guide-page-triangle{transform:rotate(180deg)}
.guide-chapter-count{flex-shrink:0;font-size:10px;color:var(--guide-muted)}
.guide-lessons .guide-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#field-guide.catalog-book .guide-lessons .guide-portrait{height:76px;aspect-ratio:auto}
#field-guide.catalog-book .guide-lessons .guide-portrait :is(img,svg){width:76px;height:76px}
@media(max-width:900px){
  #field-guide.catalog-book{padding:14px 18px 10px}
  #field-guide.catalog-book #guide-chapters button{font-size:17px}
  .guide-index-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
  #field-guide.catalog-book .guide-index-item{font-size:9px}
  .guide-book-layout{grid-template-columns:minmax(0,1fr) 18px minmax(0,1.15fr)}
  .guide-index{padding-right:12px}
  #field-guide.catalog-book .guide-book-detail{padding-left:16px}
  .guide-detail-heading{display:block}
  .guide-detail-art{width:110px;height:110px;float:right;margin:0 0 8px 10px}
  .guide-specimen-ring{width:90px;height:90px}
  .guide-detail-heading::after{content:'';display:block;clear:both}
  .guide-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  #guide-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px 3px 0}
  #field-guide.catalog-book #guide-chapters button{white-space:normal}
}
@media(max-width:600px){
  #field-guide.catalog-book{width:96vw;height:94dvh;max-height:94dvh;padding:12px 12px 6px;border-width:6px;background:radial-gradient(ellipse at top left,#ae88532b,transparent 55%),#eee1bd}
  #field-guide.catalog-book #guide-title{font-size:32px}
  #field-guide.catalog-book header{padding-bottom:10px}
  #field-guide.catalog-book #guide-close{padding:7px 10px;font-size:10px;gap:6px}
  #guide-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-bottom:8px;padding:3px 3px 0}
  #field-guide.catalog-book #guide-chapters button{padding:7px 3px;font-size:17px;min-height:38px;white-space:normal}
  #charm-filters{gap:6px;font-size:9px;margin-bottom:8px}
  #charm-rarity-filter{font-size:10px;padding:6px}
  #charm-filter-count{font-size:9px}
  .guide-book-layout{grid-template-columns:1fr;grid-template-rows:minmax(120px,38%) minmax(0,1fr);gap:10px}
  .guide-book-spine{display:none}
  .guide-index{padding:4px 4px 8px}
  .guide-index-heading{margin-bottom:8px;min-height:30px}
  .guide-index-grid{grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:7px}
  #field-guide.catalog-book .guide-portrait{height:56px}
  #field-guide.catalog-book .guide-index-item{font-size:9px;padding:5px 3px 6px}
  #field-guide.catalog-book .guide-book-detail{border-top:3px double #a18b5966;padding:14px 6px 24px}
  .guide-detail-heading{display:flex;gap:12px;padding-bottom:12px;margin-bottom:12px}
  .guide-detail-art{float:none;flex-basis:90px;width:90px;height:95px;margin:0}
  .guide-specimen-ring{width:76px;height:76px}
  #field-guide.catalog-book .guide-book-detail h3{font-size:29px}
  .guide-kicker{font-size:9px}
  .guide-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 0;margin-bottom:14px}
  .guide-facts dd{font-size:11px}
  #field-guide.catalog-book .guide-section-nav{min-height:36px;margin-top:4px;padding-top:3px}
  #field-guide.catalog-book .guide-section-nav button{font-size:10px;padding:4px;gap:6px}
  .guide-lessons .guide-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #field-guide.catalog-book .guide-lessons .guide-index-item{grid-template-columns:46px 1fr;grid-template-rows:auto;align-items:center;gap:6px;min-height:62px}
  #field-guide.catalog-book .guide-lessons .guide-portrait,#field-guide.catalog-book .guide-lessons .guide-portrait :is(img,svg){width:46px;height:46px}
  .guide-lessons .guide-index-name{text-align:left}
}
@media(prefers-reduced-motion:reduce){#field-guide.catalog-book .guide-index-item{transition:none}}

/* Book text uses the game faces at their natural spacing, without shadows. */
#field-guide.catalog-book,#field-guide.catalog-book *{
  text-shadow:none!important;
  letter-spacing:normal!important;
  font-synthesis:none;
}
#field-guide.catalog-book button,#field-guide.catalog-book button:is(:hover,:active,:focus,:focus-visible){filter:none!important}