@font-face{font-family:Nimbus;src:url('assets/nimbus.otf')}@font-face{font-family:Bookman;src:url('assets/bookman.otf')}
:root{--ink:#203a41;--paper:#fff8e7;--blue:#254854;--font:21px;--leading:1.23;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nimbus,Arial,sans-serif;color:var(--ink)}body{background:#152d35;display:grid;place-items:center;min-height:100svh}button,a,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e4a52c;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button{color:inherit}#experience{position:relative;isolation:isolate;width:min(100%,480px);height:min(100dvh,860px);min-height:300px;border:6px solid #f6ecd5;display:grid;grid-template-rows:minmax(0,1fr) 19px;background:#735d43}#world{position:absolute;inset:0;z-index:-2;background:linear-gradient(#183e4c22,#183e4c44),url('assets/background.webp') center/cover no-repeat}#screen{min-height:0;display:flex;flex-direction:column;padding:10px 12px 0;gap:10px}footer{display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#fff8e7;background:#173640b8;font-size:9px;gap:8px}.logo{position:relative;display:block;width:72px;height:16px;flex-shrink:0;overflow:hidden}.logo img{position:absolute;width:74px;height:auto;left:-1.4px;top:-18.2px}.scene{position:relative;min-height:0}.chapter{position:absolute;left:0;top:0;z-index:3;background:var(--paper);border:2px solid var(--ink);padding:10px 12px;max-width:calc(100% - 54px);transform:rotate(-1deg);margin:0;font:clamp(20px,5.5vw,27px) Bookman,Georgia,serif;line-height:1.1}.menu-button{position:absolute;right:0;top:0;z-index:5;width:44px;height:44px;color:var(--paper);background:#213f4bea;border:1px solid #e9d9b6;font-size:25px}.piece{position:absolute;left:0;bottom:8px;z-index:2;margin:0;width:39%;height:calc(100% - 76px);max-height:237px;min-height:28px;background:var(--paper);border:2px solid var(--ink);padding:5px;transform:rotate(-3deg)}.piece img{width:100%;height:100%;object-fit:contain}.piece .focus{position:absolute;border:2px solid #246174;border-radius:50%;pointer-events:none;display:none}.piece[data-focus=custodia] .focus{display:block;left:33%;top:5%;width:34%;height:24%}.piece[data-focus=espinas] .focus{display:block;left:6%;top:40%;width:88%;height:41%}.piece[data-focus=emblema] .focus{display:block;left:25%;top:30%;width:50%;height:48%;border-radius:3px}.dialogue{position:relative;z-index:4;background:var(--paper);border:2px solid var(--ink);padding:27px 15px 15px;margin-top:5px;box-shadow:3px 3px 0 #203a4155;flex-shrink:0}.dialogue:before{content:'';position:absolute;right:22%;top:-18px;width:20px;height:23px;background:var(--paper);clip-path:polygon(0 100%,100% 0,100% 100%);filter:drop-shadow(1px -1px 0 #203a41)}.speaker{position:absolute;top:-20px;left:9px;font-size:21px;font-weight:bold;margin:0;min-width:94px;background:#203d49;color:var(--paper);padding:5px 12px;transform:rotate(-1deg);border:1px solid #f5e2b6}.dialogue p{font-size:var(--font);line-height:var(--leading);margin:0;min-height:2.5em}.pagecount{font-size:11px;text-align:right;margin-top:5px;color:#45616b}.choices{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.you{margin:0 4px 0;color:#fff8e7;font-weight:bold;font-size:14px;text-shadow:0 1px 3px #000}.answer{width:100%;min-height:45px;padding:9px 12px;text-align:left;font-size:18px;line-height:1.16;background:var(--blue);color:var(--paper);border:1px solid #cfbb92;box-shadow:2px 2px 0 #152e3555;position:relative;border-radius:0}.answer.primary{background:#f9ebc7;color:var(--ink)}.answer:hover{filter:brightness(1.08)}.choice-pager{display:flex;gap:8px;align-items:center;color:#fff8e7}.choice-pager button{min-height:44px;min-width:60px;background:var(--blue);color:var(--paper);border:1px solid #cfbb92}.choice-pager span{flex:1;text-align:center;font-size:15px}.cover{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:16px;gap:12px;min-height:0}.cover .cover-title{font:clamp(29px,8vw,42px)/1.1 Bookman,Georgia,serif;background:var(--paper);border:2px solid var(--ink);padding:18px 15px;margin:0 48px 0 0;transform:rotate(-1deg);z-index:2}.cover-card{background:#fff8e7f5;border:2px solid var(--ink);padding:15px;margin-top:auto}.cover-card p{font-size:20px;line-height:1.25;margin:0 0 9px}.cover-card .small{font-size:13px;line-height:1.25;margin:7px 0 0}.kicker{font-size:14px;font-weight:bold;color:#315865;margin-bottom:9px}.result .chapter{font-size:23px}.result .piece{width:34%}.result-note{font-size:15px!important}.result-badge{position:relative;z-index:4;background:var(--paper);padding:10px 14px;border-left:4px solid #b4914d;font-size:18px}.result-badge p{margin:5px 0 0}.result-badge strong{font-weight:bold}dialog{border:4px solid #203a41;background:var(--paper);color:var(--ink);width:min(calc(100vw - 24px),440px);max-height:calc(100dvh - 24px);padding:20px;margin:auto}dialog::backdrop{background:#132f39d9}#menu-content{display:flex;flex-direction:column;gap:9px}#menu-title{font:25px Bookman,Georgia,serif;margin:0 0 5px}dialog p{font-size:18px;line-height:1.25;margin:0 0 6px}dialog .answer{font-size:18px}dialog label{font-size:18px;display:flex;flex-direction:column;gap:8px}dialog input[type=range]{width:100%;height:44px}dialog a{color:#13546a;text-decoration:underline}body.large{--font:25px}body.contrast{--ink:#000;--paper:#fff;--blue:#101010}body.contrast .dialogue,body.contrast .cover-card{background:#fff;color:#000}body.contrast .speaker{background:#000;color:#fff}body.reduced *{animation:none!important;transition:none!important}@keyframes appear{from{opacity:.6}to{opacity:1}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-height:650px){#screen{gap:8px;padding:8px 10px 0}.chapter{font-size:22px;padding:8px 10px}.piece{height:calc(100% - 64px);bottom:4px}.dialogue{padding-top:23px;padding-bottom:11px}.dialogue p{min-height:2.3em}.answer{min-height:44px;padding:8px 11px}.cover .cover-title{font-size:32px;padding:12px}.cover-card p{font-size:18px}}@media(max-height:530px),(max-width:330px){#screen{gap:6px}.chapter{font-size:18px;padding:7px}.piece{height:calc(100% - 42px);width:27%;bottom:0}.dialogue{padding:22px 11px 9px}.speaker{font-size:18px}.dialogue p{font-size:20px;min-height:2.1em}.cover .cover-title{font-size:25px}.cover-card{padding:10px}.cover-card p{font-size:17px}.cover-card .small{font-size:11px}footer{font-size:8px}dialog{padding:12px}#menu-title{font-size:21px}dialog p{font-size:16px}}

/* r06: full-screen scene is a separate fixed layer; reading overlays it. */
#screen{position:relative;overflow:hidden}
#screen:not([data-state="cover"]){display:block}
#screen>.scene{position:absolute;inset:10px 12px 0;min-height:0}
.scene-art{position:absolute;inset:46px 0 0;overflow:visible;pointer-events:none}
.guide{position:absolute;top:0;right:-28%;width:124%;height:auto;max-height:none;min-height:0;pointer-events:none;animation:none;transition:none}
.scene .piece{top:26%;bottom:auto;height:auto;max-height:none;min-height:0;width:39%}
.piece-image{position:relative;width:100%;aspect-ratio:217/300}
.piece-image>img{display:block;width:100%;height:auto}
.reading{position:absolute;bottom:10px;left:12px;right:12px;z-index:4;display:flex;flex-direction:column;gap:10px;padding-top:5px;min-height:0}
.reading .choices{margin-top:0}
.dialogue.can-advance{cursor:pointer;touch-action:manipulation}
.dialogue:focus-visible{outline:3px solid #e4a52c;outline-offset:3px}
.tap-hint{display:block;margin-top:10px;text-align:right;font-size:13px;line-height:1.2;color:#45616b}
.symbol-hit{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:2px dashed #245464;background:#fff8e711;border-radius:50%;padding:0;cursor:pointer;touch-action:manipulation}
.symbol-hit:disabled{visibility:hidden;pointer-events:none}
.symbol-hit:not(:disabled):hover{background:#e4a52c44}
.symbol-custodia{left:50%;top:16%}.symbol-emblema{left:50%;top:47%}.symbol-espinas{left:15%;top:62%}
.cover{display:flex;flex-direction:column;gap:10px;padding-top:16px;overflow:hidden}
.cover-figure{position:absolute;display:block;top:19%;right:-28%;bottom:auto;left:auto;z-index:0;width:124%;height:auto;pointer-events:none}
.cover-card{position:relative;z-index:1;margin-top:auto;background:var(--paper)}
@media(max-height:650px){#screen>.scene{inset:8px 10px 0}.reading{left:10px;right:10px;bottom:8px;gap:8px}.scene-art{top:48px}}
@media(max-height:530px),(max-width:330px){.reading{bottom:6px;gap:6px}.scene-art{top:40px}.scene .piece{top:25%;width:30%}.tap-hint{font-size:12px;margin-top:6px}}