:root {
  --nav: 56px;
  --ink: #5a3266;
  --lav: #c9a6e8;
  --blush: #ffd3e8;
  --gold: #f2c35b;
  --panel: #fff7fc;
  --panel2: #f9ecfb;
  --shadow: 0 6px 18px rgba(116, 54, 140, .18);
  --font: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --tool: 56px;
  --act: 72px;
  --item: 112px;
  --tabs: 84px;
}
* { box-sizing: border-box; }
/* Clip horizontal decoration without creating a nested scroll container that traps touch reading. */
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body { background: #f6dff0; color: var(--ink); font: 600 16px/1.3 var(--font); -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button:focus-visible { outline: 4px solid #8f5ad0; outline-offset: 3px; }
svg { display: block; }

.app { position: relative; height: calc(100dvh - var(--nav)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-height: 600px) { random-express-nav { display: none; } :root { --nav: 0px; } }

/* ---------- stage ---------- */
.stage { position: relative; overflow: hidden; min-height: 0; background: #f6dff0; }
.scene, .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.doll { position: absolute; inset: calc(var(--tool) + 14px) 8px 4px 8px; }
.princess-svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 92%; animation: breathe 5.5s ease-in-out infinite; will-change: transform; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tools { position: absolute; top: 10px; left: 10px; display: flex; gap: 10px; z-index: 3; }
.tool { width: var(--tool); height: var(--tool); border-radius: 50%; background: rgba(255, 255, 255, .86); color: #8f5ad0; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .15s, opacity .2s; }
.tool svg { width: 58%; height: 58%; }
.tool:active { transform: scale(.9); }
.tool:disabled { opacity: .45; cursor: default; }
.stage-actions { position: absolute; top: 8px; right: 10px; display: flex; gap: 12px; z-index: 3; }
.act { width: var(--act); height: var(--act); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(116, 54, 140, .28), inset 0 -5px 0 rgba(0, 0, 0, .08); transition: transform .15s; border: 4px solid #fff; }
.act svg { width: 64%; height: 64%; }
.act:active { transform: scale(.9); }
.act-magic { background: radial-gradient(circle at 35% 30%, #f3e6ff, #c9a6f2); }
.act-star { background: radial-gradient(circle at 35% 30%, #fff8d6, #ffd36e); animation: starGlow 3.2s ease-in-out infinite; }
.act-book { background: radial-gradient(circle at 35% 30%, #ffe8f4, #ffb4d8); }
@keyframes starGlow { 0%, 100% { box-shadow: 0 6px 16px rgba(116, 54, 140, .28), 0 0 0 0 rgba(255, 214, 110, .0); } 50% { box-shadow: 0 6px 16px rgba(116, 54, 140, .28), 0 0 0 10px rgba(255, 214, 110, .35); } }

/* ---------- wardrobe (portrait: bottom tray) ---------- */
.wardrobe { position: relative; z-index: 2; background: linear-gradient(180deg, #fffafd, var(--panel2)); border-top: 4px solid #fff; box-shadow: 0 -8px 24px rgba(116, 54, 140, .16); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tabs { display: flex; gap: 6px; padding: 8px 10px 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; min-width: 64px; height: 70px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; box-shadow: 0 2px 6px rgba(116, 54, 140, .12); color: #9a6fb4; font-size: 12px; transition: background .2s, transform .15s; }
.tab svg { width: 40px; height: 40px; }
.tab.on { background: linear-gradient(180deg, #ffe3f2, #f1d8ff); box-shadow: 0 0 0 3px #e9a6d6, 0 4px 10px rgba(116, 54, 140, .2); color: #7a3f9a; }
.tab:active { transform: scale(.93); }
.wr-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.swatches { display: flex; align-items: center; gap: 10px; padding: 4px 12px 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.swatches[hidden] { display: none; }
.sw-icon svg { width: 34px; height: 34px; }
.swatch { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 6px rgba(116, 54, 140, .25); transition: transform .15s; }
.swatch.on { box-shadow: 0 0 0 4px #c06ab0, 0 3px 8px rgba(116, 54, 140, .3); transform: scale(1.08); }
.swatch:active { transform: scale(.9); }
.grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--item)); grid-auto-columns: var(--item); gap: 10px; padding: 6px 12px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: thin; height: calc(var(--item) * 2 + 28px); touch-action: pan-x; }
.grid.enter .item { animation: itemIn .32s cubic-bezier(.2, .9, .3, 1.3) both; }
.grid.enter .item:nth-child(2) { animation-delay: .02s; } .grid.enter .item:nth-child(3) { animation-delay: .04s; } .grid.enter .item:nth-child(4) { animation-delay: .06s; } .grid.enter .item:nth-child(n+5) { animation-delay: .08s; }
@keyframes itemIn { from { opacity: 0; transform: scale(.8); } }
.item { position: relative; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #fff, #fbeefa 70%); box-shadow: 0 3px 8px rgba(116, 54, 140, .14), inset 0 0 0 2px #f3dff3; padding: 6px; display: grid; place-items: center; transition: transform .15s, box-shadow .2s; touch-action: inherit; -webkit-user-drag: none; }
.item svg { width: 100%; height: 100%; pointer-events: none; }
.item:active { transform: scale(.94); }
.item.worn { background: radial-gradient(circle at 50% 40%, #fff, #ffe6f4 75%); box-shadow: 0 0 0 4px #ee8fca, 0 4px 12px rgba(214, 90, 170, .3); }
.item .badge { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ee6fb8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.item.worn .badge { transform: scale(1); }
.item.none svg { width: 60%; height: 60%; }
.grid[data-cat="shoes"] .item, .grid[data-cat="crown"] .item, .grid[data-cat="jewelry"] .item, .grid[data-cat="wings"] .item { background: radial-gradient(circle at 50% 52%, #ead2f6 0 38%, #f8eafb 62%, #fff 100%); }
.grid[data-cat="shoes"] .item.worn, .grid[data-cat="crown"] .item.worn, .grid[data-cat="jewelry"] .item.worn, .grid[data-cat="wings"] .item.worn { background: radial-gradient(circle at 50% 52%, #f6c6e4 0 38%, #fde4f2 66%, #fff 100%); }
.item.lifted { opacity: .35; transform: scale(.9); }
.ghost { position: fixed; left: 0; top: 0; z-index: 2100; pointer-events: none; border-radius: 22px; background: rgba(255, 255, 255, .75); box-shadow: 0 14px 30px rgba(116, 54, 140, .35), 0 0 0 4px #fff3b0; padding: 6px; will-change: transform; }
.ghost svg { width: 100%; height: 100%; }
.ghost.snap { transition: transform .24s ease-in, opacity .24s ease-in; opacity: 0; }
.ghost.return { transition: transform .26s cubic-bezier(.3, .8, .4, 1); opacity: .7; }
.dropglow { opacity: 0; transition: opacity .2s; pointer-events: none; }
.app.dragging .dropglow { opacity: .45; }
.app.can-drop .dropglow { opacity: 1; }

/* ---------- landscape: side wardrobe ---------- */
@media (min-aspect-ratio: 21/20) {
  .app { grid-template-columns: minmax(0, 1fr) min(39vw, 410px); grid-template-rows: minmax(0, 1fr); }
  .wardrobe { flex-direction: row; border-top: 0; border-left: 4px solid #fff; box-shadow: -8px 0 24px rgba(116, 54, 140, .16); }
  .tabs { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 10px 6px 10px 10px; width: var(--tabs); }
  .tab { flex: none; width: 100%; min-width: 0; height: 66px; }
  .grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(var(--item), 1fr)); grid-auto-rows: var(--item); overflow-y: auto; overflow-x: hidden; height: auto; flex: 1; padding: 6px 12px 16px 6px; touch-action: pan-y; align-content: start; }
  .swatches { flex-wrap: wrap; padding: 10px 10px 6px 6px; overflow: visible; }
  .doll { inset: 10px 10px 4px calc(var(--act) + 26px); }
  .stage-actions { top: auto; bottom: 14px; left: 12px; right: auto; flex-direction: column; }
  .tools { flex-direction: column; }
}
@media (min-aspect-ratio: 21/20) and (max-height: 520px) {
  :root { --item: 84px; --act: 56px; --tool: 46px; --tabs: 64px; }
  .tab { height: 52px; } .tab span { display: none; } .tab svg { width: 34px; height: 34px; }
  .swatch { width: 38px; height: 38px; }
}
@media (max-aspect-ratio: 21/20) and (max-width: 480px) {
  :root { --item: 92px; --act: 60px; --tool: 48px; }
  .tab { min-width: 58px; height: 60px; } .tab span { display: none; } .tab svg { width: 38px; height: 38px; }
  .swatch { width: 42px; height: 42px; }
}
@media (max-aspect-ratio: 21/20) and (min-width: 700px) {
  :root { --item: 124px; --act: 80px; --tool: 60px; }
  .doll { inset: 10px 96px 4px; }
}
@media (max-aspect-ratio: 21/20) and (max-height: 700px) {
  .grid { grid-template-rows: var(--item); height: calc(var(--item) + 22px); }
}

/* Keep every wardrobe category visible before the first interaction. */
@media (max-aspect-ratio: 21/20) and (max-width: 680px) {
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; overflow: visible; }
  .tab { min-width: 0; width: 100%; height: 48px; }
  .tab span { display: none; }
  .tab svg { width: 36px; height: 36px; }
}
@media (min-aspect-ratio: 21/20) and (max-height: 660px) {
  :root { --tabs: 118px; }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); align-content: start; gap: 6px; overflow: visible; padding: 8px 6px; }
  .tab { height: clamp(44px, 12vh, 66px); }
  .tab span { display: none; }
  .tab svg { width: 34px; height: 34px; }
}
@media (max-aspect-ratio: 21/20) and (max-width: 280px) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; }
  .app { height: auto; min-height: 100dvh; grid-template-rows: 220px auto; overflow: visible; }
  .tabs { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
}
.game-help { position: absolute; right: 12px; bottom: 12px; z-index: 4; }
.game-help summary { min-height: 48px; padding: 11px 14px; border-radius: 22px; background: #fff7fc; box-shadow: var(--shadow); cursor: pointer; font-size: 14px; }
.game-help summary:focus-visible { outline: 4px solid #8f5ad0; outline-offset: 3px; }
.game-help[open] { z-index: 13000; }
.game-help[open] summary { position: fixed; right: 16px; top: 12px; z-index: 13001; }
.help-copy { position: fixed; inset: 70px max(12px, calc((100vw - 720px) / 2)) auto; max-height: calc(100dvh - 90px); overflow: auto; padding: 20px; border: 4px solid #fff; border-radius: 24px; background: #fff7fc; box-shadow: 0 12px 60px #5a326680; user-select: text; }
.help-copy h2 { font-size: 24px; margin: 0 0 12px; }
.help-copy h3 { font-size: 18px; }
.help-copy p, .help-copy li { font: 500 16px/1.5 var(--font); }
.help-copy a { color: #783f99; }
/* ---------- princess animation (all transforms rotate about each group's pivot) ---------- */
.princess-svg g { transform-box: view-box; }
.princess-svg .sway, .princess-svg .pop, .princess-svg .head, .princess-svg .arm, .princess-svg .fore, .princess-svg .wing, .princess-svg .skirtwrap { transform-origin: 0 0; }
.princess-svg .arm, .princess-svg .fore { transform: rotate(var(--r)); transition: transform .5s ease-in-out; }
.princess-svg .head { transition: transform 1.1s ease-in-out; }
.princess-svg .mouth-joy { display: none; }
.princess-svg.joy .mouth-joy { display: inline; }
.princess-svg.joy .mouth-smile { display: none; }
.princess-svg.blinking .blink { animation: blink .26s ease-in-out; }
@keyframes blink { 50% { transform: scaleY(.08); } }
.princess-svg.tilt .head { transform: rotate(2.4deg); }
.princess-svg.pop .pop { animation: pop .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop { 40% { transform: scale(1.035, .975); } 70% { transform: scale(.99, 1.015); } }
.princess-svg.flutter .wingR { animation: flutter .5s ease-in-out 3; }
.princess-svg.flutter .wingL { animation: flutter .5s ease-in-out 3; }
@keyframes flutter { 50% { transform: scale(.86, .97); } }
.princess-svg.waving .armR { animation: wave 1.7s ease-in-out; }
.princess-svg.waving .foreR { animation: waveFore 1.7s ease-in-out; }
@keyframes wave { 0%, 100% { transform: rotate(var(--r)); } 22%, 80% { transform: rotate(-128deg); } }
@keyframes waveFore { 0%, 100% { transform: rotate(var(--r)); } 22% { transform: rotate(-38deg); } 34% { transform: rotate(-6deg); } 46% { transform: rotate(-38deg); } 58% { transform: rotate(-6deg); } 70% { transform: rotate(-34deg); } 80% { transform: rotate(-20deg); } }
.princess-svg.waving .head { transform: rotate(-3deg); }
.princess-svg.twirl .skirtwrap { animation: swish 1.4s ease-in-out 2; }
.princess-svg.twirl .pop { animation: hop 1.4s ease-in-out 2; }
@keyframes swish { 25% { transform: skewX(5deg); } 75% { transform: skewX(-5deg); } }
@keyframes hop { 25% { transform: translateY(-14px) rotate(-1.5deg); } 50% { transform: translateY(0); } 75% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes breathe { 0%, 100% { transform: rotate(-.35deg) scale(1, 1); } 50% { transform: rotate(.35deg) scale(1.004, 1.008); } }

/* pets: idle + reactions */
.pet g { transform-box: view-box; }
.pet { cursor: pointer; }
.pet .pet-fx, .pet .pet-puff { opacity: 0; }
.pet.act .pet-head { animation: nod 1.2s ease-in-out; }
.pet.act .pet-fx { animation: petFx 1.2s ease-out; }
.pet-unicorn.act .pet-head { animation: nod 1.2s ease-in-out; }
.pet-kitten.act .pet-paw { animation: paw 1.2s ease-in-out; }
.pet-kitten.act .pet-tail, .princess-svg.pet-idle .pet-kitten .pet-tail, .princess-svg.pet-idle .pet-unicorn .pet-tail { animation: tail 1.2s ease-in-out; }
.pet-bunny.act .pet-hop { animation: hopPet 1.2s ease-in-out; }
.pet-bunny.act .pet-ear, .princess-svg.pet-idle .pet-bunny .pet-ear { animation: ear .6s ease-in-out 2; }
.pet-dragon.act .pet-puff { animation: puff 1.2s ease-out; }
.pet-dragon.act .pet-wing, .princess-svg.pet-idle .pet-dragon .pet-wing { animation: flap .3s ease-in-out 4; }
.princess-svg.blinking .pet-blink { animation: blink .26s ease-in-out .1s; }
@keyframes nod { 30% { transform: rotate(-12deg); } 60% { transform: rotate(6deg); } }
@keyframes paw { 30%, 70% { transform: rotate(48deg); } 50% { transform: rotate(30deg); } }
@keyframes tail { 30% { transform: rotate(14deg); } 70% { transform: rotate(-10deg); } }
@keyframes hopPet { 25% { transform: translateY(-36px); } 50% { transform: translateY(0); } 70% { transform: translateY(-16px); } 85% { transform: translateY(0); } }
@keyframes ear { 50% { transform: rotate(-14deg); } }
@keyframes flap { 50% { transform: rotate(-24deg); } }
@keyframes petFx { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes puff { 0% { opacity: 0; transform: translate(20px, 0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-20px, -14px) scale(1.15); } }
.pet .pet-puff { transform-origin: -50px -96px; }

/* background ambience (small elements only) */
.scene .tw { animation: tw 3.6s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .25; } }
.scene .drift { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(60px); } }
.scene .flutter-a, .scene .flutter-b { animation: bob 6s ease-in-out infinite alternate; }
.scene .flutter-b { animation-duration: 7.5s; }
@keyframes bob { to { transform: translate(40px, -30px); } }

/* sparkles */
.spark { position: absolute; width: 18px; height: 18px; margin: -9px; background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark .85s ease-out forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(160deg); opacity: 0; } }
.app.magic .doll { animation: magic .9s ease-in-out; }
@keyframes magic { 30% { filter: brightness(1.6) saturate(.6); transform: scale(.97); } 60% { filter: brightness(1.25); transform: scale(1.02); } }

/* ---------- Royal Reveal ---------- */
.reveal { position: fixed; inset: 0; z-index: 12000; overflow: hidden; background: #3a1846; }
.rv-scene, .rv-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-scene { filter: brightness(.55) saturate(1.1); transition: filter 1s; }
.reveal.show .rv-scene { filter: brightness(.9); }
.rv-light { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 60% at 50% 55%, rgba(255, 246, 200, .55), transparent 70%); opacity: 0; transition: opacity 1s; pointer-events: none; }
.reveal.show .rv-light { opacity: 1; }
.rv-princess { position: absolute; inset: 7% 4% 4%; }
.rv-princess .princess-svg { animation: none; }
.reveal.show .rv-princess .princess-svg { animation: rise .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rise { from { transform: scale(.9) translateY(4%); } }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; background: repeating-linear-gradient(90deg, #a2245e 0 26px, #c73b78 26px 46px, #8a1c50 46px 60px); box-shadow: inset 0 -30px 60px rgba(60, 0, 30, .5); transition: transform 1.1s cubic-bezier(.6, 0, .3, 1); z-index: 3; }
.curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(90deg, #f2c35b 0 10px, #d6a03e 10px 20px); }
.curtain.left { left: 0; transform: translateX(-102%); border-radius: 0 0 40% 0; }
.curtain.right { right: 0; transform: translateX(102%); border-radius: 0 0 0 40%; }
.reveal.closed .curtain.left, .reveal.closed .curtain.right { transform: translateX(0); }
.reveal.open .curtain.left { transform: translateX(-84%); }
.reveal.open .curtain.right { transform: translateX(84%); }
.valance { position: absolute; left: 0; right: 0; top: 0; height: 9%; min-height: 50px; z-index: 4; background: radial-gradient(circle at 50% 0, #c73b78 60%, transparent 61%) 0 0 / 120px 100%, linear-gradient(#a2245e, #a2245e) 0 0 / 100% 55% no-repeat; }
.valance::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 10px; background: repeating-linear-gradient(90deg, #f2c35b 0 12px, #ffe7a3 12px 18px); }
.rv-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.conf { position: absolute; top: -20px; width: 12px; height: 16px; background: var(--c); border-radius: 3px; animation: fall var(--d) linear var(--delay) forwards; }
.conf.star { width: 20px; height: 20px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
.rv-actions { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 16px; z-index: 6; opacity: 0; transform: translateY(30px); transition: opacity .4s, transform .4s; pointer-events: none; }
.reveal.done .rv-actions { opacity: 1; transform: none; pointer-events: auto; }
.big { min-width: 108px; height: 96px; border-radius: 28px; background: #fff; box-shadow: 0 8px 20px rgba(60, 10, 70, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 14px; color: #7a3f9a; font-size: 15px; transition: transform .15s; }
.big svg { width: 54px; height: 54px; }
.big:active { transform: scale(.92); }
.big.busy { opacity: .6; }
.big.cheer { animation: cheer .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cheer { 40% { transform: scale(1.15); } }

/* ---------- Scrapbook ---------- */
.book { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 14px; background: rgba(90, 40, 110, .42); }
.book[hidden], .reveal[hidden] { display: none; }
.book-card { width: min(960px, 100%); height: min(720px, 100%); display: flex; flex-direction: column; border-radius: 30px; background: linear-gradient(180deg, #fff9fd, #fbe9f6); box-shadow: 0 20px 50px rgba(60, 10, 70, .4); border: 6px solid #fff; overflow: hidden; animation: bookIn .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes bookIn { from { transform: scale(.9); opacity: 0; } }
.book header { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px 18px; }
.bk-title { flex: 1; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 24px; color: #a0468a; }
.bk-title svg { width: 44px; height: 44px; }
.big.small { height: 64px; min-width: 0; flex-direction: row; gap: 8px; border-radius: 22px; padding: 4px 16px; box-shadow: 0 4px 12px rgba(116, 54, 140, .25); }
.big.small svg { width: 42px; height: 42px; }
.shelf { flex: 1; overflow-y: auto; padding: 8px 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; align-content: start; overscroll-behavior: contain; }
.bk-page { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; background: #fff; box-shadow: 0 6px 14px rgba(116, 54, 140, .2); padding: 6px; transform: rotate(-1deg); }
.bk-page:nth-child(even) { transform: rotate(1.2deg); }
.bk-page .open, .bk-page .open img, .bk-page .open svg, .add-thumb svg { width: 100%; height: 100%; border-radius: 12px; display: block; object-fit: cover; }
.bk-page.add { display: grid; place-items: center; border: 4px dashed #f0a6d4; }
.add-thumb { position: absolute; inset: 6px; opacity: .55; }
.bk-page.add > svg { position: relative; width: 74px; height: 74px; filter: drop-shadow(0 4px 8px rgba(116, 54, 140, .3)); }
.bk-page .del { position: absolute; right: -8px; top: -8px; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.bk-page .del svg { width: 30px; height: 30px; }
.bk-page .confirm { position: absolute; inset: 6px; border-radius: 12px; background: rgba(255, 255, 255, .88); display: flex; align-items: center; justify-content: center; gap: 14px; }
.bk-page .confirm[hidden] { display: none; }
.bk-page .confirm button svg { width: 60px; height: 60px; }
.bk-page.asking .del { display: none; }

@media (prefers-reduced-motion: reduce) {
  .princess-svg, .act-star, .scene .tw, .scene .drift, .scene .flutter-a, .scene .flutter-b { animation: none !important; }
  .grid.enter .item { animation: none; }
}
.noscript { padding: 24px; text-align: center; }
#app { scroll-margin-top: var(--nav); }
.experience-info-link { position: absolute; z-index: 4; left: 12px; bottom: 12px; display: grid; place-items: center; min-height: 48px; padding: 10px 14px; border-radius: 24px; background: #fff7fc; box-shadow: var(--shadow); color: var(--ink); font-size: 14px; text-decoration: none; }
.experience-info-link:focus-visible { outline: 4px solid #8f5ad0; outline-offset: 3px; }
.experience-copy { scroll-margin-top: 72px; background: linear-gradient(#fff7fc,#f6edfc); border-top: 4px solid #fff; padding: 44px 24px 56px; }
.experience-copy-inner { max-width: 1040px; margin: auto; }
.experience-copy h2 { font-size: 36px; line-height: 1.2; margin: 10px 0 18px; }
.experience-copy h3 { font-size: 23px; line-height: 1.3; margin: 0 0 14px; }
.experience-copy p, .experience-copy li { font-size: 16px; font-weight: 500; line-height: 1.7; }
.experience-copy li { padding-left: 4px; margin-bottom: 8px; }
.experience-copy ol { padding-left: 22px; }
.experience-copy .experience-lead { font-size: 18px; max-width: 78ch; }
.experience-copy .experience-eyebrow { color: #9d467e; font-size: 14px; margin: 0; }
.experience-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 34px 0; }
.experience-faq { margin-top: 32px; }
.experience-faq details { border-bottom: 1px solid #dec6e5; padding: 8px 0; }
.experience-faq summary { min-height: 48px; padding: 12px 4px; cursor: pointer; line-height: 1.5; }
.experience-faq p { margin: 0 0 18px; padding: 0 4px; }
.experience-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; }
.experience-links a { color: #753d93; min-height: 48px; display: inline-flex; align-items: center; }
@media (min-aspect-ratio: 21/20) { .experience-info-link { left: calc(var(--act) + 32px); } }
@media (max-width: 680px) { .experience-copy { padding: 32px 20px 40px; } .experience-copy h2 { font-size: 28px; } .experience-copy h3 { font-size: 21px; } .experience-copy-grid { grid-template-columns: 1fr; gap: 24px; margin: 26px 0; } }
@media (max-aspect-ratio: 21/20) and (max-width: 340px) { .experience-info-link { left: 60px; right: 60px; bottom: 66px; padding: 4px; font-size: 12px; text-align: center; } }

/* very narrow (e.g. 200% zoom on a phone): tools and actions become side columns */
@media (max-aspect-ratio: 21/20) and (max-width: 340px) {
  :root { --act: 46px; --tool: 44px; --item: 84px; }
  .tools { flex-direction: column; gap: 6px; top: 6px; left: 6px; }
  .stage-actions { flex-direction: column; gap: 6px; top: 6px; right: 6px; }
  .doll { inset: 6px 54px 2px; }
  .act { border-width: 3px; }
}