:root{--ink:#2a1610;--ink2:#6a3a22;--red:#b4381a;--parch:#f3dfbf;--parch2:#e6b98a;--dark:#1c1210;--teal:#1f8a8a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--dark);color:var(--ink);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.hidden{display:none!important}
#app{max-width:640px;margin:0 auto;min-height:100vh;padding:64px 18px 40px;
 background:radial-gradient(ellipse at 50% 40%,var(--parch) 55%,var(--parch2) 85%,#c9a96a 100%);
 box-shadow:inset 0 0 80px rgba(70,40,10,.55)}
#bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
 padding:calc(env(safe-area-inset-top) + 6px) 10px 6px;background:rgba(26,18,11,.94);color:var(--parch);border-bottom:1px solid #6b4a2a}
#barTitle{font-variant:small-caps;letter-spacing:.08em;font-size:15px}
.ico{background:none;border:1px solid #6b4a2a;color:var(--parch);border-radius:8px;padding:7px 11px;font:inherit;font-size:15px}
h1,h2,h3{font-weight:normal;margin:.3em 0}
.cover{text-align:center;padding-top:6vh}
.series{font-variant:small-caps;letter-spacing:.25em;color:var(--red);font-size:15px}
.cover h1{font-size:34px;line-height:1.1;margin:.4em 0}
.cover .emb{font-size:64px;margin:12px 0;filter:sepia(1)}
.sub{font-style:italic;color:var(--ink2)}
.secno{text-align:center;font-size:34px;color:var(--red);margin:6px 0 2px;letter-spacing:.05em}
.secno small{display:block;font-size:12px;letter-spacing:.3em;color:var(--ink2);font-variant:small-caps}
.text{font-size:19px;line-height:1.55;text-align:justify;hyphens:auto}
.text:first-letter{float:left;font-size:58px;line-height:.85;padding:6px 6px 0 0;color:var(--red)}
.guide{border-left:3px solid var(--red);background:rgba(139,30,18,.07);padding:8px 12px;margin:12px 0;font-style:italic;font-size:16px}
.guide b{font-style:normal;font-variant:small-caps;color:var(--red)}
.choices{margin-top:18px;display:flex;flex-direction:column;gap:10px}
button.ch,button.big{display:block;width:100%;text-align:left;font:inherit;font-size:18px;color:var(--ink);background:rgba(255,248,230,.55);
 border:2px solid var(--ink2);border-radius:6px;padding:13px 14px;box-shadow:2px 3px 0 rgba(43,26,14,.35)}
button.big{text-align:center;background:var(--ink);color:var(--parch);border-color:var(--ink)}
button.ch:active,button.big:active{transform:translate(1px,2px);box-shadow:none}
button.ch[disabled]{opacity:.45;border-style:dashed}
.num{display:inline-block;min-width:26px;color:var(--red);font-weight:bold}
.tag{font-size:13px;font-variant:small-caps;color:var(--red);margin-left:6px}
.dicebox{display:flex;justify-content:center;gap:14px;margin:16px 0;min-height:70px}
.die{width:62px;height:62px;background:#fbf4e2;border:2px solid var(--ink);border-radius:12px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:7px;box-shadow:2px 3px 0 rgba(0,0,0,.3)}
.die i{width:12px;height:12px;border-radius:50%;background:var(--ink);place-self:center;visibility:hidden}
.die i.on{visibility:visible}
.d12{width:62px;height:62px;background:#fbf4e2;border:2px solid var(--ink);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold}
.rolling{animation:shake .12s infinite}
@keyframes shake{0%{transform:rotate(-8deg) translateY(-2px)}50%{transform:rotate(8deg) translateY(2px)}100%{transform:rotate(-8deg)}}
.statline{text-align:center;font-size:22px;margin:6px 0}
.statline b{color:var(--red);font-size:28px}
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;text-align:center}
.sheet div{border:1px solid var(--ink2);border-radius:6px;padding:6px;background:rgba(255,248,230,.4)}
.sheet small{display:block;font-variant:small-caps;letter-spacing:.1em;color:var(--ink2)}
.sheet b{font-size:22px}
.bgcards button small{display:block;font-size:14px;color:var(--ink2);margin-top:3px}
input.name{font:inherit;font-size:18px;width:100%;padding:10px;border:2px solid var(--ink2);border-radius:6px;background:#fbf4e2}
.combat{border:2px solid var(--red);border-radius:8px;padding:10px;margin-top:14px;background:rgba(139,30,18,.05)}
.combat .vs{display:flex;justify-content:space-between;font-size:16px}
.combat .vs b{color:var(--red)}
.log{font-size:15px;max-height:190px;overflow:auto;margin:8px 0;padding-left:0;list-style:none}
.log li{border-bottom:1px dotted var(--ink2);padding:4px 0}
.end{text-align:center}
.end h2{font-size:28px;color:var(--red)}
#drawer{position:fixed;top:0;bottom:0;left:0;width:min(88vw,380px);z-index:10;background:#24180e;color:var(--parch);overflow:auto;
 padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 20px);box-shadow:4px 0 30px #000}
#scrim{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.5)}
#drawer h3{font-variant:small-caps;letter-spacing:.12em;color:#e8b86b;border-bottom:1px solid #6b4a2a;padding-bottom:3px;margin-top:16px}
#drawer .sheet div{border-color:#6b4a2a;background:rgba(255,255,255,.04)}
#drawer .sheet small{color:#c9a96a}
#drawer ul{padding-left:18px;margin:4px 0}
#drawer li{margin:3px 0}
#drawer button{font:inherit;font-size:15px;background:#3a2716;color:var(--parch);border:1px solid #8a6238;border-radius:6px;padding:9px 10px;margin:4px 0;width:100%;text-align:left}
#drawer button.on{background:#6b4a2a}
#drawer .note{font-size:13px;color:#c9a96a;font-style:italic}
#net{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 8px);left:50%;transform:translateX(-50%);z-index:8;background:#8b1e12;color:#fff;border-radius:20px;padding:7px 14px;font-size:14px;max-width:92vw;text-align:center}
.small{font-size:14px;color:var(--ink2);text-align:center;margin-top:16px}

.sm{display:block;font-size:14px;color:var(--ink2);margin-top:3px}
.pill{display:block;width:max-content;margin:4px auto;padding:3px 12px;border-radius:12px;background:var(--teal);color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.die.me{background:#e6fbf8;border-color:var(--teal)}
.die.me i{background:var(--teal)}
.die.foe{background:#fde9e1;border-color:var(--red)}
.die.foe i{background:var(--red)}
.die.land{animation:land .35s ease-out}
@keyframes land{0%{transform:scale(1.35) rotate(20deg)}70%{transform:scale(.92)}100%{transform:scale(1)}}
#flash{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);z-index:20;pointer-events:none;opacity:0;text-align:center;
 background:rgba(28,18,16,.93);color:#fff;border:3px solid var(--parch2);border-radius:18px;padding:14px 26px;min-width:220px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#flash.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .15s,transform .15s}
#flash.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
#flash .fbig{font-size:72px;line-height:1;font-weight:bold;font-family:Impact,"Arial Black",sans-serif;letter-spacing:.02em}
#flash .fbig .vs{font-size:28px;opacity:.7;vertical-align:middle}
#flash .fsub{font-size:15px;opacity:.8;margin-top:4px;font-family:system-ui,sans-serif}
#flash .fban{margin-top:10px;font-size:34px;font-weight:bold;font-family:Impact,"Arial Black",sans-serif;letter-spacing:.12em;padding:2px 14px;border-radius:8px;display:inline-block;animation:ban .6s ease-out}
@keyframes ban{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
#flash.hit .fban{background:#1f9d55}
#flash.miss .fban{background:#c0261a}
#flash.tie .fban{background:#8a6d1f}
#flash.stat .fban{background:var(--teal)}
.cmds{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:22px 0 4px}
.cmds button{font:inherit;font-size:14px;padding:7px 11px;border-radius:16px;border:1px solid var(--ink2);background:rgba(255,248,230,.6);color:var(--ink)}
.battle .army{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:14px}
.battle .army li{border:1px solid var(--teal);border-radius:12px;padding:3px 9px;background:rgba(31,138,138,.08)}
.score{border:2px solid var(--teal);border-radius:10px;padding:10px 14px;margin:14px 0;background:rgba(31,138,138,.06)}
.score h3{color:var(--teal);font-variant:small-caps;letter-spacing:.1em}
.score ul{padding-left:4px;list-style:none;margin:6px 0}.score li{margin:5px 0}
.score li.ok{color:#145c3a}.score li.no{opacity:.65}
.rank{text-align:center;font-size:20px;margin:10px 0}
.part{text-align:center;font-size:22px;border:2px dashed var(--ink2);border-radius:10px;padding:10px;margin:8px 0}
.part.gild{border:2px solid #c9a227;background:linear-gradient(135deg,#fff5cc,#f1d67a);box-shadow:0 0 18px rgba(201,162,39,.6)}
.part small{display:block;font-size:13px;color:var(--ink2)}
.new{background:var(--red);color:#fff;font-size:11px;padding:1px 6px;border-radius:6px;letter-spacing:.1em}
.unl{list-style:none;padding:0;text-align:left}.unl li{border:1px solid var(--ink2);border-radius:8px;padding:9px 12px;margin:8px 0;background:rgba(255,248,230,.5)}
.unl li.no{opacity:.6}
.cover.lib{padding-top:3vh}
.cover.lib h1{font-size:30px}
button.bookcard{position:relative;padding-left:64px;min-height:96px}
button.bookcard .bemb{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:34px;filter:sepia(.6)}
button.bookcard .num{position:absolute;left:8px;top:8px;font-size:13px}
button.bookcard b{display:block;font-size:18px;margin-bottom:4px}
button.bookcard small{display:block;font-size:14px;color:var(--ink2);line-height:1.35}
button.bookcard small.bstat{margin-top:6px;font-weight:600}
button.bookcard.last{outline:2px solid var(--ink2);outline-offset:2px}