@font-face { font-family: 'Baloo 2'; src: url(fonts/baloo2-latin.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(fonts/nunito-latin.woff2) format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --wall: #1E2350; --plum: #5B2A66; --plum-d: #3C1A47; --table: #7A4A32; --edge: #A9714C;
  --cream: #F3E3B3; --cream-d: #D9C58C; --text: #FBF3DC; --ink: #3A2A52;
  --leaf: #7FB85A; --petal: #E5586B; --crystal: #4DA3E8; --star: #F2C230; --lilac: #8E7BC2; --shroom: #B77BD6;
  --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --vvh: 100dvh;
  --fibre: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; height: var(--vvh); overflow: hidden; overscroll-behavior: none; background: #12153A; -webkit-text-size-adjust: 100%; }
body { font-family: 'Nunito', system-ui, sans-serif; color: var(--text); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { position: fixed; inset: 0; height: var(--vvh); overflow: hidden; }
#stage { position: absolute; inset: 0; overflow: hidden; }

#stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 11; box-shadow: inset 0 0 min(9vw, 9vh) min(2.4vw, 2.4vh) rgba(4, 2, 20, 0.5), inset 0 0 min(30vw, 30vh) rgba(4, 2, 20, 0.28); }
.layer { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.paper-canvas, .actor-canvas { position: absolute; pointer-events: none; display: block; }
#darkness, #darkness2 { position: absolute; inset: 0; background: rgba(4, 5, 24, 0.84); opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
#cFx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 12; }
#ui { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > .nopick { pointer-events: none; }


.chip, .sticker {
  position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  background-color: var(--c, var(--plum)); background-image: var(--fibre); background-blend-mode: soft-light; --hole: var(--c, var(--plum));
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 9px 14px rgba(2, 2, 22, 0.45);
  transition: transform 0.08s, box-shadow 0.08s;
}
.chip { --c: var(--plum); }
.sticker { position: relative; width: var(--ss, 56px); height: var(--ss, 56px); }
.chip .ic, .sticker .ic { width: 58%; height: 58%; filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.28)); }
.chip:active, .sticker:active, .pressed { transform: translateY(3px) scale(0.95); box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), 0 2px 5px rgba(2, 2, 22, 0.45); }
.chip:focus-visible, .sticker:focus-visible, .jar:focus-visible, .arrow:focus-visible, .cardbtn:focus-visible, .tab:focus-visible { outline: 3px dashed var(--cream); outline-offset: 4px; }
.sticker[disabled], .sticker.off { --c: #8B8B94 !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 6px rgba(2, 2, 22, 0.3); cursor: default; }
.sticker[disabled] .ic, .sticker.off .ic { opacity: 0.7; }
.sticker .badge { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; background: var(--cream); color: var(--ink); font: 800 12px/1 'Baloo 2', sans-serif; border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(6deg); font-variant-numeric: tabular-nums; }
.sticker.gold { --ic: var(--plum); }
#home { left: calc(10px + var(--sl)); top: calc(10px + var(--st)); z-index: 5; }
#mute { right: calc(10px + var(--sr)); top: calc(10px + var(--st)); z-index: 5; }
.sticker.bounce { animation: bounce 0.5s ease; }
@keyframes bounce { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-6deg); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } }


.tag { position: absolute; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; color: var(--ink); font: 800 16px/1 'Baloo 2', sans-serif; padding: 9px 12px 8px 20px; display: flex; align-items: center; gap: 7px; clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); font-variant-numeric: tabular-nums; }
#starTag { left: calc(66px + var(--sl)); top: calc(16px + var(--st)); z-index: 4; --ic: var(--star); min-height: 36px; }
#starTag .ic { width: 22px; height: 22px; }
#starTag.pop { animation: bounce 0.5s ease; }


#shelfBox { position: absolute; overflow: hidden; z-index: 2; touch-action: none; pointer-events: auto; }
.cstring { position: absolute; width: 3px; margin-left: -1.5px; background: #F3E3B3; box-shadow: 2px 0 3px rgba(2, 2, 22, 0.35); pointer-events: none; }
.jar { position: absolute; bottom: 0; border: 0; background: none; padding: 0; transition: scale 0.1s, translate 0.1s; touch-action: none; }
.jar canvas { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(2, 2, 22, 0.35)); }
.jar:active:not(.locked) { scale: 0.97; translate: 0 2px; }
.jar.hint { animation: jarwiggle 0.6s ease-in-out 4; }
.jar.guide canvas { filter: drop-shadow(0 0 10px rgba(255, 226, 120, 0.95)) drop-shadow(0 6px 5px rgba(2, 2, 22, 0.35)); }
.jar.rare canvas { filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.95)) drop-shadow(0 6px 5px rgba(2, 2, 22, 0.35)); }
.jar.locked { cursor: default; }
.jar.in { animation: jarin 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
.jar .sp { position: absolute; width: 14px; height: 14px; pointer-events: none; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes jarwiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateY(-6px); } 75% { transform: rotate(6deg) translateY(-6px); } }
@keyframes jarin { 0% { transform: translateY(-120%) scale(0.6); opacity: 0; } 60% { transform: translateY(8%) scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes twinkle { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0.2; } 50% { transform: scale(1) rotate(40deg); opacity: 1; } }
.arrow { position: absolute; width: 46px; height: 46px; z-index: 3; border: 0; background: none; display: grid; place-items: center; }
.arrow .tab { width: 38px; height: 38px; display: grid; place-items: center; background-color: var(--table); background-image: var(--fibre); background-blend-mode: soft-light; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: none; box-shadow: none; border-radius: 4px; --hole: var(--table); --ic: var(--cream); }
.arrow .ic { width: 22px; height: 22px; }
.arrow[hidden] { display: none; }
.arrow:active .tab { transform: translateY(2px); }


.ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform; filter: drop-shadow(0 16px 12px rgba(2, 2, 22, 0.55)); }
.ghost .ing { display: block; }


.ing { display: inline-block; flex: none; background-image: url(assets/ingredients.webp); background-repeat: no-repeat; width: var(--S); height: var(--S); background-size: calc(var(--S) * 8) calc(var(--S) * 4); background-position: calc(var(--S) * var(--cx) * -1) calc(var(--S) * var(--cy) * -1); }


#chips { position: absolute; display: flex; gap: 6px; justify-content: center; transform: translateX(-50%); z-index: 3; }
.slot { position: relative; width: var(--cs); height: var(--cs); border: 0; padding: 0; border-radius: 50%; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 6px 8px rgba(2, 2, 22, 0.4); animation: slotin 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); }
.slot .ing { width: 70%; height: 70%; background-size: calc(var(--S) * 8) calc(var(--S) * 4); }
.slot .x { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; background: var(--plum); color: var(--text); font: 800 11px/1 'Baloo 2', sans-serif; border-radius: 3px; padding: 0 4px; }
.slot:active { transform: scale(0.92); }
.slot.clash { background-color: #B8B8C4; outline: 3px dashed #F3E3B3; outline-offset: 2px; animation: slotin 0.35s cubic-bezier(0.2, 1.5, 0.4, 1), clashwig 0.9s ease-in-out 0.35s 3; }
@keyframes clashwig { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(9deg); } }
.slot.empty { background: rgba(251, 243, 220, 0.08); box-shadow: none; border: 2px dashed rgba(251, 243, 220, 0.35); animation: none; }
@keyframes slotin { 0% { transform: scale(0.2) translateY(-30px); } 100% { transform: none; } }


#fxChips { position: absolute; display: flex; gap: 5px; transform: translateX(-50%); z-index: 3; pointer-events: none; align-items: center; }
#fxChips.top { transform: translateX(-100%); z-index: 5; }
#fxChips.two { flex-wrap: wrap; justify-content: center; width: var(--fw); } 
.fxmore { height: calc(var(--fs, 34px) * 0.82); min-width: calc(var(--fs, 34px) * 0.9); padding: 0 6px; display: grid; place-items: center; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; color: var(--ink); font: 800 14px/1 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums; clip-path: polygon(5px 0, 100% 0, 100% 100%, 5px 100%, 0 50%); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.fxc { position: relative; width: var(--fs, 34px); height: var(--fs, 34px); border-radius: 50%; display: grid; place-items: center; background-color: var(--c); background-image: var(--fibre); background-blend-mode: soft-light; --hole: var(--c); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 5px 8px rgba(2, 2, 22, 0.4); animation: slotin 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
.fxc .ic { width: 62%; height: 62%; }
.fxc svg.ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); }
.fxc .stack { position: absolute; right: -4px; bottom: -4px; background: var(--cream); color: var(--ink); font: 800 10px/1 'Baloo 2', sans-serif; padding: 2px 4px; border-radius: 3px; }


#flask { position: absolute; z-index: 6; width: 76px; height: 98px; touch-action: none; display: none; cursor: grab; }
#flask.show { display: block; }
#flask .fl { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(2, 2, 22, 0.5)); }
#flask .halo { position: absolute; left: -50%; top: -30%; width: 200%; height: 170%; border-radius: 50%; pointer-events: none; opacity: 0.75; }
#flask.rest .fl { animation: bob 2.2s ease-in-out infinite; }
#flask.drag { cursor: grabbing; }
#flask.drag .fl { filter: drop-shadow(0 18px 12px rgba(2, 2, 22, 0.55)); }
#flask .nm { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font: 800 13px/1 'Baloo 2', sans-serif; color: var(--ink); background: var(--cream); padding: 5px 9px 4px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); margin-top: 2px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); pointer-events: none; }
#flask.tagabove .nm { top: auto; bottom: 100%; margin: 0 0 3px; }
#flask.pouring .nm, #flask.drag .nm { opacity: 0; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }


#cauldronHit { position: absolute; z-index: 4; border-radius: 50%; touch-action: none; }
#creatureHit { position: absolute; z-index: 3; touch-action: none; border-radius: 40%; }
#bookHit { position: absolute; z-index: 4; border: 0; background: none; padding: 0; }
#bookHit:focus-visible { outline: 3px dashed var(--cream); outline-offset: 4px; }
#bookHit.new::after { content: ''; position: absolute; right: 6%; top: -8px; width: 22px; height: 22px; background: var(--petal); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: twinkle 1.1s ease-in-out infinite; }


#stickers { position: absolute; display: flex; gap: var(--sg, 8px); transform: translate(-50%, -50%); z-index: 4; }
#picker { position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(2, var(--ps, 46px)); gap: 8px; transform: translateX(-100%); }
#picker .cardbtn { position: relative; width: var(--ps, 46px); height: var(--ps, 46px); border: 0; padding: 0; border-radius: 50%; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; display: grid; place-items: center; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 8px 12px rgba(2, 2, 22, 0.4); --hole: var(--cream); --ic: var(--plum); }
#picker .cardbtn.on { outline: 4px solid var(--star); outline-offset: 1px; }
#picker .cardbtn.locked { background-color: #8B8B94; }
#picker .cardbtn canvas { width: 82%; height: 82%; }
#picker .cardbtn .ic { width: 46%; height: 46%; }
#picker .cardbtn.wait .ic { width: 56%; height: 56%; opacity: 0.55; }
#picker .cardbtn .need { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font: 800 11px/1 'Baloo 2', sans-serif; color: var(--ink); }


#caption { position: absolute; z-index: 7; max-width: min(78vw, 360px); text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 8px) rotate(-1.5deg); transition: opacity 0.2s, transform 0.25s; }
#caption.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
#caption .nm { background: var(--star); color: var(--ink); font: 800 clamp(15px, 2.4vh, 20px)/1 'Baloo 2', sans-serif; padding: 7px 14px 5px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); margin-bottom: 4px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
#caption .nm { display: inline-flex; align-items: center; gap: 7px; }
#caption .nm .ci { width: 1.5em; height: 1.5em; margin: -0.3em 0 -0.2em -0.35em; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c); --hole: var(--c); box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.3); }
#caption .nm .ci .ic { width: 66%; height: 66%; }
#caption .nm .cnt { font: 800 0.82em/1 'Baloo 2', sans-serif; background: var(--ink); color: var(--cream); padding: 4px 6px 3px; border-radius: 3px; margin-right: -0.2em; font-variant-numeric: tabular-nums; }
#caption .tx { display: block; background: var(--cream); color: var(--ink); font: 800 clamp(13px, 2.1vh, 17px)/1.2 'Nunito', sans-serif; padding: 8px 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 8px 12px rgba(2, 2, 22, 0.4); }
#wish { position: absolute; z-index: 5; width: 84px; height: 112px; --wk: 1; border: 0; background: none; padding: 0; display: none; transform-origin: 50% 100%; animation: sway 2.4s ease-in-out infinite; }
#wish.show { display: block; }
#wish .stick { position: absolute; left: 50%; bottom: 0; width: 5px; height: 40%; margin-left: -2.5px; background: var(--edge); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
#wish .sign { position: absolute; left: 0; top: 0; width: 100%; height: 68%; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; display: grid; place-items: center; clip-path: polygon(0 6px, 8px 0, calc(100% - 8px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 6px)); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28)); }
#wish .sign .dot { width: 70%; aspect-ratio: 1; height: auto; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--petal)); --hole: var(--c, var(--petal)); }
#wish .sign .ic { width: 66%; height: 66%; }
#wish.done { animation: wishdone 0.7s ease forwards; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes wishdone { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(10deg); } 100% { transform: scale(0) rotate(40deg); opacity: 0; } }
#toast { position: absolute; left: 50%; top: calc(68px + var(--st)); transform: translate(-50%, 14px) scale(0.92); z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); font: 800 17px/1.1 'Baloo 2', sans-serif; padding: 10px 16px 8px 12px; width: max-content; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 12px 18px rgba(2, 2, 22, 0.45); transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.25s; pointer-events: none; max-width: 90vw; opacity: 0; visibility: hidden; }
#toast.show { transform: translate(-50%, 0) rotate(-1deg); opacity: 1; visibility: visible; }
#toast .ic-wrap { display: inline-grid; width: 34px; height: 34px; --ic: var(--star); flex: none; }
#toast .ic-wrap .ic { width: 100%; height: 100%; }
#toast .ing { --S: 40px; }
#guide { position: absolute; z-index: 9; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: none; display: none; }
#guide.show { display: block; }

#guide::before { content: ''; position: absolute; left: 14px; top: 25px; width: 50px; height: 62px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 60'%3E%3Cg transform='translate(1.5 2)'%3E%3Cpath d='M2 20 L6 22 L6 3 C6 -1 14 -1 14 3 L14 17 L16 16 C18 15 21 16 21 19 C23 17.5 26 18.5 26 21 C28 19.5 32 21 32 24 L32 38 C32 47 26 54 17 54 C10 54 6 51 3 46 Z' fill='%235B2A66' opacity='.28' transform='translate(2 3)'/%3E%3Cpath d='M2 20 C1 17 4 16 6 18 L6 3 C6 -1 14 -1 14 3 L14 17 C14 15.5 16 15 17.5 15.5 C19 16 20.5 16 21 18 C23 17 26 18 26 20.5 C28 19.5 31.5 20.5 31.5 23.5 L31.5 37 C31.5 46 25 52 17 52 C10 52 5.5 48.5 2.5 43 Z' fill='%23F3E3B3' stroke='%23D9C58C' stroke-width='1.2'/%3E%3Cpath d='M15 28 L15 40 M21 27 L21 40 M26 28 L26 40' stroke='%23D9C58C' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
#guide::after { content: ''; position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 4px solid rgba(243, 227, 179, 0.85); box-shadow: 0 0 0 3px rgba(243, 227, 179, 0.25); animation: gpress 0.9s ease-in-out infinite; }
@keyframes gpress { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.7); opacity: 0.5; } }
#guide.go { animation: guidego 1.7s ease-in-out infinite; }
@keyframes guidego { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)) scale(0.9); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; } }
#guide.circle { animation: guidecircle 1.6s linear infinite; }
@keyframes guidecircle { from { transform: rotate(0) translateX(var(--r)) rotate(0); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }


.overlay { position: fixed; inset: 0; height: var(--vvh); z-index: 60; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(18, 21, 70, 0.72), rgba(6, 6, 26, 0.9)); opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: calc(10px + var(--st)) calc(10px + var(--sr)) calc(10px + var(--sb)) calc(10px + var(--sl)); }
.overlay.open { opacity: 1; pointer-events: auto; }
.overlay[hidden] { display: none; }
.close { position: absolute; right: 8px; top: 8px; z-index: 5; --c: var(--petal); }

.bk { position: relative; width: min(100%, 980px); height: min(100%, 660px); max-height: 100%; padding: 14px 22px 26px; display: flex; flex-direction: column; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.5)); transform: translate(var(--dx, 0px), var(--dy, 0px)) perspective(1400px) rotateX(64deg) scale(0.2); transform-origin: 50% 100%; opacity: 0; transition: transform 0.62s cubic-bezier(0.2, 1.12, 0.35, 1), opacity 0.2s; }
.overlay.open .bk { transform: none; opacity: 1; }


#book.table { place-items: end center; background: linear-gradient(to bottom, rgba(6, 6, 26, 0.12), rgba(6, 6, 26, 0.46) 42%, rgba(6, 6, 26, 0.74)); padding-bottom: calc(max(10px, 1.6vh) + var(--sb)); }
#book.table .bk { width: min(96%, 1060px); height: min(70%, 620px); filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.6)); }
#book.table.open .bk { transform: perspective(1700px) rotateX(8deg); }
#book.table .tab { min-height: 54px; } 
#book.table .close { --ss: 56px; }
.bk .popup { display: none; }
#book.table .bk .popup { display: block; position: absolute; left: 50%; bottom: calc(100% - 12px); width: min(40%, 360px); transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.45)); }
.bk .popup svg { display: block; width: 100%; height: auto; overflow: visible; }
.bk .popup g { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 2.5px 0 rgba(0, 0, 0, 0.32)); }
.bk.opening .popup g { animation: popup 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.bk.opening .popup .l1 { animation-delay: 0.3s; } .bk.opening .popup .l2 { animation-delay: 0.42s; } .bk.opening .popup .l3 { animation-delay: 0.54s; }
@keyframes popup { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.bk-cover { position: absolute; inset: 0; background-color: var(--plum); background-image: linear-gradient(135deg, #C79A2E 0 50%, transparent 50%), linear-gradient(225deg, #C79A2E 0 50%, transparent 50%), linear-gradient(45deg, #C79A2E 0 50%, transparent 50%), linear-gradient(315deg, #C79A2E 0 50%, transparent 50%), var(--fibre); background-size: 38px 38px, 38px 38px, 38px 38px, 38px 38px, auto; background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-blend-mode: normal, normal, normal, normal, soft-light; clip-path: polygon(0 1.4%, 1.2% 0, 33% 0.6%, 64% 0, 98.6% 0.7%, 100% 2.6%, 99.5% 38%, 100% 97.4%, 98% 100%, 62% 99.3%, 27% 100%, 1.4% 99.3%, 0 96.5%, 0.5% 48%); }
.bk-cover::after { content: ''; position: absolute; left: 50%; top: 52px; bottom: 6px; width: 10px; margin-left: -5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); }
.bk .head { position: relative; display: flex; align-items: center; gap: 10px; padding: 2px 52px 8px 4px; color: var(--text); flex: none; flex-wrap: wrap; }
.bk .head h2 { font: 800 clamp(20px, 3.2vh, 28px)/1 'Baloo 2', sans-serif; letter-spacing: 0.2px; }
.bk .count { margin-left: auto; font: 800 18px/1 'Baloo 2', sans-serif; background: var(--cream); color: var(--ink); padding: 7px 12px 5px; font-variant-numeric: tabular-nums; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pgwrap { position: relative; flex: 1; min-height: 0; }
.pgwrap .stack { position: absolute; inset: 0; background: #E6D6A2; clip-path: polygon(0 1%, 3% 0, 52% 0.7%, 100% 0, 99.4% 40%, 100% 100%, 48% 99.4%, 0 100%, 0.5% 55%); }
.pgwrap .stack.s1 { transform: translate(4px, 5px) rotate(0.35deg); background: #DCCB93; }
.pgwrap .stack.s2 { transform: translate(8px, 10px) rotate(-0.25deg); background: #CDBB84; }
.pgs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pgs::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(60, 30, 20, 0), rgba(60, 30, 20, 0.3) 50%, rgba(60, 30, 20, 0)); pointer-events: none; }
.pg { position: relative; padding: 14px 16px; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; align-content: stretch; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; }
.pg:first-child { clip-path: polygon(0 1%, 2.5% 0, 45% 0.5%, 100% 0, 100% 100%, 55% 99.5%, 20% 100%, 0.4% 99%, 0 60%); transform-origin: 100% 50%; }
.pg:last-child { clip-path: polygon(0 0, 52% 0.6%, 97.5% 0, 100% 1.4%, 99.6% 45%, 100% calc(100% - 56px), calc(100% - 56px) 100%, 40% 99.4%, 0 100%); transform-origin: 0 50%; }
.pgs.one .pg:first-child { clip-path: polygon(0 1%, 2.5% 0, 55% 0.6%, 100% 0, 99.6% 45%, 100% calc(100% - 56px), calc(100% - 56px) 100%, 45% 99.5%, 0.4% 100%, 0 60%); transform-origin: 0 50%; }
.curl { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; z-index: 3; pointer-events: none; }
.curl::before { content: ''; position: absolute; inset: -4px 0 0 -4px; background: rgba(40, 20, 10, 0.34); filter: blur(4px); clip-path: polygon(0 0, 100% 0, 0 100%); transform: translate(-1px, -1px); }
.curl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #FBF1D0 0, #E2D09A 60%, #C9B57C 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bk.opening .pg:first-child { animation: unfoldL 0.62s 0.12s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.bk.opening .pg:last-child { animation: unfoldR 0.62s 0.12s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.bk.opening .pgs.one .pg:first-child { animation-name: unfoldR; }
@keyframes unfoldL { 0% { transform: perspective(1400px) rotateY(88deg); } 100% { transform: perspective(1400px) rotateY(0); } }
@keyframes unfoldR { 0% { transform: perspective(1400px) rotateY(-88deg); } 100% { transform: perspective(1400px) rotateY(0); } }
.tabs { display: flex; gap: 6px; }
.tab { flex: none; min-width: 48px; min-height: 44px; border: 0; padding: 0 14px; background: var(--shroom); color: var(--ink); font: 800 15px/1 'Baloo 2', sans-serif; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); box-shadow: none; filter: none; display: flex; align-items: center; gap: 6px; --hole: var(--shroom); --ic: var(--ink); }
.tab .ic { width: 22px; height: 22px; }
.tab[aria-selected='true'] { background: var(--cream); }
.pg.fx { grid-template-columns: repeat(4, 1fr); }
.pgs.one { grid-template-columns: 1fr; }
.pgs.one::after { display: none; }
.pgs.one .pg { grid-template-columns: repeat(2, 1fr); }
.pgs.one .pg.fx { grid-template-columns: repeat(2, 1fr); }
.pgs.one .pg { padding-left: 28px; padding-right: 30px; } 
.flip { animation: flip 0.45s ease; transform-origin: 50% 50%; }
@keyframes flip { 0% { transform: perspective(900px) rotateY(0); } 50% { transform: perspective(900px) rotateY(-14deg) translateX(-8px); opacity: 0.6; } 100% { transform: perspective(900px) rotateY(0); } }
.ent { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #FFF6DB; padding: 6px 4px; min-height: 0; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 5px 8px rgba(60, 30, 20, 0.2); color: var(--ink); text-align: center; overflow: hidden; }
.ent .pic { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.ent .pic svg { height: 100%; max-height: 92px; width: auto; max-width: 70%; }
.ent .nm { font: 800 clamp(11px, 1.8vh, 15px)/1.05 'Baloo 2', sans-serif; }
.ent .meta { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 26px; flex-wrap: wrap; }
.ent .meta .ing { --S: 26px; }
.ent .meta .who { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--cream-d); }
.ent .meta .who canvas { width: 100%; height: 100%; display: block; }
.ent .meta .plus { font: 800 14px/1 'Baloo 2', sans-serif; opacity: 0.7; }
.ent.blank { background: #E9DCB5; box-shadow: inset 0 2px 5px rgba(60, 30, 20, 0.25); }
.ent.blank .pic svg { opacity: 0.9; }
.ent.blank .nm { opacity: 0.55; letter-spacing: 3px; }
.ent .hintic { position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; transform: translate(-50%, -50%); --ic: rgba(60, 40, 70, 0.55); --hole: #E9DCB5; }
.ent.fx .pic .dot { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--c); --hole: var(--c); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.ent.fx .pic .dot .ic { width: 62%; height: 62%; }
.ent.fx.blank .pic .dot { background: #CDBE92; background: color-mix(in srgb, var(--c) 26%, #CDBE92); --hole: #D2C498; box-shadow: none; }
.ent.fx.blank .pic .dot .ic { opacity: 0.55; --ic: rgba(60, 40, 70, 0.7); --hole: #D2C498; }
.bk .nav { position: absolute; top: 50%; width: 52px; height: 52px; z-index: 4; --c: var(--leaf); }
.bk .nav.prev { left: -6px; transform: translateY(-50%); }
.bk .nav.next { right: -6px; transform: translateY(-50%); }
.bk .nav.prev:active, .bk .nav.next:active { transform: translateY(calc(-50% + 3px)) scale(0.95); }
.bk .nav[disabled] { opacity: 0.5; }
.bk .pageno { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font: 800 13px/1 'Baloo 2', sans-serif; color: var(--ink); opacity: 0.6; }

#tray .tr { position: relative; width: min(100%, 560px); background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; color: var(--ink); padding: 16px 14px 18px; transform: rotate(-0.5deg); box-shadow: 5px 6px 0 #DCCB93, 10px 12px 0 #C9B67F, 0 26px 36px rgba(0, 0, 0, 0.5); }
#tray h2 { font: 800 22px/1 'Baloo 2', sans-serif; margin: 0 52px 12px 4px; }
#tray .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 8px; }
#tray .cardbtn { position: relative; border: 0; padding: 0; background: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 76px; --hole: #8B8B94; }
#tray .cardbtn .face { width: 62px; height: 62px; border-radius: 50%; background-color: #FFF6DB; display: grid; place-items: center; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
#tray .cardbtn .face canvas { width: 86%; height: 86%; }
#tray .cardbtn.on .face { outline: 4px solid var(--star); }
#tray .cardbtn.locked .face { background: #8B8B94; --ic: #E8E8EE; }
#tray .cardbtn .face .ic { width: 44%; height: 44%; }
#tray .cardbtn .nmt { font: 800 12px/1 'Baloo 2', sans-serif; }

#gallery .gl, #photo .ph { position: relative; width: min(100%, 860px); max-height: 100%; overflow: hidden; background-color: var(--cream); background-image: var(--fibre); background-blend-mode: soft-light; color: var(--ink); padding: 16px; box-shadow: 5px 6px 0 #DCCB93, 10px 12px 0 #C9B67F, 0 26px 36px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; }
#gallery h2 { font: 800 22px/1 'Baloo 2', sans-serif; margin: 0 52px 12px 2px; }
#gallery .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; overflow: hidden; align-content: start; }
#gallery .empty { grid-column: 1 / -1; padding: 28px 8px; text-align: center; font: 800 16px/1.3 'Nunito', sans-serif; opacity: 0.75; }
.polaroid { position: relative; background: #FFF9EA; padding: 8px 8px 24px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 9px 14px rgba(60, 30, 20, 0.28); transform: rotate(var(--r, -2deg)); }
.polaroid img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; background: var(--wall); }
.polaroid .cap { position: absolute; left: 8px; right: 36px; bottom: 5px; font: 800 12px/1 'Baloo 2', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polaroid .del { position: absolute; right: 2px; bottom: 0; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; --ic: #8F7A9E; }
.polaroid .del .ic { width: 20px; height: 20px; }
#photo .ph { align-items: center; gap: 12px; padding-bottom: 18px; width: min(100%, 520px); }
#photo .ph .polaroid { width: min(100%, 360px); transform: rotate(-1.5deg); }
#photo .ph .row { display: flex; gap: 14px; }
#photo .ph .sticker { --ss: 56px; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 80; transition: opacity 0.35s ease-out; }
#flash.on { opacity: 0.9; transition: none; }

@media (max-width: 700px) {
  .bk { padding: 8px; }
  .pg { padding: 8px; gap: 8px; }
  .bk .head { gap: 6px; }
  .tab span { display: none; }
  .tab { padding: 0 12px; }
  #tray .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-height: 460px) {
  .bk { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #wish, #flask.rest .fl, .jar.hint, #guide.go, #guide.circle, #guide::after, .bk.opening .popup g, .slot.clash { animation: none; }
}
@media (max-height: 520px) {
  #photo .ph { flex-direction: row; width: auto; padding: 14px 64px 14px 14px; gap: 18px; }
  #photo .ph .polaroid { width: calc((var(--vvh) - 80px) / 1.12); }
  #photo .ph .row { flex-direction: column; }
  #gallery .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}


.medal { position: absolute; z-index: 30; width: 150px; height: 190px; margin: -95px 0 0 -75px; scale: var(--ms, 1); pointer-events: none; transform-origin: 50% 35%; animation: medalin 0.75s cubic-bezier(0.2, 1.5, 0.4, 1) both; filter: drop-shadow(0 7px 0 rgba(2, 2, 22, 0.3)) drop-shadow(0 14px 14px rgba(2, 2, 22, 0.4)); }
.medal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.medal .tl { transform-origin: 75px 100px; animation: medaltails 1.4s ease-in-out 0.7s infinite; }
.medal .pic { position: absolute; left: 50px; top: 28px; width: 50px; height: 64px; display: block; transform: rotate(-6deg); animation: bob 1.8s ease-in-out infinite; }
.medal .pic .fl { width: 100%; height: 100%; display: block; }
.medal b { position: absolute; left: 50%; top: 134px; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font: 800 16px/1 'Baloo 2', sans-serif; color: var(--ink); background: var(--cream); padding: 7px 12px 5px; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%); }
.medal.rare svg > g:nth-of-type(2) { fill: #FF9A3A; }
.medal.fly { transition: transform 0.75s cubic-bezier(0.5, 0, 0.8, 0.6), opacity 0.75s; animation: none; transform: translate(var(--dx), var(--dy)) scale(0.18) rotate(300deg); opacity: 0; }
@keyframes medalin { 0% { transform: scale(0) rotate(-220deg) translateY(70px); opacity: 0; } 60% { transform: scale(1.15) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes medaltails { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .medal, .medal .tl, .medal .pic, #wish.show, #wish .sign::before { animation: none; } }


#wish.show { animation: wishpop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both, sway 2.4s ease-in-out 0.7s infinite; }
#wish .sign::before { content: ''; position: absolute; inset: 5px; border: 3px dashed var(--c, #E5586B); opacity: 0.55; animation: wishring 1.3s ease-in-out infinite; }
#wish .sign { filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.3)) drop-shadow(0 0 12px rgba(255, 226, 120, 0.7)); }
@keyframes wishpop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wishring { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(0.9); opacity: 0.9; } }
#toast { font-size: 19px; padding: 11px 18px 9px 16px; background-color: #FFF6DB; background-image: var(--fibre); background-blend-mode: soft-light; clip-path: polygon(0 4px, 7px 0, calc(100% - 7px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 4px)); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)) drop-shadow(0 10px 12px rgba(2, 2, 22, 0.45)); box-shadow: none; z-index: 22; }
#toast .ic-wrap { width: 38px; height: 38px; }
.frame-empty { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; border: 3px dashed rgba(122, 74, 50, 0.4); background: rgba(122, 74, 50, 0.07); transform: rotate(var(--r, 0deg)); }
.frame-empty .ic { width: 38%; --ic: rgba(122, 74, 50, 0.45); }
.frame-empty .pin { position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #E5586B; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
#gallery .polaroid { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15), 0 8px 12px rgba(60, 30, 20, 0.3); }
.ent { background-image: var(--fibre); background-blend-mode: soft-light; clip-path: polygon(0 3px, 5px 0, calc(100% - 4px) 1px, 100% 5px, calc(100% - 1px) calc(100% - 5px), calc(100% - 6px) 100%, 4px calc(100% - 1px), 1px calc(100% - 4px)); }
.pg .ent:nth-child(odd) { transform: rotate(-0.7deg); }
.pg .ent:nth-child(even) { transform: rotate(0.6deg); }
.ent:not(.blank)::before { content: ''; position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; background: #F2C230; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); z-index: 2; }
.ent.blank { background-image: none; clip-path: none; outline: 3px dashed rgba(122, 74, 50, 0.32); outline-offset: -8px; }
.bk .head::after { content: ''; position: absolute; right: 168px; top: -16px; width: 22px; height: 54px; background: #E5586B; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
@media (max-aspect-ratio: 9/10) {
  #caption { max-width: 88vw; }
  #caption .nm { font-size: 15px; padding: 6px 12px 4px; }
  #caption .tx { font-size: 13px; padding: 6px 10px; line-height: 1.15; }
}