/* 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) .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.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-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.set-village::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22%; height: 30%; background: linear-gradient(90deg, #f2a65a 0 16%, #ffd34d 16% 30%, #e0457b 30% 46%, #6fb7ff 46% 62%, #f2a65a 62% 78%, #9ad07a 78% 100%); }
.scene.night[class*="set-room"], .scene.night.set-kitchen, .scene.night.set-school { filter: brightness(.6); }
/* 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(8deg) translateX(3%); transform-origin: 50% 100%; }
.scene .stage .who.pose-jump img { transform: translateY(-9%) rotate(-4deg); }
.scene .stage .who.pose-bow img { transform: rotate(14deg); 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; }