#guide-open { display:flex; align-items:center; gap:7px; padding:7px 12px; color:#eddaa9; background:#211d20; border:1px solid #9b804d; font-size:13px; white-space:nowrap; }
#guide-open svg { width:22px; height:22px; fill:none; stroke:currentColor; }
#guide-dialog { --ink:#3e2b20; --paper:#e8d3a5; width:min(1130px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 24px); padding:18px 24px 12px; overflow:auto; color:#eeddb5; border:2px solid #997347; border-radius:12px; background:linear-gradient(90deg,#21191aee,#42302bd9 45%,#281d1ced),url('/art/frame/leather-tile.png'); box-shadow:0 25px 100px #000d,inset 0 0 0 5px #130f12,inset 0 0 0 7px #86613b; }
#guide-dialog::backdrop { background:#100d10c9; backdrop-filter:blur(5px); }
#guide-dialog::before, #guide-dialog::after { display:none; }
/* A turning leaf can overflow the dialog; keep scrollbar space constant. */
#guide-dialog { overflow-x:hidden; scrollbar-gutter:stable; }
.guide-paper, .guide-spread, .guide-mobile-sheet { scrollbar-gutter:stable; }
.guide-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.guide-toolbar h2 { margin:1px 0 0; color:#efd7a0; font-family:Georgia,"Songti SC",SimSun,serif; font-size:24px; letter-spacing:4px; }
.guide-toolbar > div > span { font-size:9px; letter-spacing:3px; color:#b79565; }
#guide-close { padding:8px 13px; background:#191314; border:1px solid #8c6b40; color:#ebd4a8; font-size:13px; }
#guide-close span { padding-left:10px; font-size:21px; }
.guide-tabs { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; padding:0 12px; }
.guide-tabs button { display:flex; justify-content:center; align-items:center; gap:4px; min-width:0; min-height:44px; padding:4px; background:linear-gradient(#564333,#34261f); color:#cdb994; border:1px solid #846740; border-radius:5px 5px 0 0; font-size:12px; }
.guide-tabs :is(svg,img.unit-illustration) { width:28px; height:28px; flex-shrink:0; }
.guide-tabs button[aria-pressed=true] { background:linear-gradient(#f0dbaf,#debe84); color:#3d2a1a; border-color:#d2b580; box-shadow:inset 0 3px #fff2cc; }
.guide-book { position:relative; perspective:1800px; padding:0 5px 7px; border-radius:4px 4px 8px 8px; background:repeating-linear-gradient(0deg,#917951 0 1px,#cbb98f 1px 3px); box-shadow:0 8px 17px #0009; }
.guide-spread { display:grid; grid-template-columns:1fr 1fr; }
.guide-paper { position:relative; height:min(500px, calc(100dvh - 275px - var(--guide-extra-desktop,0px))); min-width:0; overflow:auto; padding:20px 31px 15px; color:var(--ink); background:radial-gradient(ellipse at 20% 10%,#fff8dc77,transparent 70%),repeating-linear-gradient(4deg,#9d764405 0 1px,transparent 1px 4px),var(--paper); scrollbar-color:#a38a61 #e1cca1; scrollbar-width:thin; }
.guide-profile { border-radius:3px 0 0 3px; box-shadow:inset -18px 0 24px -20px #352115,inset 2px 0 5px #fff4cd; }
.guide-tactics { border-left:1px solid #8a6a4266; border-radius:0 3px 3px 0; box-shadow:inset 17px 0 24px -20px #352115,inset -2px 0 5px #fff4cd; }
.guide-paper p { color:var(--ink); }
.guide-paper .guide-kicker { font-size:10px; letter-spacing:2px; color:#806448; margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid #9c784950; }
.guide-heading { display:flex; align-items:center; gap:17px; }
.guide-crest { width:67px; height:73px; padding:5px; background:radial-gradient(ellipse,#5c4739,#302822); border:2px solid #ae8751; border-radius:50% 50% 42% 42%; box-shadow:0 3px 6px #44311e40; flex-shrink:0; }
.guide-crest :is(svg,img.unit-illustration) { width:100%; height:100%; }
.guide-heading span { font-size:10px; letter-spacing:3px; color:#886b47; }
.guide-heading h3 { margin:4px 0; font:700 29px Georgia,"Songti SC",SimSun,serif; letter-spacing:2px; }
.guide-intro { font-size:13px; line-height:1.85; margin:20px 0 20px; }
.guide-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:0; border-top:1px solid #9b79445c; border-bottom:1px solid #9b79445c; }
.guide-stats div { padding:8px 5px; text-align:center; }
.guide-stats dt { font-size:10px; color:#7d6040; }
.guide-stats dd { margin:3px 0 0; font:700 18px Georgia,"Microsoft YaHei",serif; }
.guide-melee-stats { margin-top:12px; }
.guide-folio { display:block; text-align:center; margin-top:8px; color:#977b51; font:italic 12px Georgia,serif; }
.guide-tactics figure { margin:0 auto 10px; max-width:425px; }
.guide-tactics canvas { display:block; width:100%; height:auto; border:4px solid #584c34; box-shadow:0 2px 5px #55381a40; background:#626b40; }
.guide-tactics figcaption { font-size:11px; color:#82623b; line-height:1.7; margin-top:7px; }
.guide-paper .guide-legend { font-size:9px; color:#876946; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
.guide-legend i { width:15px; border-top:2px dashed #317c81; }
.guide-legend i:nth-of-type(2) { border-color:#af7b22; }
.guide-legend i:nth-of-type(3) { border-color:#b05340; }
.guide-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; font-size:11px; color:#c9ad7f; }
.guide-footer button { border:1px solid #8a6940; background:#241a17; color:#e6cca0; padding:8px 14px; font-size:12px; }
.guide-footer button:disabled { opacity:.35; }
#guide-dialog button:focus-visible { outline:2px solid #fff0bc; outline-offset:2px; }
.guide-turn { display:none; position:absolute; top:0; bottom:7px; width:calc(50% - 5px); transform-style:preserve-3d; pointer-events:none; z-index:3; }
.guide-turn.is-turning { display:block; }
.guide-rest { position:absolute; top:0; bottom:7px; width:calc(50% - 5px); z-index:2; pointer-events:none; }
.guide-rest[data-side=left] { left:5px; }
.guide-rest[data-side=right] { right:5px; }
.guide-rest .guide-paper { height:100%; }
.guide-turn[data-direction=forward] { left:50%; transform-origin:left center; }
.guide-turn[data-direction=backward] { right:50%; transform-origin:right center; }
.guide-leaf-front,.guide-leaf-back { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; box-shadow:0 4px 24px #24170b60; }
.guide-leaf-back { transform:rotateY(180deg); }
.guide-turn .guide-paper { height:100%; overflow:hidden; }
.guide-leaf-front::after,.guide-leaf-back::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#39271830,transparent 15%,#fff6d040 65%,#39271825); pointer-events:none; }
@media (min-width:761px) and (max-height:710px) { .guide-paper { height:calc(100dvh - 275px - var(--guide-extra-desktop,0px)); min-height:210px; padding-top:15px; } }
@media (min-width:761px) and (max-height:500px) { .guide-paper { height:calc(100dvh - 275px - var(--guide-extra-desktop,0px)); min-height:120px; } }
@media (max-width:760px) {
  #guide-dialog { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:13px 10px 10px; border-radius:7px; }
  .guide-toolbar { margin-bottom:8px; } .guide-toolbar h2 { font-size:20px; }
  .guide-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 4px; gap:2px; }
  .guide-tabs button { font-size:11px; min-height:37px; border-radius:3px 3px 0 0; } .guide-tabs :is(svg,img.unit-illustration) { width:24px; height:24px; }
  .guide-tabs button span { white-space:nowrap; }
  .guide-spread { display:block; max-height:calc(100dvh - 341px - var(--guide-extra-mobile,0px)); overflow:auto; }
  .guide-paper { height:auto; overflow:visible; padding:19px 22px 14px; }
  .guide-tactics { border-left:0; border-top:1px solid #ac895750; box-shadow:inset 0 8px 18px -18px #392315; }
  .guide-profile { box-shadow:inset -6px 0 15px -15px #392315; }
  .guide-heading h3 { font-size:27px; } .guide-crest { width:59px; height:63px; }
  .guide-stats dd { font-size:16px; white-space:nowrap; }
  .guide-intro { font-size:13px; } .guide-folio { margin-top:8px; }
  .guide-turn { width:calc(100% - 10px); } .guide-turn[data-direction=forward] { left:5px; } .guide-turn[data-direction=backward] { right:5px; }
  .guide-mobile-sheet { height:100%; overflow:auto; }
  .guide-turn .guide-paper { height:auto; overflow:visible; }
  .guide-footer { gap:5px; padding-top:10px; } .guide-footer button { padding:8px; font-size:11px; } #guide-page { font-size:10px; }
}
@media (max-width:700px) { #guide-open { font-size:11px; gap:4px; padding:5px 6px; } #guide-open svg { width:17px; height:17px; } .top-actions { gap:4px; } }
@media (max-width:380px) {
  .guide-tabs button { font-size:10px; padding:2px; gap:2px; } .guide-tabs :is(svg,img.unit-illustration) { width:18px; height:18px; }
  .guide-paper { padding-left:16px; padding-right:16px; } .guide-heading { gap:12px; } .guide-heading h3 { font-size:23px; }
  .guide-stats dd { font-size:15px; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) { .guide-turn { display:none !important; } }

@media (min-width:761px) and (max-height:500px) {
  .guide-tabs { max-height:94px; overflow-y:auto; }
  .guide-paper { height:calc(100dvh - 275px); }
}
.guide-unit-portrait { display:block; width:100%; height:180px; object-fit:contain; image-rendering:pixelated; background:radial-gradient(ellipse,#62724a18,transparent 70%); margin:8px 0 16px; }