.character-book{position:fixed;inset:0;z-index:4700;color:#e9eadb;background:radial-gradient(ellipse at 20% 30%,#2f4d4a,#111e2c 72%);overflow:auto;font-family:system-ui,sans-serif}.character-book-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 32px;border-bottom:1px solid #b6c9ac33;background:#172933f5;position:sticky;top:0;z-index:5}.character-book-top h1{font:2.4rem Georgia;margin:5px 0}.character-book-top small{letter-spacing:.17em;font-size:.65rem;color:#cdb993}.character-book-top p{font-size:.85rem;color:#b4c6bf;margin:0}.character-book button,.character-book select{font:inherit;border:1px solid #b7caa64d;border-radius:9px;background:#263f46;color:#f4dfb1;padding:10px 15px;cursor:pointer}.character-book button:disabled{opacity:.45;cursor:default}.character-book-layout{display:grid;grid-template-columns:minmax(240px,38%) 1fr;max-width:1400px;margin:auto;gap:24px;padding:24px}.character-book-portrait{padding:18px;background:#0d232e77;border:1px solid #a2b99b33;border-radius:18px;align-self:start;position:sticky;top:126px}.character-book-portrait canvas{width:100%;max-height:52vh;object-fit:contain;filter:drop-shadow(0 6px 12px #07151c88)}.character-quote{font:italic 1.1rem Georgia;text-align:center;line-height:1.6;min-height:2.5em;color:#d5d7c0}.character-poses{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:16px 0}.character-poses button{padding:7px 11px;font-size:.75rem}.character-access{font-size:.75rem;color:#b7c6b6}.character-book-body nav{display:flex;gap:7px;flex-wrap:wrap;padding:5px 0 20px}.character-book-body nav [aria-selected=true]{background:#a5bc9c;color:#172d32;border-color:#cfdbbb}.character-book-content{padding:24px;border:1px solid #b4c7b33b;border-radius:16px;background:#1c323a99;line-height:1.6}.character-book-content h2,.character-book-content h3{font-family:Georgia;color:#eee0b9}.character-book-content p{color:#becec4}.character-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.character-stat-grid article{border:1px solid #adc5b02b;border-radius:10px;padding:14px;background:#10252f70}.character-stat-grid small,.character-stat-grid strong{display:block}.character-stat-grid small{font-size:.7rem;color:#9fbab4}.character-stat-grid strong{font-size:1.1rem;color:#e7d8b0}.character-skill,.character-signature{padding:16px;margin:12px 0;border:1px solid #b3c9a52e;border-radius:12px;background:#10252e55}.character-skill strong,.character-signature strong{display:block}.character-skill small,.character-signature small{display:block;color:#a7c0ba;font-size:.75rem}.character-skill p{font-size:.88rem}.character-skill button{font-size:.75rem;padding:7px 12px}.character-book-content blockquote{margin:12px 0;padding:10px 16px;border-left:2px solid #b8c298;background:#1730397a;color:#e1d9b9}.character-book .equipment-body{grid-template-columns:130px 1fr}.character-book .equipment-portrait canvas{width:130px;height:145px}.character-book .equipment-bag{max-height:220px;overflow:auto}.character-book .equipment-layout{display:block}.character-book .equipment-slots{min-width:0}.character-book .equipment-total{flex-wrap:wrap}.character-book .equipment-bag-item{min-width:0}.keeper-town-avatar[role=button]{pointer-events:auto;cursor:pointer}@media(max-width:720px){.character-book-top{padding:14px 16px}.character-book-top h1{font-size:1.7rem}.character-book-layout{grid-template-columns:1fr;padding:12px;gap:12px}.character-book-portrait{position:static;padding:8px}.character-book-portrait canvas{height:260px;max-height:40vh}.character-book-content{padding:16px}.character-book-portrait .character-quote{margin:0}.character-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-book-body nav{position:sticky;top:110px;background:#192e38f5;padding:8px 0;z-index:3}.character-book .equipment-body{display:block}.character-book .equipment-portrait{display:none}.character-book .equipment-total{display:grid;grid-template-columns:repeat(3,1fr)}}
.town-district-gate{position:absolute;transform:translate(-50%,-50%);padding:7px 12px;color:#f4e4ba;background:#173440e8;border:1px solid #c5c7a45e;border-radius:16px;font:11px system-ui;white-space:nowrap;z-index:10;pointer-events:auto;cursor:pointer;min-height:44px}.town-district-gate:focus-visible{outline:2px solid #ffe3a0;outline-offset:3px}.character-book[hidden]{display:none}
.character-book{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;overscroll-behavior:contain}.character-book button,.character-book select{min-height:44px;touch-action:manipulation}.character-book-top>div{min-width:0}.character-book-top h1,.character-book-content{overflow-wrap:anywhere}.character-book-content{min-width:0}.character-book-content p{white-space:normal}.character-book-body{min-width:0}@media(max-width:720px){.character-book-top{gap:8px;flex-wrap:wrap}.character-book-top>div{flex:1 1 55%}.character-book-top h1{font-size:1.5rem}.character-book-top p{font-size:12px;line-height:1.5}.character-book-body nav{position:static;gap:6px}.character-book-body nav button{flex:1 1 28%;font-size:12px;padding:8px}.character-book-portrait canvas{height:220px;max-height:32dvh}.character-book-content{padding:14px}.character-stat-grid article{padding:10px}}@media(max-height:540px) and (min-width:600px){.character-book-layout{grid-template-columns:minmax(180px,32%) minmax(0,1fr);padding:12px;gap:12px}.character-book-portrait{position:static;padding:10px}.character-book-top{padding:8px 16px}.character-book-top h1{font-size:24px}.character-book-portrait canvas{height:180px;max-height:45dvh}.character-quote{font-size:14px}.character-book-content{padding:14px}.character-book-body nav{position:static}}

.character-reference-sheets{margin-top:12px;text-align:left}.character-reference-sheets summary{padding:12px;cursor:pointer}.character-reference-sheets figure{margin:8px 0;padding:8px;border:1px solid #99b4a944;border-radius:12px;background:radial-gradient(ellipse,#42616b88,#102335)}.character-reference-sheets img{display:block;width:100%;height:220px;object-fit:contain}.character-reference-sheets figcaption{text-align:center;font-size:12px;color:#ccdccc}