@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-main: #f8fafc;
    --text-main: #0f172a;
    --line-normal: #94a3b8;
    --line-hover: #f59e0b;
    --card-bg: #ffffff;
    --card-border: #cbd5e1;
    --card-border-hover: #3b82f6;
    --grid-dots: #cbd5e1;
    --panel-bg: rgba(255, 255, 255, 0.95);
    --panel-border: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0b101e;
        --text-main: #e2e8f0;
        --line-normal: #475569;
        --line-hover: #f59e0b;
        --card-bg: #1a264a;
        --card-border: #0f152d;
        --card-border-hover: #fde047;
        --grid-dots: #1e293b;
        --panel-bg: rgba(26, 38, 74, 0.95);
        --panel-border: #0f152d;
    }
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    overflow: hidden; 
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-normal); border-radius: 4px; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.tree-children.hidden { display: none !important; }

/* --- Home Mode CSS Override --- */
body.home-mode #mainHeader {
    height: 100vh;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
body.home-mode #headerContent {
    height: 100%;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3rem;
}
body.home-mode #logoText { display: block !important; font-size: 3rem; }
body.home-mode #logoIcon { font-size: 3.5rem; }
body.home-mode #searchWrapper { max-width: 700px; }
body.home-mode #statusWrapper { 
    position: absolute; 
    bottom: 2rem; 
    left: 0; 
    right: 0;
    display: flex;
    justify-content: center;
}

/* --- Seamless Animations & Hero States --- */
.fade-unfocused .tree-line-btn,
.fade-unfocused .line-h,
.fade-unfocused .line-v,
.fade-unfocused .expand-btn,
.fade-unfocused .category-header,
.fade-unfocused .tree-children::before {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

.fade-unfocused .item-card:not(.hero-active) {
    opacity: 0.3 !important;
    filter: blur(1px);
    transition: all 0.3s ease;
}

.item-card.hero-active {
    transform: scale(1.1);
    z-index: 9999;
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.6);
    border-color: var(--line-hover);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-fade-in {
    animation: treeFadeIn 0.5s ease forwards;
}
@keyframes treeFadeIn {
    0% { opacity: 0; filter: blur(4px); }
    100% { opacity: 1; filter: blur(0); }
}

/* --- In-Game Rarity Styling --- */
.terraria-text {
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 3px rgba(0,0,0,0.6);
}

.rarity--1 { color: #828282 !important; } 
.rarity-0 { color: #ffffff !important; }  
.rarity-1 { color: #9696ff !important; }  
.rarity-2 { color: #96ff96 !important; }  
.rarity-3 { color: #ffc896 !important; }  
.rarity-4 { color: #ff9696 !important; }  
.rarity-5 { color: #ff96ff !important; }  
.rarity-6 { color: #d2a0ff !important; }  
.rarity-7 { color: #96ff00 !important; }  
.rarity-8 { color: #ffff00 !important; }  
.rarity-9 { color: #05c8ff !important; }  
.rarity-10 { color: #ff2864 !important; } 
.rarity-11 { color: #b428ff !important; } 
.rarity--11 { color: #ff9600 !important; }

.rarity--12 { animation: rarityRainbow 2s linear infinite !important; } 
.rarity--13 { animation: rarityFiery 0.2s alternate infinite !important; } 

@keyframes rarityRainbow {
    0% { color: #FF4000; }
    14% { color: #FFC800; }
    28% { color: #FFFF00; }
    42% { color: #00FF00; }
    56% { color: #00FFFF; }
    70% { color: #0000FF; }
    84% { color: #C800FF; }
    100% { color: #FF4000; }
}

@keyframes rarityFiery {
    0% { color: #FF0000; }
    100% { color: #FF7D00; }
}

/* --- Explicit DOM Tree Geometry --- */
.tree-node { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 24px 8px 0 8px; 
}

.tree-children { 
    display: flex; 
    justify-content: center; 
    padding-top: 24px; 
    position: relative; 
}

.tree-line-btn {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); 
    width: 30px; height: 24px; z-index: 20; background: transparent; border: none; cursor: pointer; outline: none; padding: 0;
}
.tree-line-btn::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); 
    width: 2px; height: 100%; background-color: var(--line-normal); transition: all 0.2s ease;
}

.line-h {
    position: absolute; top: -15px; left: 0; width: 100%; height: 30px; cursor: pointer; z-index: 10;
}
.line-h::after {
    content: ''; position: absolute; top: 14px; left: 0; width: 100%; height: 2px; 
    background-color: var(--line-normal); transition: all 0.2s ease;
}

.line-v {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); 
    width: 30px; height: 24px; cursor: pointer; z-index: 10;
}
.line-v::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); 
    width: 2px; height: 100%; background-color: var(--line-normal); transition: all 0.2s ease;
}

.tree-node.is-first > .line-h { left: 50%; width: 50%; }
.tree-node.is-last > .line-h { width: 50%; }
.tree-node.is-only > .line-h { display: none; }

.tree-children.lines-hovered > .tree-line-btn::after,
.tree-children.lines-hovered > .tree-node > .line-h::after,
.tree-children.lines-hovered > .tree-node > .line-v::after,
.tree-line-btn:hover::after,
.line-h:hover::after,
.line-v:hover::after {
    background-color: var(--line-hover) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.9) !important;
}
.tree-children.lines-hovered > .tree-line-btn::after,
.tree-children.lines-hovered > .tree-node > .line-v::after,
.tree-line-btn:hover::after, .line-v:hover::after {
    width: 6px;
}
.tree-children.lines-hovered > .tree-node > .line-h::after,
.line-h:hover::after {
    height: 6px; top: 12px;
}

#treeContainer.mode-usage .tree-node,
#ghostContainer.mode-usage .tree-node {
    flex-direction: column-reverse;
    padding: 0 8px 24px 8px;
}
#treeContainer.mode-usage .tree-children,
#ghostContainer.mode-usage .tree-children {
    padding-top: 0;
    padding-bottom: 24px;
}
#treeContainer.mode-usage .tree-line-btn,
#ghostContainer.mode-usage .tree-line-btn { top: auto; bottom: 0; }
#treeContainer.mode-usage .tree-line-btn::after,
#ghostContainer.mode-usage .tree-line-btn::after { top: auto; bottom: 0; }
#treeContainer.mode-usage .line-h,
#ghostContainer.mode-usage .line-h { top: auto; bottom: -15px; }
#treeContainer.mode-usage .line-v,
#ghostContainer.mode-usage .line-v { top: auto; bottom: 0; }
#treeContainer.mode-usage > .tree-node,
#ghostContainer.mode-usage > .tree-node { padding-bottom: 0; }

.item-card { 
    transition: all 0.2s ease; cursor: pointer; user-select: none; z-index: 10;
    background: var(--card-bg); border: 2px solid var(--card-border);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1); 
}
.item-card:hover:not(.hero-active) { 
    transform: translateY(-4px); border-color: var(--card-border-hover); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); z-index: 15; 
}
.item-card img {
    -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;
}

/* Lateral Category Box */
.category-box {
    background: var(--panel-bg);
    border: 2px solid var(--panel-border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-width: 320px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
}
.category-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 2px solid var(--line-normal);
    padding-bottom: 12px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    max-width: 1000px;
    justify-content: center;
}

.controls-panel {
    background: var(--panel-bg) !important;
    border: 2px solid var(--panel-border) !important;
    backdrop-filter: blur(4px);
}

#visualizationArea { 
    cursor: grab; overflow: hidden; position: relative; 
    background-image: radial-gradient(var(--grid-dots) 1px, transparent 1px); background-size: 20px 20px; touch-action: none; 
}
#visualizationArea.grabbing { cursor: grabbing; }

#treeContainer, #ghostContainer { 
    transform-origin: top left; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: inline-flex; 
    justify-content: center; 
    min-width: 100%; 
    padding: 60px; 
    will-change: transform; 
}