2 lines
24 KiB
CSS
2 lines
24 KiB
CSS
:root{--surface-base: rgba(10, 10, 14, .92);--surface-1: rgba(255, 255, 255, .025);--surface-2: rgba(255, 255, 255, .04);--surface-3: rgba(255, 255, 255, .06);--surface-hover: rgba(255, 255, 255, .07);--accent: #f97316;--accent-light: #fb923c;--accent-dim: rgba(249, 115, 22, .12);--accent-glow: rgba(249, 115, 22, .25);--accent-subtle: rgba(249, 115, 22, .05);--success: #4ade80;--success-light: #86efac;--success-dim: rgba(74, 222, 128, .12);--success-glow: rgba(74, 222, 128, .25);--success-subtle: rgba(74, 222, 128, .05);--danger: #ef4444;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-dim: #52525b;--text-ghost: #3f3f46;--border-subtle: rgba(255, 255, 255, .04);--border-default: rgba(255, 255, 255, .06);--border-accent: rgba(249, 115, 22, .15);--border-success: rgba(74, 222, 128, .15);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;--font-xs: 10px;--font-sm: 11px;--font-base: 13px;--font-md: 14px;--font-lg: 16px;--font-xl: 18px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 2px 6px rgba(0, 0, 0, .25);--shadow-glow-accent: 0 0 12px rgba(249, 115, 22, .1);--shadow-glow-success: 0 0 12px rgba(74, 222, 128, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-default: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--shadow-drop-heavy: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));--shadow-drop-accent: drop-shadow(0 4px 16px rgba(249, 115, 22, .3));--shadow-glow-accent-lg: 0 0 20px rgba(249, 115, 22, .12), 0 0 40px rgba(249, 115, 22, .06);--img-bg-gradient: linear-gradient(135deg, var(--surface-2), var(--surface-1))}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{background:transparent!important;font-family:var(--font-family);color:var(--text-secondary);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:transparent}.crafting-overlay{position:relative;width:600px;max-height:620px;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden}.crafting-overlay:before,.crafting-overlay:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:var(--radius-xl);pointer-events:none;z-index:2}.crafting-overlay:before{background:conic-gradient(from var(--neon-angle, 0deg),transparent 0%,transparent 15%,var(--accent) 25%,var(--accent-light) 30%,transparent 40%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1.5px;animation:neon-rotate 4s linear infinite}.crafting-overlay:after{background:conic-gradient(from var(--neon-angle, 0deg),transparent 0%,transparent 18%,rgba(249,115,22,.15) 25%,rgba(251,146,60,.08) 32%,transparent 42%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:4px;filter:blur(6px);animation:neon-rotate 4s linear infinite}@property --neon-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes neon-rotate{to{--neon-angle: 360deg}}.overlay-enter-active{transition:all .3s cubic-bezier(.16,1,.3,1)}.overlay-leave-active{transition:all .2s cubic-bezier(.4,0,1,1)}.overlay-enter-from{opacity:0;transform:scale(.95) translateY(10px)}.overlay-leave-to{opacity:0;transform:scale(.97) translateY(5px)}.crafting-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-xl);border-bottom:1px solid rgba(249,115,22,.06);background:#f9731605;position:relative}.crafting-header:after{content:"";position:absolute;bottom:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.08),transparent)}.header-left{display:flex;align-items:center;gap:var(--space-md)}.header-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-dim),rgba(249,115,22,.04));border:1px solid var(--border-accent);border-radius:var(--radius-md);color:var(--accent);flex-shrink:0}.crafting-header h2{font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:.3px}.close-btn{background:var(--surface-1);border:1px solid var(--border-subtle);color:var(--text-dim);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.close-btn:hover{background:#ef444414;border-color:#ef444426;color:var(--danger);transform:scale(1.05)}.crafting-body{flex:1;overflow-y:auto;padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md)}.craft-status-bar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--accent-subtle);border:1px solid rgba(249,115,22,.08);border-radius:var(--radius-md);flex-shrink:0;transition:all var(--transition-default)}.status-bar-left{display:flex;align-items:center;flex-shrink:0}.status-bar-img{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:contain;background:#f9731608;border:1px solid rgba(249,115,22,.1);padding:4px}.status-bar-center{flex:1;display:flex;flex-direction:column;gap:5px}.status-bar-label{display:flex;justify-content:space-between;align-items:center}.status-bar-name{font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.status-bar-count{font-size:var(--font-xs);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.status-bar-track{width:100%;height:6px;background:#ffffff0a;border-radius:3px;overflow:hidden}.status-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));border-radius:3px;transition:width .5s linear;position:relative;overflow:hidden}.status-bar-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}@keyframes shimmer{to{left:100%}}.status-bar-time{font-size:var(--font-base);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;min-width:44px;text-align:right;flex-shrink:0}.status-bar-done{font-size:var(--font-sm);font-weight:700;color:var(--success);flex-shrink:0;display:flex;align-items:center;gap:var(--space-xs);text-shadow:0 0 12px var(--success-glow)}.collect-bar{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--success-subtle);border:1px solid rgba(74,222,128,.08);border-radius:var(--radius-md);flex-shrink:0;animation:collect-pulse 3s ease-in-out infinite}@keyframes collect-pulse{0%,to{border-color:#4ade8014}50%{border-color:#4ade8040}}.collect-bar-top{display:flex;align-items:center;gap:var(--space-sm)}.collect-bar-bottom{display:flex;align-items:center;gap:var(--space-sm);padding-left:40px}.collect-bar-img{width:32px;height:32px;border-radius:var(--radius-sm);object-fit:contain;background:#ffffff04;border:1px solid rgba(74,222,128,.12);padding:3px}.collect-bar-info{display:flex;flex-direction:column;flex:1}.collect-bar-name{font-size:var(--font-sm);font-weight:600;color:var(--success)}.collect-bar-amount{font-size:var(--font-xs);color:var(--text-muted)}.collect-bar-slider{display:flex;align-items:center;gap:6px}.mini-slider{width:80px}.collect-bar-val{font-size:var(--font-sm);font-weight:700;color:var(--success);min-width:24px;font-variant-numeric:tabular-nums}.collect-bar-dest{display:flex;gap:3px;flex:1;justify-content:flex-end}.dest-btn{padding:5px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--text-dim);font-size:9px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.dest-btn.active{background:var(--success-dim);border-color:var(--border-success);color:var(--success)}.dest-btn:hover:not(.active){background:var(--surface-2);color:var(--text-muted)}.collect-bar-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:6px 14px;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--success),#22c55e);color:#fff;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;font-size:var(--font-xs);font-weight:600;font-family:var(--font-family)}.collect-bar-btn:hover{transform:scale(1.03)}.recipe-list{display:flex;flex-direction:column;gap:var(--space-sm)}.recipe-card{position:relative;display:flex;align-items:center;gap:var(--space-md);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-lg) var(--space-xl);padding-left:var(--space-xl);cursor:pointer;transition:all var(--transition-default);overflow:hidden}.recipe-card:before{content:"";position:absolute;left:0;top:50%;width:3px;height:0%;background:var(--accent);border-radius:0 2px 2px 0;transform:translateY(-50%);transition:height var(--transition-default)}.recipe-card:hover{background:var(--surface-2);border-color:var(--border-accent);transform:translate(2px)}.recipe-card:hover:before{height:60%}.recipe-card-img{width:56px;height:56px;border-radius:var(--radius-lg);object-fit:contain;background:var(--img-bg-gradient);border:1px solid var(--border-subtle);padding:7px;flex-shrink:0;filter:var(--shadow-drop-heavy);transition:all var(--transition-fast)}.recipe-card:hover .recipe-card-img{border-color:var(--border-accent);background:var(--accent-subtle);filter:drop-shadow(0 3px 12px rgba(249,115,22,.25));transform:scale(1.05)}.recipe-card-info{flex:1;min-width:0}.recipe-card .recipe-name{font-size:var(--font-md);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.recipe-card .ingredients-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.recipe-card-arrow{color:var(--text-ghost);flex-shrink:0;transition:all var(--transition-default)}.recipe-card:hover .recipe-card-arrow{color:var(--accent);transform:translate(3px)}.ingredient-tag{font-size:var(--font-xs);padding:2px 8px;border-radius:var(--radius-sm);font-weight:500}.ingredient-tag.has-enough{color:var(--success);background:var(--success-subtle);border:1px solid rgba(74,222,128,.08)}.ingredient-tag.not-enough{color:var(--accent-light);background:var(--accent-subtle);border:1px solid rgba(251,146,60,.08)}.list-enter-active{transition:all .3s cubic-bezier(.16,1,.3,1)}.list-enter-from{opacity:0;transform:translateY(8px)}.list-move{transition:transform .3s ease}.slide-enter-active{transition:all .25s cubic-bezier(.16,1,.3,1)}.slide-leave-active{transition:all .15s ease-in}.slide-enter-from{opacity:0;transform:translate(12px)}.slide-leave-to{opacity:0;transform:translate(-12px)}.collect-enter-active{transition:all .4s cubic-bezier(.16,1,.3,1)}.collect-enter-from{opacity:0;transform:translateY(-8px) scale(.97)}.collect-leave-active{transition:all .2s ease-in}.collect-leave-to{opacity:0;transform:scale(.97)}.back-btn{display:inline-flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--text-dim);font-size:var(--font-sm);font-family:var(--font-family);cursor:pointer;padding:2px 0;margin-bottom:var(--space-md);transition:all var(--transition-fast)}.back-btn:hover{color:var(--accent-light);transform:translate(-2px)}.recipe-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-lg) var(--space-2xl);margin-bottom:var(--space-md);border-bottom:1px solid var(--border-subtle);background:radial-gradient(ellipse at 50% 80%,rgba(249,115,22,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 20%,rgba(249,115,22,.04) 0%,transparent 50%);box-shadow:inset 0 0 40px #f9731608;overflow:hidden}.hero-particles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.hero-particles:before,.hero-particles:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent)}.hero-particles:before{animation:particle-float-1 4s ease-in-out infinite;left:20%}.hero-particles:after{animation:particle-float-2 5s ease-in-out infinite 1s;right:25%}@keyframes particle-float-1{0%,to{bottom:10%;opacity:0}20%{opacity:.4}80%{opacity:.2}to{bottom:85%;opacity:0}}@keyframes particle-float-2{0%,to{bottom:5%;opacity:0}25%{opacity:.3}75%{opacity:.15}to{bottom:90%;opacity:0}}.recipe-hero-ingredients{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);position:relative;z-index:1}.hero-ingredient{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.hero-item-img{width:72px;height:72px;border-radius:var(--radius-lg);object-fit:contain;background:var(--img-bg-gradient);border:1px solid var(--border-subtle);padding:8px;filter:var(--shadow-drop-heavy);transition:all var(--transition-fast)}.hero-item-img:hover{transform:scale(1.08);border-color:var(--border-accent);filter:var(--shadow-drop-accent)}.hero-ing-label{font-size:10px;color:var(--text-muted);max-width:72px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-center{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);width:100%;position:relative;z-index:1}.hero-forge-line{position:relative;width:100%;height:20px}.forge-line-track{position:absolute;top:50%;left:10%;right:10%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent 0%,var(--accent) 20%,var(--accent-light) 50%,var(--accent) 80%,transparent 100%);opacity:.4;border-radius:1px}.forge-spark{position:absolute;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 8px var(--accent),0 0 16px #f9731666;animation:forge-travel 2.5s ease-in-out infinite}@keyframes forge-travel{0%{left:10%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:90%;opacity:0}}.hero-time-badge{display:flex;align-items:center;gap:4px;font-size:var(--font-sm);font-weight:600;color:var(--text-muted);padding:3px 10px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:10px}.hero-time-badge svg{color:var(--text-dim)}.hero-result-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);position:relative;z-index:1}.hero-result-img{width:96px;height:96px;border-radius:var(--radius-lg);object-fit:contain;background:linear-gradient(135deg,#f973161a,#f973160a);border:1px solid var(--border-accent);padding:12px;filter:var(--shadow-drop-heavy);box-shadow:var(--shadow-glow-accent-lg);transition:all var(--transition-fast);animation:result-pulse 3s ease-in-out infinite}@keyframes result-pulse{0%,to{box-shadow:0 0 20px #f973161f,0 0 40px #f973160f}50%{box-shadow:0 0 28px #f9731633,0 0 50px #f973161a}}.hero-result-img:hover{transform:scale(1.08)}.hero-result-label{font-size:var(--font-md);font-weight:700;color:var(--accent);text-align:center;text-shadow:0 0 14px rgba(249,115,22,.3)}.source-tabs{display:flex;gap:0;padding:3px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.source-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:var(--space-sm) var(--space-md);border:none;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--text-dim);font-size:var(--font-sm);font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-default)}.source-tab:hover:not(.active){background:var(--surface-2);color:var(--text-muted)}.source-tab.active{background:var(--accent-dim);color:var(--accent-light)}.source-tab svg{flex-shrink:0}.recipe-detail{display:flex;flex-direction:column}.detail-section{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-md)}.detail-ingredient{position:relative;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);padding-left:calc(var(--space-lg) + 4px);font-size:var(--font-base);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast)}.detail-ingredient:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 2px 2px 0;background:var(--accent);opacity:.3;transition:all var(--transition-fast)}.detail-ingredient.ing-enough:before{background:var(--success);opacity:.5}.detail-ingredient.ing-missing:before{background:var(--danger);opacity:.5}.detail-ingredient:hover{background:var(--surface-2);border-color:var(--border-default)}.ingredient-info{display:flex;align-items:center;gap:var(--space-sm)}.ingredient-mini-img{width:44px;height:44px;border-radius:var(--radius-md);object-fit:contain;background:var(--img-bg-gradient);border:1px solid var(--border-subtle);padding:5px;filter:var(--shadow-drop-heavy);transition:all var(--transition-fast)}.detail-ingredient:hover .ingredient-mini-img{border-color:var(--border-accent);transform:scale(1.05)}.detail-ingredient .name{color:var(--text-secondary);font-size:var(--font-base);font-weight:500}.detail-ingredient .amount{font-weight:600;font-size:var(--font-base);font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:var(--radius-sm)}.detail-ingredient .amount.enough{color:var(--success);background:var(--success-subtle);border:1px solid rgba(74,222,128,.1)}.detail-ingredient .amount.missing{color:var(--danger);background:#ef44440f;border:1px solid rgba(239,68,68,.1)}.quantity-section{margin-bottom:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.quantity-row{display:flex;align-items:center;gap:var(--space-sm)}.quantity-label{font-size:var(--font-sm);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.qty-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-accent);border-radius:var(--radius-sm);background:var(--accent-subtle);color:var(--accent);font-size:var(--font-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.qty-btn:hover{background:var(--accent-dim);transform:scale(1.08)}.quantity-value{font-size:22px;font-weight:700;color:var(--accent);min-width:30px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 0 20px rgba(249,115,22,.4)}.quantity-max{font-size:var(--font-xs);color:var(--text-ghost);margin-left:auto;font-variant-numeric:tabular-nums}.craft-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:5px;background:#ffffff0a;border-radius:3px;outline:none}.craft-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface-base);transition:transform .1s}.craft-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.craft-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface-base)}.craft-btn{width:100%;padding:var(--space-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-lg);font-weight:700;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-default);background:linear-gradient(135deg,var(--accent),#ea580c);color:#fff;letter-spacing:1px;text-transform:uppercase;position:relative;overflow:hidden;box-shadow:0 4px 20px #f9731640}.craft-btn:not(:disabled){animation:btn-pulse 3s ease-in-out infinite}@keyframes btn-pulse{0%,to{box-shadow:0 4px 20px #f9731640}50%{box-shadow:0 4px 30px #f9731666,0 0 50px #f9731626}}.craft-btn-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.craft-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 25%,transparent 50%,rgba(255,255,255,.05) 75%,transparent 100%);background-size:200% 100%;animation:energy-flow 3s linear infinite;border-radius:inherit}@keyframes energy-flow{0%{background-position:200% 0}to{background-position:-200% 0}}.craft-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translate(-100%);transition:transform .5s}.craft-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-light),var(--accent));transform:translateY(-2px) scale(1.01);box-shadow:0 6px 35px #f9731680,0 0 60px #f9731633}.craft-btn:hover:not(:disabled):after{transform:translate(100%)}.craft-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.craft-btn:disabled{background:var(--surface-1);color:var(--text-ghost);cursor:not-allowed;border:1px solid var(--border-subtle);opacity:.6;box-shadow:none;text-transform:none;letter-spacing:.2px;font-size:var(--font-md);font-weight:600}.craft-btn:disabled:before{display:none}.craft-btn:disabled:after{display:none}.craft-btn:disabled svg{display:none}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:40px 0}.empty-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-ghost)}.empty-text{color:var(--text-ghost);font-size:var(--font-sm)}.no-items{text-align:center;color:var(--text-ghost);font-size:var(--font-sm);padding:30px 0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#ffffff03;margin:4px 0}::-webkit-scrollbar-thumb{background:#f9731626;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#f973164d}.crafting-landing{display:flex;padding:var(--space-lg) 0}.station-tile{position:relative;width:100%;min-height:200px;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;border:2px solid var(--tile-color, var(--border-default));transition:all var(--transition-default);background:var(--surface-1)}.station-tile-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}.station-tile:hover .station-tile-bg{transform:scale(1.06)}.station-tile:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000d9,#0000004d,#00000026);z-index:1}.station-tile:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--tile-glow, rgba(255, 255, 255, .05));border-color:var(--tile-color, var(--accent))}.station-tile-content{position:absolute;bottom:0;left:0;right:0;padding:var(--space-lg) var(--space-xl);z-index:2;display:flex;align-items:center;gap:var(--space-sm)}.station-tile-icon{display:flex;align-items:center;flex-shrink:0;opacity:.9}.station-tile-label{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;text-shadow:0 1px 4px rgba(0,0,0,.5)}.station-tile-count{margin-left:auto;padding:3px 10px;background:#ffffff14;border-radius:10px;font-size:11px;font-weight:600;color:var(--text-muted)}.station-tile-gradient{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(ellipse at 70% 30%,var(--tile-color, var(--accent))18 0%,transparent 60%),linear-gradient(135deg,var(--tile-color, var(--accent))10 0%,rgba(10,10,14,.95) 100%)}.station-tile-fallback-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);z-index:1;opacity:.12;transition:opacity .3s,transform .4s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 12px currentColor)}.station-tile:hover .station-tile-fallback-icon{opacity:.2;transform:translate(-50%,-55%) scale(1.08)}.fade-enter-active{transition:all .25s cubic-bezier(.16,1,.3,1)}.fade-leave-active{transition:all .15s cubic-bezier(.4,0,1,1)}.fade-enter-from{opacity:0;transform:translateY(8px)}.fade-leave-to{opacity:0;transform:translateY(-4px)}
|