/* The album pages, the shelf, the sticker toolbar, the sleep screen. */
/* album */
#album { background: #fff; }
/* The page's picture runs out to the window's sides and top (--bx/--by, js/stage.js); the stickers live on .page,
   the 1280×620 part of it inside the frame, so their coordinates stay frame coordinates. */
.scene { position: absolute; left: calc(0px - var(--bx)); right: calc(0px - var(--bx)); top: calc(0px - var(--by)); height: calc(620px + var(--by)); overflow: hidden; transition: filter .8s; }
.page { position: absolute; left: var(--bx); top: var(--by); width: 1280px; height: 620px; }
.scene.meadow { background: linear-gradient(#aee2ff 0 58%, #8fd56e 58%); }
.scene.space { background: radial-gradient(circle at 70% 30%, #3b2d80, #120c33 70%); }
.scene.room { background: linear-gradient(#ffe0c2 0 66%, #c98f5d 66%); }
.scene.sea { background: linear-gradient(#aee2ff 0 30%, #3aa4d8 30%, #1b5f9e); }
.scene .deco { position: absolute; pointer-events: none; opacity: .9; }
.spic { width: 1em; height: 1em; object-fit: contain; vertical-align: -.12em; pointer-events: none; user-select: none; }
.placed .spic, .dragghost .spic, .pic .spic, .promptpic .spic, .shadowpic .spic, .bigpic .spic, .sk .e .spic { display: block; }
.placed .spic { width: 1.15em; height: 1.15em; }
.placed { position: absolute; font-size: 120px; line-height: 1; cursor: grab; touch-action: none; transform-origin: center; }
.placed.sel { outline: 4px dashed #ff8a3d; outline-offset: 6px; border-radius: 12px; }
.placed.special { animation: wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle { 50% { translate: 0 -10px; } }
.placed.rare { filter: drop-shadow(0 0 10px #ffd34d); }
.label { position: absolute; z-index: 70; transform: translate(-50%, 0); background: #fff; color: #7d3fbf; font-size: 40px; font-weight: 800;
  padding: 6px 22px; border-radius: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.2); pointer-events: none; animation: pop .25s; }
.scenetabs { position: absolute; top: 22px; left: calc(140px + var(--el)); display: flex; gap: 14px; z-index: 50; }
.st { position: relative; width: 84px; height: 84px; border-radius: 22px; border: 4px solid #fff; font-size: 44px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.st.on { border-color: #ff8a3d; transform: scale(1.1); }
.st.locked { filter: grayscale(1) brightness(.7); }
.st.locked::after { content: ''; position: absolute; right: -10px; bottom: -10px; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M15%2022v-6a9%209%200%200%201%2018%200v6%22%20fill%3D%22none%22%20stroke%3D%22%238d879b%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2222%22%20width%3D%2230%22%20height%3D%2222%22%20rx%3D%227%22%20fill%3D%22%234f4a5e%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2220%22%20width%3D%2230%22%20height%3D%2222%22%20rx%3D%227%22%20fill%3D%22%236d6681%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2230%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222.3%22%20y%3D%2231%22%20width%3D%223.4%22%20height%3D%226%22%20rx%3D%221.5%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tools { position: absolute; z-index: 60; display: none; gap: 8px; background: #fff; padding: 8px; border-radius: 26px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.tools.on { display: flex; }
.tools button { width: 64px; height: 64px; border-radius: 50%; border: none; background: #f4eee6; font-size: 32px; cursor: pointer; }
.tools button.del { background: #ffd9d9; }
.trash { position: absolute; right: calc(30px + var(--er)); bottom: 200px; z-index: 55; width: 120px; height: 120px; border-radius: 50%; background: #ffd9d9;
  font-size: 64px; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 0 #e8a8a8; transition: transform .15s; }
.trash.on { display: flex; }
.trash.hot { transform: scale(1.3); background: #ff9d9d; }
/* the shelf runs out to the window's sides and bottom; the stickers on it stay level with the frame */
.shelf { position: absolute; left: calc(0px - var(--bx)); right: calc(0px - var(--bx)); bottom: calc(0px - var(--by)); height: calc(180px + var(--by)); background: #f7efe3; border-top: 6px solid #e8d8c2;
  display: flex; align-items: center; gap: 18px; padding: 0 calc(30px + var(--bx)) var(--by); overflow-x: auto; }
.shelf .tk { position: relative; flex: none; width: 140px; height: 140px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #e3d2bb;
  display: flex; align-items: center; justify-content: center; font-size: 96px; cursor: grab; touch-action: none; }
.shelf .tk b { position: absolute; top: -8px; right: -8px; min-width: 44px; height: 44px; border-radius: 22px; background: #ff8a3d; color: #fff;
  font-size: 26px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.shelf .empty { font-size: 34px; font-weight: 800; color: #b59c7d; display: flex; align-items: center; gap: 20px; }
.dragghost { position: absolute; z-index: 95; font-size: 120px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%) scale(1.1); }

/* sleep */
#album.sleep .scene { filter: brightness(.35) saturate(.6); }
#album.sleep .placed::after { content: ''; position: absolute; right: -30px; top: -30px; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20aria-hidden%3D%22true%22%3E%3Cg%20font-family%3D%22Nunito%2CArial%2Csans-serif%22%20font-weight%3D%22900%22%20fill%3D%22%23fff%22%3E%3Ctext%20x%3D%222%22%20y%3D%2244%22%20font-size%3D%2228%22%3Ez%3C%2Ftext%3E%3Ctext%20x%3D%2219%22%20y%3D%2227%22%20font-size%3D%2220%22%3Ez%3C%2Ftext%3E%3Ctext%20x%3D%2232%22%20y%3D%2214%22%20font-size%3D%2214%22%3Ez%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; animation: float 2s infinite; }
.sleepmsg { position: absolute; left: 0; right: 0; top: 200px; z-index: 70; text-align: center; color: #fff; display: none; }
#album.sleep .sleepmsg { display: block; }
.sleepmsg .m { font-size: 150px; }
.sleepmsg .t { font-size: 46px; font-weight: 800; margin: 10px 0 30px; text-shadow: 0 3px 10px rgba(0,0,0,.5); }
#album.sleep .shelf, #album.sleep .scenetabs { pointer-events: none; opacity: .4; }
.sleepmsg .keepon { font-size: 30px; padding: 14px 30px; margin-bottom: 16px; }

/* Album artwork lives in backgrounds, underneath all draggable stickers. */
.scene.meadow { background: var(--landscape), radial-gradient(circle at 84% 23%, #ffe9a2 0 42px, #fff3bf55 43px 60px, transparent 61px), linear-gradient(#b8e2e6, #e0f1dd 70%); }
.scene.room { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 620'%3E%3Cpath fill='%23be8c6a' d='M0 410H1280V620H0Z'/%3E%3Cpath stroke='%23a37359' stroke-width='3' d='M0 480H1280M0 565H1280M180 410L90 620M460 410L430 620M820 410L850 620M1100 410L1190 620'/%3E%3Cpath stroke='%23fff2d9' stroke-width='16' d='M0 408H1280'/%3E%3Cellipse fill='%23ab775d' opacity='.18' cx='640' cy='550' rx='355' ry='59'/%3E%3Cellipse fill='%23e4b49b' cx='640' cy='532' rx='350' ry='58'/%3E%3Cellipse fill='none' stroke='%23f6d8b7' stroke-width='5' cx='640' cy='532' rx='320' ry='43'/%3E%3Cpath fill='%23d9b98f' d='M90 308H350V322H90Z'/%3E%3Cpath fill='%239ab9a5' d='M116 247h26v61h-26Z'/%3E%3Cpath fill='%23c98a81' d='M148 237h24v71h-24Z'/%3E%3Cpath fill='%23dcba66' d='M177 256h35v52h-35Z'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, #ffffff00 0 62px, #ffffff30 62px 64px), linear-gradient(#f5e6ca, #e9d1b4); }
.scene.space { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 620'%3E%3Cg fill='%23f4dfbc'%3E%3Ccircle cx='90' cy='210' r='3'/%3E%3Ccircle cx='280' cy='155' r='2'/%3E%3Ccircle cx='450' cy='240' r='3'/%3E%3Ccircle cx='740' cy='140' r='3'/%3E%3Ccircle cx='1160' cy='290' r='3'/%3E%3Ccircle cx='1050' cy='360' r='2'/%3E%3Ccircle cx='560' cy='400' r='2'/%3E%3Ccircle cx='210' cy='430' r='3'/%3E%3Ccircle cx='700' cy='520' r='3'/%3E%3C/g%3E%3Ccircle fill='%23b5abd7' cx='1090' cy='213' r='64'/%3E%3Ccircle fill='%239388b7' cx='1070' cy='194' r='14'/%3E%3Ccircle fill='%239f94c1' cx='1110' cy='236' r='21'/%3E%3Cellipse fill='none' stroke='%23ead0bd' stroke-width='12' opacity='.85' cx='1090' cy='213' rx='104' ry='27' transform='rotate(-25 1090 213)'/%3E%3Cpath fill='%234b4b78' d='M0 585Q210 490 460 590T1000 575T1280 570V620H0Z'/%3E%3Cpath fill='%2364628d' d='M0 615Q200 555 430 620M910 620Q1140 530 1280 590V620Z'/%3E%3C/svg%3E"), radial-gradient(ellipse at 70% 20%, #675386, transparent 60%), linear-gradient(#263750, #353352); }
.scene.sea { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 620'%3E%3Cpath fill='%2378c7d1' d='M0 165Q80 145 160 165T320 165T480 165T640 165T800 165T960 165T1120 165T1280 165V620H0Z'/%3E%3Cpath fill='%23398eac' d='M0 205Q80 185 160 205T320 205T480 205T640 205T800 205T960 205T1120 205T1280 205V620H0Z'/%3E%3Cpath fill='%23ffffff' opacity='.07' d='M170 180L380 570H550L290 180ZM650 180L750 570H850L730 180Z'/%3E%3Cpath fill='%23e5d3a5' d='M0 562Q200 520 460 562T900 560T1280 550V620H0Z'/%3E%3Cpath fill='none' stroke='%23478881' stroke-width='16' stroke-linecap='round' d='M50 575Q20 520 55 470T45 370M80 580Q120 520 90 475M1210 580Q1170 500 1210 440T1205 360'/%3E%3Cg fill='none' stroke='%23c2e7df' stroke-width='3' opacity='.6'%3E%3Ccircle cx='230' cy='370' r='14'/%3E%3Ccircle cx='250' cy='320' r='8'/%3E%3Ccircle cx='1040' cy='300' r='11'/%3E%3C/g%3E%3Cg fill='%23c9b68c'%3E%3Cellipse cx='310' cy='591' rx='20' ry='8'/%3E%3Cellipse cx='940' cy='580' rx='13' ry='6'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#c9e9e5, #ebf5df); }
.scene { background-size: 100% 100%; }
.scene .deco { opacity: .92; filter: drop-shadow(0 5px 0 #4e655914); }
.scene.room .deco { filter: saturate(.75) drop-shadow(0 5px 0 #92684922); }
.scenetabs { gap: 16px; }
.st { border-radius: 26px; box-shadow: 0 5px 0 #51676850, 0 9px 16px #2639421a; }
.st.on { border-color: #fff7d8; outline: 4px solid #dc994a; transform: none; }
.st.locked { filter: grayscale(.75); opacity: .8; }
.placed { filter: drop-shadow(2px 0 0 #fffdf2) drop-shadow(-2px 0 0 #fffdf2) drop-shadow(0 3px 0 #fffdf2) drop-shadow(0 5px 3px #344b5133); }
.placed.rare { filter: drop-shadow(0 0 3px #fffdf2) drop-shadow(0 0 8px #f3cf70); }
.placed.special { animation: wiggle 4s ease-in-out infinite; }
.placed.sel { outline-color: #a9652b; outline-width: 3px; }
.tools { padding: 8px; gap: 8px; border-radius: 30px;
  background: #fffdf4; box-shadow: 0 5px 0 #c6bca8, 0 12px 30px #31484930; }
.tools button { width: 80px; height: 80px; flex: none; border: 2px solid #e9e1cc; background: #f2eddf; color: #4a5961; }
.tools button.del { background: #f5d7d2; border-color: #eac1b9; }
.trash { border: 4px solid #ffebe0; background: #f4c5b7; box-shadow: 0 6px 0 #c58c7d, 0 10px 22px #80544026; }
.shelf { background: repeating-linear-gradient(90deg, transparent 0 31px, #c6a6740a 31px 32px), linear-gradient(#fff9e9, #f0e0c3);
  border-top: 6px solid #fff9eb; box-shadow: 0 -6px 0 #c8b390, 0 -14px 25px #5c55381a; gap: 22px; scrollbar-width: thin; scrollbar-color: #bca681 #f3e5cc; }
.shelf .tk { border: 3px solid #fff; background: #fffdf6; box-shadow: 0 5px 0 #d3bd96, 0 8px 14px #8c71451a; }
.shelf .tk b { background: #976236; border: 3px solid #fff7e3; }
.shelf .empty { color: #7c684e; }
.label { color: #624879; background: #fffdf3; border: 3px solid #fff; }
#album.sleep .scene { filter: brightness(.36) saturate(.55); }
.sleepmsg { left: 310px; right: 310px; top: 165px; padding: 20px 20px 10px; border: 2px solid #ffffff30; border-radius: 48px;
  background: linear-gradient(#334562eb, #39364deb); box-shadow: 0 18px 50px #15223740; }
.sleepmsg .m { font-size: 126px; animation: float 8s ease-in-out infinite; }
.sleepmsg .t { font-size: 38px; line-height: 1.35; color: #fff4d9; text-shadow: none; margin: 12px 0 22px; }
#album.sleep .placed::after { animation-duration: 6s; }

/* 7 albums */
.scene.forest { background: radial-gradient(ellipse at 50% 120%, #4f8a55 0 38%, transparent 39%), linear-gradient(#cfe8d2 0 52%, #7fb683 52% 70%, #5d9a63 70%); }
.scene.savanna { background: radial-gradient(ellipse at 30% 105%, #c9a04e 0 30%, transparent 31%), linear-gradient(#ffe7b3, #ffd27d 55%, #e2b866 55% 72%, #d4a650 72%); }
.scene.home { background: repeating-linear-gradient(90deg, #ece2f6 0 80px, #e4d7f1 80px 160px) 0 0 / 100% 66% no-repeat, linear-gradient(#e7dcf3 0 66%, #b98f6a 66% 68%, #c99d75 68%); }
.scene.kitchen { background: linear-gradient(#fff6dc 0 50%, transparent 50%), repeating-conic-gradient(#ffffff 0 25%, #ffe7a8 0 50%) 0 0 / 80px 80px; }
.scene.kitchen::before { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 26px; background: #e2a35b; box-shadow: 0 6px 0 #c4843f; }
.st.cup::before { content: ''; position: absolute; left: -12px; top: -14px; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M14%2040h20v4H14z%22%20fill%3D%22%23c98a1a%22%2F%3E%3Cpath%20d%3D%22M14%2038h20v4H14z%22%20fill%3D%22%23e9a832%22%2F%3E%3Cpath%20d%3D%22M20%2030h8v9h-8z%22%20fill%3D%22%23e9a832%22%2F%3E%3Cpath%20d%3D%22M12%206h24v12a12%2012%200%200%201-24%200z%22%20fill%3D%22%23e9a832%22%2F%3E%3Cpath%20d%3D%22M12%204h24v12a12%2012%200%200%201-24%200z%22%20fill%3D%22%23ffd25f%22%2F%3E%3Cpath%20d%3D%22M12%209H6v4a7%207%200%200%200%207%207M36%209h6v4a7%207%200%200%201-7%207%22%20fill%3D%22none%22%20stroke%3D%22%23e9a832%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M19%209v8%22%20stroke%3D%22%23fff4c4%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.scenetabs { gap: 12px; }
.st { width: 80px; height: 80px; font-size: 42px; }

/* A page with artwork: the picture fills the page, the drawn page and its decoration are gone. */
.scene.art { background-size: cover; background-position: center; }

/* Special stickers move on the page, each in its own way (SPEC 3.7). Only translate / rotate / scale are animated:
   the sticker's place, size, turn and flip live in its transform and stay untouched. */
.placed.mv-trot    { animation: mv-trot 2.4s ease-in-out infinite; }
.placed.mv-breathe { animation: mv-breathe 3.4s ease-in-out infinite; }
.placed.mv-swim    { animation: mv-swim 5s ease-in-out infinite; }
.placed.mv-stomp   { animation: mv-stomp 3s ease-in-out infinite; }
.placed.mv-rock    { animation: mv-rock 3.6s ease-in-out infinite; }
.placed.mv-twinkle { animation: mv-twinkle 2.8s ease-in-out infinite; }
.placed.mv-jiggle  { animation: mv-jiggle 4s ease-in-out infinite; }
@keyframes mv-trot    { 0%,100% { translate: 0 0; rotate: -2deg; } 25% { translate: 0 -9px; rotate: 1deg; } 50% { translate: 0 0; rotate: 2deg; } 75% { translate: 0 -9px; rotate: -1deg; } }
@keyframes mv-breathe { 0%,100% { scale: 1; rotate: -1.5deg; } 50% { scale: 1.06; rotate: 1.5deg; } }
@keyframes mv-swim    { 0%,100% { translate: -8px 4px; rotate: -4deg; } 50% { translate: 8px -10px; rotate: 4deg; } }
@keyframes mv-stomp   { 0%,55%,100% { translate: 0 0; scale: 1 1; } 65% { translate: 0 -12px; scale: 1 1; } 75% { translate: 0 2px; scale: 1.05 .94; } 85% { translate: 0 0; scale: 1 1; } }
@keyframes mv-rock    { 0%,100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes mv-twinkle { 0%,100% { scale: 1; } 40% { scale: 1.04; rotate: 1.5deg; } 55% { scale: .99; rotate: -1.5deg; } 70% { scale: 1.03; } }
@keyframes mv-jiggle  { 0%,70%,100% { rotate: 0deg; translate: 0 0; } 76% { rotate: -4deg; translate: 0 -5px; } 82% { rotate: 4deg; } 88% { rotate: -2deg; translate: 0 0; } 94% { rotate: 1deg; } }
/* no more than a few move at once; asleep nobody moves */
.placed.still, #album.sleep .placed { animation: none; }

/* The scene when a special sticker is tapped: about a second, then the sticker goes back to its own movement. */
.placed.act-rear  { animation: act-rear 1.1s ease-in-out; }
.placed.act-puff  { animation: act-puff 1.1s ease-in-out; }
.placed.act-flip  { animation: act-flip 1.2s ease-in-out; }
.placed.act-jump  { animation: act-jump 1.2s ease-in; }
.placed.act-spin  { animation: act-spin 1.2s ease-in-out; }
.placed.act-shake { animation: act-shake 1s ease-in-out; }
.placed.act-party { animation: act-party 1.1s ease-in-out; }
@keyframes act-rear  { 0%,100% { rotate: 0deg; translate: 0 0; } 30%,60% { rotate: -24deg; translate: 0 -26px; } 45% { rotate: -19deg; translate: 0 -30px; } }
@keyframes act-puff  { 0%,100% { scale: 1; translate: 0 0; } 20% { scale: .92; translate: -8px 0; } 45%,70% { scale: 1.16; translate: 10px -6px; } }
@keyframes act-flip  { 0% { rotate: 0deg; translate: 0 0; } 50% { rotate: 180deg; translate: 0 -60px; } 100% { rotate: 360deg; translate: 0 0; } }
@keyframes act-jump  { 0%,100% { translate: 0 0; scale: 1 1; } 25% { translate: 0 -70px; } 45% { translate: 0 4px; scale: 1.14 .84; } 60% { translate: 0 -34px; scale: 1 1; } 80% { translate: 0 2px; scale: 1.08 .92; } }
@keyframes act-spin  { 0%,100% { scale: 1 1; } 25% { scale: -1 1; } 50% { scale: 1 1; } 75% { scale: -1 1; } }
@keyframes act-shake { 0%,100% { rotate: 0deg; scale: 1; } 15% { rotate: -9deg; } 30% { rotate: 9deg; scale: 1.08; } 45% { rotate: -7deg; } 60% { rotate: 7deg; scale: 1.08; } 80% { rotate: -3deg; } }
@keyframes act-party { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: 0 -34px; scale: 1.1; } 45% { translate: 0 0; scale: 1.06 .94; } 65% { translate: 0 -16px; scale: 1; } }
/* what flies out of the sticker during its scene */
.fxp { position: absolute; left: 50%; top: 30%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  animation: fxp 1.2s ease-out forwards; }
.fxp.smoke { background: #cfd3d6; width: 34px; height: 34px; }
.fxp.bubbles { background: #ffffff55; border: 3px solid #bfeaf5; }
.fxp.stars { background: #ffd95e; border-radius: 0; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.fxp.confetti { border-radius: 6px; width: 18px; height: 18px; background: #ff8fb3; }
.fxp.confetti:nth-of-type(2n) { background: #ffd34d; }
.fxp.confetti:nth-of-type(3n) { background: #6cc4ff; }
@keyframes fxp { 0% { opacity: 0; translate: 0 0; scale: .3; } 15% { opacity: .95; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.5; } }