/* N1.7 -- replicate KATTITO navigability with CAELYTTE's Silver tokens. */
#hud-root .hud-dialog:has(.functional-content){width:min(1510px,calc(100vw - 18px));height:min(96vh,950px);max-height:calc(100vh - 12px)}
#hud-root .hud-dialog-content.functional-content{flex:1;min-height:0;overflow:auto;padding:10px 12px 20px;scrollbar-color:#727D8B #08090B}
#hud-root .functional-shell{display:flex;flex-direction:column;gap:12px;min-height:100%;color:#F1F3F6}
#hud-root .functional-header-note{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:7px 12px;border:1px solid #48515D;border-radius:8px;background:#171B21}
#hud-root .functional-header-note strong{font:800 18px Georgia,serif;color:#D4DAE2}
#hud-root .functional-header-note span{font:12px system-ui,sans-serif;color:#AAB4C0}
#hud-root .functional-note{font:12px/1.5 system-ui,sans-serif;color:#AAB4C0}
#hud-root .functional-feedback{margin:0;padding:8px 12px;border:1px solid #727D8B;border-radius:5px;color:#D4DAE2}
#hud-root .functional-feedback[data-error=true]{border-color:#b66c73}
#hud-root .functional-tabs,#hud-root .functional-loadout-tabs{display:flex;flex-wrap:wrap;gap:6px}
#hud-root .functional-tab{padding:7px 11px;min-height:32px;border:1px solid #48515D;background:#08090B;color:#AAB4C0;font:700 12px system-ui,sans-serif}
#hud-root .functional-tab.selected,#hud-root .functional-sidebar-button.selected,#hud-root .functional-item-pick.selected,#hud-root .functional-art-card.selected{border-color:#D4DAE2!important;background:#293039!important;color:#F1F3F6!important}
#hud-root .functional-loadouts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
#hud-root .functional-loadouts>.functional-loadout-tabs{flex:1}
#hud-root .functional-art-slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
#hud-root .functional-art-slot{position:relative;display:grid;place-items:center;grid-template-rows:auto 1fr auto;min-height:88px;min-width:0;padding:5px 2px;border:1px solid #727D8B;border-radius:7px;background:#08090B;color:#F1F3F6}
#hud-root .functional-art-slot b{position:absolute;top:2px;left:7px;font:700 11px system-ui}
#hud-root .functional-art-slot img{width:54px;height:54px;object-fit:contain}
#hud-root .functional-art-slot small{font:10px system-ui;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
#hud-root .functional-threecols{display:grid;grid-template-columns:minmax(140px,19%) minmax(200px,41%) minmax(190px,1fr);gap:10px;min-height:400px}
#hud-root .functional-arts.functional-shell>.functional-threecols{grid-template-columns:minmax(380px,1.8fr) minmax(275px,1fr)}
#hud-root .functional-sidebar,#hud-root .functional-library,#hud-root .functional-list-panel,#hud-root .functional-detail,#hud-root .functional-fusions-stage{border:1px solid #48515D;border-radius:7px;padding:12px;background:#171B21;min-width:0}
#hud-root .functional-sidebar h3,#hud-root .functional-library h3,#hud-root .functional-list-panel h3,#hud-root .functional-detail h3{font:700 16px Georgia,serif;margin:0 0 12px;color:#D4DAE2}
#hud-root .functional-detail h2{font:700 23px Georgia,serif;margin:10px 0;color:#F1F3F6}
#hud-root .functional-detail p{font:12px/1.5 system-ui;color:#AAB4C0}
#hud-root .functional-detail button{margin:5px 7px 5px 0}
#hud-root .functional-sidebar-button{display:block;width:100%;margin:5px 0;text-align:left;border:1px solid #48515D;padding:11px;background:#08090B;font:700 13px Georgia,serif;color:#D4DAE2}
#hud-root .functional-item-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;margin-top:8px}
#hud-root .functional-item-pick{display:block;text-align:left;width:100%;padding:8px 10px;border:1px solid #48515D;background:#08090B;color:#D4DAE2;font:12px system-ui,sans-serif}
#hud-root .functional-search{display:block;width:100%;margin:7px 0 6px;padding:10px;background:#08090B;color:#F1F3F6;border:1px solid #727D8B}
#hud-root .functional-art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:7px;max-height:53vh;overflow-y:auto;margin-top:12px}
#hud-root .functional-art-card{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0;min-height:110px;padding:6px 4px;border:1px solid #48515D;background:#08090B;color:#F1F3F6}
#hud-root .functional-art-card img{height:62px;width:62px;object-fit:contain}
#hud-root .functional-art-card span{font:700 11px/1.2 Georgia,serif;text-align:center}
#hud-root .functional-art-card small{font:10px system-ui;color:#AAB4C0}
#hud-root .functional-art-card.locked{opacity:.65}
#hud-root .functional-art-preview{width:min(125px,100%);aspect-ratio:1;object-fit:contain;display:block;margin:auto}
#hud-root .functional-stats{margin-top:10px;border-top:1px solid #48515D}
#hud-root .functional-stat{display:flex;gap:20px;justify-content:space-between;border-bottom:1px solid #48515D;padding:7px 0;font:12px system-ui}
#hud-root .functional-stat strong{color:#F1F3F6}
#hud-root .functional-fusions{display:grid;grid-template-columns:minmax(160px,20%) 1fr;gap:12px;min-height:480px}
#hud-root .functional-fusions-stage{min-width:0;overflow:visible}
#hud-root .functional-upgrade{grid-template-columns:minmax(180px,1fr) minmax(190px,1fr) minmax(210px,1.2fr)}
#hud-root .functional-recipe-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:8px;max-height:60vh;overflow-y:auto}
#hud-root .functional-recipe-preview{display:flex;flex-direction:column;gap:9px;border:1px solid #48515D;border-radius:7px;background:#08090B;padding:10px}
#hud-root .functional-recipe-preview small{color:#AAB4C0}
@media(max-width:940px){#hud-root .functional-threecols,#hud-root .functional-upgrade{grid-template-columns:1fr 1fr}#hud-root .functional-threecols>.functional-detail{grid-column:1/-1}#hud-root .functional-art-slots{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:590px){#hud-root .functional-threecols,#hud-root .functional-fusions,#hud-root .functional-upgrade,#hud-root .functional-arts.functional-shell>.functional-threecols{grid-template-columns:1fr}#hud-root .functional-threecols>.functional-detail{grid-column:auto}#hud-root .functional-art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#hud-root .functional-art-slot img{width:44px;height:44px}}
/* CAELYTTE D2: colores exclusivamente visuales aprobados por el Director. */
#hud-root .stat-tone-vitality{color:#F47BAA!important}
#hud-root .stat-tone-fire{color:#FF625D!important}
#hud-root .stat-tone-water{color:#4DA8FF!important}
#hud-root .stat-tone-earth{color:#C99A58!important}
#hud-root .stat-tone-air{color:#7DE88C!important}
#hud-root .stat-tone-energy{color:#E8C15D!important}
#hud-root .stat-tone-movement{color:#258752!important}
#hud-root .stat-tone-critical{color:#FF963E!important}
#hud-root .stat-tone-wisdom{color:#B78AF5!important}
#hud-root .stat-tone-fortune{color:#74D9F4!important}
#hud-root .functional-item-art{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;min-width:0;border:1px solid #48515D;border-radius:6px;background:#08090B;overflow:hidden}
#hud-root .functional-item-art-image{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%}
#hud-root .functional-item-art-placeholder{color:#727D8B;font:700 22px Georgia,serif}
#hud-root .functional-detail-art{width:96px;height:96px;margin:8px auto}
#hud-root .functional-detail-art .functional-item-art-placeholder{font-size:46px}
#hud-root .functional-item-heading{display:flex;align-items:center;gap:10px;min-width:0}
#hud-root .functional-item-heading span:last-child{min-width:0;overflow-wrap:anywhere}
#hud-root .functional-stat-label{min-width:0;overflow-wrap:anywhere}
#hud-root .functional-stat-value{white-space:nowrap;font-variant-numeric:tabular-nums}
#hud-root .functional-empty-note{padding:10px;border:1px dashed #48515D;border-radius:5px;text-align:center}
#hud-root .functional-recipe-preview .functional-item-art{width:54px;height:54px}
#hud-root .functional-material-qty{font-variant-numeric:tabular-nums}
#hud-root .functional-compact-note{margin:4px 0 8px}
#hud-root .functional-search:focus-visible,#hud-root .functional-item-pick:focus-visible,#hud-root .functional-sidebar-button:focus-visible{outline:2px solid #D4DAE2;outline-offset:2px}
#hud-root .functional-item-pick:disabled{opacity:.55;cursor:not-allowed}

/* N1.7.3 D2 · legibilidad Caelypedia/Fusiones y coherencia con Inventario. */
#hud-root .functional-item-pick .functional-item-heading>span:last-child{font-weight:800;line-height:1.35}
#hud-root .functional-detail h2{font-weight:900;line-height:1.23;overflow-wrap:anywhere}
#hud-root .functional-item-heading>strong{font-weight:900;overflow-wrap:anywhere}
#hud-root .functional-stat{font-weight:800;font-size:13px;line-height:1.4;align-items:baseline;min-width:0}
#hud-root .functional-stat strong{font-weight:900;white-space:nowrap;flex:0 0 auto}
#hud-root .functional-item-art-image{object-fit:contain;object-position:center}
#hud-root .functional-detail-art .functional-item-art-image{padding:6px;box-sizing:border-box}
#hud-root .functional-item-heading{min-width:0;overflow-wrap:anywhere}

/* N1.7.3.2 D2 — cabecera propia y adaptable de equipamientos en Caelypedia */
#hud-root .functional-detail{container-type:inline-size}
#hud-root .functional-detail-header{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:16px;align-items:start;margin-top:4px}
#hud-root .functional-detail-hero-art{width:200px;height:200px;max-width:100%;justify-self:center;align-self:start;border-radius:10px;background:#0E1116;border:1px solid #48515D;box-shadow:0 1px 8px rgba(0,0,0,.22)}
#hud-root .functional-detail-hero-art .functional-item-art-image{width:100%;height:100%;object-fit:contain}
#hud-root .functional-detail-hero-art .functional-item-art-placeholder{font-size:62px}
#hud-root .functional-detail-meta{min-width:0;display:flex;flex-direction:column;gap:6px}
#hud-root .functional-detail-meta h2{margin:0 0 4px;line-height:1.15;overflow-wrap:anywhere}
#hud-root .functional-detail-meta-line{margin:0;color:#D4DAE2;font:700 13px/1.45 system-ui,sans-serif;overflow-wrap:anywhere}
@container (max-width:440px){#hud-root .functional-detail-header{grid-template-columns:1fr}#hud-root .functional-detail-hero-art{width:min(200px,100%);height:200px;max-height:60vw}}
@media(max-width:590px){#hud-root .functional-detail-header{grid-template-columns:1fr}#hud-root .functional-detail-hero-art{width:min(200px,100%);height:200px}}


/* N1.7.4 · detalles visuales de contenido pasivo, siguiendo el HUD Silver aprobado. */
#hud-root .functional-detail-description{font:600 13px/1.5 system-ui,sans-serif;color:#D4DAE2;margin:8px 0}
#hud-root .functional-detail-related-title{margin:12px 0 6px;color:#E0E6EF;font:800 13px/1.4 system-ui,sans-serif}
#hud-root .functional-detail-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
#hud-root .functional-related-entry{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid #48515D;border-radius:8px;background:#0E1116;color:#D4DAE2;text-align:center;font:700 12px/1.3 system-ui,sans-serif}
#hud-root .functional-related-art{width:96px;height:96px;max-width:100%;}
#hud-root .functional-related-art img{object-fit:contain;width:100%;height:100%}

/* N1.7.4.1 — sprites completos; proporciones originales sin recorte de contenido. */
#hud-root .functional-detail-header:has(.functional-monster-full-art){grid-template-columns:minmax(190px,260px) minmax(0,1fr)}
#hud-root .functional-monster-full-art{box-sizing:border-box;width:260px;height:260px;max-width:100%;padding:6px;overflow:hidden;display:grid;place-items:center}
#hud-root .functional-monster-full-art .functional-item-art-image{display:block;box-sizing:border-box;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain!important;object-position:center center}
@container (max-width:490px){#hud-root .functional-detail-header:has(.functional-monster-full-art){grid-template-columns:1fr}}

/* N1.7.4.2 · distribución Silver, sin copiar la paleta de KATTITO */
#hud-root .caelytte-recipe-explorer{display:grid;grid-template-columns:minmax(220px,37%) minmax(0,1fr);gap:12px;min-height:410px}
#hud-root .caelytte-recipe-explorer .functional-item-list{max-height:58vh}
#hud-root .caelytte-ingredient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin:10px 0}
#hud-root .caelytte-ingredient{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #48515D;border-radius:7px;background:#0e1116;font:12px system-ui}
/* N3.6.5: only recipe ingredient miniatures, not equipment/potion hero art. */
#hud-root .caelytte-ingredient{min-width:0;box-sizing:border-box}
#hud-root .caelytte-ingredient .caelytte-ingredient-art{display:grid;place-items:center;box-sizing:border-box;flex:0 0 48px;width:48px;height:48px;min-width:48px;max-width:48px;min-height:48px;max-height:48px;padding:3px;overflow:hidden}
#hud-root .caelytte-ingredient .caelytte-ingredient-art .functional-item-art-image{display:block;box-sizing:border-box;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center}
#hud-root .caelytte-ingredient .caelytte-ingredient-name{flex:1 1 0;min-width:0;overflow-wrap:anywhere;line-height:1.35}
#hud-root .caelytte-ingredient .caelytte-ingredient-count{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:510px){#hud-root .caelytte-ingredient-grid{grid-template-columns:minmax(0,1fr)}}
#hud-root .caelytte-craft-button{display:block;margin:12px auto;min-width:200px}
#hud-root .caelytte-origin-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
#hud-root .caelytte-origin-group>strong{width:100%}
#hud-root .caelytte-hover-chip{display:inline-flex;position:relative;padding:6px 10px;border:1px solid #727D8B;border-radius:15px;background:#10151a;color:#D4DAE2;cursor:help;font:12px system-ui}
#hud-root .caelytte-hover-tooltip{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:100;min-width:170px;max-width:220px;padding:12px;background:#08090B;border:1px solid #727D8B;border-radius:8px;box-shadow:0 8px 20px #000b;pointer-events:none}
#hud-root .caelytte-hover-chip:hover .caelytte-hover-tooltip,#hud-root .caelytte-hover-chip:focus-visible .caelytte-hover-tooltip{display:flex;flex-direction:column;align-items:center;gap:6px}
#hud-root .caelytte-zone-art{width:100%;height:260px;max-height:35vh;margin-bottom:12px}
@media(max-width:760px){#hud-root .caelytte-recipe-explorer{grid-template-columns:1fr}}

/* N1.7.4.3 · filtros de fabricación y mapa del Refugio */
#hud-root .caelytte-crafting-filters{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 14px}
#hud-root .caelytte-craft-filter{border:1px solid #596675;border-radius:8px;background:#171e27;color:#D5DEE8;padding:8px 14px;cursor:pointer;font:600 13px system-ui}
#hud-root .caelytte-craft-filter.selected{background:#37495d;border-color:#a4b7c8;color:#fff}
#hud-root .caelytte-zone-art{display:block;width:100%;height:auto;min-height:150px;max-height:360px;box-sizing:border-box;padding:8px;border:1px solid #4e5c6a;border-radius:10px;background:#0a0d11;text-align:center}
#hud-root .caelytte-zone-art .functional-item-art-image{width:100%;height:100%;max-height:340px;object-fit:contain;object-position:center}
#hud-root .caelytte-zone-relations{margin-top:14px}
#hud-root .caelytte-zone-chips{display:flex;flex-wrap:wrap;gap:8px}

/* N1.7.4.7 · ficha de Artes, solo panel derecho; no cambia la biblioteca ni el modal. */
#hud-root .caelytte-art-detail{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:530px;overflow:hidden}
#hud-root .caelytte-art-detail h3{margin:0}
#hud-root .caelytte-art-hero{display:grid;grid-template-columns:154px minmax(0,1fr);gap:14px;align-items:center}
#hud-root .caelytte-art-hero .functional-art-preview{width:150px;height:150px;max-width:100%;object-fit:contain;margin:0;border-radius:8px}
#hud-root .caelytte-art-meta{min-width:0}
#hud-root .caelytte-art-meta h2{font-size:20px;margin:0 0 6px;overflow-wrap:anywhere}
#hud-root .caelytte-art-meta p{margin:3px 0}
#hud-root .caelytte-art-ranks{display:flex;align-items:center;flex-wrap:wrap;gap:4px;border-block:1px solid #48515D;padding:5px 0}
#hud-root .caelytte-art-ranks strong{font:700 12px system-ui;margin-right:auto}
#hud-root .caelytte-art-ranks button{margin:0;padding:5px 8px;min-width:30px}
#hud-root .caelytte-art-scroll{overflow-y:auto;overflow-x:hidden;min-height:55px;flex:1;padding:5px 22px 8px 2px;scrollbar-color:#727D8B #171B21;scrollbar-width:thin;scrollbar-gutter:stable}
#hud-root .caelytte-art-stats h4,#hud-root .caelytte-art-description h4{font:700 12px system-ui;letter-spacing:.05em;margin:6px 0}
#hud-root .caelytte-art-stat{display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid #343b46;padding:6px 0;font:12px/1.4 system-ui;align-items:baseline;min-width:0}
#hud-root .caelytte-art-stat strong{text-align:right;max-width:53%;overflow-wrap:anywhere;flex:0 1 auto}
#hud-root .caelytte-art-description{border-top:1px solid #48515D;margin-top:8px;padding-top:5px}
#hud-root .caelytte-art-description p{margin:4px 0}
#hud-root .caelytte-art-actions{display:flex;gap:7px;border-top:1px solid #48515D;padding-top:7px;flex-wrap:wrap}
#hud-root .caelytte-art-actions button{flex:1;margin:0;min-width:110px}
@media(max-width:590px){#hud-root .caelytte-art-detail{max-height:560px}}

/* N1.7.4.8 — espacio adaptable del HUD de Artes, manteniendo la ventana exterior. */
#hud-root .caelytte-art-hero .functional-art-preview{flex:0 0 auto;image-rendering:auto}
#hud-root .caelytte-art-stats{padding-right:3px}
#hud-root .caelytte-art-description{padding-right:3px}
@container (max-width:365px){#hud-root .caelytte-art-hero{grid-template-columns:130px minmax(0,1fr);gap:10px}#hud-root .caelytte-art-hero .functional-art-preview{width:128px;height:128px}}

/* RC03-LoS / FROZEN01 LAB: official rank-I availability labels, no layout reshuffle. */
#hud-root .caelytte-art-availability{font:600 10px/1.3 system-ui;white-space:normal;text-align:center}
#hud-root .caelytte-art-availability.available{color:#80dda7}
#hud-root .caelytte-art-availability.learned{color:#eac278}
#hud-root .caelytte-art-availability.level,#hud-root .caelytte-art-availability.currency{color:#bbc5d2}
#hud-root .caelytte-art-availability.unknown{color:#e4a979}
#hud-root .caelytte-art-next-requirements{flex-basis:100%;margin:0;color:#eac278;font:600 12px/1.4 system-ui}