.app{display:flex;flex-direction:column;gap:16px}.app-header{text-align:center;padding:24px 20px;background:var(--bg-card);border:4px solid var(--border);position:relative;box-shadow:8px 8px #0000004d,inset -2px -2px #0003,inset 2px 2px #ffffff1a}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--accent) 0px,var(--accent) 16px,var(--warning) 16px,var(--warning) 32px)}.app-header h1{font-size:20px;margin-bottom:12px;color:var(--text-primary);text-shadow:4px 4px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(255,255,255,.1);animation:pixel-float 3s ease-in-out infinite}.app-header p{color:var(--text-secondary);font-size:8px;text-transform:uppercase;letter-spacing:2px}.tabs{display:flex;gap:8px;background:var(--bg-card);padding:12px;border:4px solid var(--border);box-shadow:8px 8px #0000004d;flex-wrap:wrap;position:relative}.tabs:after{content:"";position:absolute;bottom:-8px;left:8px;right:8px;height:4px;background:var(--bg-primary)}.tab{flex:1;min-width:100px;background:var(--bg-secondary);border:4px solid var(--border);padding:12px 16px;font-size:8px;position:relative;box-shadow:4px 4px #0000004d,inset -2px -2px #0003}.tab:hover{background:var(--bg-primary);border-color:var(--border-bright);transform:translateY(-2px);box-shadow:6px 6px #0000004d,inset -2px -2px #0003}.tab.active{background:var(--accent);border-color:var(--accent);transform:none;box-shadow:inset -4px -4px #0000004d,inset 4px 4px #fff3,0 0 0 2px var(--accent)}.tab.active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.tab.active:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--accent)}.app-content{min-height:500px;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.app-header h1{font-size:16px}.tab{min-width:80px;padding:10px 12px;font-size:7px}}.ingredients-library{display:flex;flex-direction:column;gap:20px}.library-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.add-mode-toggle{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid var(--border);padding-bottom:12px}.mode-btn{padding:6px 16px;background:transparent;border:2px solid var(--border);color:var(--text-muted);cursor:pointer;font-size:13px;font-family:inherit}.mode-btn.active{background:var(--primary);border-color:var(--primary);color:#000;font-weight:700}.aetherial-add-form{display:flex;flex-direction:column;gap:15px}.herb-preview{background:var(--bg-secondary)!important;display:flex;flex-direction:column;gap:6px;font-size:13px}.ingredient-form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;gap:5px}.form-group label{font-weight:600;color:var(--text-secondary);font-size:14px}.form-actions{display:flex;gap:10px;margin-top:10px}.form-actions button{flex:1}.ingredient-card{display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s}.ingredient-card:hover{transform:translateY(-4px);box-shadow:0 8px 12px #0006}.ingredient-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.ingredient-header h3{margin:0;flex:1}.rarity-badge{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.ingredient-effect,.ingredient-location,.ingredient-description{font-size:14px;line-height:1.5;color:var(--text-secondary)}.ingredient-effect strong,.ingredient-location strong{color:var(--text-primary)}.ingredient-actions{display:flex;gap:8px;margin-top:10px}.ingredient-actions button{flex:1;font-size:13px;padding:8px 12px}.btn-danger{background:#d32f2f}.btn-danger:hover{background:#b71c1c}.empty-state{grid-column:1 / -1;text-align:center;padding:40px;color:var(--text-secondary)}.recipe-manager{display:flex;flex-direction:column;gap:20px}.recipe-form{display:flex;flex-direction:column;gap:15px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}@media(max-width:768px){.form-row{grid-template-columns:1fr}}.ingredients-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.ingredients-header button{padding:6px 12px;font-size:13px}.required-ingredients{display:flex;flex-direction:column;gap:10px}.ingredient-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}.ingredient-row select{min-width:0}.ingredient-row input[type=number]{width:80px}.ingredient-row button{padding:8px 12px}.recipe-card{display:flex;flex-direction:column;gap:12px}.recipe-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.recipe-header h3{margin:0;flex:1}.recipe-meta{display:flex;gap:15px;font-size:14px;color:var(--text-secondary)}.recipe-effect,.recipe-description{font-size:14px;line-height:1.5;color:var(--text-secondary)}.recipe-effect strong{color:var(--text-primary)}.recipe-ingredients{background:var(--bg-secondary);padding:12px;border-radius:8px;font-size:14px}.recipe-ingredients strong{display:block;margin-bottom:8px;color:var(--text-primary)}.recipe-ingredients ul{margin:0;padding-left:20px;color:var(--text-secondary)}.recipe-ingredients li{margin:4px 0}.recipe-actions{display:flex;gap:8px;margin-top:10px}.recipe-actions button{flex:1;font-size:13px;padding:8px 12px}.warning-text{color:var(--warning);font-size:14px;padding:10px;background:#ffa7261a;border-radius:6px}.info-text{color:var(--text-secondary);font-size:14px;font-style:italic;text-align:center;padding:10px}.brewing-station{display:flex;flex-direction:column;gap:20px}.recipe-selection h3{margin-bottom:15px}.recipes-list .recipe-card{cursor:pointer;transition:all .2s}.recipes-list .recipe-card:not(.unavailable):hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 16px #e945604d}.recipes-list .recipe-card.unavailable{opacity:.6;cursor:not-allowed;border-color:#555}.missing-ingredients{background:#d32f2f33;padding:10px;border-radius:6px;font-size:13px;margin-top:10px}.missing-ingredients strong{display:block;margin-bottom:5px;color:#ff5252}.missing-ingredients ul{margin:5px 0 0 20px;padding:0;color:var(--text-secondary)}.brew-button{margin-top:10px;width:100%}.brewing-process{max-width:700px;margin:0 auto}.brewing-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:15px}.brewing-header h3{margin:0}.brewing-dc{color:var(--text-secondary);font-size:14px;margin:5px 0 0}.btn-secondary{background:var(--bg-secondary);border:2px solid var(--border)}.btn-secondary:hover{background:var(--bg-primary);border-color:var(--accent)}.brewing-content{display:flex;flex-direction:column;gap:20px}.modifier-section label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-secondary)}.modifier-section input{font-size:18px;text-align:center;font-weight:700}.dice-section{display:flex;flex-direction:column;align-items:center;padding:30px;background:var(--bg-secondary);border-radius:12px;gap:20px}.dice-rolling{display:flex;flex-direction:column;align-items:center;gap:12px}.roll-announce{font-size:13px;color:var(--text-primary);text-align:center;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.result-d20-row{display:flex;justify-content:center;margin-bottom:16px}.brew-action-button{font-size:18px;padding:15px 40px;background:linear-gradient(135deg,var(--accent) 0%,var(--warning) 100%)}.brew-action-button:hover{transform:translateY(-2px) scale(1.05)}.brew-result{padding:25px;border-radius:12px;text-align:center}.brew-result.success{background:#4ecca326;border:2px solid var(--success)}.brew-result.failure{background:#d32f2f26;border:2px solid #d32f2f}.brew-result h3{margin:0 0 20px;font-size:24px}.roll-breakdown{background:var(--bg-secondary);padding:20px;border-radius:8px;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.roll-detail{display:flex;justify-content:space-between;align-items:center;font-size:16px}.roll-detail.total{border-top:2px solid var(--border);padding-top:10px;margin-top:5px;font-size:18px}.roll-detail strong{font-size:20px}.crit-success{color:var(--success);animation:pulse 1s infinite}.crit-fail{color:#ff5252}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.quality-badge{background:var(--bg-primary);padding:12px 20px;border-radius:8px;font-size:16px;margin-bottom:15px}.quality-badge strong{color:var(--accent);font-size:18px}.result-message{color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.roll20-sync-row{margin-bottom:14px;text-align:center}.roll20-badge{font-size:10px;padding:4px 10px;border:2px solid var(--border);display:inline-block}.roll20-badge.active{border-color:var(--success);color:var(--success)}.roll20-badge.inactive{color:var(--text-secondary)}.roll20-badge.inactive a{color:var(--accent)}.result-actions button{width:100%;padding:12px}.ingredients-used{background:var(--bg-secondary);padding:15px;border-radius:8px}.ingredients-used h4{margin:0 0 10px;color:var(--text-secondary);font-size:14px}.ingredients-used ul{margin:0;padding-left:20px;color:var(--text-secondary)}.d20-container{width:150px;height:150px;display:flex;align-items:center;justify-content:center}.d20-svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(233,69,96,.35))}.d20-container.rolling .d20-svg{animation:d20-tumble .38s ease-in-out infinite}@keyframes d20-tumble{0%{transform:rotate(0) scale(1) translateY(0)}20%{transform:rotate(14deg) scale(.92) translateY(-5px)}45%{transform:rotate(-10deg) scale(1.07) translateY(3px)}65%{transform:rotate(20deg) scale(.93) translateY(-3px)}85%{transform:rotate(-6deg) scale(1.04) translateY(2px)}to{transform:rotate(0) scale(1) translateY(0)}}.d20-container.crit .d20-svg{animation:d20-crit-pulse 1.4s ease-in-out infinite}@keyframes d20-crit-pulse{0%,to{filter:drop-shadow(0 0 8px gold) drop-shadow(0 0 18px rgba(255,215,0,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 18px gold) drop-shadow(0 0 36px rgba(255,215,0,.9));transform:scale(1.05)}}.d20-container.fail .d20-svg{filter:drop-shadow(0 0 10px #ff4444) drop-shadow(0 0 20px rgba(255,68,68,.5))}.inventory{display:flex;flex-direction:column;gap:20px}.inventory-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.header-actions{display:flex;gap:10px}.inventory-sections{display:flex;flex-direction:column;gap:30px}.inventory-section{display:flex;flex-direction:column;gap:15px}.section-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.section-header h3{margin:0}.add-ingredient-form{display:flex;flex-direction:column;gap:15px}.ingredients-inventory,.potions-inventory{display:grid;gap:15px}.inventory-item{display:flex;flex-direction:column;gap:10px}.item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.item-header h4{margin:0;flex:1;font-size:16px}.count-badge{background:var(--accent);color:#fff;padding:4px 10px;border-radius:12px;font-weight:700;font-size:14px;white-space:nowrap}.item-detail{font-size:13px;color:var(--text-secondary);margin:0}.item-actions{display:flex;gap:8px;margin-top:5px}.item-actions button{flex:1;font-size:13px;padding:8px 12px}.potion-card{display:flex;flex-direction:column;gap:12px}.potion-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.potion-header h4{margin:0;flex:1;font-size:18px}.quality-badge{padding:5px 12px;border-radius:12px;font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.quality-normal{background:#757575;color:#fff}.quality-superior{background:var(--uncommon);color:#fff}.quality-masterwork{background:linear-gradient(135deg,var(--rare) 0%,var(--very-rare) 100%);color:#fff}.quality-failure,.quality-critical-failure{background:#d32f2f;color:#fff}.potion-effect{font-size:14px;line-height:1.5;margin:0}.potion-effect strong{color:var(--text-primary)}.multiplier{color:var(--success);font-weight:700;margin-left:5px}.potion-brewed{font-size:13px;color:var(--text-secondary);margin:0}.potion-actions{display:flex;gap:8px;margin-top:5px}.use-button{flex:1;background:var(--success)}.use-button:hover{background:#3ea67f}.potion-actions .btn-danger{flex:0 0 auto;padding:8px 16px}@media(max-width:768px){.header-actions{width:100%}.header-actions button{flex:1}}.roll20-sync-panel{margin-bottom:24px}.sync-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.sync-header h3{margin:0}.sync-status-dot{width:10px;height:10px;border-radius:50%;background:var(--text-secondary);flex-shrink:0}.sync-status-dot.active{background:var(--success);box-shadow:0 0 6px var(--success)}.sync-inactive{color:var(--text-secondary);font-size:14px}.sync-inactive a{color:var(--accent)}.sync-controls{display:flex;flex-direction:column;gap:10px}.sync-btn{align-self:flex-start}.char-select-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.char-select-row select{flex:1;min-width:160px}.load-inv-btn{white-space:nowrap}.sync-error{margin-top:10px;color:#ff5252;font-size:14px}.roll20-inventory{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.roll20-inventory h4{margin:0 0 10px;font-size:15px}.item-count{font-weight:400;color:var(--text-secondary);font-size:13px}.sync-empty{color:var(--text-secondary);font-size:14px}.roll20-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}.roll20-item{background:var(--bg-primary);padding:8px 12px;border-radius:6px;font-size:14px}.roll20-qty{color:var(--text-secondary);font-size:13px}.roll20-desc{color:var(--text-secondary);font-size:12px}.push-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.push-section h4{margin:0 0 4px;font-size:15px}.push-hint{color:var(--text-secondary);font-size:13px;margin:0 0 14px}.push-group{margin-bottom:16px}.push-group h5{margin:0 0 8px;color:var(--text-secondary);font-size:13px;text-transform:uppercase;letter-spacing:.05em}.push-item-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}.push-item-row:last-child{border-bottom:none}.push-item-name{flex:1;font-size:14px}.push-item-meta{color:var(--text-secondary);font-size:13px;white-space:nowrap}.push-btn{font-size:12px;padding:5px 12px;white-space:nowrap}.push-btn.push-done{background:var(--success);color:#000;border-color:var(--success);cursor:default}.push-btn.push-error{background:#d32f2f4d;border-color:#d32f2f;color:#ff5252;cursor:default}.recipe-tree-container{display:flex;flex-direction:column;gap:16px}.tree-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);padding:20px;border:4px solid var(--border);box-shadow:8px 8px #0000004d;flex-wrap:wrap;gap:20px}.tree-title h2{margin:0 0 8px}.tree-title p{color:var(--text-secondary);margin:0}.stats-display{display:flex;gap:16px}.stat-box{background:var(--bg-secondary);padding:12px 20px;border:4px solid var(--border);text-align:center;box-shadow:4px 4px #0000004d}.stat-label{font-size:6px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.stat-value{font-size:18px;color:var(--legendary);font-weight:700;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.view-mode-toggle{display:flex;gap:12px;padding:16px;justify-content:center}.view-btn{flex:1;max-width:300px;padding:14px 24px;font-size:9px}.view-btn.active{background:var(--success);border-color:var(--success)}.compendium-search{display:flex;align-items:center;gap:8px;padding:12px 16px}.search-input{flex:1;background:var(--bg-secondary);border:3px solid var(--border);color:var(--text-primary);padding:10px 14px;font-family:inherit;font-size:9px;outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--text-secondary)}.search-clear{background:var(--bg-secondary);border:3px solid var(--border);color:var(--text-secondary);width:34px;height:34px;padding:0;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.search-clear:hover{border-color:var(--danger);color:var(--danger)}.category-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:16px}.filter-label{font-weight:700;color:var(--text-secondary)}.filter-buttons{display:flex;gap:8px;flex-wrap:wrap;flex:1}.filter-btn{padding:10px 14px;background:var(--bg-secondary);border:3px solid var(--border);flex-shrink:0}.filter-btn.active{background:var(--accent);border-color:var(--accent)}.recipe-tree{background:var(--bg-card);padding:24px;border:4px solid var(--border);box-shadow:8px 8px #0000004d;overflow-x:auto;min-height:600px}.tree-tier{position:relative;margin-bottom:80px;display:flex;gap:16px}.tree-tier:last-child{margin-bottom:0}.tier-marker{min-width:80px;background:var(--bg-secondary);border:4px solid var(--border);padding:12px;display:flex;align-items:center;justify-content:center;font-weight:700;text-transform:uppercase;box-shadow:4px 4px #0000004d;align-self:flex-start;position:sticky;left:0;z-index:10}.tier-recipes-simple{display:flex;gap:20px;flex-wrap:wrap;flex:1}.recipe-node{width:140px;min-height:180px;background:var(--bg-secondary);border:4px solid var(--border);cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;padding:12px;gap:6px;transition:all .2s;box-shadow:4px 4px #0000004d}.recipe-node:hover{transform:translateY(-6px);box-shadow:6px 8px #0000004d}.recipe-node.mini{width:50px;min-height:50px;padding:6px}.recipe-node.locked{background:#1a1a2e;border-color:#333;opacity:.6;cursor:not-allowed}.recipe-node.locked:hover{transform:none;box-shadow:4px 4px #0000004d}.recipe-node.available{border-color:var(--uncommon);background:var(--bg-card);box-shadow:4px 4px #0000004d,inset 0 0 0 2px var(--uncommon),0 0 16px #4ecca34d;animation:pixel-pulse 2s ease-in-out infinite}@keyframes pixel-pulse{0%,to{box-shadow:4px 4px #0000004d,inset 0 0 0 2px var(--uncommon),0 0 16px #4ecca34d}50%{box-shadow:4px 4px #0000004d,inset 0 0 0 2px var(--uncommon),0 0 24px #4ecca380}}.recipe-node.craftable{border-color:var(--success);background:var(--bg-card);box-shadow:4px 4px #0000004d,inset 0 0 0 2px var(--success),0 0 20px #48c77466}.recipe-craftable{position:absolute;top:-6px;right:-6px;background:var(--success);color:#000;font-size:10px;font-weight:700;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:2px solid #000}.ingredient-amount.in-stock{color:var(--success);font-weight:700}.ingredient-stock{font-size:10px;color:var(--success);margin-left:auto}.craftable-banner{margin-top:12px;padding:8px 12px;background:#48c77426;border:2px solid var(--success);color:var(--success);font-weight:700;font-size:14px;text-align:center}.recipe-node-header{width:100%;display:flex;justify-content:center;align-items:flex-start;position:relative}.recipe-icon{font-size:32px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}.recipe-node.mini .recipe-icon{font-size:20px}.recipe-cost{background:var(--accent);color:#fff;padding:4px 6px;font-size:6px;border:2px solid rgba(0,0,0,.3);box-shadow:2px 2px #0000004d;position:absolute;top:0;right:0}.recipe-unlocked{background:var(--success);color:#fff;width:24px;height:24px;border:2px solid rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:2px 2px #0000004d;position:absolute;top:0;left:0}.recipe-name{font-size:8px;text-align:center;line-height:1.5;font-weight:700;min-height:32px;display:flex;align-items:center}.recipe-rarity{font-size:6px;padding:4px 8px;border:2px solid;text-transform:uppercase;font-weight:700;box-shadow:2px 2px #0000004d}.recipe-mana-cost{font-size:7px;color:var(--rare);background:#42a5f533;padding:3px 6px;border:2px solid var(--rare);border-radius:4px}.recipe-level-req{font-size:7px;color:var(--warning);background:#feca5733;padding:3px 6px;border:2px solid var(--warning);border-radius:4px}.recipe-ingredients-count{font-size:7px;color:var(--text-secondary);background:var(--bg-primary);padding:4px 8px;border:2px solid var(--border)}.wallpaper-tree-container{background:var(--bg-card);border:4px solid var(--border);box-shadow:8px 8px #0000004d;overflow:auto;min-height:800px;max-height:1200px;position:relative}.wallpaper-tree{position:relative;min-width:12000px;min-height:3500px;padding:60px;background:linear-gradient(90deg,rgba(74,74,106,.1) 1px,transparent 1px),linear-gradient(rgba(74,74,106,.1) 1px,transparent 1px);background-size:50px 50px}.recipe-node.wallpaper{position:absolute}.connection-line-svg{z-index:0}.connection-line-svg.active line{stroke:var(--success);filter:drop-shadow(0 0 4px var(--success))}.wallpaper-tree.herb-to-potion.radial{min-width:3600px;min-height:3600px;background:radial-gradient(circle at center,transparent 0%,rgba(20,20,40,.95) 100%),radial-gradient(circle at 1800px 1800px,rgba(78,204,163,.05) 500px,transparent 501px),radial-gradient(circle at 1800px 1800px,rgba(78,204,163,.05) 800px,transparent 801px),radial-gradient(circle at 1800px 1800px,rgba(78,204,163,.05) 1100px,transparent 1101px),radial-gradient(circle at 1800px 1800px,rgba(78,204,163,.05) 1400px,transparent 1401px),radial-gradient(circle at 1800px 1800px,rgba(78,204,163,.05) 1700px,transparent 1701px),linear-gradient(90deg,rgba(74,74,106,.03) 1px,transparent 1px),linear-gradient(rgba(74,74,106,.03) 1px,transparent 1px);background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,50px 50px,50px 50px}.herb-node.radial{position:absolute;background:linear-gradient(135deg,var(--bg-card) 0%,rgba(44,44,66,1) 100%);border:2px solid var(--border);padding:2px;border-radius:50%;box-shadow:0 2px 4px #0006,inset 0 1px #ffffff1a;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.herb-node.radial:hover{transform:translate(-50%,-50%) scale(2);box-shadow:0 6px 20px #4ecca399,0 0 30px #4ecca366,inset 0 1px #fff3;border-color:var(--primary);border-width:3px;z-index:100!important;background:linear-gradient(135deg,var(--primary) 0%,rgba(78,204,163,.3) 100%)}.herb-node.radial:hover .herb-name{display:block;font-size:6px;font-weight:700;color:var(--text-primary);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50px;margin-top:2px}.herb-node.radial .herb-icon{font-size:11px;line-height:1;margin:0}.herb-node.radial .herb-name,.herb-node.radial .herb-rarity{display:none}.herb-connection-line{pointer-events:none;opacity:.6;transition:opacity .3s ease}.herb-connection-line path,.herb-connection-line line{transition:stroke .3s ease,stroke-width .3s ease,opacity .3s ease;filter:drop-shadow(0 0 2px rgba(78,204,163,.3))}.herb-connection-line.active{opacity:1;z-index:50}.herb-connection-line.active path,.herb-connection-line.active line{stroke:var(--primary)!important;stroke-width:3!important;filter:drop-shadow(0 0 8px var(--primary));animation:pulse-line 1.5s ease-in-out infinite}.herb-connection-line.requirement path,.herb-connection-line.requirement line{stroke-dasharray:4,6;stroke-width:2;opacity:.7}@keyframes pulse-line{0%,to{opacity:1;filter:drop-shadow(0 0 8px var(--primary))}50%{opacity:.6;filter:drop-shadow(0 0 16px var(--primary))}}.wallpaper-tree.radial .recipe-node.wallpaper.radial{min-width:32px;max-width:32px;min-height:32px;max-height:32px;padding:2px;border-radius:50%;border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#2c2c42f2,#18182cf2);box-shadow:0 2px 8px #00000080,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer}.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-icon{font-size:14px;line-height:1;margin:0;display:flex;align-items:center;justify-content:center}.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-icon img{width:24px;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:filter .3s ease}.recipe-node .recipe-icon img{width:50px;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:filter .3s ease}.detail-icon img{width:60px;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:filter .3s ease}.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-name,.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-rarity,.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-cost,.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-mana-cost,.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-level-req,.wallpaper-tree.radial .recipe-node.wallpaper.radial .recipe-node-header{display:none}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center{min-width:55px;max-width:55px;min-height:55px;max-height:55px;border:3px solid var(--primary);background:radial-gradient(circle at 30% 30%,#4ecca34d,#2c2c42 70%);box-shadow:0 0 40px #4ecca3cc,0 0 80px #4ecca366,0 5px 20px #0009,inset 0 2px #fff3;animation:pulse-center 3s ease-in-out infinite}@keyframes pulse-center{0%,to{box-shadow:0 0 40px #4ecca3cc,0 0 80px #4ecca366,0 5px 20px #0009,inset 0 2px #fff3;transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 0 60px #4ecca3,0 0 120px #4ecca399,0 5px 20px #0009,inset 0 2px #ffffff4d;transform:translate(-50%,-50%) scale(1.05)}}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center .recipe-icon{font-size:24px}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center .recipe-icon img{width:40px;height:auto;transition:filter .3s ease}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center .recipe-name{font-size:7px;font-weight:700;max-width:50px}.wallpaper-tree.radial .recipe-node.wallpaper.radial:hover{transform:translate(-50%,-50%) scale(2);z-index:100!important;border-width:3px;border-color:var(--legendary);box-shadow:0 6px 24px #ffc10799,0 0 35px #ffc10766,inset 0 1px #ffffff4d;background:linear-gradient(135deg,#ffc10733,#2c2c42f2)}.wallpaper-tree.radial .recipe-node.wallpaper.radial:hover .recipe-name{display:block;font-size:7px;line-height:1.2;margin:2px 0 0;max-width:60px;overflow:visible;white-space:normal;word-wrap:break-word;font-weight:700}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center:hover{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 50px #4ecca3cc,0 10px 35px #0009,inset 0 2px #ffffff4d}.wallpaper-tree.radial .recipe-node.wallpaper.radial.center:hover .recipe-name{display:block;font-size:9px;font-weight:700;max-width:70px}.recipe-details-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-overlay{position:absolute;inset:0;background:#000000d9}.modal-content{position:relative;z-index:1;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;animation:modal-slide-in .2s}.close-button{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;background:var(--danger);z-index:10}.detail-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:4px solid var(--border)}.detail-icon{font-size:48px;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.5))}.detail-header h3{margin:0 0 4px}.detail-rarity{font-size:7px;padding:4px 8px;border:2px solid;display:inline-block;margin-bottom:4px}.detail-category{font-size:7px;color:var(--text-secondary);text-transform:uppercase;margin:2px 0}.detail-source{font-size:7px;color:var(--uncommon);font-style:italic;margin:2px 0}.detail-effect{background:var(--bg-primary);padding:12px;border:3px solid var(--border);margin-bottom:16px;line-height:1.8}.detail-effect strong{color:var(--warning);display:block;margin-bottom:6px}.detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}.meta-item{background:var(--bg-secondary);padding:10px;border:3px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:7px}.detail-requirements,.detail-ingredients,.detail-unlocks{background:var(--bg-secondary);padding:12px;border:3px solid var(--border);margin-bottom:16px}.detail-requirements strong,.detail-ingredients strong,.detail-unlocks strong{display:block;margin-bottom:8px;color:var(--warning);font-size:8px}.detail-requirements ul,.detail-ingredients ul,.detail-unlocks ul{list-style:none;padding:0;margin:0}.detail-requirements li,.detail-unlocks li{padding:6px 0;border-bottom:2px solid var(--border);font-size:8px}.detail-requirements li:last-child,.detail-ingredients li:last-child,.detail-unlocks li:last-child{border-bottom:none}.detail-requirements li.completed{color:var(--success)}.detail-requirements li.incomplete{color:var(--danger)}.detail-ingredients li{padding:8px 0;border-bottom:2px solid var(--border)}.ingredient-row{display:flex;gap:8px;align-items:center;margin-bottom:4px}.ingredient-amount{font-weight:700;color:var(--text-primary);font-size:8px}.ingredient-name{flex:1;font-weight:700;font-size:8px}.ingredient-rarity{font-size:6px;opacity:.7}.ingredient-details{display:flex;gap:12px;font-size:6px;color:var(--text-secondary);margin-left:32px}.ingredient-categories{flex:1}.ingredient-mana{color:var(--rare);font-weight:700}.unlock-button{width:100%;padding:16px;font-size:9px;background:var(--success)}.unlock-button:hover{background:#3ea67f}.unlock-button:disabled{background:#555}.tree-legend{background:var(--bg-secondary)}.legend-grid{display:flex;gap:24px;margin-bottom:16px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:12px}.legend-info{padding:12px;background:var(--bg-primary);border:2px solid var(--border);color:var(--text-secondary);line-height:1.8}.legend-info p{margin:8px 0}.legend-info ul{margin:8px 0;padding-left:20px}.legend-info li{margin:4px 0}@keyframes modal-slide-in{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){.recipe-node{width:120px;min-height:160px;padding:10px}.recipe-icon{font-size:28px}.tier-marker{min-width:60px;font-size:7px}.filter-buttons{gap:6px}.filter-btn{padding:8px 10px;font-size:7px}.stats-display{flex-wrap:wrap;gap:8px}.stat-box{flex:1;min-width:80px}.wallpaper-tree{min-width:8000px;min-height:2500px}}.herbs-library-container{display:flex;flex-direction:column;gap:16px}.herbs-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);padding:20px;border:4px solid var(--border);box-shadow:8px 8px #0000004d;flex-wrap:wrap;gap:20px}.herbs-header h2{margin:0 0 8px}.herbs-header p{color:var(--text-secondary);margin:0}.herbs-stats{display:flex;gap:16px}.stat-badge{background:var(--bg-secondary);padding:12px 20px;border:4px solid var(--border);text-align:center;box-shadow:4px 4px #0000004d;display:flex;flex-direction:column;gap:4px}.stat-number{font-size:24px;font-weight:700;color:var(--uncommon);text-shadow:2px 2px 0 rgba(0,0,0,.5)}.stat-label{font-size:6px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.herbs-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:16px;align-items:end;padding:16px}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-group label{font-size:7px;color:var(--text-secondary);text-transform:uppercase;font-weight:700}.clear-filters{background:var(--warning);border-color:var(--warning)}.herbs-content{display:flex;flex-direction:column;gap:24px}.rarity-section{display:flex;flex-direction:column;gap:16px}.rarity-header{font-size:14px;padding:12px 20px;background:var(--bg-card);border:4px solid;box-shadow:4px 4px #0000004d;text-transform:uppercase;letter-spacing:2px}.herbs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.herb-card{padding:16px;cursor:pointer;transition:all .2s;position:relative}.herb-card:hover{transform:translateY(-4px);box-shadow:10px 10px #0000004d;border-color:var(--uncommon)}.herb-card.selected{border-color:var(--success);box-shadow:8px 8px #0000004d,inset 0 0 0 2px var(--success)}.herb-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:8px}.herb-card-header h4{margin:0;flex:1;font-size:10px}.herb-mana-badge{background:#42a5f54d;color:var(--rare);padding:4px 8px;border:2px solid var(--rare);font-size:6px;font-weight:700;border-radius:4px;white-space:nowrap}.herb-level-badge{background:#feca574d;color:var(--warning);padding:4px 8px;border:2px solid var(--warning);font-size:6px;font-weight:700;border-radius:4px}.herb-categories{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.category-tag{background:var(--bg-secondary);border:2px solid var(--border);padding:3px 8px;font-size:6px;text-transform:uppercase;letter-spacing:.5px;box-shadow:2px 2px #0000004d}.category-tag.large{font-size:7px;padding:6px 12px}.herb-description-short{font-size:7px;line-height:1.6;color:var(--text-secondary);margin:0 0 8px}.herb-location{font-size:7px;color:var(--uncommon);padding:6px;background:#4ecca31a;border:2px solid rgba(78,204,163,.3);margin-top:auto}.herb-details-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.herb-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;padding-bottom:16px;padding-right:44px;border-bottom:4px solid var(--border)}.herb-detail-header h3{margin:0;flex:1;font-size:16px}.herb-detail-content{display:flex;flex-direction:column;gap:16px}.herb-detail-section{padding:12px;background:var(--bg-secondary);border:3px solid var(--border)}.herb-detail-section strong{display:block;margin-bottom:8px;color:var(--warning);font-size:8px;text-transform:uppercase}.herb-detail-section p{margin:0;line-height:1.8}.categories-list{display:flex;flex-wrap:wrap;gap:8px}.mana-section{background:#42a5f51a;border-color:var(--rare)}.mana-value{font-size:18px;font-weight:700;color:var(--rare);margin-bottom:8px;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.mana-note,.level-note{font-size:7px;color:var(--text-secondary);font-style:italic;margin-top:8px}.level-section{background:#feca571a;border-color:var(--warning)}.level-value{font-size:18px;font-weight:700;color:var(--warning);margin-bottom:8px;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.properties-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.property-item{background:var(--bg-primary);padding:8px;border:2px solid var(--border);display:flex;justify-content:space-between;gap:8px;font-size:7px}.property-key{color:var(--text-secondary);text-transform:capitalize}.property-value{color:var(--text-primary);font-weight:700;text-transform:capitalize}@media(max-width:768px){.herbs-filters,.herbs-grid{grid-template-columns:1fr}.herbs-stats{width:100%;justify-content:space-around}.stat-badge{flex:1}}:root{--bg-primary: #0d0d1a;--bg-secondary: #1a1a2e;--bg-card: #252540;--accent: #ff6b6b;--accent-hover: #ff5252;--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--border: #4a4a6a;--border-bright: #6a6a8a;--success: #4ecca3;--warning: #feca57;--danger: #ff6b6b;--common: #9e9e9e;--uncommon: #4ecca3;--rare: #42a5f5;--very-rare: #ab47bc;--legendary: #feca57;--pixel-border: 4px;--pixel-shadow: 6px}*{margin:0;padding:0;box-sizing:border-box;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}body{font-family:"Press Start 2P",cursive;background:var(--bg-primary);background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);color:var(--text-primary);min-height:100vh;padding:20px;font-size:8px;line-height:1.8}#root{max-width:1400px;margin:0 auto}h1{font-size:20px;margin-bottom:16px;color:var(--text-primary);text-shadow:3px 3px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(255,255,255,.1)}h2{font-size:14px;margin-bottom:12px;color:var(--text-primary);text-shadow:2px 2px 0 rgba(0,0,0,.5)}h3{font-size:10px;margin-bottom:10px;color:var(--text-primary);text-shadow:2px 2px 0 rgba(0,0,0,.5)}h4{font-size:9px;margin-bottom:8px;color:var(--text-primary)}p,li,span{font-size:8px;line-height:1.8}button{font-family:"Press Start 2P",cursive;font-size:8px;background:var(--accent);color:#fff;border:none;padding:12px 16px;cursor:pointer;position:relative;box-shadow:inset -4px -4px #0000004d,inset 4px 4px #fff3,0 4px #00000080;transition:transform .1s,box-shadow .1s}button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:inset -4px -4px #0000004d,inset 4px 4px #fff3,0 6px #00000080}button:active{transform:translateY(2px);box-shadow:inset -2px -2px #00000080,inset 2px 2px #ffffff1a,0 2px #00000080}button:disabled{background:#555;cursor:not-allowed;transform:none;opacity:.5}input,select,textarea{font-family:"Press Start 2P",cursive;font-size:8px;background:var(--bg-secondary);border:4px solid var(--border);color:var(--text-primary);padding:12px;width:100%;box-shadow:inset 4px 4px #0000004d,inset -2px -2px #ffffff1a}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 4px 4px #0000004d,inset -2px -2px #ffffff1a,0 0 0 2px var(--accent)}.card{background:var(--bg-card);padding:16px;margin-bottom:16px;border:4px solid var(--border);position:relative;box-shadow:8px 8px #0000004d,inset -2px -2px #0003,inset 2px 2px #ffffff1a}.card:before{content:"";position:absolute;inset:-4px;border:2px solid rgba(255,255,255,.1);pointer-events:none}.rarity-common{color:var(--common)}.rarity-uncommon{color:var(--uncommon)}.rarity-rare{color:var(--rare)}.rarity-very-rare{color:var(--very-rare)}.rarity-legendary{color:var(--legendary)}.rarity-badge{font-size:7px;padding:6px 10px;border:3px solid;text-transform:uppercase;letter-spacing:1px;box-shadow:inset -2px -2px #0000004d,inset 2px 2px #ffffff4d}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.empty-state{text-align:center;padding:32px;opacity:.6}hr{border:none;height:4px;background:var(--border);margin:16px 0;box-shadow:0 2px #0000004d}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:var(--bg-secondary);border:3px solid var(--border)}::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--bg-secondary);box-shadow:inset 2px 2px #ffffff4d}::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}@keyframes pixel-blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes pixel-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@keyframes pixel-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:768px){body{padding:10px;font-size:7px}h1{font-size:16px}h2{font-size:12px}h3{font-size:9px}.grid-2,.grid-3{grid-template-columns:1fr}button{padding:10px 12px}}::selection{background:var(--accent);color:#fff}