:root{color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;--bg-deep: #080510;--bg-panel: #110e1f;--bg-card: #1a1530;--bg-hover: #241e3a;--border: #2a2345;--border-glow: #6c5ce7;--gold: #f0c040;--gold-dim: #c49a20;--purple: #8b5cf6;--purple-dim: #6c40d4;--text: #e8e4f0;--text-dim: #9088a8;--text-muted: #605878;--green: #4ade80;--red: #f87171;--blue: #60a5fa;--orange: #fb923c;--pink: #f472b6;--cyan: #22d3ee;--radius: .625rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-deep);color:var(--text)}body{background:radial-gradient(ellipse at 20% 50%,rgba(108,92,231,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.04) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(240,192,64,.03) 0%,transparent 50%),var(--bg-deep)}.app{display:grid;grid-template-rows:auto 1fr;min-height:100vh}.header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:#110e1fcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--gold),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats{display:flex;align-items:center;gap:1.25rem;font-size:.85rem;color:var(--text-dim)}.stat-value{color:var(--gold);font-weight:600}.progress-bar{width:140px;height:6px;background:var(--bg-card);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--gold));border-radius:3px;transition:width .5s ease}.main{display:grid;grid-template-columns:1fr 320px;max-width:1200px;width:100%;margin:0 auto;gap:0}@media(max-width:768px){.main{grid-template-columns:1fr}}.crafting-area{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.crafting-zone{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:140px;position:relative;transition:border-color .3s}.crafting-zone.active{border-color:var(--border-glow);box-shadow:0 0 20px #6c5ce726}.crafting-slot{width:80px;height:80px;border:2px dashed var(--border);border-radius:var(--radius);display:grid;place-items:center;font-size:2rem;background:var(--bg-card);transition:all .2s;position:relative}.crafting-slot.filled{border-style:solid;border-color:var(--border-glow);background:var(--bg-hover)}.crafting-slot .slot-label{font-size:.65rem;color:var(--text-muted);position:absolute;bottom:4px}.crafting-plus,.crafting-equals{font-size:1.5rem;color:var(--text-muted);font-weight:300}.result-slot{width:80px;height:80px;border:2px solid var(--gold-dim);border-radius:var(--radius);display:grid;place-items:center;font-size:2rem;background:#f0c0400d;position:relative}.result-slot .slot-label{font-size:.65rem;color:var(--gold-dim);position:absolute;bottom:4px}.result-name{position:absolute;bottom:-24px;font-size:.75rem;color:var(--gold);font-weight:600;white-space:nowrap}@keyframes discoverPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.result-slot.discovered{animation:discoverPop .4s ease}.crafting-zone.shake{animation:shake .35s ease}.elements-section{flex:1}.section-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.category-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem}.category-tab{padding:.3rem .65rem;font-size:.75rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}.category-tab:hover{background:var(--bg-hover);color:var(--text)}.category-tab.active{background:var(--purple-dim);border-color:var(--purple);color:#fff}.elements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem}.element-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;color:var(--text);font-family:inherit;position:relative}.element-btn:hover{background:var(--bg-hover);border-color:var(--border-glow);transform:translateY(-1px)}.element-btn.selected{border-color:var(--gold);box-shadow:0 0 12px #f0c0404d;background:#f0c04014}.element-btn.undiscovered{opacity:.3;cursor:default;pointer-events:none}.element-emoji{font-size:1.5rem;line-height:1}.element-name{font-size:.6rem;color:var(--text-dim);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-btn.selected .element-name{color:var(--gold)}.element-btn .new-badge{position:absolute;top:-4px;right:-4px;background:var(--gold);color:#000;font-size:.5rem;font-weight:700;padding:1px 4px;border-radius:999px;line-height:1.2}.sidebar{border-left:1px solid var(--border);background:var(--bg-panel);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 60px);overflow-y:auto}.sidebar-section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);padding-bottom:.5rem;border-bottom:1px solid var(--border)}.discovery-log{display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto}.discovery-entry{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-card);border-radius:var(--radius);font-size:.8rem;border:1px solid var(--border);animation:discoverPop .3s ease}.discovery-entry .combo{color:var(--text-dim);font-size:.7rem}.discovery-entry .result{color:var(--gold);font-weight:600}.discovery-entry .arrow{color:var(--text-muted)}.hints-section{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border)}.hint-btn{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--purple-dim),rgba(108,92,231,.3));border:1px solid var(--purple);border-radius:var(--radius);color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.hint-btn:hover{background:linear-gradient(135deg,var(--purple),rgba(108,92,231,.5))}.hint-btn:disabled{opacity:.4;cursor:default}.hint-text{margin-top:.75rem;padding:.6rem;background:#8b5cf61a;border:1px solid rgba(139,92,246,.2);border-radius:var(--radius);font-size:.75rem;color:var(--purple);line-height:1.4}.empty-log{color:var(--text-muted);font-size:.8rem;text-align:center;padding:2rem 0;font-style:italic}.cat-basic{--cat-color: #60a5fa}.cat-nature{--cat-color: #4ade80}.cat-material{--cat-color: #fb923c}.cat-weather{--cat-color: #22d3ee}.cat-magic{--cat-color: #a78bfa}.cat-creature{--cat-color: #f472b6}.cat-legendary{--cat-color: #fbbf24}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.sidebar{border-left:none;border-top:1px solid var(--border);max-height:300px}.elements-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.crafting-zone{flex-wrap:wrap;gap:1rem;padding:1.5rem 1rem}.crafting-slot,.result-slot{width:64px;height:64px;font-size:1.5rem}}