:root{--color-bg-start: #fff5eb;--color-bg-end: #ffe4cc;--color-primary: #ff6b35;--color-primary-dark: #e85a2a;--color-secondary: #ff9f1c;--color-accent: #ffbf69;--color-text: #2d3436;--color-text-light: #636e72;--color-white: #ffffff;--color-card-bg: rgba(255, 255, 255, .85);--color-card-border: rgba(255, 107, 53, .2);--gradient-warm: linear-gradient(135deg, #ff6b35 0%, #ff9f1c 50%, #ffbf69 100%);--gradient-golden: linear-gradient(135deg, #ff9f1c 0%, #ffbf69 100%);--gradient-sunset: linear-gradient(180deg, #fff5eb 0%, #ffe4cc 50%, #ffd4b8 100%);--shadow-soft: 0 4px 20px rgba(255, 107, 53, .15);--shadow-medium: 0 8px 32px rgba(255, 107, 53, .2);--shadow-hover: 0 12px 40px rgba(255, 107, 53, .25);--radius-sm: 12px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--gradient-sunset);min-height:100vh;color:var(--color-text);overflow-x:hidden;position:relative;user-select:none;-webkit-user-select:none}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(255,159,28,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,107,53,.08) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(255,191,105,.05) 0%,transparent 70%);pointer-events:none;z-index:0}#app{position:relative;z-index:1}.food-decorations{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.float-emoji{position:absolute;font-size:2.5rem;left:var(--x);top:var(--y);animation:floatEmoji 6s ease-in-out infinite;animation-delay:var(--delay);opacity:.4;filter:blur(.5px)}@keyframes floatEmoji{0%,to{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-15px) rotate(5deg) scale(1.05)}50%{transform:translateY(-25px) rotate(-3deg) scale(1.1)}75%{transform:translateY(-10px) rotate(3deg) scale(1.05)}}.container{max-width:800px;margin:0 auto;padding:2rem 1.5rem;min-height:100vh;display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.header{text-align:center;padding:1rem 0}.title{font-size:2.5rem;font-weight:900;background:var(--gradient-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;justify-content:center;gap:.5rem;text-shadow:0 2px 10px rgba(255,107,53,.2)}.title-emoji{-webkit-text-fill-color:initial;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.subtitle{margin-top:.75rem;font-size:1.1rem;color:var(--color-text-light);font-weight:500}.meal-type-section{background:var(--color-card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-soft);border:1px solid var(--color-card-border)}.meal-type-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.meal-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;background:var(--color-white);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 2px 8px #0000000d}.meal-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-medium);border-color:var(--color-secondary)}.meal-btn.active{background:var(--gradient-golden);border-color:var(--color-primary);transform:scale(1.02)}.meal-btn.active .meal-label{color:var(--color-white);font-weight:700}.meal-emoji{font-size:2rem}.meal-label{font-size:1.1rem;font-weight:500;color:var(--color-text);transition:color var(--transition-fast)}.category-filter-section{background:var(--color-card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:1rem 1.25rem;box-shadow:var(--shadow-soft);border:1px solid var(--color-card-border);display:flex;flex-direction:column;gap:.75rem}.filter-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.filter-label{font-size:.9rem;font-weight:600;color:var(--color-text);white-space:nowrap;min-width:3rem}.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem}.filter-tag{padding:.4rem .8rem;font-size:.85rem;font-weight:500;background:var(--color-white);border:1.5px solid rgba(255,107,53,.2);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:inherit;color:var(--color-text)}.filter-tag:hover{border-color:var(--color-secondary);background:#ff9f1c1a;transform:translateY(-1px)}.filter-tag.active{background:var(--gradient-golden);border-color:var(--color-primary);color:#fff;font-weight:600}.dish-count{text-align:center;font-size:.95rem;color:var(--color-text-light);margin-bottom:.75rem;font-weight:500}.dish-count #count-number{font-weight:700;color:var(--color-primary);font-size:1.1rem}.draw-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.draw-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.draw-btn{display:flex;flex-direction:row;align-items:center;gap:.8rem;padding:.8rem 1.5rem;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);font-family:inherit;position:relative;overflow:hidden;height:auto;min-width:140px;justify-content:center}.draw-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.draw-btn:hover:before{left:100%}.draw-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.draw-btn:active{transform:translateY(0) scale(.98)}.draw-btn-1{background:var(--gradient-golden);box-shadow:0 4px 12px #ff9f1c4d}.draw-btn-1:hover{box-shadow:0 6px 16px #ff9f1c66}.draw-btn-5{background:var(--gradient-warm);box-shadow:0 4px 12px #ff6b354d}.draw-btn-5:hover{box-shadow:0 6px 16px #ff6b3566}.draw-btn-10{background:linear-gradient(135deg,#e85a2a,#ff6b35,#ff9f1c);box-shadow:0 4px 12px #e85a2a4d}.draw-btn-10:hover{box-shadow:0 6px 16px #e85a2a66}.draw-btn-50{background:linear-gradient(135deg,#ff4500,tomato,coral);box-shadow:0 4px 12px #ff45004d}.draw-btn-50:hover{box-shadow:0 6px 16px #ff450066}.draw-count{font-size:1.4rem;font-weight:800;color:var(--color-white);text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1}.draw-label{font-size:.9rem;font-weight:600;color:#ffffffe6}.results-section{min-height:120px}.results-container{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.result-card{position:relative;background:var(--color-card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-md);padding:.6rem .8rem;text-align:center;box-shadow:0 3px 12px #ff6b3526;border:1px solid var(--color-card-border);min-width:85px;max-width:100px;animation:cardAppear .4s ease forwards;opacity:0;transform:translateY(20px) scale(.95);transition:all var(--transition-fast)}.result-card:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-medium);border-color:var(--color-primary)}@keyframes cardAppear{to{opacity:1;transform:translateY(0) scale(1)}}.result-emoji{font-size:2rem;display:block;margin-bottom:.3rem;animation:resultBounce .5s ease}@keyframes resultBounce{0%{transform:scale(0)}50%{transform:scale(1.15)}70%{transform:scale(.95)}to{transform:scale(1)}}.result-name{font-size:.8rem;font-weight:600;color:var(--color-text);line-height:1.2;word-break:keep-all}.result-card:before{content:attr(data-index);position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:var(--gradient-warm);color:#fff;font-size:.7rem;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #ff6b3566}.tip{text-align:center;color:var(--color-text-light);font-size:.95rem;padding:1rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}.drawing .draw-btn{pointer-events:none}.draw-btn.drawing-active{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px) rotate(-2deg)}40%{transform:translate(5px) rotate(2deg)}60%{transform:translate(-5px) rotate(-2deg)}80%{transform:translate(5px) rotate(2deg)}}@media(max-width:600px){.container{padding:1rem .8rem;gap:1.2rem}.title{font-size:1.6rem;margin-bottom:.2rem}.subtitle{font-size:.9rem;margin-top:.4rem}.meal-type-buttons{grid-template-columns:repeat(2,1fr);gap:.6rem}.meal-btn{padding:.6rem .4rem;gap:.3rem}.meal-emoji{font-size:1.5rem}.meal-label{font-size:.9rem}.draw-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;width:100%}.draw-btn{width:100%;min-width:0;padding:.6rem .5rem;gap:.5rem;min-height:50px}.draw-count{font-size:1.2rem}.draw-label{font-size:.85rem}.category-filter-section{padding:.8rem;gap:.6rem}.filter-tags{gap:.4rem}.filter-tag{padding:.3rem .6rem;font-size:.8rem}.results-container{gap:.4rem;justify-content:space-around}.result-card{min-width:0;width:calc(33.33% - .4rem);max-width:none;padding:.5rem .2rem}.result-emoji{font-size:1.5rem;margin-bottom:.2rem}.result-name{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.float-emoji{font-size:1.5rem;opacity:.2}}.draw-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#ff6b351a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.draw-overlay.active{opacity:1;pointer-events:auto}.draw-overlay-content{font-size:4rem;animation:spinEmoji .8s ease}@keyframes spinEmoji{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.5) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}