@font-face{font-family:DalangInk;src:url(../scenes/shrine/speech/fonts/InknutAntiqua-Black.ttf);font-display:block}
@font-face{font-family:DalangInkMedium;src:url(../scenes/shrine/speech/fonts/InknutAntiqua-Medium.ttf);font-display:block}
@font-face{font-family:DalangInkLight;src:url(../scenes/shrine/speech/fonts/InknutAntiqua-Light.ttf);font-display:block}
@font-face{font-family:DalangWater;src:url(../scenes/shrine/speech/fonts/YatraOne-Regular.ttf);font-display:block}

:root{--ground:#14110e;--paper:#e9dfc8;--soft:#a79c86;--line:#4a4136;--gold:#d9a441;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ground);color:var(--paper);font:15px/1.5 DalangInkLight,Georgia,serif;overflow:hidden}

/* The picture is placed by script: it fills what it can and, on a phone, crops rather than shrinks. */
#room{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--ground)}
canvas{position:absolute;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none}

#veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:clamp(28px,9vh,80px);background:var(--ground) url(poster.jpg) center/cover no-repeat;transition:opacity .9s ease;pointer-events:none}
#veil::before{content:"";position:absolute;inset:0;background:var(--ground);opacity:.72}
#veil>*{position:relative}
#veil.gone{opacity:0}
#progress{width:min(240px,50vw);height:2px;background:#ffffff26}
#bar{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
#loading{margin:0;color:var(--paper);font-size:13px;letter-spacing:.02em}

#prompt{position:absolute;left:50%;bottom:clamp(14px,5%,42px);transform:translateX(-50%);margin:0;padding:6px 14px 7px;white-space:nowrap;font-size:14px;color:#f4ecd8;background:#14110ec4;border-radius:2px;pointer-events:none;transition:opacity .5s ease}
#prompt.gone{opacity:0}
#note{position:absolute;left:16px;bottom:14px;margin:0;max-width:60%;padding:5px 10px;font-size:13px;background:#14110ec4}

/* Under the picture on an upright phone. It has the room the layout reserved; anything longer scrolls. */
#said{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));margin:0;padding:8px 16px;text-align:center;font-size:clamp(14px,4.4vw,17px);line-height:1.4;color:var(--paper);transition:opacity .6s ease;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
body:not(.stacked) #said{clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;top:auto!important;bottom:0}

/* For the keyboard: nothing to see until you tab to it. */
#things{position:fixed;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px;background:#14110ee6;transform:translateY(-110%)}
#things:focus-within{transform:none}
#things .short{display:none}
/* An upright phone cannot show the whole shrine, so what it cannot reach by finger sits here in plain sight. */
body.stacked #things{top:auto;left:8px;right:64px;bottom:max(12px,env(safe-area-inset-bottom));transform:none;padding:0;background:none;flex-wrap:nowrap;gap:4px}
body.stacked #things button{flex:1 1 0;min-width:0;min-height:44px;padding:4px 2px}
body.stacked #things [data-do=board],body.stacked #things [data-do=sack],body.stacked #things [data-do=saint]{display:none}
body.stacked #things .full{display:none}
body.stacked #things .short{display:inline}
body:not(.ready) #things{visibility:hidden}
button{font:13px/1.2 ui-sans-serif,system-ui,sans-serif;color:var(--paper);background:#14110ec4;border:1px solid var(--line);border-radius:3px;padding:7px 10px;cursor:pointer}
button:hover{border-color:var(--soft)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

body:not(.ready) #corner{visibility:hidden}
#corner{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
#mute{display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center}
#mute .cross{display:none}
#mute[aria-pressed=true] .cross{display:inline}
#mute[aria-pressed=true] .waves{display:none}
body.narrow #mute-label{display:none}

#lost{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:var(--ground)}
#lost[hidden]{display:none}
#lost p{margin:0}
#inspect{position:fixed;left:8px;top:8px;max-width:min(480px,92vw);max-height:80vh;overflow:auto;padding:8px 10px;background:#000c;font:12px/1.4 ui-monospace,monospace}
#inspect pre{margin:0;white-space:pre-wrap}

body.plain{overflow:auto}
body.plain #room,body.plain #corner,body.plain #things,body.plain #said{display:none}
#plain{max-width:680px;margin:auto;padding:16px 16px 40px}
#plain img{display:block;width:100%;height:auto}
#plain h1{font:400 26px/1.2 DalangInk,Georgia,serif;margin:18px 0 8px}
#plain li{margin:.3em 0}
.noscript{padding:24px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}