*{margin:0;padding:0;box-sizing:border-box}:root{--theme-bg-from: #1a1a2e;--theme-bg-to: #16213e;--theme-accent: #7c3aed;--theme-accent-light: #a855f7}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,var(--theme-bg-from) 0%,var(--theme-bg-to) 100%);color:#fff;min-height:100vh;line-height:1.5;transition:background .5s ease}#root{min-height:100vh;padding:20px}button{cursor:pointer;border:none;font-family:inherit}.cross-links{margin-top:2rem;padding:1.5rem 1rem;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.75rem;color:#ffffff4d}.cross-links span{display:block;margin-bottom:.5rem}.cross-links div{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .75rem}.cross-links a{color:#ffffff4d;text-decoration:none}.cross-links a:hover{color:#fff9}.item-card{background:#ffffff1a;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative}.item-card:hover{background:#ffffff2e;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.item-card:active{transform:scale(.95);background:#ffffff38}.item-card.in-zone{background:#7c3aed4d;border:2px solid var(--theme-accent, #7c3aed);cursor:pointer}.item-card.in-zone:active{transform:scale(.9);background:#7c3aed80}.item-card.item-new{animation:itemNewPop .5s cubic-bezier(.36,1.5,.6,1);border:2px solid var(--theme-accent-light, #a855f7);box-shadow:0 0 12px #7c3aed4d,inset 0 0 12px #7c3aed1a}.item-new-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:8px;font-weight:800;padding:2px 5px;border-radius:6px;letter-spacing:.5px;line-height:1;z-index:1;animation:newBadgePulse 1.5s ease infinite;box-shadow:0 2px 6px #ef444466}.item-emoji{font-size:28px;display:block;margin-bottom:4px}.item-card.item-new .item-emoji{animation:newEmojiShine 2s ease infinite}.item-name{font-size:11px;color:#ccc}@keyframes itemNewPop{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes newBadgePulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}}@keyframes newEmojiShine{0%,to{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 4px rgba(255,255,255,.4))}}.combine-zone-container{margin-bottom:20px}.combine-zone{background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:16px;padding:30px;min-height:120px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;transition:all .3s}.combine-zone.drag-over{border-color:#4ade80;background:#4ade801a}.combine-placeholder{color:#666;font-size:14px}.combine-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}.combine-btn{background:linear-gradient(135deg,var(--theme-accent, #7c3aed),var(--theme-accent-light, #a855f7));color:#fff;border:none;padding:12px 32px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.combine-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #7c3aed4d}.combine-btn:disabled{opacity:.5;cursor:not-allowed}.clear-btn{background:#ffffff1a;color:#999;border:none;padding:12px 20px;border-radius:30px;font-size:14px;cursor:pointer}.clear-btn:hover{background:#fff3}.combine-zone.combine-success-flash{border-color:#4ade80;background:#4ade8026;animation:successFlash .5s ease}.combine-zone.combine-fail-shake{animation:failShake .4s ease;border-color:#f87171}@keyframes successFlash{0%{box-shadow:0 0 #4ade8000}50%{box-shadow:0 0 30px #4ade8066;border-color:#4ade80}to{box-shadow:0 0 #4ade8000}}@keyframes failShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.combine-hint-text{text-align:center;color:#666;font-size:12px;margin:8px 0 0}.item-grid-container{display:flex;flex-direction:column;gap:20px}.category-section{margin-bottom:8px}.category-title{font-size:13px;color:#666;margin-bottom:10px;padding-left:4px}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}.discovered-container{background:#ffffff0d;border-radius:16px;padding:16px;max-height:80vh;overflow-y:auto}.discovered-title{font-size:14px;color:#888;margin-bottom:12px;font-weight:600}.discovered-empty{color:#666;font-size:12px}.discovered-list{display:flex;flex-direction:column;gap:6px}.discovered-item{background:#ffffff0d;border-radius:8px;overflow:hidden;transition:background .15s}.discovered-item:hover,.discovered-item.open{background:#ffffff14}.discovered-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px;background:none;border:none;color:inherit;font-size:13px;cursor:pointer;text-align:left}.discovered-emoji{font-size:20px;flex-shrink:0}.discovered-name{color:#ddd;flex:1}.discovered-chevron{color:#666;font-size:16px;transition:transform .2s;flex-shrink:0}.discovered-chevron.rotated{transform:rotate(90deg)}.discovered-detail{padding:0 10px 10px;animation:detailSlide .15s ease}.discovered-ingredients{display:flex;flex-wrap:wrap;gap:4px}.ingredient-tag{background:#ffffff1a;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 8px;font-size:11px;color:#aaa}.discovered-item.discovered-recent{border-left:3px solid var(--theme-accent, #7c3aed);animation:recentSlideIn .4s ease}.discovered-item.discovered-recent .discovered-emoji{animation:recentEmojiBounce .6s ease}@keyframes recentSlideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes recentEmojiBounce{0%{transform:scale(.5)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes detailSlide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:300;overflow:hidden}.confetti-piece{position:absolute;top:-20px;animation:confettiFall linear forwards;opacity:0}.confetti-square{border-radius:2px}.confetti-circle{border-radius:50%}.confetti-strip{border-radius:2px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) translate(0) rotate(0) scale(1)}10%{opacity:1}80%{opacity:.8}to{opacity:0;transform:translateY(100vh) translate(var(--drift, 0px)) rotate(calc(var(--rotation, 0deg) + 720deg)) scale(.3)}}.streak-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:#0006;border:2px solid var(--streak-color, #a855f7);animation:streakPop .4s cubic-bezier(.36,1.5,.6,1) forwards;box-shadow:0 0 16px color-mix(in srgb,var(--streak-color, #a855f7) 40%,transparent)}.streak-fire{font-size:18px;animation:streakFireBounce .6s ease infinite alternate}.streak-count{font-size:18px;font-weight:800;color:var(--streak-color, #a855f7);font-variant-numeric:tabular-nums}.streak-label{font-size:11px;font-weight:700;color:var(--streak-color, #a855f7);letter-spacing:1.5px;text-transform:uppercase}@keyframes streakPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes streakFireBounce{0%{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.15)}}.result-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.result-modal{background:#1f2937;border-radius:20px;padding:40px;text-align:center;animation:scaleIn .3s ease;position:relative;overflow:hidden}.result-modal-new{border:2px solid var(--theme-accent, #7c3aed);box-shadow:0 0 30px #7c3aed40;animation:newDiscoveryPop .5s cubic-bezier(.36,1.5,.6,1)}.result-sparkles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}.sparkle{position:absolute;width:4px;height:4px;background:#fbbf24;border-radius:50%;animation:sparkleFloat 1.2s ease-out forwards;animation-delay:calc(var(--si) * .1s);box-shadow:0 0 6px #fbbf24}.result-emoji{font-size:64px;margin-bottom:16px}.result-emoji-new{animation:emojiBounceIn .6s cubic-bezier(.36,1.5,.6,1)}.result-name{font-size:24px;font-weight:700;margin-bottom:8px;color:#fff}.result-status{color:#4ade80;font-size:14px;margin-bottom:24px}.result-status.fail{color:#f87171}.result-streak{margin-bottom:20px;display:flex;justify-content:center}.result-btn{background:var(--theme-accent, #7c3aed);color:#fff;border:none;padding:12px 40px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s}.result-btn:hover{transform:translateY(-2px)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes newDiscoveryPop{0%{opacity:0;transform:scale(.5) rotate(-3deg)}50%{transform:scale(1.05) rotate(1deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes emojiBounceIn{0%{transform:scale(0) rotate(-30deg);opacity:0}50%{transform:scale(1.3) rotate(5deg);opacity:1}70%{transform:scale(.9) rotate(-2deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes sparkleFloat{0%{transform:translate(0) scale(0);opacity:0}20%{opacity:1;transform:translate(calc(cos(calc(var(--si) * 60deg))*30px),calc(sin(calc(var(--si) * 60deg))*30px)) scale(1)}to{opacity:0;transform:translate(calc(cos(calc(var(--si) * 60deg))*80px),calc(sin(calc(var(--si) * 60deg))*80px)) scale(0)}}.result-toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:#1f2937;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 20px;display:flex;align-items:center;gap:10px;z-index:100;animation:toastSlideUp .3s ease,toastFadeOut .3s ease 1.7s forwards;cursor:pointer;box-shadow:0 8px 24px #0006}.toast-emoji{font-size:24px}.toast-text{font-size:14px;color:#9ca3af;white-space:nowrap}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastFadeOut{0%{opacity:1}to{opacity:0}}.levelup-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .2s ease}.levelup-modal{background:#1f2937;border-radius:24px;padding:48px 40px;text-align:center;position:relative;overflow:hidden;animation:levelupBounce .5s ease;border:2px solid var(--theme-accent, #7c3aed);box-shadow:0 0 40px #7c3aed4d,0 0 80px #7c3aed1a}.levelup-particles{position:absolute;top:50%;left:50%;width:0;height:0}.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--theme-accent, #7c3aed);animation:particleBurst 1s ease-out forwards;animation-delay:calc(var(--i) * .05s)}.levelup-star-ring{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}.star-particle{position:absolute;width:6px;height:6px;background:#fbbf24;border-radius:50%;box-shadow:0 0 8px #fbbf24,0 0 16px #fbbf2466;animation:starOrbit 2s ease-out forwards;animation-delay:calc(var(--si) * .08s)}.levelup-badge{font-size:80px;margin-bottom:16px;animation:badgePulse 1.5s ease infinite;filter:drop-shadow(0 0 12px rgba(255,255,255,.3))}.levelup-title{font-size:28px;font-weight:800;color:var(--theme-accent-light, #a855f7);margin-bottom:4px;text-transform:uppercase;letter-spacing:2px;animation:shimmer 2s ease infinite;background:linear-gradient(90deg,var(--theme-accent, #7c3aed),var(--theme-accent-light, #a855f7),#fff,var(--theme-accent-light, #a855f7),var(--theme-accent, #7c3aed));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.levelup-level{font-size:18px;color:#888;margin-bottom:8px}.levelup-name{font-size:20px;font-weight:600;color:#fff;margin-bottom:24px}.levelup-reward{background:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:12px;padding:12px 20px;margin-bottom:24px;font-size:14px;color:#fbbf24;display:flex;align-items:center;justify-content:center;gap:8px;animation:rewardReveal .5s ease .3s both}.reward-icon{font-size:20px}.levelup-btn{background:linear-gradient(135deg,var(--theme-accent, #7c3aed),var(--theme-accent-light, #a855f7));color:#fff;border:none;padding:14px 48px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s}.levelup-btn:hover{transform:translateY(-2px)}@keyframes levelupBounce{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes particleBurst{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(cos(calc(var(--i) * 30deg))*120px),calc(sin(calc(var(--i) * 30deg))*120px)) scale(0);opacity:0}}@keyframes starOrbit{0%{transform:translate(0) scale(0);opacity:0}20%{opacity:1;transform:translate(calc(cos(calc(var(--si) * 45deg))*40px),calc(sin(calc(var(--si) * 45deg))*40px)) scale(1.2)}60%{opacity:.8}to{opacity:0;transform:translate(calc(cos(calc(var(--si) * 45deg))*100px),calc(sin(calc(var(--si) * 45deg))*100px)) scale(0)}}@keyframes rewardReveal{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.theme-selector{position:relative;display:inline-flex}.theme-trigger{display:flex;align-items:center;gap:8px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 14px;color:#fff;font-size:14px;cursor:pointer;transition:background .2s}.theme-trigger:hover{background:#ffffff1f}.trigger-badge{font-size:18px}.trigger-title{font-weight:600}.trigger-level{color:#888;font-size:12px}.theme-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#1f2937;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px;min-width:200px;z-index:50;animation:dropdownFadeIn .15s ease}.theme-dropdown-title{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding:0 4px}.theme-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px;background:none;border:none;border-radius:8px;color:#fff;font-size:13px;cursor:pointer;transition:background .15s}.theme-option:hover:not(:disabled){background:#ffffff14}.theme-option.active{background:#ffffff1a}.theme-option.locked{opacity:.4;cursor:not-allowed}.theme-preview{width:24px;height:24px;border-radius:6px;border:2px solid;flex-shrink:0}.theme-option-name{flex:1;text-align:left}.theme-lock{font-size:12px}.theme-check{color:var(--theme-accent, #7c3aed);font-weight:700}@keyframes dropdownFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.app{max-width:900px;margin:0 auto}.app-header{text-align:center;margin-bottom:24px}.app-title{font-size:24px;font-weight:700;margin:0 0 8px;color:#fff}.onboarding-tip{display:inline-block;background:#4ade8026;border:1px solid rgba(74,222,128,.3);color:#4ade80;padding:8px 16px;border-radius:10px;font-size:14px;margin-bottom:12px;animation:tipPulse 2s ease-in-out infinite}@keyframes tipPulse{0%,to{opacity:1}50%{opacity:.7}}.header-top{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:12px}.reset-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer;transition:background .2s}.reset-btn:hover{background:#ffffff26}.stats{color:#888;font-size:14px}.header-row{display:flex;justify-content:center;align-items:center;gap:16px}.hint-btn{background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:6px 12px;font-size:14px;cursor:pointer;transition:background .2s}.hint-btn:hover{background:#fde68a}.hint-box{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px;padding:12px 16px;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;font-size:16px}.hint-close{background:none;border:none;font-size:16px;cursor:pointer;color:#92400e}.progress-bar-container{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}.progress-bar{width:200px;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--theme-accent, #7c3aed),var(--theme-accent-light, #a855f7));border-radius:4px;transition:width .5s ease}.progress-fill.progress-almost{animation:progressPulse 1.2s ease-in-out infinite;background:linear-gradient(90deg,var(--theme-accent, #7c3aed),var(--theme-accent-light, #a855f7),#fbbf24,var(--theme-accent-light, #a855f7));background-size:200% 100%;animation:progressPulse 1.2s ease-in-out infinite,progressShimmer 2s linear infinite}@keyframes progressPulse{0%,to{box-shadow:none}50%{box-shadow:0 0 8px var(--theme-accent-light, #a855f7)}}@keyframes progressShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.progress-text{font-size:12px;color:#888;min-width:48px}.header-streak{display:flex;justify-content:center;margin-top:8px}.game-container{display:grid;grid-template-columns:1fr 220px;gap:24px}.main-area{display:flex;flex-direction:column;gap:24px}.sidebar{position:sticky;top:20px;align-self:start}@media(max-width:768px){.game-container{grid-template-columns:1fr}.sidebar{position:static;max-height:300px;overflow-y:auto}}