html,body{background:#050b18;height:100%;margin:0;padding:0;overflow:hidden auto}.app-container{color:#e6d8a8;background:radial-gradient(circle,#0f1f3d 0%,#050b18 100%);min-height:100dvh;font-family:Georgia,Times New Roman,serif;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#081326}::-webkit-scrollbar-thumb{background:#cbb67a;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#e2d095}.sidebar{background:linear-gradient(#0a1a33 0%,#050b18 100%);border-right:2px solid #cbb67a;align-items:flex-start;width:100%;max-width:260px;display:flex;box-shadow:inset -2px 0 6px #000000b3}@media (width<=768px){.sidebar{z-index:1000;height:100%;transition:left .25s;position:fixed;top:0;left:-260px}.sidebar.open{left:0}.sidebar-inner{margin-top:30px}}.sidebar-inner{flex-direction:column;gap:10px;width:100%;padding:20px 10px;display:flex}.sidebar-button{color:#e6d8a8;text-align:left;letter-spacing:1px;cursor:pointer;background:0 0;border:2px solid #0000;padding:10px 14px;font-size:16px;transition:all .2s;position:relative}.sidebar-button:hover{background:#cbb67a1a;border-left:2px solid #cbb67a;padding-left:18px}.sidebar-button.active{color:#000;background:#d6c28a;border:2px solid #cbb67a;box-shadow:inset 0 0 4px #0009}.sidebar-button:active{background:#cbb67a40}.menu-button{display:none}@media (width<=768px){.menu-button{z-index:1100;color:#e6d8a8;background:#0f1f3d;border:2px solid #cbb67a;padding:6px 10px;display:block;position:fixed;top:10px;left:10px}}.main-content{flex:1;justify-content:center;align-items:flex-start;padding:40px;display:flex;overflow-y:auto}.home-panel{text-align:center;background:linear-gradient(#10244a 0%,#0a1a33 100%);border:2px solid #cbb67a;width:100%;max-width:700px;padding:60px 80px;box-shadow:0 0 12px #cbb67a40,inset 0 0 10px #0009}@media (width<=768px){.main-content{padding:20px 12px}.home-panel{padding:30px 20px}}.title{letter-spacing:2px;text-shadow:0 0 6px #cbb67a99;margin-bottom:16px;font-size:42px}.subtitle{opacity:.8;font-size:18px}@media (width<=768px){.title{font-size:28px}.subtitle{font-size:14px}}.equip-container{width:100%}.equip-tabs{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.equip-tab{color:#e6d8a8;cursor:pointer;background:0 0;border:2px solid #cbb67a;flex:none;padding:8px 16px;transition:all .2s}.equip-tab:hover{background:#cbb67a1a}.equip-tab.active{color:#000;background:#d6c28a;border:2px solid #cbb67a;box-shadow:inset 0 0 4px #0009}.equip-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin-top:20px;display:grid}@media (width<=768px){.equip-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.equip-card{text-align:center;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;padding:10px;transition:transform .15s;position:relative;box-shadow:inset 0 0 6px #0009,0 0 6px #cbb67a33}@media (width<=768px){.karon-item{align-items:start;gap:10px;display:flex}}.equip-card.selected{outline:2px solid #e6d8a8;box-shadow:0 0 10px #e6d8a866,inset 0 0 6px #0009}.equip-card:hover{cursor:pointer;transform:scale(1.03)}.equip-card:hover .equip-card-image{animation:1.6s ease-in-out infinite float}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.equip-card-image{object-fit:contain;max-width:100%;max-height:100%;margin-bottom:8px;transition:transform .2s}.equip-element-icon{width:24px;position:absolute;top:8px;right:8px}.equip-card h3{margin-bottom:4px;font-size:14px}.equip-stat{opacity:.8;font-size:12px}.equip-overlay{z-index:1000;background:#000000bf;justify-content:center;align-items:center;animation:.2s forwards overlayOpen;display:flex;position:fixed;inset:0}.equip-overlay.closing{animation:.2s forwards overlayClose}@keyframes overlayOpen{0%{opacity:0}to{opacity:1}}@keyframes overlayClose{0%{opacity:1}to{opacity:0}}.equip-main{grid-template-columns:160px auto;align-items:start;gap:30px;margin-top:10px;display:grid}.equip-image{object-fit:contain;align-self:start;width:100%;max-width:120px;height:auto;animation:1.6s ease-in-out infinite float}.equip-image-container{position:relative}.equip-title{font-size:xx-large}.equip-description{word-wrap:break-word;overflow-wrap:break-word}.equip-stats{background:#00000040;border:2px solid #cbb67a;flex-direction:column;justify-self:start;gap:6px;width:fit-content;min-width:0;padding:10px;display:flex;box-shadow:inset 0 0 6px #0009}@media (width<=768px){.equip-main{grid-template-columns:120px 1fr;gap:15px}}.equip-extra{opacity:.9;height:100%;margin-top:14px;font-size:20px}.equip-extra div{align-items:center}.equip-skill{cursor:pointer;font-weight:800;text-decoration:underline}.equip-modal{background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;width:30vw;min-width:320px;max-width:700px;max-height:80vh;padding:20px;animation:.2s forwards modalOpen;overflow-y:auto}.equip-modal.closing{animation:.2s forwards modalClose}@keyframes modalOpen{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes modalClose{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media (width<=768px){.equip-modal{width:90vw;max-height:90vh}}.equip-divider{background:#cbb67a;height:2px;margin:10px 0 14px}.stat-line{grid-template-columns:115px auto;align-items:center;margin:6px 0;display:grid}.stat-label{text-align:left;font-weight:700}.stat-value{text-align:left;color:#fff;font-weight:700}.stat-negative{color:#ff6464}.stat-effect{color:#67c7fc}.stat-bars{gap:4px;display:flex}.stat-bar{background:#2a2618;border:1px solid #cbb67a;width:18px;height:22px}.stat-bar.range.filled-1{background:#1f6f43}.stat-bar.range.filled-2{background:#2fa463}.stat-bar.range.filled-3{background:#5be39a}.stat-bar.handling.filled-1{background:#6e6430}.stat-bar.handling.filled-2{background:#b5a85a}.stat-bar.handling.filled-3{background:#f0e08a}.karon-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px;display:grid}@media (width<=768px){.karon-grid{gap:10px}}.karon-overlay{z-index:10;opacity:0;pointer-events:none;background:#00000080;width:100%;height:100%;transition:opacity .2s;position:fixed;top:0;left:0}.karon-overlay.visible{opacity:1;pointer-events:auto}.karon-card{text-align:center;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;flex-direction:column;justify-content:center;margin:0;padding:10px;transition:transform .15s;display:flex;position:relative;box-shadow:inset 0 0 6px #0009,0 0 6px #cbb67a33}.karon-card:hover{cursor:pointer;transform:scale(1.03)}.karon-card.selected{outline:2px solid #e6d8a8;box-shadow:0 0 10px #e6d8a866,inset 0 0 6px #0009}.karon-card img{object-fit:contain;max-width:100%;max-height:100%;margin-bottom:8px;transition:transform .2s}.karon-card h3{margin:0;font-size:14px}.karon-row{justify-content:space-between;align-items:center;width:100%;display:flex}.karon-item{align-items:start;gap:10px;display:flex}.karon-main{flex-direction:column;width:100%;max-width:220px;display:flex}.karon-info-box{color:#e6d8a8;text-align:center;z-index:20;opacity:0;pointer-events:none;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;width:320px;max-width:80%;padding:12px;font-size:16px;transition:all .2s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95)}.karon-info-box.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.karon-info-box h3{margin:0 0 8px;font-size:20px;font-weight:700}.karon-info-box p{margin:4px 0;font-size:16px}.karon-info-box .acquisition{cursor:pointer;margin-top:8px;font-weight:700;text-decoration:underline}.crystal-container{align-items:top;display:flex}.crystal{width:8px;height:20px;animation:1s ease-in-out infinite blink}.crystal.even{transform:translateY(0)}.crystal.odd{transform:translateY(4px)}@keyframes blink{0%{filter:brightness()}50%{filter:brightness(150%)}to{filter:brightness()}}.karon-card.alt,.skill-card.alt{background:linear-gradient(#3d0f0f 0%,#260808 100%)}.alt-toggle{color:#e6d8a8;cursor:pointer;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;border-top:none;width:100%;height:24px}.alt-toggle.placeholder{visibility:hidden}.alt-toggle.active{background:#3d0f0f}.alt-toggle:hover{transform:scale(1.01)}.search-box{border:2px solid #cbb67a}@media (width<=768px){.search-box{margin-top:30px}}.search-box input{color:#e6d8a8;box-sizing:border-box;background:0 0;border:none;outline:none;width:100%;padding:8px 12px;font-size:20px}.item-wrapper{grid-template-columns:.5fr .5fr;align-items:stretch;width:100%;margin-top:10px;display:grid;overflow:hidden}.item-wrapper>div{flex-direction:column;min-width:0;display:flex}.item-wrapper p{word-break:break-word}@media (width<=768px){.item-wrapper{grid-template-columns:1fr}}.expanded-info-box{color:#e6d8a8;text-align:center;z-index:20;opacity:0;pointer-events:none;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;width:640px;max-width:80%;padding:12px;font-size:16px;transition:all .2s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95)}.expanded-info-box.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.expanded-info-box h3{margin:0 0 8px;font-size:20px;font-weight:700}.expanded-info-box p{margin:4px 0;font-size:16px}.item-stats{background:#00000040;border:2px solid #cbb67a;flex-direction:column;justify-self:start;gap:6px;max-width:100%;height:fit-content;display:flex;box-shadow:inset 0 0 6px #0009}.item-effect{grid-template-columns:auto, auto}.item-effect-label,.item-effect-value{font-weight:700}.libra-normal{color:#fff}.libra-good{color:#f1d160}.libra-epic{color:#ff6464}.libra-star{color:#64eeae}.libra-dupe{opacity:.5}.libra-container{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100vh;padding-top:60px;display:flex}.image-wrapper{width:80%;max-width:900px;position:relative}@media (width<=768px){.image-wrapper{width:100%;max-width:100%}}.libra-image{width:100%;height:auto;display:block}.libra-layout{justify-content:center;align-items:center;gap:30px;display:flex}@media (width<=768px){.libra-layout{flex-direction:column;gap:20px}.image-wrapper{order:1}.left-box{order:2}.right-box{order:3}}.effects-box{color:#e6d8a8;background:linear-gradient(#0f1f3d,#081326);border:2px solid #cbb67a;width:350px;min-height:200px;padding:10px}@media (width<=768px){.effects-box{width:100%;max-width:100%}}.pan{cursor:pointer;position:absolute;transform:translate(-50%,-50%)}.pan-card-wrapper{position:absolute}.pan-label{color:#e6d8a8;white-space:nowrap;z-index:2;background:#081326e6;border:1px solid #cbb67a;border-radius:4px;margin-bottom:20px;padding:2px 6px;font-size:13px;position:absolute;bottom:calc(100% + 6px);transform:translate(-50%)}.pan-card{text-align:center;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;width:40px;height:40px;transition:transform .15s;position:relative;transform:translate(-50%,-50%);box-shadow:inset 0 0 6px #0009,0 0 6px #cbb67a33}.pan-card.selected{outline:2px solid #e6d8a8;box-shadow:0 0 10px #e6d8a866,inset 0 0 6px #0009}.pan-card:hover{cursor:pointer}.pan img{object-fit:contain;width:100%;height:100%}@media (width<=768px){.pan-card{justify-content:center;align-items:center;width:26px;height:26px;display:flex;overflow:hidden}.pan img{object-fit:contain;width:100%;height:100%}.pan-label{font-size:9px}}.libra-modal{z-index:200;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;flex-direction:column;width:90vw;height:90vh;display:flex;position:fixed;top:5%;left:50%;transform:translate(-50%)}.libra-header{border:2px solid #cbb67a;justify-content:space-between;align-items:center;padding:15px;display:flex}@media (width<=768px){.libra-header{grid-template-columns:1fr auto;grid-template-areas:"title karma""search search""filters filters";gap:6px;padding:8px;display:grid}.libra-header h2{grid-area:title;margin:0;font-size:16px}.search-box{grid-area:search}.libra-filters{grid-area:filters}.equip-tab{grid-area:karma;padding:4px 8px;font-size:12px}}.libra-filters{gap:10px;display:flex}.libra-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px;padding:20px;display:grid;overflow-y:auto}@media (width<=768px){.libra-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;padding:10px}}.libra-preview{border:2px solid #cbb67a;max-height:40vh;margin-top:10px;padding:15px;overflow-y:auto}@media (width<=768px){.libra-preview{max-height:180px;padding:10px;font-size:13px;overflow-y:auto}}.libra-dropdown{color:#e6d8a8;cursor:pointer;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;padding:6px 10px;font-size:14px}.libra-dropdown option{color:#e6d8a8;background:#081326}@media (width<=768px){.search-box input,.libra-dropdown,.equip-tab{width:100%}.search-box input{padding:6px 8px;font-size:14px}.libra-dropdown{padding:6px 8px;font-size:13px}}.balance-container{flex-direction:column;align-items:center;margin-top:20px;margin-bottom:10px;font-size:20px;display:flex}.balance-ruler{justify-content:center;gap:4px;display:flex;position:relative}.ruler-step{text-align:center;opacity:.3;width:11px;transition:all .2s}.ruler-step.active{color:#e6d8a8;opacity:1}.ruler-indicator-wrapper{flex-direction:column;align-items:center;transition:left .25s;display:flex;position:absolute;bottom:100%;transform:translate(-50%)}.ruler-value{color:#e6d8a8;margin-bottom:2px;font-size:20px;font-weight:700}.ruler-indicator{border-top:10px solid #e6d8a8;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0}.ruler-labels{color:#cbb67a;width:300px;height:16px;margin-top:4px;position:relative}.ruler-labels span{position:absolute;transform:translate(-50%)}.ruler-indicator{transition:left .25s}@media (width<=768px){.balance-container{margin-top:10px}.ruler-indicator-wrapper{bottom:110%}}.skill-card{text-align:center;text-align:center;background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;flex-direction:column;justify-content:center;padding:10px;transition:transform .15s;display:flex;box-shadow:inset 0 0 6px #0009,0 0 6px #cbb67a33}.skill-card.selected{outline:2px solid #e6d8a8;box-shadow:0 0 10px #e6d8a866,inset 0 0 6px #0009}.skill-card:hover{cursor:pointer;transform:scale(1.03)}.skill-card:hover img{animation:1.8s ease-in-out infinite blink}.skill-card img{object-fit:contain;max-width:100%;max-height:100%;margin-bottom:8px;transition:transform .2s}.skill-card h3{margin-bottom:4px;font-size:14px}.skill-image{object-fit:contain;align-self:start;width:120px;height:auto;animation:1.8s ease-in-out infinite blink}.material-card{background:linear-gradient(#0f1f3d 0%,#081326 100%);border:2px solid #cbb67a;width:60px;height:60px;box-shadow:inset 0 0 6px #0009,0 0 6px #cbb67a33}.material-card img{object-fit:contain;width:100%;height:100%}