:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--bg-canvas: #080A0E;--bg-surface: #0D1016;--bg-card: #12151E;--bg-elevated: #1C2230;--border-subtle: rgba(255, 255, 255, .08);--border-active: rgba(245, 158, 11, .5);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .42);--accent-gold: #F59E0B}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--bg-canvas)}body{background-color:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}:root{--accent-gold: #F59E0B;--bg-card: #0D1016;--border-active: rgba(245, 158, 11, .5)}.renown-container{max-width:1440px;margin:0 auto;padding:32px 24px 80px;display:flex;flex-direction:column;gap:20px;color:var(--text-primary);font-family:var(--font-sans)}.renown-top-header{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.renown-brand-group{display:flex;align-items:center;gap:12px}.renown-brand-logo{width:36px;height:36px;border-radius:8px;image-rendering:pixelated}.renown-brand-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}.renown-brand-sub{font-size:11px;color:var(--accent-gold);font-weight:600}.renown-segmented-track{position:relative;display:flex;align-items:center;background:var(--bg-card);padding:3px;border-radius:10px;border:1px solid var(--border-subtle);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.renown-segmented-track::-webkit-scrollbar{display:none}.renown-sliding-pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:6px;background:var(--bg-elevated);box-shadow:0 1px 3px #00000059;border:none;pointer-events:none;transition:transform .24s cubic-bezier(.16,1,.3,1),width .24s cubic-bezier(.16,1,.3,1);z-index:1}.renown-slot-tab{position:relative;z-index:2;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent!important;color:var(--text-secondary);font-family:var(--font-sans);font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:color .18s ease}.renown-slot-tab:hover{color:var(--text-primary)}.renown-slot-tab.active{color:var(--accent-gold)}.renown-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);padding:7px 12px;border-radius:8px;font-family:var(--font-sans);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .14s ease,background .14s ease,border-color .14s ease}.renown-btn:hover{background:var(--bg-elevated);border-color:var(--border-active)}.renown-btn:active{transform:scale(.97)}.renown-btn-gold{background:var(--accent-gold);color:#09090b;border-color:var(--accent-gold)}.renown-btn-gold:hover{background:#f59e0b;border-color:#f59e0b}.renown-belt-chassis{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:18px 22px;display:flex;flex-direction:column;gap:14px;position:relative}.renown-chassis-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.renown-meter-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.renown-notch-bar-wrap{width:100%;height:8px;background:var(--bg-card);border-radius:6px;overflow:hidden;border:1px solid var(--border-subtle);position:relative}.renown-notch-bar-fill{height:100%;background:var(--accent-gold);border-radius:5px;transition:width .32s cubic-bezier(.34,1.56,.64,1),background-color .2s ease}.renown-notch-bar-fill.full{background:#facd46;box-shadow:0 0 10px #e0b43040}.renown-notch-bar-fill.danger{background:#ef4444}.renown-slots-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}@media (max-width: 1024px){.renown-slots-grid{grid-template-columns:repeat(5,1fr)}}.renown-slot{aspect-ratio:1;background:var(--bg-card);border:2px dashed var(--border-subtle);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease;overflow:hidden;-webkit-user-select:none;user-select:none}.renown-slot:hover{border-color:var(--border-active);background:var(--bg-elevated);transform:translateY(-2px)}.renown-slot.keystone-anchor{border:2px solid var(--accent-gold);background:#18150d;box-shadow:0 0 0 2px #f59e0b40,0 0 16px #f59e0b59;animation:keystone-epic-pulse 3.5s infinite ease-in-out;position:relative;z-index:4}@media (min-width: 1025px){.renown-slot.keystone-anchor{transform:scale(1.1)}.renown-slot.keystone-anchor:hover{transform:scale(1.14) translateY(-2px)}}.renown-slot.keystone-anchor.occupied{border-color:#f59e0b;background:#1e1a0e;box-shadow:0 0 0 2px #f59e0b66,0 0 24px #f59e0b73}.keystone-inner-halo{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;border:1px dashed rgba(245,158,11,.4);pointer-events:none;animation:keystone-halo-spin 16s linear infinite}.keystone-occupied-img{width:44px!important;height:44px!important;filter:drop-shadow(0 0 10px rgba(245,158,11,.75));z-index:2}.keystone-slot-rank{color:#fde68a!important;font-weight:800!important;text-shadow:0 0 6px rgba(245,158,11,.6)}.keystone-slot-cost{color:#f59e0b!important;font-weight:800!important;background:#f59e0b40!important;padding:1px 5px!important;border-radius:4px}.keystone-pip{background:#f59e0b!important;box-shadow:0 0 6px #f59e0b,0 0 10px #f59e0b80!important}.keystone-empty-crest{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:4px;width:100%;height:100%}.keystone-crown-icon{filter:drop-shadow(0 0 6px rgba(245,158,11,.8));animation:keystone-float 3s ease-in-out infinite}.keystone-empty-title{font-size:11px;color:var(--accent-gold);font-weight:800;letter-spacing:.04em;text-shadow:0 0 8px rgba(245,158,11,.5);line-height:1}.keystone-empty-sub{font-size:10px;color:#f59e0bbf;font-weight:700;letter-spacing:.06em;line-height:1}.renown-slot.active-marked{border-color:#8b5cf6!important;box-shadow:0 0 14px #8b5cf640}.renown-slot.slot-capacity-locked{border-color:#ffffff0d;background:repeating-linear-gradient(45deg,#ffffff05,#ffffff05 8px,#00000040 8px,#00000040 16px);cursor:not-allowed;opacity:.55}.renown-slot.slot-capacity-locked:hover{transform:none;border-color:#ffffff14}.renown-slot.drag-drop-valid{border-color:#38bdf8!important;background:#38bdf814!important;box-shadow:0 0 16px #38bdf840}.renown-slot.drag-drop-invalid{border-color:#ef444466!important;background:#ef44440d!important;cursor:no-drop!important;opacity:.45}.renown-slot.occupied{border-style:solid;border-color:var(--border-active);background:#141418;animation:socket-snap .22s cubic-bezier(.34,1.56,.64,1)}.renown-notch-pips{position:absolute;bottom:5px;left:6px;display:flex;gap:3px}.renown-notch-pip{width:5px;height:5px;border-radius:50%;background:var(--accent-gold);box-shadow:0 0 4px #f59e0b99}.renown-slot.drag-target-hover{border-color:var(--accent-gold)!important;border-style:dashed!important;background:#252216!important;transform:scale(1.08)!important;box-shadow:0 0 20px #e0b43066!important}.renown-slot img{width:32px;height:32px;image-rendering:pixelated;pointer-events:none}.renown-slot .slot-cost{position:absolute;bottom:4px;right:6px;font-size:11px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}.renown-slot .slot-rank{position:absolute;top:4px;left:6px;font-size:11px;font-weight:700;color:var(--accent-gold)}.renown-socket-popover{position:absolute;z-index:500;background:var(--bg-surface);border:1px solid var(--accent-gold);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 16px 36px #000000b3;width:220px}.renown-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}@media (max-width: 1024px){.renown-workspace{grid-template-columns:1fr}}.renown-library-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px}.renown-marks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;max-height:720px;overflow-y:auto;padding-right:4px}.renown-marks-grid::-webkit-scrollbar{width:6px}.renown-marks-grid::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}.renown-mark-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease;position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.renown-mark-card:hover{border-color:var(--border-active);transform:translateY(-2px);box-shadow:0 6px 16px #0006}.renown-mark-card:active{cursor:grabbing}.renown-mark-card.is-dragging{opacity:.45;transform:scale(.96)}.renown-mark-card.equipped-in-belt{border-color:var(--accent-gold);background:#141419}.renown-mark-card.unowned-locked{opacity:.42;filter:grayscale(.6);cursor:not-allowed}.renown-card-icon{width:36px;height:36px;image-rendering:pixelated;background:#111216;border-radius:8px;padding:2px;border:1px solid var(--border-subtle);flex-shrink:0;pointer-events:none}.renown-rank-selector{display:flex;gap:2px;background:var(--bg-surface);border-radius:6px;padding:2px;border:1px solid var(--border-subtle)}.renown-rank-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-sans);font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;cursor:pointer;transition:all .12s ease}.renown-rank-btn:hover{color:var(--text-primary)}.renown-rank-btn.active{background:var(--bg-elevated);color:var(--accent-gold);box-shadow:0 1px 3px #00000059}.renown-inspector-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:16px}.renown-pill{padding:2px 7px;border-radius:4px;font-weight:600;font-size:11px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px}.renown-pill-cost{background:#2a2a32;color:#e4e4e7}.renown-pill-discount{background:#3b2a10;color:var(--accent-gold);border:1px solid rgba(245,158,11,.4)}.renown-pill-common{background:#a0a5af26;color:#a0a5af}.renown-pill-uncommon{background:#4bc36926;color:#4bc369}.renown-pill-rare{background:#4696e626;color:#4696e6}.renown-pill-epic{background:#be5feb26;color:#be5feb}.renown-pill-mythic{background:#facd4626;color:#facd46}.renown-pill-keystone{background:#f59e0b33;color:var(--accent-gold);border:1px solid rgba(245,158,11,.4)}.renown-pill-active{background:#4c1d95;color:#ddd6fe}.renown-pill-locked{background:#26262b;color:#a1a1aa}.renown-card-desc{font-size:11px;color:var(--text-secondary);line-height:1.45;flex:1}.renown-rank-active-text{color:var(--text-primary);font-weight:700}.renown-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--border-subtle)}.renown-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#09090bcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1100;display:flex;align-items:center;justify-content:center}.renown-modal-dialog{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;width:540px;max-width:92vw;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 40px #0009}.renown-drawer-panel{position:fixed;top:0;right:0;bottom:0;width:640px;max-width:95vw;background:#121215;border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;z-index:1001;box-shadow:-10px 0 40px #000000b3}@keyframes keystone-epic-pulse{0%,to{box-shadow:0 0 0 2px #f59e0b40,0 0 14px #f59e0b40,inset 0 0 12px #f59e0b26}50%{box-shadow:0 0 0 3px #f59e0b73,0 0 26px #f59e0b80,inset 0 0 20px #f59e0b4d}}@keyframes keystone-float{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes keystone-halo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes socket-snap{0%{transform:scale(.88)}70%{transform:scale(1.06)}to{transform:scale(1)}}@media (max-width: 768px){.renown-container{padding:16px 12px 64px;gap:16px}.renown-top-header{padding:12px 14px;gap:12px}.renown-brand-group{width:100%;justify-content:space-between}.renown-brand-title{font-size:1.05rem}.renown-btn{padding:6px 10px;font-size:11px}.renown-belt-chassis{padding:14px 12px}.renown-chassis-header{flex-direction:column;align-items:flex-start;gap:8px}.renown-slots-grid{grid-template-columns:repeat(5,1fr);gap:6px}.renown-slot{min-height:58px}.renown-slot img{width:28px;height:28px}.renown-slot.keystone-anchor img.keystone-occupied-img{width:34px!important;height:34px!important}.renown-library-panel{padding:14px}.renown-marks-grid{grid-template-columns:1fr;max-height:580px}.renown-drawer-panel{width:100vw;max-width:100vw}.renown-modal-card{width:95vw;max-width:95vw;padding:14px}}@media (max-width: 480px){.renown-slots-grid{grid-template-columns:repeat(5,1fr);gap:4px}.renown-slot{min-height:54px}.keystone-empty-title,.keystone-empty-sub{font-size:10px}}