/* Stories. Colours and the button gradient come from /brand.css and /theme.css. Nothing here moves: no animations or transitions. */

/* no caret, no text highlight, no grey tap flash (nothing here is typed into) */
html, body, div, p, span, h1, h2, h3, small, label, button, svg, b, img, i { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; caret-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }  /* keyboard users keep a focus ring */

/* app.js sets --dvw / --dvh (1% of the screen's width / height) and lays an upright phone on its side (html.rot) */
html { --dvh: 1dvh; --dvw: 1vw; height: 100%; }
html.rot body { position: fixed; top: 0; left: var(--vhpx); width: var(--vwpx); height: var(--vhpx); transform: rotate(90deg); transform-origin: 0 0; overflow: hidden; }
body { touch-action: manipulation; margin: 0; min-height: 100%; font-weight: 600; overflow-x: hidden; color: #1c1165; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.screen { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 0 calc(var(--dvw) * 2) calc(var(--dvh) * 3); }

/* ------------------------------------------------------------------ the sky (still): day, evening, night, rain, snow */
.sky, .scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(#7fcdff 0%, #bfe6ff 48%, #eefbe0 100%); }
.orb { position: absolute; top: 4%; left: 6%; width: calc(var(--dvh) * 16); height: calc(var(--dvh) * 16); border-radius: 50%; background: radial-gradient(circle, #fff6b8 0 45%, rgba(255, 238, 140, .55) 48%, transparent 72%); }
.cl { position: absolute; width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 8); border-radius: 999px; background: #fff; opacity: .92; }
.cl::before, .cl::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cl::before { width: 42%; height: 150%; left: 14%; top: -70%; } .cl::after { width: 32%; height: 120%; left: 52%; top: -45%; }
.cl.c1 { top: 14%; left: 52%; } .cl.c2 { top: 30%; left: 20%; transform: scale(.7); }
.hill { position: absolute; bottom: -18%; border-radius: 50%; }
.h1 { left: -12%; width: 70%; height: 46%; background: #8fd36b; } .h2 { right: -16%; width: 80%; height: 38%; background: #6cc25a; }
.ground { position: absolute; left: -5%; right: -5%; bottom: 0; height: 30%; background: #8fd36b; border-top-left-radius: 50% 40%; border-top-right-radius: 50% 40%; }
.ground::before { content: ''; position: absolute; left: 0; right: 0; top: 24%; bottom: 0; background: #7dc85a; }
.sky.dusk, .scene.dusk { background: linear-gradient(#ff9a6b 0%, #ffc58a 45%, #ffe9c4 100%); }
.dusk .orb { top: 30%; background: radial-gradient(circle, #ffd27a 0 45%, rgba(255, 150, 90, .5) 48%, transparent 72%); } .dusk .cl { background: #ffd9c2; } .dusk .cl::before, .dusk .cl::after { background: #ffd9c2; }
.sky.night, .scene.night { background: linear-gradient(#141a45 0%, #27307a 55%, #46529c 100%); }
.night .orb { left: auto; right: 8%; width: calc(var(--dvh) * 11); height: calc(var(--dvh) * 11); background: #fff6c8; box-shadow: inset calc(var(--dvh) * -2.6) 0 0 0 #fffbe6, 0 0 calc(var(--dvh) * 4) rgba(255, 246, 200, .6); }
.night .cl { opacity: .18; } .night .h1, .night .ground { background: #2f6a4a; } .night .h2, .night .ground::before { background: #285a3f; }
.night::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 0 1.6px, transparent 2.4px), radial-gradient(circle, #fff 0 1.2px, transparent 2px); background-size: 14vh 11vh, 9vh 13vh; background-position: 3vh 2vh, 7vh 6vh; opacity: .7; }
.sky.rain, .scene.rain { background: linear-gradient(#7d8aa3 0%, #a5b0c4 55%, #cfd8e3 100%); }
.rain .orb { display: none; } .rain .cl { background: #dfe5ee; } .rain .cl::before, .rain .cl::after { background: #dfe5ee; }
.rain::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255, 255, 255, .55) 22px 24px); opacity: .6; }
.sky.snow, .scene.snow { background: linear-gradient(#b9d3ef 0%, #dcebfa 55%, #f6fbff 100%); }
.snow .orb { display: none; } .snow .h1, .snow .h2, .snow .ground, .snow .ground::before { background: #fafdff; }
.snow::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 0 3px, transparent 4px), radial-gradient(circle, #fff 0 2px, transparent 3px); background-size: 9vh 8vh, 6vh 11vh; background-position: 2vh 1vh, 5vh 4vh; opacity: .9; }

/* ------------------------------------------------------------------ top bars and buttons */
.topbar { position: relative; z-index: 3; grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--dvw) * 1.4); padding: calc(var(--dvh) * 2.5) 56px calc(var(--dvh) * 1.2) 0; }
.title { flex: 1; margin: 0; font-size: calc(var(--dvh) * 7); font-weight: 900; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); letter-spacing: .4px; }
.title.small { font-size: calc(var(--dvh) * 5.2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: calc(var(--dvh) * 1) 14px; border-radius: 999px; background: #fff; border: 2px solid #ffd978; box-shadow: 0 3px 0 #e0b24a; font-size: calc(var(--dvh) * 5.2); font-weight: 900; color: #6b4a00; }
.chip svg { width: calc(var(--dvh) * 5.6); height: calc(var(--dvh) * 5.6); }
.round { flex: none; width: calc(var(--dvh) * 10); height: calc(var(--dvh) * 10); min-width: 40px; min-height: 40px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #1c1165; }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c1165; }
.round svg { width: 55%; height: 55%; }

.panel { position: relative; z-index: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--dvh) * 2.5) calc(var(--dvw) * 3.5) calc(var(--dvh) * 1.5); border-radius: 26px;
  background: rgba(255, 255, 255, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(28, 17, 101, .15); }
.pager { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--dvw) * 1.6); width: 100%; }
.grid { flex: 1; min-width: 0; align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(var(--dvh) * 3) calc(var(--dvw) * 1.2); padding-bottom: calc(var(--dvh) * 1.8); }

/* the level and story buttons: glossy buttons in the house gradient; locked ones are grey with a padlock; finished stories carry a tick */
.lvl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 1); min-height: 0; padding: 6px 4px 8px; border: 0; border-radius: 20px; color: #fff; overflow: hidden;
  background: var(--grad); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #1c1165, 0 calc(var(--dvh) * 2.6) 14px rgba(28, 17, 101, .32), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lvl::before { content: ''; position: absolute; left: 6%; right: 6%; top: 3%; height: 38%; border-radius: 20px 20px 60% 60%; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.lvl:active { transform: translateY(calc(var(--dvh) * 1.2)); box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165, 0 4px 8px rgba(28, 17, 101, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lvl .num { position: relative; display: grid; place-items: center; width: calc(var(--dvh) * 9.5); height: calc(var(--dvh) * 9.5); min-width: 30px; min-height: 30px; border-radius: 50%; background: #fff; color: #3a2bd0; font-size: max(16px, calc(var(--dvh) * 5.6)); font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.lvl .ttl { position: relative; font-size: max(10px, calc(var(--dvh) * 3)); font-weight: 800; line-height: 1.12; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); padding: 0 2px; overflow-wrap: anywhere; }
.lvl.story .ttl { font-size: max(10px, calc(var(--dvh) * 2.9)); }
.lvl.locked { background: linear-gradient(135deg, #c9c3dc, #a29bb8 60%, #8a83a1); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #6d6685, 0 calc(var(--dvh) * 2.6) 14px rgba(60, 50, 90, .25), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lvl.locked .num { background: #ece9f5; color: #7a7390; }
.lvl.locked .num svg { width: 58%; height: 58%; }
.lvl.locked .ttl { opacity: .85; }
.lvl .tick { position: absolute; z-index: 2; top: 5%; right: 5%; width: calc(var(--dvh) * 7); height: calc(var(--dvh) * 7); min-width: 24px; min-height: 24px; display: grid; place-items: center; border-radius: 50%; background: #3fc79a; border: 2px solid #fff; box-shadow: 0 2px 0 #1f9a6e; }
.lvl .tick svg { width: 64%; height: 64%; }
.lvl.done { background: linear-gradient(135deg, #3fc79a, #1f9a6e 60%, #17795a); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #0f5c43, 0 calc(var(--dvh) * 2.6) 14px rgba(15, 92, 67, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lvl.done .num { color: #1f9a6e; }
.lvl.shake { transform: translateX(-5px); }

.toast { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dvh) * 5); transform: translateX(-50%); max-width: 80%; padding: calc(var(--dvh) * 1.6) calc(var(--dvw) * 2.4); border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: calc(var(--dvh) * 4.4); text-align: center; box-shadow: 0 6px 18px rgba(28, 17, 101, .4); }

/* signposts: a wooden arrow board on a post: Back at the left, Next (or Finish) at the right */
.sign { flex: none; width: calc(var(--dvh) * 19); padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; filter: drop-shadow(0 2px 0 #5e3510) drop-shadow(0 5px 5px rgba(60, 35, 10, .3)); }
.sign .board { width: 100%; height: calc(var(--dvh) * 11); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: max(13px, calc(var(--dvh) * 4)); letter-spacing: .5px; text-shadow: 0 2px 0 rgba(94, 53, 16, .8);
  background: repeating-linear-gradient(#e3ab5e 0 7px, #d99a47 7px 9px, #e3ab5e 9px 15px); }
.sign.next .board { clip-path: polygon(0 12%, 70% 12%, 70% 0, 100% 50%, 70% 100%, 70% 88%, 0 88%); padding-right: 22%; }
.sign.back .board { clip-path: polygon(100% 12%, 30% 12%, 30% 0, 0 50%, 30% 100%, 30% 88%, 100% 88%); padding-left: 22%; }
.sign .post { width: calc(var(--dvh) * 3.4); min-width: 12px; height: calc(var(--dvh) * 15); margin-top: -2px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #8a561f, #c98b4a 45%, #8a561f); }
.sign:active { transform: scale(.94); }

/* ------------------------------------------------------------------ a story page: the picture fills the screen, the line sits at the bottom */
#story { padding: 0; }
.scene .stage { position: absolute; left: 0; right: 0; top: calc(var(--dvh) * 12); bottom: calc(var(--dvh) * 30); display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--dvw) * 1); padding: 0 calc(var(--dvw) * 4); }
.scene .stage img { flex: none; display: block; filter: drop-shadow(0 6px 6px rgba(28, 17, 101, .18)); }
.scene .stage .prop { flex: none; line-height: 1; margin-bottom: 2%; filter: drop-shadow(0 4px 4px rgba(28, 17, 101, .22)); }
.scene .stage .props { display: flex; align-items: flex-end; gap: calc(var(--dvw) * 1.2); margin-left: calc(var(--dvw) * 2); }
.scene.solo .stage .props { margin-left: 0; }
.scene .stage .who { position: relative; flex: none; display: block; }
.scene .stage .grp { position: relative; flex: none; display: block; }
.scene .stage .thing { position: absolute; display: block; line-height: 1; filter: drop-shadow(0 4px 4px rgba(28, 17, 101, .22)); }
.scene .stage .thing svg { display: block; }
.scene .stage .thing .emo { display: block; text-align: center; }
.scene .stage .thing.at-sky { position: absolute; }
#story .hud { position: absolute; left: 0; right: 0; top: 0; padding-left: calc(var(--dvw) * 2); }
.hud .title.small { text-align: center; }
.bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--dvh) * 28); display: flex; align-items: flex-end; gap: calc(var(--dvw) * 1.4); padding: 0 calc(var(--dvw) * 2) calc(var(--dvh) * 2); }
.signslot { flex: none; width: calc(var(--dvh) * 19); display: flex; justify-content: center; align-items: flex-end; }
.signslot:empty { visibility: hidden; }
.line { position: relative; flex: 1; min-width: 0; align-self: stretch; margin-bottom: calc(var(--dvh) * 1); display: flex; align-items: center; justify-content: center; padding: calc(var(--dvh) * 1.5) calc(var(--dvw) * 4) calc(var(--dvh) * 1.5) calc(var(--dvw) * 2.4); text-align: center; border: 0; border-radius: 28px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 6px 0 rgba(28, 17, 101, .2), 0 10px 24px rgba(28, 17, 101, .18); color: #1c1165; font-weight: 800; line-height: 1.22; font-size: calc(var(--dvh) * 7.2); }
.line.m { font-size: calc(var(--dvh) * 5.8); } .line.l { font-size: calc(var(--dvh) * 4.8); } .line.xl { font-size: calc(var(--dvh) * 4); }
.line.speaking { background: #fff7d1; }
.line .spk { position: absolute; right: calc(var(--dvh) * 2); bottom: calc(var(--dvh) * 1.6); width: calc(var(--dvh) * 5.4); height: calc(var(--dvh) * 5.4); opacity: .55; }

/* ------------------------------------------------------------------ the questions after a story */
#quiz { padding-bottom: calc(var(--dvh) * 3); }
.qbody { position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 3); padding: 0 calc(var(--dvw) * 4); }
.qq { display: flex; align-items: center; gap: calc(var(--dvw) * 1.6); text-align: center; font-size: calc(var(--dvh) * 6.6); font-weight: 900; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .85); }
.qline { max-width: 90%; padding: calc(var(--dvh) * 1.6) calc(var(--dvw) * 3); border-radius: 22px; background: rgba(255, 255, 255, .95); box-shadow: 0 5px 0 rgba(28, 17, 101, .18); text-align: center; font-weight: 800; font-size: calc(var(--dvh) * 5.8); line-height: 1.2; }
.qline u { text-decoration: none; display: inline-block; min-width: 3.4em; border-bottom: .12em solid #3a2bd0; color: transparent; }
.spkbtn { flex: none; width: calc(var(--dvh) * 9); height: calc(var(--dvh) * 9); min-width: 36px; min-height: 36px; border: 0; border-radius: 50%; background: var(--grad); display: grid; place-items: center; box-shadow: 0 3px 0 #1c1165; }
.spkbtn svg { width: 56%; height: 56%; } .spkbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c1165; }
.opts { width: 100%; display: flex; justify-content: center; align-items: stretch; gap: calc(var(--dvw) * 2); }
.opts.col { flex-direction: column; align-items: center; gap: calc(var(--dvh) * 2.2); }
.opt { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--dvw) * 1.2); border: calc(var(--dvh) * .8) solid #fff; border-radius: calc(var(--dvh) * 4); background: var(--grad); color: #fff; font-weight: 900; line-height: 1.15;
  box-shadow: 0 calc(var(--dvh) * 1.2) 0 rgba(28, 17, 101, .35); padding: calc(var(--dvh) * 2) calc(var(--dvw) * 2.4); }
.opt:active { transform: translateY(calc(var(--dvh) * .6)); }
.opt.word { font-size: calc(var(--dvh) * 8); min-width: calc(var(--dvw) * 18); }
.opt.txt { font-size: calc(var(--dvh) * 4.8); width: 86%; text-align: left; justify-content: flex-start; }
.opt.who { flex-direction: column; background: #fff; color: #1c1165; padding: calc(var(--dvh) * 1) calc(var(--dvw) * 1.6) calc(var(--dvh) * 1.6); font-size: calc(var(--dvh) * 5); box-shadow: 0 calc(var(--dvh) * 1.2) 0 rgba(28, 17, 101, .25); border-color: #c9c0f5; }
.opt.who img { height: calc(var(--dvh) * 34); width: auto; display: block; }
.opt .spkbtn { width: calc(var(--dvh) * 7); height: calc(var(--dvh) * 7); min-width: 30px; min-height: 30px; box-shadow: 0 2px 0 #1c1165; background: #fff; }
.opt .spkbtn svg path { fill: #3a2bd0; stroke: #3a2bd0; }
.opt.miss { background: #c9c3dc; color: #7a7390; opacity: .6; box-shadow: none; border-color: #fff; }
.opt.who.miss { background: #ece9f5; }
.opt.right { background: linear-gradient(135deg, #3fc79a, #1f9a6e); color: #fff; }
.opt.who.right { background: #d9f6ea; color: #17795a; border-color: #3fc79a; }
.pend { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; background: rgba(28, 17, 101, .45); }
.endcard { text-align: center; background: #fff; border-radius: 30px; padding: calc(var(--dvh) * 4) calc(var(--dvw) * 6); box-shadow: 0 10px 0 rgba(28, 17, 101, .25); }
.endcard h2 { margin: 0; font-size: calc(var(--dvh) * 8); color: #1c1165; }
.endcard .stars { display: flex; justify-content: center; gap: calc(var(--dvw) * 1.2); margin: calc(var(--dvh) * 2) 0; }
.endcard .stars svg { width: calc(var(--dvh) * 14); height: calc(var(--dvh) * 14); }
.endcard p { margin: 0 0 calc(var(--dvh) * 2); font-size: calc(var(--dvh) * 5); font-weight: 800; color: #7a7390; }
.start-btn { border: 0; border-radius: 999px; padding: calc(var(--dvh) * 2) calc(var(--dvh) * 9); font-size: calc(var(--dvh) * 6); font-weight: 900; color: #fff; background: var(--grad); box-shadow: 0 calc(var(--dvh) * 1.4) 0 #1c1165, inset 0 2px 0 rgba(255, 255, 255, .35); }
.start-btn:active { transform: translateY(calc(var(--dvh) * 1.2)); box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165; }

/* ---- the sounds menu ---- */
.snd-btn { flex: none; }
.topbar .snd-btn { margin-left: auto; }
.topbar .chip + .snd-btn { margin-left: calc(var(--dvw) * 1); }
.sndpop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(20, 10, 60, .45); }
.sndcard { min-width: 280px; padding: 18px 28px 20px; border-radius: 20px; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.sndcard h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #1c1165; }
.snd-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 40px; padding: 10px 0; background: none; border: 0; font: inherit; font-size: 22px; font-weight: 700; color: #1c1165; cursor: pointer; }
.snd-opt .sw { position: relative; flex: none; width: 64px; height: 34px; border-radius: 17px; background: #b9b4c7; }
.snd-opt .sw.on { background: var(--grad); }
.snd-opt .sw i { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.snd-opt .sw.on i { left: 33px; }
.snd-done { margin-top: 12px; width: 100%; }

/* ---- the setting behind the characters (the sky and hills stay for the park, the garden, the farm and the forest) ---- */
.scene[class*="set-"]:not(.set-park):not(.set-farm):not(.set-forest):not(.set-beach):not(.set-desert):not(.set-sea):not(.set-village):not(.set-mountain):not(.set-river):not(.set-garden) .orb, .scene.set-room .cl, .scene.set-kitchen .cl, .scene.set-school .cl { display: none; }
.scene.set-room, .scene.set-kitchen, .scene.set-school { background: linear-gradient(#ffeccf, #f8d7a4); }
.scene.set-room .ground, .scene.set-kitchen .ground, .scene.set-school .ground { left: 0; right: 0; height: 24%; border-radius: 0; background: #c9915a; }
.scene.set-room .ground::before, .scene.set-kitchen .ground::before, .scene.set-school .ground::before { top: 0; background: #b9803f; opacity: .55; }
.scene.set-room::after { content: ''; position: absolute; right: 12%; top: 16%; width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 26); border: calc(var(--dvh) * 1.4) solid #fff; border-radius: 10px; background: linear-gradient(#9ed8ff, #d6f0ff); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.scene.rain.set-room::after { background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .8) 0 2px, transparent 2px 9px), linear-gradient(#7d8aa3, #a5b0c4); }
.scene.night.set-room::after { background: radial-gradient(circle at 30% 30%, #fff 0 2px, transparent 3px), linear-gradient(#141a45, #46529c); }
.scene.snow.set-room::after { background: radial-gradient(circle, #fff 0 2px, transparent 3px) 0 0 / 14px 14px, linear-gradient(#b9c9e6, #e6eefb); }
.scene.set-kitchen { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px calc(var(--dvh) * 9)), linear-gradient(#e3f3f8, #cfe8f0); }
.scene.set-kitchen::after { content: ''; position: absolute; left: 0; right: 0; bottom: 24%; height: 9%; background: #9a6a3a; }
.scene.set-school { background: linear-gradient(#f4e9d2, #e8d9b8); }
.scene.set-school::after { content: ''; position: absolute; left: 10%; top: 14%; width: 50%; height: 36%; border: calc(var(--dvh) * 1.4) solid #9a6a3a; border-radius: 8px; background: #2f6a4a; }
.scene.set-desert .ground { background: #ecc98a; } .scene.set-desert .ground::before { background: #e0b872; }
.scene.set-beach .ground { background: #f2dfa0; } .scene.set-beach .ground::before { background: #ead38a; }
.scene.set-beach::after, .scene.set-sea::after { content: ''; position: absolute; left: 0; right: 0; bottom: 30%; height: 12%; background: linear-gradient(#58b6e8, #3d9fd6); }
.scene.set-sea { background: linear-gradient(#aee0ff, #6fc0ee 55%, #3d9fd6); } .scene.set-sea .ground { background: #3d9fd6; border-radius: 0; left: 0; right: 0; } .scene.set-sea .ground::before { background: #2f8ec6; }
.scene.set-forest { background: linear-gradient(#bfe6c0, #7fbf86); }
.scene.set-forest::after { content: ''; position: absolute; inset: 0 0 26% 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--dvh) * 14), rgba(94, 62, 36, .55) calc(var(--dvh) * 14) calc(var(--dvh) * 17)); pointer-events: none; }
.scene.set-forest .ground { background: #5fa35a; } .scene.set-forest .ground::before { background: #509449; }
.scene.set-farm .ground { background: #d9c46a; } .scene.set-farm .ground::before { background: #c9b257; }
.scene.set-village .ground { left: 0; right: 0; height: 22%; border-radius: 0; background: #9aa0ad; } .scene.set-village .ground::before { top: 0; background: #8a909d; }
.scene.night[class*="set-room"], .scene.night.set-kitchen, .scene.night.set-school { filter: brightness(.8); }
/* what the main character is doing (still pictures, nothing moves) */
.scene .stage .who.pose-sleep img { transform: rotate(-90deg) translate(0, 6%); transform-origin: 50% 80%; }
.scene .stage .who.pose-fall img { transform: rotate(-70deg); transform-origin: 50% 90%; }
.scene .stage .who.pose-run img { transform: rotate(14deg) translateX(6%); transform-origin: 50% 100%; }
.scene .stage .who.pose-jump img { transform: translateY(-16%) rotate(-6deg); }
.scene .stage .who.pose-bow img { transform: rotate(22deg); transform-origin: 50% 100%; }
.scene .stage .thing.pose-jump { transform: translateY(calc(-20% - 22px)) rotate(-6deg); }
.scene .stage .thing.pose-sit { transform: rotate(17deg) scale(1, .93); transform-origin: 82% 100%; }
.scene .stage .thing.pose-run { transform: rotate(10deg) translateX(8%); transform-origin: 50% 100%; }
.scene .stage .thing.pose-fall { transform: rotate(70deg); transform-origin: 50% 90%; }
.scene .stage .thing.pose-bow { transform: rotate(24deg); transform-origin: 50% 100%; }

/* the setting is painted behind the stage (the characters and things) */
.scene .stage { z-index: 1; }
.scene[class*="set-"]::after { z-index: 0; }

/* backdrops with something in them: a row of houses (village) and a barn and fence (farm); an element of its own so rain and stars still show */
.scene .bg { position: absolute; left: 0; right: 0; bottom: 22%; height: 34%; background-repeat: repeat-x; background-position: left bottom; background-size: auto 100%; pointer-events: none; display: none; }
.scene.set-village .bg { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' stroke='%233a2430' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='8' y='44' width='64' height='56' fill='%23f2a65a'/%3E%3Cpolygon points='2,46 40,14 78,46' fill='%23c8493f'/%3E%3Crect x='32' y='68' width='16' height='32' fill='%239a6a3a'/%3E%3Crect x='14' y='56' width='14' height='14' fill='%23bfe6ff'/%3E%3Crect x='52' y='56' width='14' height='14' fill='%23bfe6ff'/%3E%3Crect x='96' y='30' width='56' height='70' fill='%23ffd34d'/%3E%3Crect x='92' y='24' width='64' height='10' fill='%23e0457b'/%3E%3Crect x='104' y='42' width='12' height='12' fill='%23bfe6ff'/%3E%3Crect x='132' y='42' width='12' height='12' fill='%23bfe6ff'/%3E%3Crect x='104' y='62' width='12' height='12' fill='%23bfe6ff'/%3E%3Crect x='124' y='74' width='16' height='26' fill='%239a6a3a'/%3E%3Crect x='176' y='50' width='60' height='50' fill='%236fb7ff'/%3E%3Cpolygon points='170,52 206,20 242,52' fill='%238b4a2b'/%3E%3Crect x='198' y='72' width='16' height='28' fill='%23f6f4fa'/%3E%3Crect x='182' y='60' width='12' height='12' fill='%23fff'/%3E%3Crect x='262' y='64' width='8' height='36' fill='%239a6a3a'/%3E%3Ccircle cx='266' cy='52' r='22' fill='%2334b36b'/%3E%3C/svg%3E"); }
.scene.set-farm .bg { display: block; bottom: 26%; height: 30%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' stroke='%233a2430' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='14' y='38' width='72' height='62' fill='%23d6453d'/%3E%3Cpolygon points='8,42 50,8 92,42' fill='%238b2f2a'/%3E%3Crect x='38' y='58' width='24' height='42' fill='%23f6f4fa'/%3E%3Cpath d='M38 58L62 100M62 58L38 100' fill='none'/%3E%3Cellipse cx='150' cy='84' rx='26' ry='16' fill='%23f2c14e'/%3E%3Cpath d='M132 80Q150 70 168 80' fill='none' stroke='%23c99a2e'/%3E%3Cpath d='M190 100V70M214 100V70M238 100V70M262 100V70M186 78H270M186 90H270' fill='none' stroke-width='3'/%3E%3C/svg%3E"); }

/* backdrops for more settings */
.scene.set-forest .bg { display: block; bottom: 24%; height: 44%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%2726%27%20y%3D%2764.9%27%20width%3D%278%27%20height%3D%2735.1%27%20fill%3D%27%238a5a28%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2751.64%27%20r%3D%2729.64%27%20fill%3D%27%232f8f4e%27%2F%3E%3Crect%20x%3D%2786%27%20y%3D%2758.6%27%20width%3D%278%27%20height%3D%2741.4%27%20fill%3D%27%238a5a28%27%2F%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2742.96%27%20r%3D%2734.96%27%20fill%3D%27%233aa35a%27%2F%3E%3Crect%20x%3D%27156%27%20y%3D%2768.5%27%20width%3D%278%27%20height%3D%2731.5%27%20fill%3D%27%238a5a28%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%2756.6%27%20r%3D%2726.6%27%20fill%3D%27%232a7f46%27%2F%3E%3Crect%20x%3D%27226%27%20y%3D%2760.4%27%20width%3D%278%27%20height%3D%2739.6%27%20fill%3D%27%238a5a28%27%2F%3E%3Ccircle%20cx%3D%27230%27%20cy%3D%2745.44%27%20r%3D%2733.44%27%20fill%3D%27%2334a055%27%2F%3E%3Crect%20x%3D%27281%27%20y%3D%2766.69999999999999%27%20width%3D%278%27%20height%3D%2733.300000000000004%27%20fill%3D%27%238a5a28%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%2754.12%27%20r%3D%2728.12%27%20fill%3D%27%232f8f4e%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-mountain .bg { display: block; bottom: 22%; height: 48%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%270%2C100%2050%2C26%20100%2C100%27%20fill%3D%27%238f9bb3%27%2F%3E%3Cpolygon%20points%3D%2750%2C26%2038%2C48%2050%2C42%2060%2C50%27%20fill%3D%27%23fff%27%2F%3E%3Cpolygon%20points%3D%2770%2C100%20140%2C10%20220%2C100%27%20fill%3D%27%237a86a2%27%2F%3E%3Cpolygon%20points%3D%27140%2C10%20122%2C40%20140%2C32%20156%2C44%27%20fill%3D%27%23fff%27%2F%3E%3Cpolygon%20points%3D%27190%2C100%20245%2C38%20300%2C100%27%20fill%3D%27%238f9bb3%27%2F%3E%3Cpolygon%20points%3D%27245%2C38%20234%2C56%20245%2C50%20256%2C58%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-river .bg { display: block; bottom: 27%; height: 26%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M0%2070Q40%2058%2080%2070T160%2070T240%2070T300%2070V100H0Z%27%20fill%3D%27%234fa6e6%27%2F%3E%3Cpath%20d%3D%27M10%2082Q30%2076%2050%2082M120%2088Q140%2082%20160%2088M210%2080Q230%2074%20250%2080%27%20fill%3D%27none%27%20stroke%3D%27%23bfe6ff%27%2F%3E%3Cpath%20d%3D%27M20%2070V40M26%2070V34M270%2070V42M276%2070V32%27%20fill%3D%27none%27%20stroke%3D%27%235a9b3d%27%20stroke-width%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-garden .bg { display: block; bottom: 22%; height: 30%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M0%20100V62M30%20100V62M60%20100V62M90%20100V62M120%20100V62M150%20100V62M180%20100V62M210%20100V62M240%20100V62M270%20100V62M300%20100V62%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke%3D%27%23c9a06a%27%2F%3E%3Cpath%20d%3D%27M0%2072H300M0%2088H300%27%20fill%3D%27none%27%20stroke%3D%27%23c9a06a%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M20%2062V40%27%20fill%3D%27none%27%20stroke%3D%27%233a9a4a%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2734%27%20r%3D%278%27%20fill%3D%27%23e8344a%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2734%27%20r%3D%273%27%20fill%3D%27%23f2b632%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M70%2062V40%27%20fill%3D%27none%27%20stroke%3D%27%233a9a4a%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2734%27%20r%3D%278%27%20fill%3D%27%23f2b632%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2734%27%20r%3D%273%27%20fill%3D%27%23f2b632%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M125%2062V40%27%20fill%3D%27none%27%20stroke%3D%27%233a9a4a%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27125%27%20cy%3D%2734%27%20r%3D%278%27%20fill%3D%27%23d56bd0%27%2F%3E%3Ccircle%20cx%3D%27125%27%20cy%3D%2734%27%20r%3D%273%27%20fill%3D%27%23f2b632%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M190%2062V40%27%20fill%3D%27none%27%20stroke%3D%27%233a9a4a%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27190%27%20cy%3D%2734%27%20r%3D%278%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27190%27%20cy%3D%2734%27%20r%3D%273%27%20fill%3D%27%23f2b632%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M250%2062V40%27%20fill%3D%27none%27%20stroke%3D%27%233a9a4a%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2734%27%20r%3D%278%27%20fill%3D%27%23ff8a4a%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2734%27%20r%3D%273%27%20fill%3D%27%23f2b632%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-sea .bg { display: block; bottom: 28%; height: 36%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M0%2096Q15%2088%2030%2096T60%2096T90%2096T120%2096T150%2096T180%2096T210%2096T240%2096T270%2096T300%2096%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M200%20100V30L214%2030V100Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M200%2050H214M200%2070H214%27%20stroke%3D%27%23e8344a%27%20stroke-width%3D%276%27%2F%3E%3Crect%20x%3D%27198%27%20y%3D%2720%27%20width%3D%2718%27%20height%3D%2710%27%20fill%3D%27%23f2b632%27%2F%3E%3Cpath%20d%3D%27M196%2020H218L207%208Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M40%20100L60%2080H110L130%20100Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M85%2080V38L112%2074Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-mountain { background: linear-gradient(#aee0ff, #e4f4ff); } .scene.set-mountain .ground { background: #8fb87a; } .scene.set-mountain .ground::before { background: #7ea86a; }
.scene.set-river .ground { background: #6fb85a; } .scene.set-garden .ground { background: #7fc65a; } .scene.set-garden .ground::before { background: #6fb84c; }
/* stars on a night sky where the setting has no backdrop of its own */
.scene.night.set-park .bg, .scene.night.set-beach .bg, .scene.night.set-desert .bg { display: block; top: 0; bottom: 45%; height: auto; background-repeat: repeat; background-size: 200px 100px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cg fill='%23fff6c8'%3E%3Ccircle cx='14' cy='20' r='1.6'/%3E%3Ccircle cx='52' cy='60' r='1.2'/%3E%3Ccircle cx='88' cy='14' r='1.8'/%3E%3Ccircle cx='120' cy='48' r='1.3'/%3E%3Ccircle cx='160' cy='22' r='1.6'/%3E%3Ccircle cx='184' cy='70' r='1.2'/%3E%3Ccircle cx='36' cy='84' r='1'/%3E%3Ccircle cx='140' cy='88' r='1.1'/%3E%3C/g%3E%3C/svg%3E"); }

.scene.set-sea .bg { bottom: 30%; height: 40%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M215%2080V22H231V80Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M215%2040H231M215%2058H231%27%20stroke%3D%27%23e8344a%27%20stroke-width%3D%276%27%2F%3E%3Crect%20x%3D%27213%27%20y%3D%2714%27%20width%3D%2720%27%20height%3D%278%27%20fill%3D%27%23f2b632%27%2F%3E%3Cpath%20d%3D%27M211%2014H235L223%202Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M60%2078H120L108%2096H72Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M90%2078V26L116%2072Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M86%2078V38L66%2074Z%27%20fill%3D%27%23f2b632%27%2F%3E%3Cpath%20d%3D%27M0%2092Q15%2086%2030%2092T60%2092T90%2092T120%2092T150%2092T180%2092T210%2092T240%2092T270%2092T300%2092%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%2F%3E%3C%2Fsvg%3E"); }

/* open sea: only waves; a harbour (boat, ship, lighthouse in the story) adds boats and a lighthouse */
.scene.set-sea .bg { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M0%2092Q15%2086%2030%2092T60%2092T90%2092T120%2092T150%2092T180%2092T210%2092T240%2092T270%2092T300%2092%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M0%2070Q15%2064%2030%2070T60%2070T90%2070T120%2070T150%2070T180%2070T210%2070T240%2070T270%2070T300%2070%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27%20opacity%3D%27.6%27%2F%3E%3C%2Fsvg%3E"); }
.scene.set-sea.harbour .bg { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20100%27%20stroke%3D%27%233a2430%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M215%2080V22H231V80Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M215%2040H231M215%2058H231%27%20stroke%3D%27%23e8344a%27%20stroke-width%3D%276%27%2F%3E%3Crect%20x%3D%27213%27%20y%3D%2714%27%20width%3D%2720%27%20height%3D%278%27%20fill%3D%27%23f2b632%27%2F%3E%3Cpath%20d%3D%27M211%2014H235L223%202Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M60%2078H120L108%2096H72Z%27%20fill%3D%27%23e8344a%27%2F%3E%3Cpath%20d%3D%27M90%2078V26L116%2072Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M86%2078V38L66%2074Z%27%20fill%3D%27%23f2b632%27%2F%3E%3Cpath%20d%3D%27M0%2092Q15%2086%2030%2092T60%2092T90%2092T120%2092T150%2092T180%2092T210%2092T240%2092T270%2092T300%2092%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%2F%3E%3C%2Fsvg%3E"); }

.scene .stage .thing .em { position: absolute; right: -8%; top: -12%; display: block; pointer-events: none; animation: emote 1.6s ease-in-out infinite; }
.scene .stage .thing .em svg { display: block; width: 100%; height: 100%; }
@keyframes emote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@media (prefers-reduced-motion: reduce) { .scene .stage .thing .em { animation: none; } }