:root{--bg: #fdf8f0;--board: #fffdf9;--ink: #2b2620;--muted: #8a8075;--line: #e8dfd2;--accent: #ff8a3d;--gold: #f2b705;font-family:system-ui,-apple-system,PingFang TC,Noto Sans TC,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overscroll-behavior:none}.app{display:flex;flex-direction:column;height:100%;max-width:720px;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;flex-wrap:wrap;gap:8px}header h1{font-size:18px;margin:0}.actions{display:flex;flex-wrap:wrap;gap:8px}button{font:inherit;font-size:14px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}.board{position:relative;flex:1;min-height:min(280px,45%);margin:0 12px;background:var(--board);border:2px dashed var(--line);border-radius:16px;overflow:hidden;touch-action:none}.hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);margin:0;padding:24px;text-align:center}.sticker{width:72px;height:72px;border-radius:18px;background:#fff;border:3px solid #fff;box-shadow:0 2px 0 var(--line),0 4px 10px #00000014;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}.sticker .emoji{font-size:30px;line-height:1.1}.sticker .name{font-size:11px;line-height:1.15;max-width:66px;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;flex-shrink:0}.on-board{position:absolute;transform:translate(-50%,-50%);transition:transform .12s}.on-board.dragging{position:fixed;z-index:100;cursor:grabbing;will-change:transform;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 2px 0 var(--line),0 12px 24px #00000038}.on-board.target{animation:shake .25s infinite;box-shadow:0 0 0 3px var(--accent)}.on-board.merging{animation:brew .6s infinite;opacity:.85}.on-board.pop{animation:pop .45s ease-out}@keyframes shake{0%,to{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-52%,-50%) rotate(-4deg)}75%{transform:translate(-48%,-50%) rotate(4deg)}}@keyframes brew{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(.85) rotate(8deg)}}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.2)}70%{transform:translate(-50%,-50%) scale(1.25)}to{transform:translate(-50%,-50%) scale(1)}}.reveals{position:absolute;left:50%;bottom:12px;transform:translate(-50%);width:min(92%,420px);display:flex;flex-direction:column;gap:8px;z-index:20;pointer-events:none}.reveal{pointer-events:auto;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px #0000001a;text-align:center}.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--accent);color:#fff;margin-bottom:4px}.badge.gold{background:var(--gold);color:var(--ink)}.reveal-name{font-size:18px;font-weight:600;overflow-wrap:anywhere;word-break:break-word}.reveal-recipe{font-size:13px;color:var(--muted);margin-bottom:2px;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.reveal.compact{padding:8px 16px;font-size:16px;font-weight:600;height:40px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-height:500px){.reveal-recipe{-webkit-line-clamp:1;line-clamp:1}.reveal-flavor{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}}.reveal-flavor{font-size:16px;color:var(--ink);margin-top:4px;line-height:1.4}.toast{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:8px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:14px}.toast span{flex:1}.toast button{padding:4px 10px}.toast .close{background:transparent;color:#fff;border:none;font-size:18px}.drawer{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:12px;max-height:34vh;overflow-y:auto;justify-items:center;flex-shrink:0;min-height:96px}.album{position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:0 16px 24px;max-width:720px;margin:0 auto}.album-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 0;background:var(--bg)}.album h2{font-size:15px;margin:16px 0 8px}.album h2 .count{color:var(--muted);font-weight:400}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;justify-items:center}.sticker.in-album{padding:0;cursor:pointer;font:inherit;color:var(--ink);touch-action:manipulation}.album-empty{color:var(--muted);text-align:center;margin-top:48px}.album-card{text-align:center;padding:32px 8px}.album-card-emoji{font-size:96px;line-height:1.1}.album .album-card-name{font-size:22px;font-weight:600;margin:8px 0 0;overflow-wrap:anywhere;word-break:break-word}.album-card-recipe{font-size:15px;color:var(--muted);margin:0 auto 8px;max-width:420px;overflow-wrap:anywhere;word-break:break-word}.album-card-flavor{font-size:18px;color:var(--ink);line-height:1.45;margin:10px auto 0;max-width:420px}.app.album-open .reveals{position:fixed;bottom:calc(24px + var(--toast-h, 0px));z-index:60}.app.album-open .toast{position:fixed;left:12px;right:12px;bottom:16px;z-index:60;max-width:696px;margin:0 auto}@media(max-height:500px){.toast{position:fixed;left:12px;right:12px;bottom:16px;z-index:60;max-width:696px;margin:0 auto}}.sticker.in-drawer.full{opacity:.45}.sticker.in-drawer.nope{animation:nope .35s}@media(prefers-reduced-motion:reduce){.sticker.in-drawer.nope{animation:none}}@keyframes nope{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.album-card-share{margin-top:24px;padding:10px 20px;font-size:16px;border-color:var(--accent)}.album-card-share:disabled{opacity:.5;cursor:default}.survey-invite{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 12px 0;padding:8px 12px;border-radius:10px;background:#fff;border:2px solid var(--accent);font-size:14px}.survey-invite span{flex:1 1 160px}.survey-invite .primary,.survey-send{background:var(--accent);border-color:var(--accent);color:#fff}.survey fieldset{border:none;margin:16px 0 0;padding:0}.survey legend{font-size:15px;font-weight:600;padding:0;margin-bottom:8px}.sticker.in-album.picked{box-shadow:0 0 0 3px var(--accent)}.survey-choices{display:flex;flex-wrap:wrap;gap:8px}.survey-choice{padding:8px 16px}.survey-choice.none{margin-top:12px}.survey-choice.picked{background:var(--accent);border-color:var(--accent);color:#fff}.survey textarea{width:100%;font:inherit;font-size:16px;padding:8px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);resize:vertical}.survey-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-top:4px}.survey-error{color:#c0392b;margin:16px 0 0}.survey-send{display:block;margin:20px 0 8px;padding:10px 24px;font-size:16px}.survey-send:disabled{opacity:.5;cursor:default}.reveal{animation:reveal-in .35s ease-out both}.badge.gold{animation:shine .8s ease-out .25s}@keyframes reveal-in{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes shine{0%,to{box-shadow:0 0 #f2b70500}50%{box-shadow:0 0 0 8px #f2b70573}}@media(prefers-reduced-motion:reduce){.reveal,.badge.gold{animation:none}}
