.generatorPage{padding-top:60px}.gen-content-wrap{width:100%;max-width:1440px;margin:0 auto}.character-grid{grid-template-columns:repeat(6,1fr);place-items:start stretch;gap:15px;width:100%;max-width:100%;margin:0 auto;display:grid}.character-card{box-sizing:border-box;cursor:pointer;background:#fff;border-radius:12px;width:100%;min-width:0;max-width:none;margin:0;padding:12px 0 0;transition:all .3s}.character-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.component-image{cursor:pointer;object-fit:contain;width:100px;height:100px;transition:all .3s}.component-image:hover{transform:scale(1.05)}.component-image.selected{border:3px solid #3b82f6;transform:scale(1.05)}.preview-container{aspect-ratio:1;background:#e5e7eb;border-radius:.5rem;justify-content:center;align-items:center;width:100%;margin:0 auto 8px;display:flex;position:relative;overflow:hidden}.preview-layer{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.component-selection-layout{align-items:stretch;gap:20px;display:flex;position:relative}.component-selection-left{flex:1 1 0;min-width:0;max-height:calc(100vh - 300px);padding-right:16px;position:relative;overflow-y:auto}.component-selection-preview-fixed{background:#fff;border-radius:12px;flex-direction:column;align-items:center;width:400px;max-width:40vw;padding:24px;display:flex;box-shadow:0 4px 24px #00000014}@media (max-width:1100px){.component-selection-layout{flex-direction:column}.component-selection-preview-fixed{width:100%;max-width:100%;box-shadow:none;margin-top:24px;padding:16px 0}.gen-preview-section{order:-1}}@media (max-width:640px){.gen-preview-section{order:-1}.gen-part-pills{gap:4px;flex-wrap:wrap!important;display:flex!important}.gen-part-pills>button{box-sizing:border-box;width:calc(33.33% - 3px);padding:3px 6px!important;font-size:12px!important}.gen-mobile-bar{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e140ff2;border-top:1px solid #f0d13d33;gap:8px;padding:8px 12px;display:flex;position:fixed;bottom:0;left:0;right:0}.gen-mobile-bar button{color:#f0d13d;white-space:nowrap;background:#f0d13d1a;border:1px solid #f0d13d4d;border-radius:8px;flex:1;padding:10px 8px;font-family:Metal Mania,cursive;font-size:14px}.gen-mobile-bar button:active{background:#f0d13d40}}.dark{color:#fff;background-color:#1a1a1a}.dark .bg-white{background-color:#2d2d2d}.dark .text-gray-800{color:#fff}.dark .text-gray-700{color:#e5e5e5}.dark .bg-gray-100{background-color:#1a1a1a}.dark .bg-gray-200{background-color:#3d3d3d}.dark .hover\:bg-gray-300:hover{background-color:#4d4d4d}.dark .preview-container{background:#3d3d3d}.dark .component-selection-preview-fixed{background:#2d2d2d}.trait-item{cursor:pointer;transition:transform .2s;position:relative}.trait-index-badge{z-index:3;color:#f59e0b;pointer-events:none;background:#000000b3;border-radius:4px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-family:monospace;font-size:11px;font-weight:700;line-height:1;display:flex;position:absolute;top:4px;left:4px}.owned-count-badge{z-index:3;color:#1a1200;pointer-events:none;background:#f59e0be6;border-radius:4px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-family:monospace;font-size:11px;font-weight:700;line-height:1;display:flex;position:absolute;bottom:4px;right:4px}.owned-separator{border:none;border-top:1px dashed #f59e0b66}.trait-filename{text-align:center;color:#d4c4a0;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;width:100%;margin-top:2px;font-size:10px;line-height:1.2;display:block;overflow:hidden}@media (min-width:768px){.trait-filename{font-size:11px}}.trait-item:hover{z-index:5;border:2px solid #fbbf2459;transform:scale(1.12)}.trait-item.selected{border:2px solid #f59e0b;box-shadow:0 0 20px #f59e0b99,0 0 40px #f59e0b33}.trait-grid-scroll{scrollbar-gutter:stable}.trait-grid-scroll::-webkit-scrollbar{width:6px}.trait-grid-scroll::-webkit-scrollbar-track{background:0 0}.trait-grid-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.trait-grid-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff59}.faction-switch-btn{appearance:none;cursor:pointer;opacity:1;background:#0000004d;border:2px solid #0000;border-radius:50%;padding:2px;transition:all .2s}.faction-switch-btn:hover{border-color:#ffffff80}.faction-switch-btn.active{border-color:#f0d13d;animation:2s ease-in-out infinite gen-breathe;box-shadow:0 0 8px #f59e0b80}@keyframes gen-breathe{0%,to{box-shadow:0 0 6px #f59e0b66}50%{box-shadow:0 0 16px #f59e0bcc,0 0 30px #f59e0b4d}}.gen-part-active{filter:brightness(1.1);animation:2s ease-in-out infinite gen-part-breathe}@keyframes gen-part-breathe{0%,to{filter:brightness(1.05)drop-shadow(0 0 4px #f59e0b4d)}50%{filter:brightness(1.2)drop-shadow(0 0 10px #f59e0b99)}}.faction-owned-badge{color:#000;text-align:center;pointer-events:none;background:#f0d13d;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:700;line-height:16px;position:absolute;bottom:-2px;right:-2px;box-shadow:0 1px 3px #00000080}@media (min-width:768px){.faction-owned-badge{border-radius:10px;min-width:20px;height:20px;padding:0 5px;font-size:11px;line-height:20px;bottom:-3px;right:-3px}}.part-owned-badge{color:#000;text-align:center;pointer-events:none;background:#f0d13d;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-family:sans-serif;font-size:10px;font-weight:700;line-height:16px;position:absolute;bottom:-2px;right:-2px;box-shadow:0 1px 3px #00000080}@media (min-width:768px){.part-owned-badge{border-radius:10px;min-width:20px;height:20px;padding:0 5px;font-size:11px;line-height:20px;bottom:-3px;right:-3px}}.gen-btn{appearance:none;font:inherit;color:inherit;text-align:center;background:0 0;border:none;margin:0;padding:0;transition:transform .15s,filter .15s}.gen-btn:hover{filter:brightness(1.15);transform:scale(1.03)}.gen-btn:active{transform:scale(.97)}.gen-actions{flex-direction:column;gap:10px;display:flex}.gen-actions-row{gap:10px;display:flex}@media (min-width:768px){.gen-actions,.gen-actions-row{gap:12px}}.gen-divider{justify-content:center;align-items:center;padding:4px 0;display:flex}.gen-divider span{background:linear-gradient(90deg,#0000,#f0d13d80 30%,#f0d13db3 50%,#f0d13d80 70%,#0000);width:60%;height:1px;display:block;position:relative}.gen-divider span:after{content:"◆";color:#f0d13d;background:#5c4033;padding:0 6px;font-size:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gen-utility-btn{appearance:none;color:#f0d13d;white-space:nowrap;background:#3c2819e6;border:1px solid #f0d13d66;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-family:Metal Mania,cursive;font-size:15px;transition:all .2s;display:flex}.gen-utility-btn:hover{color:#f0d13d;background:#f0d13d1f;border-color:#f0d13d80}.gen-utility-btn:active{transform:scale(.96)}.gen-utility-btn svg{opacity:.7;flex-shrink:0}.gen-utility-btn:hover svg{opacity:1}@media (min-width:768px){.gen-utility-btn{gap:8px;padding:10px 16px;font-size:17px}.gen-utility-btn svg{width:16px;height:16px}}.config-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.config-modal{background:#4a3728;border:1px solid #f59e0b4d;border-radius:12px;flex-direction:column;width:70vw;height:80vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #00000080}.config-panel-header{background:#00000040;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.config-panel-close{color:#aaa;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:28px;line-height:1;transition:color .2s}.config-panel-close:hover{color:#fff}.config-panel-list{scrollbar-gutter:stable;flex:1;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-content:start;gap:16px;padding:16px;display:grid;overflow-y:auto}.config-panel-list::-webkit-scrollbar{width:5px}.config-panel-list::-webkit-scrollbar-track{background:0 0}.config-panel-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.config-card{background:#00000040;border-radius:10px;flex-direction:column;padding:8px;transition:background .2s;display:flex}.config-card:hover{background:#0006}.config-card-preview{aspect-ratio:1;background:#0000004d;border-radius:8px;width:100%;position:relative;overflow:hidden}.config-preview-layer{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.config-card-body{flex-direction:column;gap:6px;padding-top:8px;display:flex}.config-card-info{flex-direction:column;gap:2px;min-width:0;display:flex}.config-card-name{color:#f0d13d;white-space:nowrap;text-overflow:ellipsis;font-family:Metal Mania,cursive;font-size:16px;overflow:hidden}.config-card-meta{color:#999;font-size:12px}.config-card-actions{align-items:center;gap:6px;display:flex}.config-btn-load{color:#1a1200;cursor:pointer;background:#f59e0bcc;border:none;border-radius:6px;flex:1;padding:4px 14px;font-family:Metal Mania,cursive;font-size:14px;font-weight:700;transition:background .2s}.config-btn-load:hover{background:#f59e0b}.config-btn-delete{color:#f87171;cursor:pointer;background:#dc26264d;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:18px;line-height:1;transition:background .2s;display:flex}.config-btn-delete:hover{background:#dc262699}.trait-attr-panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1e1914d9;border:1px solid #f0d13d40;border-radius:10px;margin-top:12px;padding:12px 14px;font-family:Segoe UI,system-ui,sans-serif;min-height:0!important}.trait-attr-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.trait-attr-title{color:#f0d13d;font-family:Metal Mania,cursive;font-size:14px}.trait-attr-quality{letter-spacing:1.5px;text-transform:uppercase;border:1px solid;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:700}.trait-attr-empty{color:#ffffff73;text-align:center;padding:8px 0;font-size:12px}.trait-attr-stats{flex-wrap:nowrap;gap:8px;margin-bottom:6px;display:flex}.trait-attr-stat{text-align:center;background:#ffffff0d;border-radius:8px;flex:1 1 0;min-width:0;padding:8px 6px;overflow:hidden}.trait-attr-stat-icon{margin-bottom:4px;font-size:14px;line-height:1;display:block}.trait-attr-stat-label{color:#ffffff8c;letter-spacing:1px;text-transform:uppercase;font-size:10px;display:block}.trait-attr-stat-value{color:#fff;margin-top:2px;font-size:16px;font-weight:700;display:block}.trait-attr-bottom{gap:8px;display:flex}.trait-attr-skill,.trait-attr-set{background:#ffffff08;border-radius:6px;flex:1;min-width:0;padding:4px 8px}.trait-attr-label{color:#ffffff73;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;font-size:9px;display:block}.trait-attr-value{color:#fff;font-size:12px;font-weight:500}@media (max-width:640px){.trait-attr-panel{box-sizing:border-box;height:55vw;margin-top:0;padding:8px 10px;overflow-y:auto}.trait-attr-stat-value{font-size:16px}.trait-attr-title{font-size:13px}}