*{margin:0;padding:0;box-sizing:border-box}:root{--pink: #ff7bc0;--magenta: #e6399b;--sky: #8fd8ff;--sun: #ffd93b;--lavender: #c9b6ff;--cream: #fff8ec;--ink: #3a2a4a}html,body,#app{width:100%;height:100%;overflow:hidden;font-family:Trebuchet MS,Comic Sans MS,system-ui,sans-serif;background:#f7e9ff;touch-action:manipulation}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;transition:opacity .45s ease,transform .45s ease}.overlay.hidden{opacity:0;pointer-events:none;transform:scale(1.06)}#landing{background-color:#f0e2ff;background-image:linear-gradient(160deg,#ffe3f4,#e6d5ff 55%,#cfeaff);background-size:cover;background-position:center;background-repeat:no-repeat}.landing-inner:before{content:"";position:absolute;top:-8%;right:-12%;bottom:-8%;left:-12%;border-radius:50%;background:radial-gradient(ellipse at center,#fffcf5eb,#fffaf5b8 45%,#fffaf500 72%);z-index:-1}#landing{overflow-y:auto}.landing-inner{position:relative;text-align:center;padding:2rem 3rem;margin:auto}.starburst{position:absolute;font-size:2.2rem;color:var(--sun);text-shadow:2px 2px 0 var(--magenta);animation:twinkle 1.6s ease-in-out infinite}.sb1{top:-1rem;left:-2rem}.sb2{top:30%;right:-3rem;animation-delay:.4s}.sb3{bottom:0;left:-3.5rem;animation-delay:.9s;font-size:1.6rem}@keyframes twinkle{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.35) rotate(18deg);opacity:1}}.logo{font-size:clamp(3rem,9vw,5.5rem);letter-spacing:-.02em;color:var(--magenta);text-shadow:3px 3px 0 #fff,6px 6px 0 var(--sun);transform:rotate(-3deg)}.logo-3d{color:var(--sky);-webkit-text-stroke:2px var(--ink);margin-left:.15em}.tagline{margin:.6rem 0 2rem;color:var(--ink);font-size:1.05rem;font-style:italic}.menu{display:flex;flex-direction:column;gap:.9rem;align-items:center}button.chunky{font-family:inherit;font-size:1.25rem;font-weight:700;color:#fff;background:linear-gradient(180deg,var(--pink),var(--magenta));border:3px solid #fff;border-radius:999px;padding:.7rem 2.6rem;min-width:260px;cursor:pointer;box-shadow:0 5px #3a2a4a59;transition:transform .1s ease,box-shadow .1s ease}button.chunky:hover{transform:translateY(-2px)}button.chunky:active{transform:translateY(3px);box-shadow:0 1px #3a2a4a59}button.chunky.alt{background:linear-gradient(180deg,var(--sky),#4aa8e0)}.hidden{display:none!important}#settings,#howto{background:#3a2a4a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.panel{background:var(--cream);border:4px solid var(--magenta);border-radius:24px;padding:1.6rem 2rem;width:min(420px,92vw);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;box-shadow:0 12px 40px #3a2a4a59}.panel h2{color:var(--magenta);text-align:center;font-size:1.6rem}.setting-row{display:flex;flex-direction:column;gap:.45rem}.setting-label{font-weight:700;color:var(--ink);font-size:.95rem}.shell-picker{display:flex;gap:.5rem;flex-wrap:wrap}.shell-chip{font-family:inherit;font-size:.9rem;font-weight:700;padding:.45rem .9rem;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform .1s ease}.shell-chip:hover{transform:scale(1.05)}.shell-chip.selected{outline:3px solid var(--sun);background:var(--ink);color:#fff}.swatch-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.45rem}.swatch{display:flex;align-items:center;gap:.4rem;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--ink);background:#fff;border:2px solid rgba(58,42,74,.35);border-radius:12px;padding:.35rem .5rem;cursor:pointer;transition:transform .1s ease,border-color .1s ease}.swatch:hover{transform:translateY(-1px);border-color:var(--ink)}.swatch.selected{border-color:var(--magenta);box-shadow:0 0 0 2px var(--sun)}.swatch-dot{flex:none;width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid rgba(58,42,74,.5)}.shell-lightning{background:linear-gradient(135deg,#bfeaff,#fff3a6)}.shell-dream{background:linear-gradient(135deg,#ffd9ec,#e2d4ff)}.shell-candy{background:repeating-linear-gradient(135deg,#fff 0,#fff 8px,#ffe3a3 8px,#ffe3a3 16px,#ffc7de 16px,#ffc7de 24px,#d9c8ff 24px,#d9c8ff 32px,#c1e6ff 32px,#c1e6ff 40px)}.howto-panel{width:min(560px,94vw);gap:0;padding:1.5rem 1.7rem 1.7rem;text-align:left}.howto-panel h2{margin-bottom:.4rem}.howto-section{padding:.95rem 0;border-top:2px dashed rgba(230,57,155,.25)}.howto-section:first-of-type{border-top:none;padding-top:.3rem}.howto-section h3{color:var(--magenta);font-size:1.05rem;margin-bottom:.45rem}.howto-section p{font-size:.92rem;line-height:1.5;color:var(--ink);margin-bottom:.5rem}.howto-section p:last-child{margin-bottom:0}.howto-time,.howto-tip,.howto-warn{background:#8fd8ff38;border-left:4px solid var(--sky);border-radius:0 10px 10px 0;padding:.5rem .7rem;font-size:.86rem!important}.howto-warn{background:#ffd93b47;border-left-color:var(--sun)}.howto-controls{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem}.howto-controls li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--ink)}.key{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:linear-gradient(180deg,#ffef86,var(--sun));border:2px solid var(--ink);font-weight:700;font-size:.95rem;box-shadow:0 2px #3a2a4a59}.howto-icons{display:grid;grid-template-columns:2.2rem 1fr;gap:.55rem .7rem;align-items:start}.howto-icons dt{font-size:1.4rem;line-height:1.2;text-align:center}.howto-icons dd{font-size:.88rem;line-height:1.45;color:var(--ink)}.howto-icons strong{color:var(--magenta)}.howto-panel>.chunky{margin-top:1.1rem;align-self:center}.shell-chip.danger{border-color:#c0392b;color:#c0392b}.shell-chip.danger.selected,.shell-chip.danger:active{background:#c0392b;color:#fff}#hud{position:absolute;bottom:.8rem;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:1rem;z-index:10;pointer-events:none}#hud button{pointer-events:auto;font-size:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid var(--ink);background:#ffffffd9;color:var(--ink);cursor:pointer}#hud-hint{font-size:.78rem;color:#3a2a4aa6;background:#fff9;padding:.25rem .8rem;border-radius:999px}@media(max-height:620px){.landing-inner{padding:.75rem 2rem}.logo{font-size:clamp(1.9rem,8vh,3rem);line-height:1.25}.tagline{margin:.6rem 0 1rem;font-size:.85rem}.menu{gap:.45rem}button.chunky{font-size:1rem;padding:.45rem 1.8rem;min-width:210px}.starburst{display:none}}