/* Look: ein Bilderbuch, das gerade geschrieben wird. Tusche auf Papier, Gouache-Farben. */
@font-face{font-family:"Abril";src:url(fonts/abril.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Vollkorn";src:url(fonts/vollkorn.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vollkorn";src:url(fonts/vollkorn-b.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vollkorn";src:url(fonts/vollkorn-i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Hand";src:url(fonts/hand.woff2) format("woff2");font-display:swap}

:root{
  --ink:#1b1613; --paper:#f6efdf; --paper2:#e9dfc8; --red:#d3322b; --blue:#2858c9; --gold:#e3a92c;
  --display:"Abril",Georgia,serif; --body:"Vollkorn",Georgia,serif; --hand:"Hand","Comic Sans MS",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#14110f;color:var(--paper);font-family:var(--body);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none}
[hidden]{display:none!important}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#patience{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));
  display:grid;grid-template-columns:auto;gap:3px;font:400 15px/1 var(--hand);color:var(--paper);
  text-shadow:0 1px 0 #0009,0 0 6px #0007;width:min(190px,44vw)}
#patBar{height:9px;border:2px solid var(--ink);background:var(--paper);transform:rotate(-.6deg);box-shadow:2px 2px 0 #0005}
#patFill{display:block;height:100%;width:100%;background:#3f9a6b;transition:width .5s,background .5s}
#patMood{font-size:14px;opacity:.95}
#btnPause{position:absolute;pointer-events:auto;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));
  width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);display:grid;place-items:center;
  border-radius:3px;box-shadow:2px 2px 0 #0006}
#btnPause svg{fill:var(--ink)}
#cross{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1.5px #0009;opacity:.75;transition:transform .12s}
#cross.on{transform:scale(1.9);background:var(--gold)}
#prompt{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font:400 20px/1 var(--hand);
  background:var(--paper);color:var(--ink);padding:5px 10px 6px;border:2px solid var(--ink);box-shadow:2px 2px 0 #0006;
  white-space:nowrap;opacity:0;transition:opacity .12s}
#prompt.on{opacity:1}
#lockhint{position:absolute;left:50%;top:38%;transform:translateX(-50%);background:var(--ink);padding:8px 14px;font:400 20px var(--hand)}

/* Untertitel = Papierstreifen aus dem Skript */
#sub{position:absolute;left:50%;bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px));transform:translateX(-50%) rotate(-.4deg);
  width:max-content;max-width:min(760px,calc(100vw - 32px));padding:10px 18px 12px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);box-shadow:4px 4px 0 #0007;font:italic 400 clamp(18px,2.6vw,24px)/1.3 var(--body);text-align:center;
  opacity:0;transition:opacity .18s}
#sub.on{opacity:1}
#sub.shout{font:700 normal clamp(20px,3vw,28px)/1.2 var(--body);text-transform:uppercase;background:var(--red);color:#fff;animation:shake .16s linear infinite}
#sub.whisper{font-size:clamp(15px,2vw,18px);opacity:.92;background:#2a2420;color:var(--paper);border-color:#000}
#sub.temp{font:400 clamp(18px,2.6vw,23px)/1.3 var(--hand);background:#cfe3f6}
#sub.player{background:var(--gold);font-style:normal}
body.touch #sub{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 62px)}
@keyframes shake{0%{transform:translate(-50%,0) rotate(-.8deg)}50%{transform:translate(calc(-50% + 2px),-1px) rotate(.5deg)}100%{transform:translate(calc(-50% - 2px),1px) rotate(-.3deg)}}
#scrawl{position:absolute;left:0;right:0;top:20%;text-align:center;font:400 clamp(30px,6vw,64px)/1.05 var(--hand);color:var(--red);
  text-shadow:2px 2px 0 #000;opacity:0;transition:opacity .25s;padding:0 16px}
#scrawl.on{opacity:1}

/* Touch */
#touch{position:fixed;inset:0;z-index:4;touch-action:none}
#joyBase{position:absolute;width:128px;height:128px;margin:-64px;border-radius:50%;border:3px solid #fff8;background:#0003;left:92px;
  bottom:auto;top:calc(100% - 118px);opacity:.55;pointer-events:none}
#joyNub{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
#btnJump,#btnUse{position:absolute;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:400 19px/1 var(--hand);box-shadow:3px 3px 0 #0007;touch-action:none}
#btnJump{right:max(18px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));width:82px;height:82px;border-radius:50%}
#btnUse{right:max(112px,calc(env(safe-area-inset-right) + 100px));bottom:max(44px,calc(env(safe-area-inset-bottom) + 18px));min-width:96px;height:66px;padding:0 12px;border-radius:6px;background:var(--gold);font-size:21px}

/* Umblättern */
#flip{position:fixed;inset:0;z-index:8;background:var(--paper);transform:translateX(102%);pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,#b9c9dc55 31px 32px);box-shadow:-30px 0 50px #0008}
#flip.in{transform:translateX(0);transition:transform .3s cubic-bezier(.6,.05,.4,1)}
#flip.out{transform:translateX(-104%);transition:transform .34s cubic-bezier(.6,.05,.4,1)}

/* Screens */
.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow:auto;touch-action:pan-y;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:#14110fcc}
.screen.clear{background:#14110f66}
#start{background:linear-gradient(90deg,#14110fee 0%,#14110fbb 46%,#14110f22 100%);place-items:center start;padding-left:max(6vw,16px)}
.startCard{max-width:520px;display:grid;gap:14px}
.eyebrow{margin:0;font:400 19px/1.1 var(--hand);letter-spacing:.04em;color:var(--gold)}
h1{margin:0;font:400 clamp(58px,11vw,112px)/.95 var(--display);color:var(--paper);text-wrap:balance}
h2{margin:0;font:400 clamp(32px,6vw,48px)/1.02 var(--display);text-wrap:balance}
.lede{margin:0;font:italic 400 clamp(19px,2.6vw,24px)/1.32 var(--body);max-width:30em}
.controls{margin:0;font:400 18px/1.3 var(--hand);opacity:.92}
.legal{margin:6px 0 0;font-size:14px;opacity:.75}
.legal a{color:inherit}
.big{justify-self:start;padding:12px 26px 14px;background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:400 26px/1 var(--display);touch-action:manipulation}
.big:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.big:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.card{width:min(520px,100%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 #000a;padding:22px 24px 24px;display:grid;gap:14px;transform:rotate(-.5deg);margin:auto}
.quip{margin:0;font:italic 400 20px/1.32 var(--body)}
.card .row{display:flex;gap:10px;flex-wrap:wrap}
.card .row button,#btnNote,#dialogOpts button{padding:9px 14px 10px;background:var(--paper2);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:400 19px/1.1 var(--hand);touch-action:manipulation}
.check,.range{display:flex;gap:10px;align-items:center;font:400 18px/1.2 var(--hand);touch-action:manipulation}
.check input{width:20px;height:20px;accent-color:var(--red)}
.range input{flex:1;min-width:0;accent-color:var(--red);touch-action:pan-x}
.endList{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:3px 12px;font:400 17px/1.25 var(--hand)}
.endList .no{opacity:.42}
.endList .new{color:var(--red)}
.endCard{width:min(600px,100%)}
#dialogCard{transition:width .3s}
#dialogOpts{display:flex;gap:12px;flex-wrap:wrap;min-height:60px;position:relative}
#dialogOpts.stack{flex-direction:column;align-items:stretch}
#dialogOpts button{text-align:left;transition:transform .12s,font-size .2s}
#dialogOpts button.flee{position:fixed;z-index:20;transition:left .1s,top .1s,transform .12s}
.paper{width:min(540px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fdfaf2 repeating-linear-gradient(0deg,transparent 0 29px,#b9c9dc66 29px 30px);color:var(--ink);padding:22px 26px;
  border:2px solid var(--ink);box-shadow:6px 6px 0 #0009;transform:rotate(.6deg);font:400 21px/30px var(--hand);display:grid;gap:12px;margin:auto;touch-action:pan-y}
.paper p{margin:0}
.paper s{color:var(--red)}
#btnNote{justify-self:end}

body.anger-mid #cross{background:#ffb4a8}
@media (max-width:640px){
  #start{background:#14110fd9;place-items:center;padding-left:16px}
  #patience{width:40vw}
}
@media (max-height:460px){
  #start{place-items:start}
  h1{font-size:50px}.lede{font-size:18px}.startCard{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  #sub.shout{animation:none}
  #flip.in,#flip.out{transition-duration:.01s}
}