@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font:16px 'DM Sans',sans-serif;font-synthesis:none;color-scheme:light;--ink:#354e43;--muted:#586a57;--leaf:#d3e27d;--ivory:#f3f0e0;--peach:#fec096;--mint:#a6e6b9;--aqua:#94dfe8;--periwinkle:#b7bdf1;--actionInk:#30472b;--text:#263f3a;--subtext:#566c64;--canvas:#fbfaf5;--panel:rgba(255,252,245,.84);--raised:rgba(255,255,255,.62);--border:rgba(143,157,133,.25);--glass:rgba(255,255,255,.95);--scrim:rgba(243,240,224,.32);--shadow:0 12px 40px rgba(31,65,50,.1);--ui-scale:1;color:var(--text);background:var(--canvas)}
:root[data-theme=dark]{color-scheme:dark;--text:#ecf7f0;--subtext:#abc2ba;--canvas:#15262e;--panel:rgba(29,49,58,.88);--raised:rgba(66,86,95,.62);--border:rgba(211,228,225,.2);--glass:rgba(30,53,62,.96);--scrim:rgba(4,16,23,.56);--shadow:0 14px 44px rgba(2,13,20,.24)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0}button:disabled{opacity:.45;cursor:default}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}[hidden]{display:none!important}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,#scene:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}a{color:var(--text)}svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.play{position:fixed;inset:0;width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;isolation:isolate;background:var(--canvas)}.play:fullscreen{inset:0;height:100%}.play.immersive{inset:0;width:100%;height:auto;max-height:none}.play.immersive{z-index:100}#scene{position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-4px}#scene:active{cursor:grabbing}#scene canvas{width:100%;height:100%;max-width:none;max-height:none;display:block;margin:0;border:0;border-radius:0}
.topbar{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top) + 1.1rem) 1.5rem .5rem;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:.35rem;text-decoration:none;border-radius:12px;min-height:44px;touch-action:manipulation}.brand:hover .brand-mascot{filter:brightness(1.06)}.brand-mascot{width:3.3rem;height:3.3rem;object-fit:contain;border-radius:1rem}.brand-wordmark{font:800 2.2rem/.88 Outfit,sans-serif;letter-spacing:-.09rem}.brand small{display:block;font:700 .65rem/1.3 'DM Sans',sans-serif;letter-spacing:.3em;margin:.5rem 0 0 .1rem}.top-actions{display:flex;gap:.45rem}.icon-button{width:2.85rem;height:2.85rem;display:grid;place-items:center;border-radius:1rem;background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);font-size:1.65rem;line-height:1}.icon-button[aria-pressed=true]{background:var(--raised)}
.location-button{display:flex;align-items:center;gap:.65rem;min-height:2.85rem;padding:.5rem 1rem;background:var(--glass);border:1px solid var(--border);border-radius:2rem;font-size:.9rem;font-weight:700;box-shadow:var(--shadow)}
.pal-label{position:absolute;top:calc(env(safe-area-inset-top) + 5.2rem);left:1.7rem;display:flex;align-items:center;gap:.45rem;padding:.35rem .45rem .35rem .8rem;border:1px solid var(--border);border-radius:2rem;background:var(--glass);font-size:.9rem;font-weight:700;z-index:2}.dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--peach)}#palType{font-weight:400;color:var(--subtext)}.mini-button{width:2rem;height:2rem;border-radius:50%;background:var(--raised);display:grid;place-items:center;margin-left:.4rem}.mini-button svg{width:1.2rem;height:1.2rem}
.activity-dock{position:absolute;z-index:3;right:1.5rem;top:calc(env(safe-area-inset-top) + 5.5rem);max-width:24rem;text-align:right}#activity-buttons{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}#activity-buttons button,#stop-activity{padding:.7rem .9rem;min-height:44px;border-radius:2rem;background:var(--glass);border:1px solid var(--border);font-size:.875rem;font-weight:600}#stop-activity{background:var(--peach);color:var(--actionInk)}#activity-status{display:block;font-size:.875rem;padding:.5rem .5rem 0;color:var(--text);text-shadow:0 0 14px var(--canvas)}
.main-nav{position:absolute;z-index:4;bottom:calc(env(safe-area-inset-bottom) + 1.2rem);left:50%;transform:translateX(-50%);display:flex;padding:.45rem;gap:.3rem;background:var(--glass);border:1px solid var(--border);border-radius:1.65rem;box-shadow:var(--shadow)}.main-nav button{display:flex;flex-direction:column;align-items:center;gap:.4rem;justify-content:center;width:5.1rem;min-height:4.4rem;border-radius:1.2rem;background:transparent;font-size:.875rem;font-weight:600}.main-nav button:hover{background:var(--raised)}#open-maker{background:var(--leaf);color:var(--actionInk)}
.play-tools{position:absolute;right:1.5rem;bottom:calc(env(safe-area-inset-bottom) + 7.6rem);z-index:3;display:flex;gap:.45rem;align-items:flex-end}.play-tools button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:.35rem;background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:1.35rem;min-width:3.9rem;min-height:3.9rem;padding:.6rem;font-size:.875rem;font-weight:600}#squish{min-width:5rem;min-height:5rem;background:var(--leaf);color:var(--actionInk);border-color:var(--leaf)}#squish.pressed,.play-tools [aria-pressed=true]{background:var(--mint);color:var(--actionInk)}
.joystick-wrap{position:absolute;z-index:3;bottom:calc(env(safe-area-inset-bottom) + 7.6rem);left:1.7rem;text-align:center;user-select:none}#joystick{width:6.1rem;height:6.1rem;display:grid;place-items:center;border-radius:50%;background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);touch-action:none;cursor:move}#stick{width:2.85rem;height:2.85rem;border-radius:50%;background:var(--leaf);box-shadow:inset 0 3px 6px rgba(255,255,255,.55),0 5px 12px rgba(45,70,50,.15);pointer-events:none}.joystick-wrap>span{display:block;margin-top:.6rem;font-size:.7rem;letter-spacing:.2em;font-weight:700;color:var(--subtext)}
.reset-control{position:absolute;right:1.5rem;bottom:calc(env(safe-area-inset-bottom) + 2.2rem);display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.7rem .9rem;border-radius:1rem;background:var(--glass);border:1px solid var(--border);font-size:.875rem;z-index:3}.hint{position:absolute;left:1.7rem;bottom:calc(env(safe-area-inset-bottom) + 1.8rem);max-width:12rem;font-size:.875rem;color:var(--subtext);pointer-events:none}
dialog{position:fixed;inset:0;margin:auto;width:min(44rem,calc(100% - 3rem));max-width:100%;max-height:calc(100dvh - 3rem);padding:0 1.8rem 1.8rem;overflow:auto;overscroll-behavior:contain;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:1.75rem;box-shadow:0 24px 90px rgba(12,35,35,.2)}dialog::backdrop{background:var(--scrim);backdrop-filter:blur(8px)}.sheet-heading{display:flex;position:sticky;top:0;z-index:5;align-items:center;justify-content:space-between;gap:1rem;background:var(--panel);border-bottom:1px solid var(--border);padding:1.6rem 0 1.25rem;margin-bottom:1.4rem}.sheet-heading .icon-button{flex-shrink:0;background:var(--raised);box-shadow:none}.sheet-handle{display:none}
h1,h2{font-family:Outfit,sans-serif;line-height:1.14;letter-spacing:-.025em;margin:0}h1{font-size:1.9rem;font-weight:600}h2{font-size:1.25rem;margin:1.7rem 0 .8rem}p{font-size:1rem;line-height:1.55}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--subtext);margin:0 0 .5rem}.small-note,.selection-note,.section-note{font-size:.875rem;line-height:1.5;color:var(--subtext)}.section-title{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.5rem 0 .8rem}.section-title h2{margin:0}.section-title>span{color:var(--subtext);font-size:.75rem}
.pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.pal{position:relative;overflow:hidden;border:2px solid transparent;border-radius:1.2rem;background:var(--raised);padding:0 0 1rem}.pal img{width:100%;height:auto;aspect-ratio:260/220;object-fit:contain;display:block;margin-bottom:.5rem;border-radius:1rem}.pal b{font-size:.875rem}.pal[aria-pressed=true],.filling-card[aria-pressed=true],.color-swatch[aria-pressed=true]{border-color:var(--text)}.check,.filling-check{position:absolute;right:.6rem;top:.6rem;width:1.5rem;height:1.5rem;display:none;place-items:center;border-radius:50%;background:var(--leaf);color:var(--actionInk);font-size:.875rem;font-style:normal}.pal[aria-pressed=true] .check,.filling-card[aria-pressed=true] .filling-check{display:grid}
.color-label,.volume-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600}.volume-label{margin-top:1.4rem}input[type=color]{width:4rem;height:3rem;border:1px solid var(--border);padding:.25rem;background:var(--raised);border-radius:.8rem}#swatches,.maker-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin:1rem 0 1.4rem}.color-swatch{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem .2rem;background:var(--raised);border:2px solid transparent;border-radius:1rem;font-size:.875rem}.color-chip{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--swatch)}.color-swatch[aria-pressed=true] .color-chip:after{content:'✓';height:100%;display:grid;place-items:center;color:#30472b}
.filling-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.filling-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:.3rem .3rem .8rem;border:2px solid transparent;border-radius:1rem;background:var(--raised)}.filling-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:.7rem;margin-bottom:.5rem}.filling-card b{font-size:.875rem;padding:0 .2rem}.filling-card>span{font-size:.75rem;color:var(--subtext);padding:.2rem .2rem 0}
.studio-done,.primary{background:var(--leaf)!important;color:var(--actionInk)!important;font-weight:700}.studio-done{width:100%;min-height:3.2rem;margin-top:1.5rem;border-radius:1rem}.maker-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.maker-grid label,.share-label{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;font-weight:600}.maker-grid input,.maker-grid select,#creation-link,select{width:100%;min-height:3rem;border:1px solid var(--border);border-radius:.8rem;padding:.6rem;background:var(--raised);font-size:1rem}.maker-grid input[type=color]{padding:.25rem}.maker-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 .8rem}.maker-actions button,.prop-buttons button{padding:.9rem 1rem;min-height:3rem;border:1px solid var(--border);border-radius:1rem;background:var(--raised);font-size:.875rem}.saved-pals{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.saved-pals button{background:var(--raised);border:1px solid var(--border);padding:1rem;border-radius:1rem;text-align:left;overflow-wrap:anywhere}.saved-pals span{display:block;font-size:.875rem;color:var(--subtext);margin-top:.3rem}
.world-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.world-card{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:1.2rem;text-align:left;border:2px solid transparent;border-radius:1.25rem;background:var(--raised);min-height:10rem}.world-number{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.85rem;color:#30472b;background:var(--world-color);font-size:.875rem;font-weight:700}.world-card b{font-family:Outfit,sans-serif;font-size:1.2rem}.world-card>span:last-child{font-size:.875rem;color:var(--subtext);line-height:1.4}.world-card[aria-pressed=true]{border-color:var(--text)}.prop-buttons,.shop-items{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.text-button{padding:.8rem 0;min-height:44px;background:transparent;text-decoration:underline;font-size:.875rem}
.segmented{display:flex;padding:.3rem;background:var(--raised);border-radius:1rem;gap:.3rem}.segmented button{flex:1;padding:.8rem .5rem;border-radius:.75rem;background:transparent;font-size:.875rem}.segmented [aria-pressed=true]{background:var(--leaf);color:var(--actionInk);font-weight:700}.range-row{display:block;margin:1.5rem 0}.range-row>span{display:flex;justify-content:space-between;font-size:1rem;font-weight:600}.range-row output{font-size:.875rem;color:var(--subtext);font-weight:400}.range-row small{font-size:.875rem;color:var(--subtext)}input[type=range]{accent-color:var(--leaf);min-height:44px;width:100%;margin:.3rem 0}.volume-label input{max-width:55%}.select-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.select-row select{width:55%}
.toast{position:absolute;z-index:10;left:50%;top:calc(env(safe-area-inset-top) + 5.2rem);transform:translateX(-50%);max-width:calc(100% - 2rem);width:max-content;border:1px solid var(--border);border-radius:1rem;background:var(--panel);color:var(--text);box-shadow:var(--shadow);padding:1rem 1.25rem;font-size:.875rem;text-align:center;pointer-events:none}#error{position:absolute;z-index:5;left:50%;top:40%;transform:translate(-50%,-50%);padding:1.5rem;width:min(30rem,calc(100% - 3rem));border:1px solid var(--border);border-radius:1.4rem;background:var(--panel);text-align:center;box-shadow:var(--shadow)}#error p{font-size:.875rem;color:var(--subtext)}#error button{padding:.7rem 1.2rem;border-radius:.8rem;background:var(--leaf);color:var(--actionInk)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root[data-layout=compact] .main-nav button{width:4.4rem;min-height:3.7rem}:root[data-layout=compact] .play-tools button{min-height:3.5rem}:root[data-layout=compact] #squish{min-height:4.2rem}
@media(max-width:800px){.topbar{flex-wrap:wrap;gap:.5rem;padding:.9rem 1rem .4rem;padding-top:calc(env(safe-area-inset-top) + .9rem)}.brand-mascot{width:2.6rem;height:2.6rem}.brand-wordmark{font-size:1.8rem}.brand small{font-size:.6rem;letter-spacing:.2em}.top-actions{margin-left:auto;gap:.3rem}.top-actions .icon-button{width:2.6rem;height:2.6rem;border-radius:.9rem}.location-button{position:absolute;top:calc(env(safe-area-inset-top) + 4.8rem);left:1rem;font-size:.875rem;padding:.4rem .7rem}.location-button svg{display:none}.pal-label{top:calc(env(safe-area-inset-top) + 4.8rem);left:auto;right:1rem;font-size:.875rem}#palType{display:none}.activity-dock{top:calc(env(safe-area-inset-top) + 8.4rem);right:1rem;left:1rem;max-width:none}#activity-buttons{justify-content:center}#activity-status{text-align:center}.main-nav{bottom:calc(env(safe-area-inset-bottom) + .75rem)}.main-nav button{width:4.2rem;min-height:4rem}.joystick-wrap{left:1rem;bottom:calc(env(safe-area-inset-bottom) + 7rem)}#joystick{width:5.3rem;height:5.3rem}.play-tools{right:1rem;bottom:calc(env(safe-area-inset-bottom) + 7rem);gap:.35rem}.play-tools button{min-width:3.45rem;min-height:3.45rem}#squish{min-width:4.2rem;min-height:4.3rem}.hint,.reset-control span{display:none}.reset-control{right:.75rem;bottom:calc(env(safe-area-inset-bottom) + 1.8rem);padding:.6rem}.reset-control svg{width:1.2rem;height:1.2rem}dialog{inset:auto 0 0;margin:0;width:100%;max-height:90dvh;border-radius:1.65rem 1.65rem 0 0;padding:0 1.2rem calc(env(safe-area-inset-bottom) + 1.3rem)}.sheet-heading{padding:1.3rem 0 1rem}h1{font-size:1.65rem}.filling-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.filling-card img{aspect-ratio:2;max-height:110px}}
@media(max-width:470px){.brand-wordmark{font-size:1.6rem}.brand-mascot{width:2.25rem;height:2.25rem}.topbar{padding-left:.7rem;padding-right:.7rem}.top-actions .icon-button{width:2.4rem;height:2.4rem}.top-actions{gap:.2rem}.main-nav{left:.7rem;right:3.8rem;transform:none;justify-content:space-around}.main-nav button{width:auto;flex:1;font-size:.875rem;min-width:0}.world-card{padding:.85rem;min-height:10rem}.world-card b{font-size:1.1rem}.pals{grid-template-columns:repeat(2,minmax(0,1fr))}.play-tools button{font-size:.875rem;min-width:3.1rem}#squish{min-width:3.8rem}}
@media(max-width:370px){.brand-mascot{display:none}.top-actions .icon-button{width:2.3rem}.world-cards,.maker-grid{grid-template-columns:1fr}.world-card{min-height:0}.pal-label{right:.6rem}.location-button{left:.6rem}#swatches,.maker-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.play-tools{gap:.2rem;right:.6rem}.play-tools button{min-width:2.9rem;padding:.45rem}.joystick-wrap{left:.6rem}#joystick{width:4.6rem;height:4.6rem}}
@media(max-height:540px) and (orientation:landscape){.topbar{padding-top:.5rem;flex-wrap:nowrap}.brand-mascot{width:2rem;height:2rem}.brand-wordmark{font-size:1.5rem}.brand small{display:none}.location-button{position:static}.pal-label{top:4rem;left:1rem;right:auto}.activity-dock{top:4rem;left:auto;right:1rem;max-width:50%}.main-nav{left:50%;right:auto;transform:translateX(-50%);bottom:.5rem}.main-nav button{min-height:3.4rem;width:4.2rem}.joystick-wrap{bottom:1rem}.joystick-wrap>span,.hint,.reset-control{display:none}#joystick{width:4.5rem;height:4.5rem}.play-tools{bottom:1rem;right:1rem}#squish{min-height:3.8rem;min-width:3.5rem}.play-tools button{min-width:3rem;min-height:3.3rem;font-size:.75rem}dialog{max-height:96dvh}}
#open-maker,#squish{background:var(--leaf-depth,var(--leaf));border-color:var(--leaf-depth,var(--leaf))}.scene-zoom{position:absolute;z-index:3;left:1.5rem;top:43%;display:flex;flex-direction:column;padding:.25rem;background:var(--glass);border:1px solid var(--border);border-radius:1.2rem;box-shadow:var(--shadow)}.scene-zoom button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;border-radius:.8rem;font-size:1.4rem}.scene-zoom output{font-size:.75rem;font-weight:700}.scene-zoom button:hover{background:var(--raised)}
.choice-wheel{position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%);width:min(21rem,calc(100vw - 1.5rem));height:min(24rem,calc(100dvh - 9rem));pointer-events:none}.choice-wheel h2{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;padding:.65rem 1rem;border-radius:2rem;white-space:nowrap;background:var(--glass);box-shadow:var(--shadow);font-size:1rem;pointer-events:auto}.wheel-options{position:absolute;inset:3rem 0 0}.wheel-options button{position:absolute;width:6.3rem;min-height:6.3rem;max-width:32%;padding:.7rem .35rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 8px 22px rgba(27,62,58,.18);color:#263f3a;font-size:.875rem;font-weight:700;line-height:1.2;pointer-events:auto}.wheel-options svg{width:1.8rem;height:1.8rem}.wheel-options [data-accessory=crown]{background:var(--peach);top:0;left:34%}.wheel-options [data-accessory=bow]{background:var(--periwinkle);top:34%;right:0}.wheel-options [data-accessory=none]{background:var(--aqua);bottom:0;left:34%}.wheel-options [data-accessory=halo]{background:var(--ivory);top:34%;left:0}.wheel-options [aria-pressed=true]{border-color:#263f3a}.wheel-close{position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;font-size:1.8rem;line-height:1;border:1px solid var(--border);border-radius:50%;background:var(--glass);pointer-events:auto}.wheel-close:active{transform:translate(-50%,-50%)}.wheel-message{position:absolute;top:100%;margin:.5rem 0 0;padding:.65rem .8rem;border-radius:1rem;background:var(--panel);font-size:.875rem;text-align:center;pointer-events:auto}
@media(max-width:800px){.scene-zoom{left:.7rem;top:43%}.choice-wheel{top:48%;width:min(20rem,calc(100vw - 1.5rem));height:min(23rem,calc(100dvh - 10rem))}}
@media(max-height:540px) and (orientation:landscape){.scene-zoom{left:1rem;top:7rem;flex-direction:row}.choice-wheel{width:19rem;height:18rem;top:48%}.wheel-options{inset:2.7rem 0 0}.wheel-options button{width:5rem;min-height:5rem;font-size:.75rem}.wheel-options [data-accessory=crown],.wheel-options [data-accessory=none]{left:37%}.wheel-options [data-accessory=halo],.wheel-options [data-accessory=bow]{top:30%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.keyboard-hint{display:block;margin-top:.3rem;letter-spacing:.12em;font-size:.85rem}
@media(pointer:coarse),(max-width:800px){.keyboard-hint{display:none}}

/* Dense frosted ivory glass: dreamy scenery diffusion with readable controls. */
dialog{backdrop-filter:blur(28px) saturate(115%);-webkit-backdrop-filter:blur(28px) saturate(115%);border-color:rgba(255,255,255,.8);box-shadow:0 28px 90px rgba(70,79,53,.18),inset 0 1px 0 rgba(255,255,255,.95)}
dialog::backdrop{backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85)}
.sheet-heading{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.pal,.filling-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 16px rgba(71,81,57,.035)}
[data-theme=dark] dialog{border-color:rgba(224,238,235,.24);box-shadow:0 28px 90px rgba(0,10,18,.35),inset 0 1px 0 rgba(233,245,241,.12)}
[data-theme=dark] .pal,[data-theme=dark] .filling-card{box-shadow:inset 0 1px 0 rgba(233,245,241,.1)}

/* A quiet playground. Primary navigation stays together; tools appear on request. */
:root{--panel:rgba(255,252,242,.94);--glass:rgba(255,253,247,.9);--raised:rgba(255,255,255,.57);--border:rgba(105,126,98,.2);--shadow:0 8px 28px rgba(45,65,44,.09);--leaf-depth:#d3e27d}
:root[data-theme=dark]{--panel:rgba(25,45,53,.96);--glass:rgba(28,49,58,.92);--raised:rgba(73,94,101,.4);--border:rgba(203,224,219,.19)}
svg{width:22px;height:22px;stroke-width:1.75;display:block;overflow:visible}
button{transition:background .18s,box-shadow .18s,transform .18s}button:hover{filter:none}button:disabled:hover{box-shadow:none}
.topbar{padding:calc(env(safe-area-inset-top) + 24px) 28px 0;align-items:flex-start;gap:12px}.brand-mascot{width:48px;height:48px}.brand-wordmark{font-size:2rem}.brand small{margin-top:7px}.top-actions{margin:0}.location-button{margin-left:auto;box-shadow:var(--shadow);min-height:46px;padding:10px 16px;gap:10px}.location-button>svg:last-child{width:16px;height:16px}.icon-button{width:46px;height:46px;min-width:44px;min-height:44px;border-radius:16px;box-shadow:none}.top-actions .icon-button{width:46px;height:46px}.icon-button:hover,.setting-button:hover{background:var(--raised);box-shadow:0 0 0 1px var(--border)}
.pal-label{left:31px;top:calc(env(safe-area-inset-top) + 88px);background:none;border:0;padding:0;gap:7px;box-shadow:none;font-size:.8125rem}.dot{width:7px;height:7px}.pal-loading{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:14px 22px;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:22px;font-size:.9rem;z-index:8;box-shadow:var(--shadow)}
.main-nav{bottom:calc(env(safe-area-inset-bottom) + 24px);padding:7px;gap:3px;border-radius:26px;backdrop-filter:blur(20px) saturate(1.1);box-shadow:0 8px 32px rgba(47,64,41,.13),inset 0 1px 0 #ffffff80;align-items:center}.main-nav button{width:78px;min-height:66px;gap:6px;font-size:.8125rem;border-radius:19px}.main-nav button:active{transform:scale(.96)}.main-nav #open-maker{background:transparent;color:var(--text)}.main-nav #open-maker:hover{background:var(--raised)}.main-nav #open-play{background:var(--leaf);color:var(--actionInk);width:94px}.main-nav #open-play[aria-expanded=true]{background:var(--mint)}.nav-divider{height:30px;width:1px;background:var(--border);margin:0 5px}
.joystick-wrap{left:30px;bottom:calc(env(safe-area-inset-bottom) + 34px)}#joystick{width:82px;height:82px;background:rgba(255,253,245,.65);box-shadow:inset 0 0 0 6px #ffffff25,0 5px 20px #5063460c;backdrop-filter:blur(12px)}#stick{width:37px;height:37px;background:var(--leaf);box-shadow:inset 0 3px 7px #ffffff88,0 4px 9px #576f3124}.joystick-wrap>span{font-size:.625rem;letter-spacing:.14em;margin-top:9px}.keyboard-hint{display:inline!important;margin-left:5px!important;letter-spacing:.05em!important;font-size:.8rem!important}.hint{left:auto;right:30px;bottom:37px;max-width:none;font-size:.8125rem;font-style:italic;color:var(--subtext)}
.play-tools{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:0}.play-tools button,.play-tools #squish{display:flex;min-width:0;min-height:78px;border-radius:17px;box-shadow:none;background:var(--raised);border:1px solid var(--border);color:var(--text);padding:12px 5px;font-size:.8125rem;gap:8px}.play-tools #squish{background:var(--leaf);color:var(--actionInk)}.play-tools button[aria-pressed=true]{background:var(--mint)}.play-tip{font-size:.75rem;color:var(--subtext);margin:13px 0 17px}.activity-section{padding-top:4px}.activity-section h3{font:600 .8125rem 'DM Sans',sans-serif;margin:13px 0 10px}#activity-buttons{display:grid;grid-template-columns:1fr;gap:7px}#activity-buttons button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:13px 16px;border-radius:14px;font-size:.8125rem;background:var(--raised)}#activity-buttons button:after{content:'↗';font-size:1.125rem;font-weight:400;color:var(--subtext)}#quiet-play{font-size:.8125rem;color:var(--subtext);margin-bottom:0}.activity-dock{top:calc(env(safe-area-inset-top) + 87px);right:28px;left:auto;max-width:30rem;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:24px}#activity-status{padding:0;text-shadow:none;font-size:.8125rem;font-weight:700}#stop-activity{min-height:44px;border:0;border-radius:18px;padding:8px 12px;background:var(--leaf);font-size:.75rem}.activity-pulse{width:6px;height:6px;border-radius:50%;background:var(--subtext)}
dialog{width:min(680px,calc(100% - 48px));padding:0 28px 28px;border-radius:30px;background:var(--panel);backdrop-filter:blur(28px) saturate(1.15);box-shadow:0 30px 100px rgba(33,57,42,.2),inset 0 1px 0 #ffffff80}dialog::backdrop{background:rgba(63,85,65,.16);backdrop-filter:blur(8px)}.sheet-heading{padding:26px 0 22px;background:var(--panel);margin-bottom:24px}.sheet-heading .eyebrow{font-size:.6875rem}h1{font-size:1.8rem}.section-title h2{font-size:1.125rem}.pals{gap:12px}.pal{border:1px solid var(--border);border-radius:20px;background:var(--raised);padding-bottom:15px}.pal img{margin-bottom:5px}.pal:hover{background:#ffffff80;box-shadow:0 8px 22px #50664012}.pal[aria-pressed=true]{border-color:var(--subtext);box-shadow:inset 0 0 0 1px var(--subtext)}.pal-species{display:block;font-size:.75rem;color:var(--subtext);margin-top:3px;text-transform:capitalize}.pals[aria-busy=true]:after{content:'Meeting the rest of the club…';font-size:.8125rem;color:var(--subtext);grid-column:1/-1;padding:15px 0;text-align:center}
.world-card{padding:0 0 20px;gap:6px;overflow:hidden;border:1px solid var(--border);background:var(--raised);min-height:0;border-radius:20px}.world-card b,.world-card>span:last-child{padding:0 18px}.world-card b{font-size:1.0625rem}.world-card>span:last-child{font-size:.8125rem}.world-art{display:block;width:100%;height:130px;margin-bottom:10px;background:linear-gradient(150deg,#f9f5e9,#ddeada)}.world-art svg{width:100%;height:100%;stroke:none}.world-art-village{background:linear-gradient(150deg,#fff7ed,#f3dfce)}.world-art-lagoon{background:linear-gradient(150deg,#f5f6ea,#dcecf0)}.world-art-studio{background:linear-gradient(150deg,#fbf7ef,#e1e0f1)}.world-card[aria-pressed=true]{border-color:var(--subtext);box-shadow:inset 0 0 0 1px var(--subtext)}.prop-buttons button{display:flex;align-items:center;gap:9px}.prop-buttons button:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mint)}.prop-buttons button:nth-child(2):before{background:var(--peach)}.prop-buttons button:nth-child(3):before{background:var(--aqua)}.prop-buttons button:nth-child(4):before{background:var(--periwinkle)}
.settings-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.setting-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--raised);font-size:.8125rem}.settings-actions .setting-button{flex-direction:column;gap:10px;padding:17px 8px}.setting-button[aria-pressed=true]{background:var(--mint);color:var(--actionInk)}.style-share{border-top:1px solid var(--border);padding-top:20px;margin-top:20px}.style-share button{width:100%}.joystick-wrap{display:flex;flex-direction:column;align-items:center}.zoom-stepper{display:flex;align-items:center;padding:4px;margin-bottom:12px;border:1px solid var(--border);border-radius:18px;background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.zoom-stepper button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border-radius:13px;background:transparent}.zoom-stepper #zoom-fit{min-width:52px}.zoom-stepper svg{width:18px;height:18px}.zoom-stepper output{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}.zoom-stepper button:disabled{opacity:.35;cursor:default}.advanced-settings{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:24px 0;padding:5px 0}.advanced-settings summary{cursor:pointer;min-height:52px;padding:16px 0;font-weight:600;font-size:.875rem}.advanced-settings summary:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}.range-row{margin:23px 0}.range-row>span{font-size:.875rem}.range-row small{font-size:.75rem}.segmented button{font-size:.8125rem}.studio-done{min-height:50px;border-radius:15px}.toast{top:calc(env(safe-area-inset-top) + 145px);font-size:.8125rem;font-weight:700;backdrop-filter:blur(16px)}
/* Shops are a stable, readable card rather than four floating circular targets. */
.choice-wheel{top:auto;bottom:calc(env(safe-area-inset-bottom) + 122px);left:50%;transform:translateX(-50%);width:350px;max-width:calc(100vw - 24px);height:auto;padding:22px;background:var(--panel);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:26px;box-shadow:0 18px 70px #35452c26;pointer-events:auto}.choice-wheel h2{position:static;transform:none;padding:0 48px 0 0;white-space:normal;box-shadow:none;background:none;font-size:1.3rem;margin-bottom:20px}.wheel-options{position:static;display:grid;grid-template-columns:1fr 1fr;gap:9px}.wheel-options button{position:static!important;width:100%;max-width:none;min-height:93px;border-radius:18px;box-shadow:none;border:1px solid var(--border);font-size:.8125rem}.wheel-options [aria-pressed=true]{border:2px solid var(--text)}.wheel-close{top:13px;right:13px;left:auto;transform:none;display:grid;place-items:center;width:44px;height:44px}.wheel-close:active{transform:scale(.96)}
:root[data-layout=compact] .main-nav button{min-height:56px;width:70px}:root[data-layout=compact] .main-nav #open-play{width:86px}
@media(max-width:800px){.topbar{flex-wrap:nowrap;padding:calc(env(safe-area-inset-top) + 18px) 18px 0}.location-button{position:static;font-size:.8125rem;padding:10px 13px;min-height:44px}.location-button svg{display:block}.location-button>svg:first-child{display:none}.brand-mascot{width:38px;height:38px}.brand-wordmark{font-size:1.65rem}.brand small{font-size:.5rem;margin-top:6px}.top-actions .icon-button{width:44px;height:44px}.pal-label{left:22px;right:auto;top:calc(env(safe-area-inset-top) + 74px);font-size:.75rem}#palType{display:inline}.main-nav{bottom:calc(env(safe-area-inset-bottom) + 18px);left:50%;right:auto;transform:translateX(-50%)}.main-nav button{width:68px;min-height:62px}.main-nav #open-play{width:78px}.joystick-wrap{left:20px;bottom:calc(env(safe-area-inset-bottom) + 122px)}#joystick{width:70px;height:70px}#stick{width:33px;height:33px}.joystick-wrap>span{display:none}.hint{display:none}.activity-dock{top:calc(env(safe-area-inset-top) + 114px);left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 24px)}dialog{inset:auto 0 0;margin:0;width:100%;max-height:91dvh;padding:0 22px calc(env(safe-area-inset-bottom) + 24px);border-radius:28px 28px 0 0}.sheet-heading{padding:24px 0 20px}.world-art{height:120px}.choice-wheel{bottom:calc(env(safe-area-inset-bottom) + 114px);top:auto;height:auto}.wheel-options{inset:auto}.wheel-options button{width:100%;min-height:88px}}
@media(max-width:470px){.topbar{gap:8px;padding:calc(env(safe-area-inset-top) + 16px) 14px 0}.brand{gap:3px}.brand-mascot{width:34px;height:34px}.brand-wordmark{font-size:1.45rem}.brand small{font-size:.48rem}.location-button{gap:6px;padding:10px 12px;font-size:.75rem}.top-actions{gap:0}.top-actions .icon-button{width:44px;height:44px}.pal-label{left:18px;top:calc(env(safe-area-inset-top) + 71px)}.main-nav{left:12px;right:12px;transform:none;justify-content:space-between;gap:0;padding:6px;border-radius:24px}.main-nav button{width:auto;flex:1;font-size:.75rem;min-height:61px;border-radius:18px}.main-nav #open-play{width:auto;flex:1.1}.nav-divider{margin:0 6px}.play-tools button,.play-tools #squish{min-height:75px;font-size:.8125rem}.pals{grid-template-columns:repeat(2,minmax(0,1fr))}.world-cards{gap:10px}.world-card{padding-bottom:15px}.world-card b,.world-card>span:last-child{padding:0 13px}.world-card b{font-size:1rem}.world-art{height:105px}.settings-actions{gap:7px}.setting-button{font-size:.75rem}.settings-actions .setting-button{padding:14px 4px}.choice-wheel{width:calc(100% - 24px);bottom:calc(env(safe-area-inset-bottom) + 108px)}.wheel-options button{font-size:.8125rem}h1{font-size:1.65rem}.toast{top:calc(env(safe-area-inset-top) + 112px)}}
@media(max-width:370px){.brand-mascot{display:block;width:28px;height:28px}.brand-wordmark{font-size:1.2rem}.topbar{gap:6px;padding-left:12px;padding-right:12px}.location-button{padding:10px;font-size:.6875rem}.world-cards{grid-template-columns:1fr 1fr}.maker-grid{grid-template-columns:1fr}.world-card b{font-size:.875rem}.world-card>span:last-child{font-size:.75rem}.world-art{height:90px}.play-tools{gap:7px}}
@media(max-height:540px) and (orientation:landscape){.topbar{padding:12px 18px 0}.brand-mascot{width:32px;height:32px}.brand-wordmark{font-size:1.5rem}.brand small{display:none}.pal-label{top:59px;left:22px}.main-nav{left:50%;right:auto;transform:translateX(-50%);bottom:10px}.main-nav button{width:64px;min-height:54px}.main-nav #open-play{width:76px}.joystick-wrap{bottom:20px;left:20px}#joystick{width:64px;height:64px}.play-tools{margin-top:0}.play-tools button,.play-tools #squish{min-height:58px}.play-tip{margin:8px 0}.activity-dock{left:50%;top:18px;right:auto;max-width:40%;transform:translateX(-50%)}.choice-wheel{bottom:84px;width:320px;max-height:calc(100dvh - 95px);overflow:auto;padding:16px}.choice-wheel h2{margin-bottom:12px}.wheel-options button{min-height:65px;padding:6px}.wheel-options svg{width:22px;height:22px}dialog{inset:0;margin:auto;width:min(680px,calc(100% - 32px));max-height:95dvh;border-radius:26px}.sheet-heading{padding:18px 0}.settings-actions .setting-button{flex-direction:row}}
@media(prefers-reduced-motion:reduce){button,dialog{transition:none;animation:none}}

@media(max-width:470px){.play-tip{display:none}.play-tools{margin-top:0}.play-tools button,.play-tools #squish{min-height:64px;padding:8px;gap:5px}.activity-section{margin-top:12px}.activity-section h3{font-size:.75rem;margin:10px 0 8px}#activity-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}#activity-buttons button{padding:10px;font-size:.75rem;gap:6px}#activity-buttons button:after{font-size:1rem}}
#activity-buttons button:after{content:none}#activity-buttons button svg{width:18px;height:18px;color:var(--subtext)}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:color-mix(in srgb,var(--subtext) 23%,transparent)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:21px;height:21px;margin-top:-8px;border:3px solid var(--glass);border-radius:50%;background:#8ca24c;box-shadow:0 1px 5px #52693235}input[type=range]::-moz-range-track{height:5px;border-radius:4px;background:color-mix(in srgb,var(--subtext) 23%,transparent)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--glass);border-radius:50%;background:#8ca24c}
@media(min-width:801px){.choice-wheel{left:auto;right:28px;transform:none}}

@media(max-height:540px) and (orientation:landscape){.choice-wheel{right:18px;left:auto;transform:none;bottom:83px;max-height:calc(100dvh - 100px);width:300px;padding:16px}.activity-section h3{margin:12px 0 8px}}
@media(max-width:370px){.select-row{align-items:flex-start;flex-direction:column;gap:10px}.select-row select{width:100%}}

/* A little more scenery through the glass, with a readable fixed heading. */
:root{--panel:rgba(255,252,242,.88)}:root[data-theme=dark]{--panel:rgba(29,49,58,.9)}
.color-chip{background:radial-gradient(ellipse at 30% 23%,#fff9 0 5%,#fff0 16%),radial-gradient(ellipse at 68% 80%,#fff6,transparent 57%),var(--swatch);box-shadow:inset 0 -4px 10px #43573b15,0 5px 10px #41513610}#swatches,.maker-swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.color-swatch{font-size:.7rem}.color-chip{width:2.25rem;height:2.25rem}
@media(max-width:600px){#swatches,.maker-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}

dialog .sheet-heading{background:rgba(255,252,242,.96);backdrop-filter:blur(20px)}:root[data-theme=dark] dialog .sheet-heading{background:rgba(29,49,58,.96)}
.wheel-options button[data-accessory^="bow-"]{background:color-mix(in srgb,var(--ribbon) 46%,var(--ivory));color:#34483f}.wheel-options button[data-accessory^="bow-"] svg{fill:var(--ribbon)}.choice-wheel{max-height:calc(100dvh - 150px);overflow:auto}

.style-pal{display:flex;align-items:center;gap:24px;margin:1px 0 20px;padding:12px 20px 12px 4px;border-radius:23px;background:linear-gradient(135deg,#fff5dc66,#dce9db44);border:1px solid var(--border)}.style-pal img{width:160px;height:138px;object-fit:contain;border-radius:18px}.style-pal h2{margin:0;font-size:1.6rem}.style-pal p:not(.eyebrow){font-size:.8125rem;color:var(--subtext);margin:8px 0}.style-pal span{font-size:.75rem;color:var(--subtext)}.filling-card{padding:0 0 12px;overflow:hidden;border-radius:18px;border:1px solid var(--border)}.filling-card img{border-radius:0;margin-bottom:11px}.filling-card b,.filling-card>span{padding-left:11px;padding-right:10px}.filling-card[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--subtext)}
@media(max-width:600px){.style-pal{gap:13px;padding:8px}.style-pal img{width:120px;height:110px}.style-pal h2{font-size:1.3rem}.style-pal .eyebrow{font-size:.58rem}.style-pal span{display:none}.filling-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.filling-card b{font-size:.8rem}.filling-card>span{font-size:.7rem}}

.choice-wheel[data-shop=boutique] [data-accessory=none]{grid-column:1/-1;order:10;min-height:44px;flex-direction:row}

@media(max-width:800px){.filling-card img{aspect-ratio:4/3;max-height:none}}

@media(max-width:600px){.choice-wheel[data-shop=boutique]{padding:16px}.choice-wheel[data-shop=boutique] h2{margin-bottom:14px}.choice-wheel[data-shop=boutique] .wheel-options button{min-height:68px;padding:8px;gap:5px;font-size:.75rem}.choice-wheel[data-shop=boutique] .wheel-options svg{width:20px;height:20px}.choice-wheel[data-shop=boutique] [data-accessory=none]{min-height:44px}}

@media(max-height:540px) and (orientation:landscape){.choice-wheel[data-shop=boutique]{padding:12px}.choice-wheel[data-shop=boutique] h2{font-size:1.2rem;margin-bottom:10px}.choice-wheel[data-shop=boutique] .wheel-options button{min-height:52px;padding:7px;gap:6px;font-size:.68rem;line-height:1.15;flex-direction:row}.choice-wheel[data-shop=boutique] .wheel-options svg{width:18px;height:18px;flex-shrink:0}.choice-wheel[data-shop=boutique] [data-accessory=none]{min-height:44px}}

.sound-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.sound-heading label{font-weight:600}.sound-heading output{margin-left:6px}.sound-heading button{display:flex;align-items:center;gap:6px;padding:10px 12px;min-height:44px;background:var(--raised);border:1px solid var(--border);border-radius:13px;font-size:.8rem}.sound-heading svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:370px){.sound-heading{gap:8px}.sound-heading label{font-size:.88rem}.sound-heading button{padding:10px 8px;font-size:.72rem}}

.pal-voice-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 22px}.pal-voice-controls label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.pal-voice-controls input{width:20px;height:20px;accent-color:var(--actionInk);flex-shrink:0}.pal-voice-controls b{display:block;font-size:.9rem}.pal-voice-controls small{display:block;margin-top:4px;font-size:.75rem;color:var(--muted)}.pal-voice-controls button{min-height:44px;padding:10px 12px;flex-shrink:0;background:var(--raised);border:1px solid var(--border);border-radius:13px;font-size:.8rem}
@media(max-width:370px){.pal-voice-controls{gap:8px;align-items:flex-start}.pal-voice-controls label{gap:7px}.pal-voice-controls small{max-width:130px}.pal-voice-controls button{font-size:.72rem;padding:10px 8px}}

/* Keepsakes live inside Play; the world stays free of extra controls. */
.little-discoveries{margin-top:18px;border-top:1px solid var(--border);padding-top:8px}.little-discoveries summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:.8125rem;font-weight:600;list-style:none}.little-discoveries summary::before{content:'✧';font-size:1.2rem;color:var(--subtext)}.little-discoveries summary::-webkit-details-marker{display:none}.little-discoveries summary span{margin-left:auto;font-size:.6875rem;font-weight:400;color:var(--subtext)}.little-discoveries>p{font-size:.75rem;color:var(--subtext);line-height:1.5;margin:6px 0 14px}.little-discoveries ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}.discovery{display:flex;align-items:center;gap:12px}.discovery b,.discovery small{display:block}.discovery b{font-size:.75rem}.discovery small{font-size:.6875rem;line-height:1.45;color:var(--subtext);margin-top:3px}.discovery-seal{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:50%;color:var(--subtext);font-size:1.4rem}.found .discovery-seal{border-style:solid;border-color:#e3cb83;background:radial-gradient(circle at 32% 22%,#fffaf0,#eed486 58%,#cfaf60);color:#69562b;box-shadow:inset 0 1px 3px #fff9,0 3px 8px #51452218}.little-discoveries summary:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:8px}
@media(max-width:600px){.little-discoveries{margin-top:10px}.little-discoveries ul{padding-bottom:4px}}


/* Drawers keep the living world in view; native dialog owns focus and Escape. */
dialog{
 inset:auto 16px 16px auto;margin:0;
 width:min(480px,calc(100% - 32px));height:min(740px,78dvh);
 max-height:calc(100dvh - 32px);padding:0 24px 24px;
 border-radius:28px;transform:translateY(var(--drawer-drag,0px));
 transition:height .26s cubic-bezier(.2,.8,.2,1),transform .22s ease;
 scrollbar-width:thin;scroll-padding-top:132px;
}
dialog[data-expanded=true]{height:calc(100dvh - 32px)}
dialog[open]{animation:drawer-arrive .28s cubic-bezier(.2,.8,.2,1)}
dialog[data-dragging=true]{transition:none;animation:none}
dialog::backdrop{background:rgba(35,58,47,.055);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme=dark] dialog::backdrop{background:rgba(4,14,23,.16)}
dialog .sheet-heading{padding:44px 0 18px;margin-bottom:20px;min-height:112px}
dialog .sheet-heading h1{font-size:1.6rem}
.drawer-grab{position:absolute;top:0;left:0;width:100%;height:44px;display:grid;place-items:center;background:transparent;touch-action:none;cursor:ns-resize;border-radius:12px}
.drawer-grab span{width:38px;height:5px;border-radius:8px;background:var(--subtext);opacity:.38;transition:width .2s}
.drawer-grab:hover span,.drawer-grab:focus-visible span{width:50px;opacity:.65}
.drawer-grab:active{transform:none}
dialog .pals{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog .filling-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog .style-pal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
dialog .style-pal>div{min-width:0}
dialog .style-pal h2{font-size:1.3rem}
dialog .style-pal img{width:100%;height:auto}
dialog .world-art{height:95px}
@keyframes drawer-arrive{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:800px){
 dialog{inset:auto 0 0;width:100%;height:52dvh;max-height:88dvh;padding:0 20px calc(env(safe-area-inset-bottom) + 22px);border-radius:28px 28px 0 0}
 dialog[data-expanded=true]{height:88dvh}
 dialog .sheet-heading{padding:44px 0 16px;min-height:108px}
 dialog .sheet-heading h1{font-size:1.45rem}
 dialog .sheet-heading .eyebrow{font-size:.6rem}
 dialog .sheet-heading .icon-button{width:44px;height:44px;min-width:44px}
 dialog .drawer-grab{height:44px}
 dialog .pals{gap:10px}
 dialog .pal{padding-bottom:10px}
 dialog .world-art{height:80px}
 dialog .world-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 dialog .world-card{padding:12px;min-height:0}
}
@media(max-height:540px) and (orientation:landscape){
 dialog{inset:12px 12px 12px auto;width:min(440px,54vw);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:24px;padding:0 20px 20px}
 dialog[data-expanded=true]{height:calc(100dvh - 24px)}
 dialog .sheet-heading{padding-top:44px;min-height:100px}
}
@media(prefers-reduced-motion:reduce){
 dialog,dialog[open],.drawer-grab span{animation:none;transition:none}
}

/* Movement controls are inert while editing; leave the pal unobscured beside a drawer. */
body:has(dialog[open]) .joystick-wrap{visibility:hidden}

/* Reserve image space while an optional 3D preview is rendered after first paint. */
img[data-preview=pending],img[data-preview=failed]{background:radial-gradient(ellipse at 40% 28%,#ffffffa8,transparent 60%),linear-gradient(145deg,color-mix(in srgb,var(--preview-color,var(--peach)) 24%,var(--raised)),var(--raised))}
#style-pal-preview{aspect-ratio:7/6}

/* One cloudy surface, compact choices, and a continuous world zoom. */
:root{--sheet-surface:rgba(250,250,242,.72)}
:root[data-theme=dark]{--sheet-surface:rgba(25,43,53,.74)}
dialog,.choice-wheel{background:var(--sheet-surface);backdrop-filter:blur(36px) saturate(1.18);-webkit-backdrop-filter:blur(36px) saturate(1.18)}
dialog .sheet-heading,:root[data-theme=dark] dialog .sheet-heading{background:transparent;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);margin-bottom:14px;padding-bottom:14px;min-height:102px}
dialog .sheet-heading h1{font-size:1.4rem}
dialog .pals{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
dialog .pal{border-radius:15px;padding:5px 4px 10px}
dialog .pal img{height:86px;aspect-ratio:auto;margin:0 0 4px;border-radius:11px}
dialog .pal b{font-size:.8125rem}.pal-species{font-size:.6875rem;margin-top:1px}
dialog .style-pal{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px;margin-bottom:16px;border-radius:18px}
dialog .style-pal img{height:82px;object-fit:contain;border-radius:12px}dialog .style-pal h2{font-size:1.1rem;margin:2px 0 5px}
dialog .style-pal .eyebrow{font-size:.55rem;margin-bottom:4px}dialog .style-pal p{font-size:.75rem;margin:3px 0}dialog .style-pal span{font-size:.6875rem}
dialog .filling-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
dialog .filling-card{display:grid;grid-template-columns:48px minmax(0,1fr);align-content:center;column-gap:8px;padding:8px;min-height:76px;border-width:1px;border-radius:14px}
dialog .filling-card img{grid-row:1/3;width:48px;height:54px;margin:0;align-self:center;border-radius:9px}
dialog .filling-card b{font-size:.75rem;padding:0;align-self:end}dialog .filling-card>span{font-size:.625rem;padding:3px 0 0;line-height:1.35}
dialog .filling-check{top:4px;right:4px;width:15px;height:15px;font-size:10px}
dialog .color-chip{width:30px;height:30px}dialog .color-swatch{padding:5px 2px;min-height:52px;gap:5px;font-size:.65rem}
dialog .world-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
dialog .world-card{display:flex;flex-direction:column;gap:7px;padding:10px;min-width:0;min-height:0;border-radius:15px}
dialog .world-art{width:100%;height:80px;margin:0;border-radius:10px}
dialog .world-card b{font-size:.9rem;padding:0;align-self:auto}dialog .world-card>span:last-child{font-size:.75rem;padding:0;align-self:auto}
dialog .settings-actions .setting-button{flex-direction:row;gap:7px;padding:10px 5px;min-height:52px}dialog .settings-actions svg{width:18px;height:18px;flex-shrink:0}
.voice-choice{display:grid;gap:8px;margin:0 0 22px;font-size:.8125rem}.voice-choice select{width:100%;min-height:44px}
.zoom-slider{display:flex;align-items:center;gap:8px;width:190px;padding:0 8px;margin-bottom:12px;border:1px solid var(--border);border-radius:18px;background:var(--glass);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.zoom-slider label{display:grid;place-items:center}.zoom-slider svg{width:17px;height:17px}.zoom-slider input{width:100%;min-width:0;height:44px;margin:0;accent-color:var(--actionInk);cursor:pointer}.zoom-slider #zoom-fit{min-width:44px;min-height:44px;padding:0;background:transparent;font-size:.6875rem;border-radius:12px;font-variant-numeric:tabular-nums}
.world-edit{position:absolute;z-index:5;top:calc(env(safe-area-inset-top) + 114px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);padding:4px 5px 4px 14px;border:1px solid var(--border);border-radius:18px;background:var(--glass);backdrop-filter:blur(20px);box-shadow:var(--shadow);font-size:.75rem}
.world-edit button{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:13px;background:var(--raised);font-size:.75rem}.world-edit svg{width:17px;height:17px}
#undo-prop:disabled{opacity:.4;cursor:default}
@media(max-width:600px){dialog .pal img{height:74px}dialog .filling-card{grid-template-columns:40px minmax(0,1fr);gap:5px;padding:7px}dialog .filling-card img{width:40px;height:48px}.zoom-slider{width:168px;gap:6px}dialog .settings-actions .setting-button{flex-direction:column;font-size:.7rem}.world-edit{top:calc(env(safe-area-inset-top) + 108px)}}
@media(max-width:370px){dialog .pals{gap:6px}dialog .pal img{height:64px}dialog .pal b{font-size:.75rem}dialog .pal-species{font-size:.625rem}.zoom-slider{width:148px;gap:4px}dialog .style-pal{grid-template-columns:76px minmax(0,1fr)}dialog .style-pal img{height:72px}}
@media(max-height:540px) and (orientation:landscape){.zoom-slider{width:160px;margin-bottom:6px}.world-edit{left:24px;top:75px;transform:none;max-width:40%}}
/* Style specimens fill the left edge; names and notes stay stacked beside them. */
#style-fillings .filling-card{grid-template-columns:44% minmax(0,1fr);align-content:stretch;column-gap:10px;row-gap:0;padding:0;min-height:88px}
#style-fillings .filling-card img{width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;object-fit:cover;align-self:stretch;border-radius:13px 0 0 13px}
#style-fillings .filling-card b{padding:12px 14px 0 0;line-height:1.3}
#style-fillings .filling-card>span{padding:3px 8px 12px 0;align-self:start}
@media(prefers-reduced-transparency:reduce){:root{--sheet-surface:#fafaf2}:root[data-theme=dark]{--sheet-surface:#192b35}}
/* Scroll content independently so a transparent title never covers a tile. */
dialog{overflow:hidden}dialog[open]{display:flex;flex-direction:column}
dialog .sheet-heading,:root[data-theme=dark] dialog .sheet-heading{position:relative;flex-shrink:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.drawer-content{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;scrollbar-width:thin;padding:1px 1px 4px}

/* Play behaves like a touch surface; editing and copying links remain native. */
#playground{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#playground img{-webkit-user-drag:none}
#playground input:not([type]),#playground input[type=text],#playground textarea,#playground [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.home-help{position:absolute;z-index:3;right:30px;top:calc(env(safe-area-inset-top) + 82px);display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 13px;border:1px solid var(--border);border-radius:16px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:.75rem;font-weight:600}
.home-help svg{width:18px;height:18px}
:root{--movement-green:color-mix(in srgb,var(--leaf) 82%,#5f853c)}
.joystick-wrap{width:172px;gap:10px;align-items:center}
.joystick-wrap .zoom-slider{width:100%;gap:7px;margin:0;border-radius:22px;background:var(--glass);color:var(--text)}
.joystick-wrap #joystick{width:76px;height:76px;background:var(--glass);border:1px solid var(--border);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--movement-green) 12%,transparent),0 4px 18px #30472b0d}
.joystick-wrap #stick{width:34px;height:34px;background:var(--movement-green);box-shadow:inset 0 2px 5px #ffffff60,0 3px 8px #30472b20}
.joystick-wrap>span{margin:0}
#scene-zoom{-webkit-appearance:none;appearance:none;background:transparent;accent-color:var(--movement-green)}
#scene-zoom::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to right,var(--movement-green) var(--zoom-progress,40%),color-mix(in srgb,var(--movement-green) 22%,var(--raised)) var(--zoom-progress,40%))}
#scene-zoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7.5px;border:2px solid var(--glass);border-radius:50%;background:var(--movement-green);box-shadow:0 1px 5px #30472b26}
#scene-zoom::-moz-range-track{height:5px;border-radius:5px;background:color-mix(in srgb,var(--movement-green) 22%,var(--raised))}
#scene-zoom::-moz-range-progress{height:5px;border-radius:5px;background:var(--movement-green)}
#scene-zoom::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--glass);border-radius:50%;background:var(--movement-green);box-shadow:0 1px 5px #30472b26}
dialog .sheet-heading h1:focus{outline:none}
.drawer-grab:focus-visible{outline:none}.drawer-grab:focus-visible span{outline:2px solid var(--text);outline-offset:6px}
.play-guide{list-style:none;padding:0;margin:2px 0 20px;display:grid;gap:22px}.play-guide li{display:flex;align-items:flex-start;gap:13px}.guide-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:13px;background:color-mix(in srgb,var(--leaf) 25%,var(--raised));color:var(--text)}.guide-icon svg{width:21px;height:21px}.play-guide h2{font-size:.9375rem;margin:0 0 4px}.play-guide p{font-size:.8125rem;line-height:1.55;color:var(--subtext);margin:0}.guide-note{font-size:.8125rem;line-height:1.6;color:var(--subtext)}.guide-more{display:block;padding:16px 0 4px;font-size:.75rem;text-align:center;text-underline-offset:3px}
@media(max-width:800px){.home-help{right:18px;top:calc(env(safe-area-inset-top) + 70px);padding:8px 11px}.joystick-wrap{width:156px;gap:9px}.joystick-wrap #joystick{width:70px;height:70px}}
@media(max-width:370px){.home-help{right:12px;font-size:.6875rem;gap:5px;padding:8px 10px}.joystick-wrap{width:148px}.joystick-wrap #joystick{width:66px;height:66px}}
@media(max-height:540px) and (orientation:landscape){.home-help{top:57px;right:18px}.joystick-wrap{width:156px;gap:8px}.joystick-wrap #joystick{width:64px;height:64px}}

/* Metadata shares a real row; long names cannot run under the help button. */
.home-meta{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + max(82px,5.2rem));left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}
.home-meta .home-help{position:static;flex-shrink:0;pointer-events:auto}.home-meta .pal-label{position:static;order:-1;min-width:0;max-width:calc(100% - 138px);overflow:hidden;white-space:nowrap}.home-meta #palName{min-width:0;overflow:hidden;text-overflow:ellipsis}.home-meta #palType{flex-shrink:0}
body:has(dialog[open]) .home-help,body:has(dialog[open]) .main-nav{visibility:hidden}
body:has(#activity-dock:not([hidden])) .home-help{visibility:hidden}
#help-dialog .guide-actions{flex-shrink:0;display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
#help-dialog .guide-actions .studio-done{margin:0;min-height:48px}#help-dialog .guide-more{min-height:44px;display:grid;place-items:center;padding:6px 0}#help-dialog .drawer-content{padding-bottom:12px}
.joy-collection{margin:18px 0;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.joy-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.joy-heading h3{margin:0;font-size:.9rem}.joy-heading span{font-size:.6875rem;color:var(--subtext)}.joy-collection progress{width:100%;height:7px;border:0;border-radius:10px;overflow:hidden;accent-color:var(--leaf);margin:12px 0 6px;background:var(--raised)}.joy-collection progress::-webkit-progress-bar{background:var(--raised);border-radius:10px}.joy-collection progress::-webkit-progress-value{background:var(--leaf);border-radius:10px}.joy-collection progress::-moz-progress-bar{background:var(--leaf);border-radius:10px}
#joy-next,.joy-note{font-size:.75rem;line-height:1.5;color:var(--subtext);margin:3px 0 10px}.joy-collection summary{min-height:44px;padding:12px 0;font-size:.8125rem;font-weight:600;cursor:pointer}#joy-rewards{display:grid;gap:8px}.joy-reward{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 12px;text-align:left;background:var(--raised);border:1px solid var(--border);border-radius:15px}.joy-reward svg{width:25px;height:25px;color:var(--subtext)}.joy-reward b,.joy-reward small{display:block;font-size:.75rem}.joy-reward small{font-size:.6875rem;font-weight:400;color:var(--subtext);margin-top:4px}.joy-reward:disabled,.wheel-options button:disabled{opacity:.68}.reward-lock{display:block;font-size:.625rem;font-weight:400;line-height:1.35}.wheel-options button[data-accessory^=toy-]{background:color-mix(in srgb,var(--ribbon) 34%,var(--ivory));color:#34483f}.wheel-options button{gap:6px}
@media(max-width:800px){.home-meta{top:calc(env(safe-area-inset-top) + max(70px,4.3rem));left:18px;right:18px}.home-meta .pal-label{max-width:calc(100% - 132px)}}
@media(max-width:470px){.home-meta{left:18px;right:12px;gap:10px}.home-meta #palType{display:none}.home-meta .pal-label{max-width:calc(100% - 126px)}}
@media(max-height:540px) and (orientation:landscape){.home-meta{top:calc(env(safe-area-inset-top) + max(59px,3.6rem));left:22px;right:18px}#help-dialog .guide-actions{grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding-top:8px}#help-dialog .guide-more{font-size:.6875rem}}
@media(max-width:800px) and (orientation:portrait){#help-dialog{height:72dvh}#help-dialog[data-expanded=true]{height:88dvh}}

/* The world fills the viewport; only controls reserve space for device cutouts. */
:root{--edge-gutter:28px;--move-gutter:30px}
.topbar{padding-left:max(var(--edge-gutter),env(safe-area-inset-left));padding-right:max(var(--edge-gutter),env(safe-area-inset-right))}
.joystick-wrap{left:max(var(--move-gutter),env(safe-area-inset-left))}
@media(max-width:800px){:root{--edge-gutter:18px;--move-gutter:20px}dialog{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}
@media(max-width:470px){:root{--edge-gutter:14px}.main-nav{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}}
@media(max-width:370px){:root{--edge-gutter:12px}}
@media(max-height:540px) and (orientation:landscape){
 :root{--edge-gutter:18px;--move-gutter:20px}
 .topbar{padding-top:calc(env(safe-area-inset-top) + 12px)}
 .main-nav{bottom:calc(env(safe-area-inset-bottom) + 10px)}
 .joystick-wrap{bottom:calc(env(safe-area-inset-bottom) + 20px)}
}

/* One anchored dock keeps movement above its left edge at every UI scale. */
.play-dock{position:absolute;z-index:4;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%);width:max-content}
.play-dock .main-nav{position:relative;inset:auto;transform:none;margin:0}
.play-dock .joystick-wrap{left:0;bottom:calc(100% + 12px);width:76px;gap:8px;transform:translateX(-50%)}
.joystick-wrap>.zoom-slider{flex-direction:column;width:46px;gap:0;padding:7px 0 0;border-radius:23px}
.zoom-slider label{height:24px;flex-shrink:0}
.joystick-wrap #scene-zoom{writing-mode:vertical-lr;direction:rtl;width:44px;height:110px;min-height:0;touch-action:none}
#scene-zoom::-webkit-slider-runnable-track{width:5px;height:100%;background:linear-gradient(to top,var(--movement-green) var(--zoom-progress,40%),color-mix(in srgb,var(--movement-green) 22%,var(--raised)) var(--zoom-progress,40%))}
#scene-zoom::-webkit-slider-thumb{margin-top:0;margin-left:-7.5px}
#scene-zoom::-moz-range-track,#scene-zoom::-moz-range-progress{width:5px;height:100%}
.joystick-wrap>span{font-size:.55rem;letter-spacing:.1em}.joystick-wrap .keyboard-hint{display:none!important}

/* A single compact row: title, accessible drag target, close. No title strip. */
dialog{--drawer-right-padding:24px;padding-right:var(--drawer-right-padding)}
dialog .sheet-heading,:root[data-theme=dark] dialog .sheet-heading{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px;align-items:center;min-height:0;padding:8px 0 0;margin:0 0 4px;border-bottom:0}
dialog .sheet-heading>div,dialog .sheet-heading>h1{grid-column:1;grid-row:1;min-width:0}
dialog .sheet-heading .eyebrow{display:none}
dialog .sheet-heading h1{font-size:1.125rem;line-height:1.25;margin:0;overflow-wrap:break-word}
dialog .sheet-heading .drawer-grab{position:static;grid-column:2;grid-row:1;width:44px;height:44px;padding:0;min-width:44px}
dialog .sheet-heading .drawer-grab span{width:30px}.drawer-grab:hover span,.drawer-grab:focus-visible span{opacity:.65}
/* The plain icon keeps a 44px target and equal corner insets, reserving device cutouts. */
dialog .sheet-heading .icon-button,.choice-wheel .wheel-close{position:absolute;top:8px;right:max(8px,env(safe-area-inset-right));left:auto;display:grid;place-items:center;width:44px;height:44px;min-width:44px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
dialog .sheet-heading .icon-button{right:calc(max(8px,env(safe-area-inset-right)) - var(--drawer-right-padding))}
dialog .sheet-heading .icon-button svg,.choice-wheel .wheel-close svg{width:24px;height:24px}
@media(max-width:800px){dialog{--drawer-right-padding:max(20px,env(safe-area-inset-right))}}
@media(max-height:540px) and (orientation:landscape){dialog{--drawer-right-padding:max(20px,env(safe-area-inset-right))}}
@media(max-width:800px){.play-dock{bottom:calc(env(safe-area-inset-bottom) + 18px)}.play-dock .joystick-wrap{width:70px}.joystick-wrap #scene-zoom{height:100px}}
@media(max-width:470px){.play-dock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;transform:none}.play-dock .main-nav{width:100%}.play-dock .joystick-wrap{transform:none}}
@media(max-width:600px){body:has(#toy-shop[open]) .joystick-wrap{visibility:hidden}}
@media(max-width:370px){.play-dock .joystick-wrap{width:66px}}
@media(max-height:540px) and (orientation:landscape){.play-dock{bottom:calc(env(safe-area-inset-bottom) + 10px)}.play-dock .joystick-wrap{width:64px;gap:6px;bottom:calc(100% + 10px)}.joystick-wrap #scene-zoom{height:64px}.zoom-slider label{height:20px}.joystick-wrap>span{display:none}}

/* Desktop movement belongs at the screen corner; the navigation stays centered. */
@media(min-width:801px) and (hover:hover) and (pointer:fine){
 .play-dock{left:0;right:0;width:auto;transform:none;pointer-events:none}
 .play-dock .main-nav{width:max-content;margin:0 auto;pointer-events:auto}
 .play-dock .joystick-wrap{left:max(var(--move-gutter),env(safe-area-inset-left));bottom:0;transform:none;pointer-events:auto}
}

/* A single, swipeable shelf lets the live pal remain the main preview. */
#picker{
 --drawer-right-padding:20px;inset:auto 16px 16px;margin:0 auto;
 width:min(920px,calc(100% - 32px));height:auto;max-height:calc(100dvh - 32px);
 padding:0 20px 12px;border-radius:28px;scroll-padding:0;
}
#picker .sheet-heading{display:flex;justify-content:space-between;gap:12px;padding:8px 44px 0 0;margin:0;min-height:52px}
#picker .sheet-heading h1{flex:1}
#picker .carousel-navigation{display:flex;gap:4px;flex:none}
.carousel-navigation button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--raised)}
.carousel-navigation button:disabled{opacity:.3}
.carousel-navigation svg{width:20px;height:20px}
#picker #pals{
 display:grid;grid-auto-flow:column;grid-auto-columns:124px;grid-template-columns:none;
 gap:10px;flex:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
 padding:5px 2px 10px;scroll-padding-inline:2px;scroll-snap-type:x mandatory;
 touch-action:pan-x;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--subtext) 30%,transparent) transparent;
}
#picker .pal{scroll-snap-align:start;min-width:0;padding:5px 5px 10px;border-radius:20px;transition:border-color .18s,background .18s;touch-action:pan-x}
#picker .pal img{width:100%;height:92px;aspect-ratio:auto;margin:0 0 5px;border-radius:14px;pointer-events:none}
#picker .pal b{display:block;font-size:.8125rem;line-height:1.25}
#picker .pal-species{display:block;font-size:.6875rem;line-height:1.3;margin-top:3px}
#picker .pal[aria-pressed=true]{border-color:var(--actionInk);background:color-mix(in srgb,var(--leaf) 30%,var(--raised));box-shadow:inset 0 0 0 1px var(--actionInk)}
:root[data-theme=dark] #picker .pal[aria-pressed=true]{border-color:var(--leaf);box-shadow:inset 0 0 0 1px var(--leaf)}
#picker .pal:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.carousel-footer{display:flex;justify-content:space-between;gap:12px;min-width:0;padding:5px 2px 0}
.carousel-footer p{margin:0;font-size:.6875rem;line-height:1.5;color:var(--subtext)}
#pal-carousel-status{font-weight:600}
@media(max-width:800px){
 #picker{inset:auto 0 0;width:100%;max-height:calc(100dvh - 24px);padding:0 max(16px,env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 12px);--drawer-right-padding:max(16px,env(safe-area-inset-right));padding-right:var(--drawer-right-padding);border-radius:26px 26px 0 0}
 #picker #pals{grid-auto-columns:120px;gap:8px}
 #picker .pal img{height:80px}
 .carousel-footer{flex-wrap:wrap;gap:2px 12px}
}
@media(max-height:540px) and (orientation:landscape){
 #picker{bottom:0;max-height:calc(100dvh - 16px);padding-bottom:calc(env(safe-area-inset-bottom) + 6px)}
 #picker .sheet-heading{min-height:52px;padding-top:8px;padding-bottom:0}
 #picker #pals{grid-auto-columns:106px;padding-top:3px;padding-bottom:6px}
 #picker .pal{padding-bottom:6px;border-radius:16px}
 #picker .pal img{height:56px;margin-bottom:3px}
 .carousel-footer{padding-top:0}
}
@media(prefers-reduced-motion:reduce){#picker .pal{transition:none}}

/* Compact navigation and a full pill zoom track share the movement control scale. */
.play-dock{--control-size:76px}
.play-dock .main-nav{padding:5px;border-radius:24px}
.play-dock .main-nav button,:root[data-layout=compact] .play-dock .main-nav button{min-height:calc(var(--control-size) - 12px);gap:4px;border-radius:18px}
.joystick-wrap>.zoom-slider{width:46px;padding:0;gap:0;border-radius:23px;background:rgba(255,255,255,.96);box-shadow:0 4px 18px #30472b14,inset 0 1px 0 #ffffff}
.joystick-wrap #scene-zoom{width:44px;height:140px;min-height:0;padding:5px;margin:0;border:0;border-radius:22px;background:transparent;cursor:ns-resize}
#scene-zoom::-webkit-slider-runnable-track{width:34px;height:100%;border:0;border-radius:18px;background:transparent}
#scene-zoom::-webkit-slider-thumb{width:34px;height:34px;margin:0;border:2px solid #fff;border-radius:50%;background:var(--movement-green);box-shadow:inset 0 2px 5px #ffffff60,0 2px 6px #30472b26}
#scene-zoom::-moz-range-track,#scene-zoom::-moz-range-progress{width:34px;height:100%;border:0;background:transparent}
#scene-zoom::-moz-range-thumb{box-sizing:border-box;width:34px;height:34px;border:2px solid #fff;border-radius:50%;background:var(--movement-green);box-shadow:inset 0 2px 5px #ffffff60,0 2px 6px #30472b26}
#scene-zoom:focus-visible{outline:3px solid var(--movement-green);outline-offset:4px}
.zoom-reset{display:block;margin-top:-16px;font-size:.8125rem;text-underline-offset:3px}
@media(max-width:800px){.play-dock{--control-size:70px}.joystick-wrap #scene-zoom{height:128px}}
@media(max-width:370px){.play-dock{--control-size:66px}}
@media(max-height:540px) and (orientation:landscape){.play-dock{--control-size:64px}.joystick-wrap #scene-zoom{height:96px}}

/* Navigation stays at the bottom; the complete movement stack sits at left middle.
   The dock stays untransformed so its fixed child remains viewport-relative. */
.play-dock{--dock-inset:24px;display:block;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + var(--dock-inset));width:auto;max-width:none;transform:none;pointer-events:none}
.play-dock .main-nav{width:max-content;max-width:calc(100% - 24px);margin:0 auto;pointer-events:auto}
.play-dock .joystick-wrap{position:fixed;top:50%;left:max(var(--move-gutter),env(safe-area-inset-left));bottom:auto;width:var(--control-size);gap:12px;transform:translateY(-50%);pointer-events:auto}
.play-dock .joystick-wrap>.zoom-slider{position:static;inset:auto;transform:none;margin:0;flex-shrink:0}
.play-dock .joystick-wrap>span{display:none}
.play-dock #joystick{flex-shrink:0}
@media(max-width:800px), (max-height:540px) and (orientation:landscape), (hover:none) and (pointer:coarse){
 .play-dock{--dock-inset:12px;--move-gutter:12px}
 .play-dock .joystick-wrap>span{display:none}
 .play-dock .main-nav{width:min(344px,calc(100% - 24px));gap:0}
 .play-dock .main-nav button,:root[data-layout=compact] .play-dock .main-nav button{flex:1 1 0;min-width:0;width:auto;padding:4px 2px;line-height:1.1}
 .play-dock .main-nav #open-play,:root[data-layout=compact] .play-dock .main-nav #open-play{flex:1 1 0;width:auto}
 .play-dock .nav-divider{margin:0 4px;flex-shrink:0}
}
@media(max-width:520px) and (orientation:landscape){.play-dock .main-nav{width:calc(100% - 2*(max(12px,env(safe-area-inset-left),env(safe-area-inset-right)) + var(--control-size) + 8px))}}
/* Toy Club and Bow & Co. share the native drawer and live try-on surface. */
.shop-intro{margin:4px 0 14px;font-size:.8125rem;line-height:1.5;color:var(--subtext)}
.shop-tabs{margin:0 0 14px}.shop-tabs button{min-height:44px;font-size:.75rem}
.shop-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shop-card{position:relative;min-width:0}
.shop-try{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;height:100%;padding:0 0 12px;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--raised)}
.shop-try img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px 16px 0 0}
.shop-try b{font-size:.8125rem;line-height:1.3;margin:10px 10px 4px}
.shop-try small{font-size:.6875rem;line-height:1.35;color:var(--subtext);margin:0 10px}
.shop-try[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--actionInk);border-color:var(--actionInk)}
.shop-try:disabled{cursor:default;opacity:1}.shop-try:disabled img{opacity:.65}
.shop-save{position:absolute;top:5px;right:5px;width:44px;height:44px;padding:11px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--glass);color:var(--text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.shop-save svg{width:21px;height:21px}.shop-save[aria-pressed=true]{color:var(--text);background:color-mix(in srgb,#f4adba 75%,var(--raised))}.shop-save[aria-pressed=true] svg{fill:currentColor}
.shop-empty{padding:34px 16px;text-align:center;font-size:.875rem;line-height:1.7;color:var(--subtext)}
.shop-note{margin:15px 0 4px;font-size:.6875rem;line-height:1.5;color:var(--subtext)}
.shop-status{flex-shrink:0;font-size:.75rem;line-height:1.4;margin:10px 0 0}.shop-status:empty{display:none}
.shop-actions{display:flex;flex-shrink:0;gap:8px;padding-top:12px}.shop-actions button{min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.75rem;border-radius:14px;padding:8px 12px}
.shop-actions svg{width:18px;height:18px;flex-shrink:0}.shop-actions #shop-undo{background:var(--raised);border:1px solid var(--border)}.shop-actions #shop-undo:disabled{opacity:.45}.shop-actions .studio-done{flex:1;width:auto;margin:0}
@media(max-width:370px){.shop-items{gap:8px}.shop-try b{font-size:.75rem}.shop-actions button{padding:8px;font-size:.6875rem}}

@media(max-width:600px){.shop-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:600px) and (max-height:700px) and (orientation:portrait){
 #toy-shop:not([data-expanded=true]){height:62dvh}
 #toy-shop .shop-intro{display:none}
}

/* Lighter home glass lets the world show through; drawers keep their reading surface. */
:root{--home-surface:rgba(250,250,242,.42);--world-edge:#c6d2a8;--display-layout:home-screen-vh-2}
:root[data-theme=dark]{--home-surface:rgba(25,43,53,.48);--world-edge:#203940}
:root,body{background:var(--world-edge)}
.topbar .location-button,.topbar .icon-button,.home-meta .home-help,
.play-dock .main-nav,.play-dock .joystick-wrap>.zoom-slider,.play-dock #joystick,
.play .quick-play button,.play .quick-play #squish,
.activity-dock,.world-edit,.world-edit button,.toast,.pal-loading{
 background:var(--home-surface);
 backdrop-filter:blur(18px) saturate(1.12);
 -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.play-dock .joystick-wrap>.zoom-slider{box-shadow:0 4px 18px #30472b14,inset 0 1px 0 #ffffff60}
@media(max-height:380px) and (orientation:landscape){
 .play-dock .joystick-wrap{gap:8px}
 .play-dock .joystick-wrap #scene-zoom{height:72px}
 .home-meta .pal-label{align-self:flex-start;transform:translateY(-6px)}
}

@media(prefers-reduced-transparency:reduce){
 :root{--home-surface:#fafaf2}
 :root[data-theme=dark]{--home-surface:#192b35}
}
/* Home Screen WebKit can exclude safe areas from newer viewport units and
   percentage containing blocks. Legacy vh is the documented installed-app
   workaround: https://bugs.webkit.org/show_bug.cgi?id=254868#c2
   The world paints the full height; controls alone reserve safe-area padding. */
@media(display-mode:standalone),(display-mode:fullscreen){
 html,body{height:100vh;min-height:100vh}
 .play{height:100vh;min-height:100vh}
}

#display-check .small-note{margin:10px 0;overflow-wrap:anywhere}
#display-check #display-measurements{margin-top:12px}
#display-check #display-measurements summary{min-height:44px;padding:12px 0}
#display-report{font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;user-select:text;-webkit-user-select:text;touch-action:pan-y;padding:12px;border-radius:12px;background:var(--raised)}
#display-copy-status:empty{display:none}

/* Immediate pal play, balanced against the movement stack on the left. */
.quick-play{--tap-size:72px;position:fixed;z-index:3;top:50%;right:max(28px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:10px;transform:translateY(-50%);pointer-events:none}
.play .quick-play button,.play .quick-play #squish{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tap-size);height:var(--tap-size);min-width:var(--tap-size);min-height:var(--tap-size);padding:6px;border-radius:50%;border:1px solid var(--border);color:var(--text);box-shadow:0 5px 18px #30472b1a,inset 0 1px 0 #ffffff50;pointer-events:auto;touch-action:none;transition:background .12s,transform .12s}
.quick-play svg{width:24px;height:24px;stroke-width:1.8}
.play .quick-play button:active,.play .quick-play #squish.pressed,.play .quick-play button[aria-pressed=true]{background:var(--leaf);color:var(--actionInk);border-color:var(--leaf)}
.play .quick-play button:active{transform:scale(.95)}
body:has(dialog[open]) .quick-play,body:has(#activity-dock:not([hidden])) .quick-play{visibility:hidden;pointer-events:none}
@media(max-width:800px),(hover:none) and (pointer:coarse){.quick-play{--tap-size:64px;right:max(12px,env(safe-area-inset-right));gap:8px}}
@media(max-width:370px){.quick-play{--tap-size:60px}}
@media(max-height:540px) and (orientation:landscape){.quick-play{--tap-size:52px;top:calc(50% + 18px);right:max(12px,env(safe-area-inset-right));gap:8px}.quick-play svg{width:20px;height:20px}}
@media(max-height:380px) and (orientation:landscape){.quick-play{--tap-size:48px;top:calc(50% + 40px);gap:6px}.play .quick-play button,.play .quick-play #squish{padding:4px}}
@media(prefers-reduced-motion:reduce){.play .quick-play button,.play .quick-play #squish{transition:none}}
.play .quick-play #bounce[data-jump-level="1"]{border-color:#e7b462;box-shadow:0 0 0 3px #eed48680,0 5px 18px #30472b1a}
.play .quick-play #bounce[data-jump-level="2"]{border-color:#86caa5;box-shadow:0 0 0 3px #a6e6b980,0 5px 18px #30472b1a}
.play .quick-play #bounce[data-jump-level="3"]{border-color:#9b9dde;box-shadow:0 0 0 3px #b7bdf180,0 5px 18px #30472b1a}
@media(max-height:540px) and (orientation:landscape){.toast[data-sky="true"]{top:calc(env(safe-area-inset-top) + 64px);max-width:180px;padding:6px 12px;font-size:.75rem}}

.world-art-zen{background:linear-gradient(150deg,#fff1ed,#e3e7d7)}.world-art-fairground{background:linear-gradient(150deg,#f4edff,#e3efe7)}

/* Full green faces with a continuous stroke outside their circular/pill edges. */
:root{
 --green-face:linear-gradient(160deg,color-mix(in srgb,var(--movement-green) 96%,white),var(--movement-green) 60%);
 --green-coat:var(--green-face);
 --zoom-thumb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330472b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
 --green-stroke:rgba(255,255,245,.72);
 --green-shadow:0 0 0 1.5px var(--green-stroke),inset 0 1px 3px #ffffff1f,0 2px 6px #30472b1a;
}
.play-dock .main-nav #open-play,.play-dock .joystick-wrap #stick,
.play .quick-play button:active,.play .quick-play #squish.pressed,
.play .quick-play button[aria-pressed=true],.activity-dock #stop-activity{
 border:0;background:var(--green-coat);color:var(--actionInk);box-shadow:var(--green-shadow);
}
#scene-zoom::-webkit-slider-thumb{border:0;background:var(--zoom-thumb-icon) center/20px 20px no-repeat,var(--green-coat);box-shadow:var(--green-shadow)}
#scene-zoom::-moz-range-thumb{border:0;background:var(--zoom-thumb-icon) center/20px 20px no-repeat,var(--green-coat);box-shadow:var(--green-shadow)}

/* Hibiscus Bay keeps its café and instrument controls inside the shared drawers. */
.beach-menu-intro{font-size:.875rem;color:var(--subtext);margin:0 0 14px}
.beach-menu-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.beach-food{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px 14px;border:1px solid var(--border);border-radius:18px;background:var(--raised);color:var(--text);text-align:center;min-width:0}
.beach-food svg{stroke:none;stroke-width:0;width:100%;max-width:120px;height:76px;filter:drop-shadow(0 5px 6px rgba(94,73,31,.12))}
.beach-food b{font-size:.8125rem;line-height:1.25}.beach-food small{font-size:.6875rem;line-height:1.4;color:var(--subtext)}
.beach-food:hover{background:var(--glass);transform:translateY(-2px)}.beach-food:active{transform:scale(.97)}
.island-music-controls{margin:20px 0;padding:14px 0 4px}.island-music-controls h3{font-size:.875rem;margin:0 0 5px}.island-music-controls p{font-size:.75rem;color:var(--subtext);margin:0 0 10px}
#island-note-buttons{display:flex;gap:8px;justify-content:space-between}#island-note-buttons button{min-width:44px;min-height:48px;flex:1;max-width:76px;border:1px solid rgba(255,255,255,.6);border-radius:50% 50% 42% 42%;background:var(--note-color);color:#30472b;font-size:.8125rem;font-weight:700;box-shadow:inset 0 3px 5px #ffffff80,0 4px 7px #30472b12}#island-note-buttons button:active{transform:scale(.91)}
@media(max-width:470px){.beach-menu-items{gap:7px}.beach-food{padding:8px 6px 12px}.beach-food svg{height:62px}}
@media(prefers-reduced-motion:reduce){.beach-food:hover,.beach-food:active,#island-note-buttons button:active{transform:none}}
/* Longer story lines wrap inside the ride pill instead of squeezing its exit. */
.activity-dock{width:max-content}.activity-pulse{flex-shrink:0}#activity-status{white-space:normal;min-width:0;line-height:1.3}.activity-dock #stop-activity{flex-shrink:0}
@media(min-width:651px) and (max-height:540px) and (orientation:landscape){.activity-dock{max-width:36%}}
@media(max-width:650px) and (max-height:540px) and (orientation:landscape){.activity-dock{top:calc(env(safe-area-inset-top) + 74px);max-width:calc(100% - 130px);gap:7px;padding-left:10px}#activity-status{font-size:.75rem}}

/* A small, persistent walking-speed toggle below the joystick. */
.play-dock #move-speed{display:grid;place-items:center;flex-shrink:0;width:44px;min-width:44px;height:44px;aspect-ratio:1;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--home-surface);color:var(--text);font-size:.875rem;font-weight:700;line-height:1;backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);box-shadow:inset 0 1px 2px #ffffff40,0 3px 12px #30472b12;touch-action:manipulation}
.play-dock #move-speed[aria-pressed=true]{border:0;background:var(--green-coat);color:var(--actionInk);box-shadow:var(--green-shadow)}
.play-dock #move-speed svg{width:24px;height:24px;pointer-events:none}
.play-dock #move-speed .gear-knob{fill:currentColor;stroke:none;transition:transform .18s ease}
.play-dock #move-speed[aria-pressed=true] .gear-knob{transform:translate(7px,14px)}
.play-dock #move-speed:focus-visible{outline:3px solid var(--movement-green);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.play-dock #move-speed .gear-knob{transition:none}}
@media(max-height:380px) and (orientation:landscape){.play-dock .joystick-wrap{top:calc(50% + 8px);gap:6px}.play-dock .joystick-wrap #scene-zoom{height:64px}}

.play-dock .joystick-wrap #stick{display:grid;place-items:center;border-radius:50%;aspect-ratio:1;flex-shrink:0}
.play-dock .joystick-wrap #stick svg{width:20px;height:20px;pointer-events:none}
.phone-tilt-controls{margin-top:20px}.phone-tilt-heading,.phone-tilt-footer{display:flex;align-items:center;gap:12px;justify-content:space-between}.phone-tilt-heading>div{min-width:0}.phone-tilt-heading h2{margin:0 0 4px}.phone-tilt-heading p{font-size:.75rem;line-height:1.45;color:var(--subtext);margin:0}.phone-tilt-heading button,.phone-tilt-footer button{flex-shrink:0;min-height:44px}.phone-tilt-footer .small-note{margin:10px 0 0;line-height:1.45}.phone-tilt-footer button{margin-top:8px;padding:8px;font-size:.75rem}#phone-tilt[aria-pressed=true]{background:var(--green-coat);border:0;box-shadow:var(--green-shadow);color:var(--actionInk)}
@media(max-height:540px) and (max-width:600px) and (orientation:landscape){.phone-tilt-heading,.phone-tilt-footer{align-items:flex-start;flex-direction:column;gap:7px}}