@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-family:'DM Sans',sans-serif;color:#283541;background:#d9e3ed;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}button:focus-visible,#scene:focus-visible{outline:3px solid #7e44d7;outline-offset:5px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.play{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}.play:fullscreen{height:100vh}.play.immersive{position:fixed;inset:0;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%;display:block}.topbar{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 24px) 30px 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{font-family:Outfit,sans-serif;font-size:29px;font-weight:800;letter-spacing:-1.4px;display:flex;align-items:center;gap:4px}.brand span{font-weight:400}.brand i{font-style:normal;color:#ed398a;font-size:34px;margin-left:5px}.top-actions{display:flex;gap:10px;pointer-events:auto}.icon-button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#ffffffe0;box-shadow:0 4px 18px #283c5312;backdrop-filter:blur(16px)}.icon-button[aria-pressed=true]{background:#303f50;color:white}.pal-label{position:absolute;top:calc(env(safe-area-inset-top) + 90px);left:32px;display:flex;gap:8px;align-items:center;font-weight:700;font-size:16px;pointer-events:none}#palType{font-size:14px;font-weight:400;color:#526275}.dot{width:8px;height:8px;background:#ed398a;border-radius:50%}.bottom-ui{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 22px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);text-align:center;pointer-events:none}.hint{font-size:15px;line-height:1.4;font-weight:500;margin-bottom:20px;color:#344353;text-shadow:0 1px 12px #fff;transition:opacity .25s}.actions{display:flex;gap:6px;padding:9px;border:1px solid #ffffffd9;background:#ffffffc9;backdrop-filter:blur(24px);border-radius:29px;box-shadow:0 14px 50px #24344822;pointer-events:auto}.actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:80px;height:74px;border-radius:21px;background:transparent;font-size:14px;font-weight:600;transition:background .15s,transform .15s}.actions button:active,.actions button.pressed{transform:scale(.92);background:#e6dcec}#squish{background:#334553;color:white;min-width:104px}#squish:active,#squish.pressed{background:#a13580;transform:scale(.94)}.gesture-note{margin:12px 0 0;font-size:12px;color:#526275}.toast{position:absolute;top:calc(env(safe-area-inset-top) + 115px);left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;padding:13px 20px;border-radius:20px;background:#263849ed;color:white;font-size:14px;z-index:5;text-align:center;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{position:fixed;inset:auto 0 0;margin:0 auto;border:1px solid #ffffff;padding:14px 25px calc(env(safe-area-inset-bottom) + 26px);width:min(660px,100%);max-width:100%;max-height:82dvh;overflow:auto;background:#f7f9fcf5;border-radius:32px 32px 0 0;box-shadow:0 -20px 100px #28304a25;color:#283541;backdrop-filter:blur(30px)}dialog::backdrop{background:#26374644;backdrop-filter:blur(5px)}.sheet-handle{margin:0 auto 22px;width:38px;height:4px;border-radius:5px;background:#aeb9c4}.sheet-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:22px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#657486;margin:0 0 7px}h1{font-family:Outfit,sans-serif;font-size:25px;font-weight:600;letter-spacing:-.7px;margin:0}.pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pal{position:relative;padding:0 0 13px;border-radius:20px;border:2px solid transparent;overflow:hidden;background:white;min-height:110px}.pal img{display:block;width:100%;height:100px;object-fit:cover;margin-bottom:9px}.pal b{font-size:14px}.pal[aria-pressed=true]{border-color:#a144b8;background:#f4e7fb}.check{display:none;position:absolute;top:8px;right:8px;width:21px;height:21px;border-radius:50%;background:#943faa;color:white}.pal[aria-pressed=true] .check{display:block}#error{position:absolute;top:35%;left:10%;right:10%;text-align:center;background:white;padding:25px;border-radius:20px}body.interacting .hint,body.interacting .gesture-note{opacity:0}@media(max-width:600px){.topbar{padding:calc(env(safe-area-inset-top) + 15px) 18px 0}.brand{font-size:25px}.pal-label{top:calc(env(safe-area-inset-top) + 80px);left:20px}.bottom-ui{bottom:calc(env(safe-area-inset-bottom) + 15px)}.actions{gap:3px;padding:7px;border-radius:26px}.actions button{min-width:65px;height:70px;font-size:13px}#squish{min-width:92px}.hint{font-size:14px;margin-bottom:16px}dialog{padding-left:18px;padding-right:18px}h1{font-size:22px}.pal img{height:90px}}@media(max-height:500px) and (orientation:landscape){.topbar{padding-top:12px}.pal-label{top:68px}.bottom-ui{bottom:12px}.hint,.gesture-note{display:none}.actions button{height:54px;min-width:75px;flex-direction:row;font-size:12px}.actions svg{width:20px;height:20px}.actions{border-radius:22px}.pals{grid-template-columns:repeat(6,minmax(0,1fr))}.sheet-handle{margin-bottom:10px}.sheet-heading{margin-bottom:12px}.pal img{height:72px}dialog{width:800px}.pal b{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Visual-viewport sizing keeps the dock above browser bars, including embedded views. */
.play{height:var(--app-height,100dvh);position:fixed;top:0;left:0}.play:fullscreen{height:100dvh}.brand{gap:9px;letter-spacing:-1.2px;font-size:27px;line-height:.85;color:#34422e}.brand .logo-m{display:grid;place-items:center;width:42px;height:42px;background:#a2be68;color:#fffce8;border-radius:16px 19px 15px 20px;font-family:Outfit,sans-serif;font-size:34px;font-weight:800;box-shadow:inset 0 2px 2px #ffffff80,0 4px 12px #35462920;letter-spacing:-3px;padding-right:3px}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:4.8px;margin-top:8px;padding-left:2px}.bottom-ui{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:4}.actions{gap:2px;padding:6px;border-radius:24px;max-width:100%;}.actions button{min-width:59px;height:64px;font-size:12px;gap:5px}#squish{min-width:69px}.actions svg{width:22px;height:22px}.gesture-note{display:none}.hint{margin-bottom:12px;font-size:13px}.joystick-wrap{position:absolute;left:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 116px);z-index:3;text-align:center;user-select:none;color:#475641;font-size:10px;font-weight:700;letter-spacing:2px}.joystick-wrap>span{display:block;margin-top:7px}#joystick{width:112px;height:112px;border-radius:50%;border:1px solid #fff9;background:#ffffff4d;backdrop-filter:blur(14px);display:grid;place-items:center;touch-action:none;box-shadow:inset 0 0 0 14px #ffffff20;cursor:move}#stick{width:51px;height:51px;border-radius:50%;background:#9fb66bea;border:1px solid #faffd4;box-shadow:0 5px 15px #42552a30;pointer-events:none}.actions button[aria-pressed=true]{background:#a2be68;color:#21321c}h2{font-size:17px;margin:24px 0 14px}.color-label{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600}input[type=color]{width:65px;height:48px;border:0;background:transparent;cursor:pointer}#swatches{display:flex;gap:12px;margin:15px 0}#swatches button{width:38px;height:38px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #cbd1d9}.world-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.world-buttons button{padding:20px 8px;border-radius:18px;background:white;min-height:70px;font-size:14px}.world-buttons button[aria-pressed=true]{background:#dfebca;box-shadow:inset 0 0 0 2px #8eaa5f}#style-picker{z-index:10}.topbar{z-index:3}.pal-label{z-index:2}.toast{z-index:8}@media(max-width:600px){.topbar{padding:calc(env(safe-area-inset-top) + 12px) 14px 0}.top-actions{gap:6px}.icon-button{width:42px;height:42px}.brand{font-size:24px}.brand .logo-m{width:36px;height:36px;font-size:30px}.actions button{min-width:0;flex:1;font-size:11px;height:59px}#squish{min-width:0}.actions{width:calc(100vw - 20px)}.bottom-ui{max-width:calc(100% - 20px)}.joystick-wrap{left:18px;bottom:calc(env(safe-area-inset-bottom) + 102px)}#joystick{width:92px;height:92px}#stick{width:44px;height:44px}.hint{margin-left:102px;max-width:220px;text-align:right;font-size:12px}.pal-label{top:calc(env(safe-area-inset-top) + 70px)}.world-buttons{grid-template-columns:1fr}.world-buttons button{padding:14px;min-height:48px}}@media(max-height:500px) and (orientation:landscape){.joystick-wrap{bottom:18px;left:18px}#joystick{width:82px;height:82px}.bottom-ui{left:auto;right:12px;transform:none;max-width:calc(100% - 132px);bottom:12px}.actions{width:auto}.actions button{min-width:48px;height:53px;flex-direction:column}.actions span{font-size:10px}#squish{min-width:48px}.topbar{padding-top:8px}.pal-label{top:60px}.world-buttons{grid-template-columns:repeat(3,1fr)}}
.filling-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.filling-buttons button{padding:15px 10px;border-radius:15px;background:white;font-size:14px}.filling-buttons button[aria-pressed=true]{background:#e8dcf3;box-shadow:inset 0 0 0 2px #9e79b9}.volume-label{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:24px;font-size:14px}.volume-label input{width:55%;accent-color:#759448}

/* Squishie Club — ink, porcelain and sea glass. */
:root{font-family:'DM Sans',sans-serif;color:#20313b;background:#e5e9ec;--ink:#20313b;--accent:#176963;--glass:rgba(250,253,255,.87)}
.brand{color:var(--ink);font-size:36px;letter-spacing:-1.7px;gap:12px;line-height:1}
.brand .logo-m{font-family:Outfit,sans-serif;font-size:34px;font-weight:700;letter-spacing:-2px;padding:0 2px 4px 0;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#428d86,#185b58);color:#fff;box-shadow:inset 0 1px 2px #ffffff80,0 6px 16px #24484920}
.brand small{font-size:12px;letter-spacing:5px;line-height:1.2;margin-top:5px;color:#465963}
.topbar{padding:calc(env(safe-area-inset-top) + 28px) 32px 0}
.pal-label{top:calc(env(safe-area-inset-top) + 110px);left:32px;padding:9px 13px;background:var(--glass);border:1px solid #ffffffc9;border-radius:30px;box-shadow:0 4px 20px #20313b09}
.dot{background:#db789b}#palType{color:#50616c}.icon-button{border:1px solid #ffffffc9;background:var(--glass);box-shadow:0 5px 20px #263d4810;transition:background .2s,transform .2s}.icon-button:hover{background:#fff;transform:translateY(-2px)}
.bottom-ui{bottom:calc(env(safe-area-inset-bottom) + 24px)}
.actions{padding:9px;gap:5px;background:var(--glass);border:1px solid #fff;border-radius:27px;box-shadow:0 14px 50px #1d354524,inset 0 1px 0 #fff}
.actions button{min-width:78px;height:72px;font-size:14px;gap:7px;border-radius:19px}
.actions button:hover{background:#e6eeed}#squish{min-width:103px;background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 #ffffff33,0 4px 12px #17696325}
#squish:active,#squish.pressed{background:#144c49}
.actions button[aria-pressed=true]{background:#d0e6e0;color:#183e3a}
.hint{font-size:14px;color:#314752;text-shadow:0 1px 8px white;margin-bottom:17px}
.joystick-wrap{left:32px;bottom:calc(env(safe-area-inset-bottom) + 140px);color:#344d57;font-size:12px;letter-spacing:1.6px}
#joystick{background:#f5f9fa85;border:1px solid #ffffffda;box-shadow:inset 0 2px 12px #243d4710,0 8px 30px #20313b10}
#stick{background:linear-gradient(145deg,#649b93,#2b6964);border:1px solid #cee6e2;box-shadow:inset 0 2px 3px #ffffff65,0 6px 13px #203c4930}
dialog{background:#f2f6f8f5;color:var(--ink);padding:26px 28px calc(env(safe-area-inset-bottom) + 28px);border-radius:30px 30px 0 0}
dialog::backdrop{background:#15293459;backdrop-filter:blur(7px)}
h1{font-size:28px;letter-spacing:-.7px}.eyebrow{font-size:12px;letter-spacing:1.7px;color:#516670}
.pal{border-radius:18px;background:#e8edf0}.pal img{height:125px}.pal[aria-pressed=true]{border-color:#176963;background:#dcece8}.check{background:#176963}
.world-buttons button,.filling-buttons button{font-size:14px;border:1px solid #dae3e7;background:#fff}
.world-buttons button[aria-pressed=true],.filling-buttons button[aria-pressed=true]{background:#dcece8;box-shadow:inset 0 0 0 1px #176963;border-color:#176963}
#swatches{flex-wrap:wrap}#swatches button{width:44px;height:44px}.volume-label input{accent-color:#176963}
.toast{background:#203b43f5}.icon-button[aria-pressed=true]{background:#176963}
button:focus-visible,#scene:focus-visible,input:focus-visible{outline:3px solid #126b77;outline-offset:4px}
@media(max-width:600px){
 .topbar{padding:calc(env(safe-area-inset-top) + 17px) 16px 0}.brand{font-size:27px;gap:8px}.brand .logo-m{width:36px;height:40px;font-size:29px;border-radius:12px}.brand small{font-size:12px;letter-spacing:3px}
 .top-actions{gap:5px}.icon-button{width:42px;height:42px}.top-actions svg{width:20px;height:20px}
 .pal-label{left:16px;top:calc(env(safe-area-inset-top) + 87px);font-size:14px}
 .bottom-ui{bottom:calc(env(safe-area-inset-bottom) + 12px);max-width:calc(100% - 16px)}.actions{width:calc(100vw - 16px);padding:5px;gap:1px;border-radius:22px}
 .actions button{min-width:0;flex:1;height:66px;font-size:14px;gap:6px;border-radius:16px}#squish{min-width:0}
 .joystick-wrap{left:18px;bottom:calc(env(safe-area-inset-bottom) + 117px)}.hint{font-size:13px;margin-left:105px;max-width:205px}
 dialog{padding-left:18px;padding-right:18px}.pal img{height:95px}h1{font-size:25px}
}
@media(max-width:370px){.brand{font-size:23px}.brand .logo-m{display:none}.actions button{font-size:12px}}
@media(max-height:500px) and (orientation:landscape){
 .topbar{padding-top:8px}.brand{font-size:25px}.brand .logo-m{height:36px;width:36px;font-size:28px}.pal-label{top:66px}
 .joystick-wrap{bottom:18px;left:18px}.bottom-ui{bottom:12px}.actions{width:auto}.actions button{min-width:55px;height:55px;font-size:12px}#squish{min-width:65px}
}
@media(prefers-reduced-motion:reduce){.icon-button:hover{transform:none}}