:root{--bg: #0B0B0C;--surface: #17171A;--border: #2A2A2C;--text: #F5F5F0;--text-secondary: #8B8B86;--accent: #C6FF3D;--accent-ink: #101400;--accent-2: #FF6B4A;--radius: 20px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Apple SD Gothic Neo,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#app{height:100dvh;position:relative}.screen{position:absolute;inset:0;display:flex;flex-direction:column}.screen[hidden]{display:none}#intro{align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));text-align:center}.wordmark{font-size:18px;font-weight:700;letter-spacing:-.01em;align-self:flex-start}.intro-center{display:flex;flex-direction:column;align-items:center;gap:12px}.prompt{font-size:22px;font-weight:600;line-height:1.3}.sub{font-size:15px;font-weight:400;color:var(--text-secondary)}.intro-blob{width:120px;height:120px;margin-bottom:14px;background:var(--accent);border-radius:46% 54% 58% 42%/52% 44% 56% 48%;animation:blob-wobble 3.2s ease-in-out infinite}@keyframes blob-wobble{0%,to{border-radius:46% 54% 58% 42%/52% 44% 56% 48%;transform:scale(1) rotate(0)}33%{border-radius:56% 44% 42% 58%/44% 58% 42% 56%;transform:scale(1.05,.94) rotate(2deg)}66%{border-radius:42% 58% 54% 46%/58% 44% 56% 42%;transform:scale(.95,1.06) rotate(-2deg)}}.intro-actions{display:flex;flex-direction:column;gap:16px;width:100%;max-width:340px}.btn-primary{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}.btn-primary:active{transform:scale(.96);box-shadow:0 0 0 6px #c6ff3d2e}.btn-ghost{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--radius);border:1px solid var(--border);color:var(--text-secondary);font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.btn-ghost:active{transform:scale(.97)}.fine{font-size:13px;font-weight:500;color:var(--text-secondary);min-height:17px}.shelf-wrap{width:100%;max-width:340px}.shelf-title{font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:8px;text-align:left}.shelf{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.shelf::-webkit-scrollbar{display:none}.shelf-item{position:relative;flex:0 0 auto;width:72px;height:72px;border-radius:16px;background:var(--surface);border:1px solid var(--border);padding:6px;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.shelf-item:active{transform:scale(.92)}.shelf-item img{width:100%;height:100%;object-fit:contain;pointer-events:none}.shelf-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(245,245,240,.25);background:#0b0b0cb8;color:var(--text);font-size:13px;font-weight:600;line-height:20px;text-align:center;cursor:pointer;backdrop-filter:blur(6px)}.shelf-del:active{transform:scale(.88)}#processing{align-items:center;justify-content:center}.proc-center{display:flex;flex-direction:column;align-items:center;gap:26px}.proc-blob{width:120px;height:120px;background:var(--accent);border-radius:46% 54% 58% 42%/52% 44% 56% 48%;animation:proc-squish .8s cubic-bezier(.34,1.56,.64,1) infinite}@keyframes proc-squish{0%,to{transform:scale(.9,1.1)}50%{transform:scale(1.1,.9)}}#procLabel{font-size:22px;font-weight:600;color:var(--text)}#play{touch-action:none}.stage{position:absolute;inset:0}#jellyCanvas{width:100%;height:100%;display:block}#shadow{position:absolute;left:50%;bottom:17dvh;width:46vw;height:26px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);transform:translate(-50%);pointer-events:none}.play-top{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px}.btn-mini{padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:#17171ab3;color:var(--text);font-size:14px;font-weight:500;backdrop-filter:blur(8px);cursor:pointer}.play-bottom{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}.chips{display:flex;gap:8px;pointer-events:auto}.chip{display:flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--border);background:#17171ab3;color:var(--text-secondary);font-size:14px;font-weight:500;backdrop-filter:blur(10px);cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,color .2s ease}.chip:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--swatch, var(--text-secondary))}.chip[data-mat=jelly]{--swatch: #C6FF3D}.chip[data-mat=crunch]{--swatch: #FF6B4A}.chip[data-mat=slime]{--swatch: #6BD5FF}.chip:active{transform:scale(.94)}.chip.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}.chip.active:before{background:var(--accent-ink)}.hint{font-size:13px;font-weight:500;color:var(--text-secondary);transition:opacity .3s ease}.hint.hidden{opacity:0}