@font-face{
    font-family:'Cinzel';
    src:url('../assets/fonts/cinzel-variable.ttf') format('truetype');
    font-style:normal;
    font-weight:400 900;
    font-display:swap;
}
@font-face{
    font-family:'Source Sans 3';
    src:url('../assets/fonts/source-sans-3-latin.woff2') format('woff2');
    font-style:normal;
    font-weight:200 900;
    font-display:swap;
}
@font-face{
    font-family:'Source Sans 3';
    src:url('../assets/fonts/source-sans-3-italic-latin.woff2') format('woff2');
    font-style:italic;
    font-weight:200 900;
    font-display:swap;
}

:root{
    --font-ui:'Source Sans 3','Segoe UI',Arial,sans-serif;
    --font-medieval:'Cinzel',Georgia,'Times New Roman',serif;
    --ui-scale:1;
    --bg:#1a2230;
    --panel:rgba(16,22,34,0.92);
    --gold:#ffce54;
    --line:rgba(255,255,255,0.10);
    --ok:#48cf7b;
    --bad:#e8574a;
    --info:#5aa9ff;
    --dia:#7fe6ff;
    --txt:#e7ecf5;
    --sub:#93a3ba;
    /* escala de espaciado */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
    --r:10px;
}

/* Ajuste final de geometría tras retirar la segunda barra permanente. */
#screen{bottom:54px!important}
@media(max-width:639px){
    #panel,#panel.panel-search{bottom:54px!important}
}
#worldCoords{bottom:64px!important}
/* pila de fuentes de emojis para que NO salgan como cuadrado (tofu) */
.emoji,#topbar i,.res i,#actionbar button,#viewtabs button,.card,.btn,.chip{
    font-family:'Source Sans 3','Segoe UI',system-ui,Arial,'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji','Twemoji Mozilla',sans-serif;
}
img.emoji{height:1.15em;width:1.15em;margin:0 .05em 0 .05em;vertical-align:-0.18em;display:inline-block;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:3px solid #7fe6ff!important;outline-offset:2px!important;}
button,input,select,textarea{font-size:calc(1em * var(--ui-scale));}
.high-contrast{--bg:#000;--panel:rgba(0,0,0,.98);--txt:#fff;--sub:#d5deeb;--line:rgba(255,255,255,.38);--gold:#ffe16b;--ok:#62ff9c;--bad:#ff6f61;}
.high-contrast #city3d,.high-contrast #world3d{filter:contrast(1.18) saturate(1.08);}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--txt);
    font-family:'Source Sans 3','Segoe UI',system-ui,Arial,'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;user-select:none;font-size:calc(16px * var(--ui-scale));}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
.profile-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}.profile-summary-grid>div{display:grid;gap:5px;padding:12px 8px;text-align:center;border:1px solid #65451c;background:linear-gradient(#2c1b13,#120e0c);color:#d9c69d}.profile-summary-grid b{font:700 15px var(--font-medieval);color:#f0c65f}.profile-summary-grid span{font-size:10px}
.profile-advanced{border:1px solid #65451c;background:#1a120e}.profile-advanced>summary{display:flex;justify-content:space-between;padding:13px;color:#f0cd78;font:700 14px var(--font-medieval);cursor:pointer;list-style:none}.profile-advanced>summary::-webkit-details-marker{display:none}.profile-advanced[open]>summary span{transform:rotate(90deg)}.profile-advanced-body{padding:8px}
.profile-skills-button{margin:10px 0}.player-skill-summary{display:grid;place-items:center;gap:4px;padding:14px;margin-bottom:12px;border:1px solid #76531f;background:radial-gradient(circle at 50% 20%,#55301c,#130e0c 70%);color:#dbc69a}.player-skill-summary b{font:900 30px var(--font-medieval);color:#f2c55c}.player-skill-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.player-skill-branch{padding:8px;border:1px solid #59401e;background:#120f0d}.player-skill-branch h3{text-align:center;margin:2px 0 9px;font:700 14px var(--font-medieval);color:#e6bd62}.player-skill-grid{display:grid;gap:8px}.player-skill-node{position:relative;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 7px;min-height:70px;padding:7px;text-align:left;border:1px solid #4f4436;background:linear-gradient(145deg,#24211e,#0e0d0c);color:#c9bea7}.player-skill-node i{grid-row:1/3;font-style:normal;font-size:28px;text-align:center}.player-skill-node b{font-family:var(--font-medieval);color:#e5d2a5}.player-skill-node small{font-size:9px}.player-skill-node em{position:absolute;right:4px;bottom:3px;font-style:normal;color:#dba52c}.player-skill-node.learned{border-color:#c58c25;box-shadow:0 0 8px rgba(211,145,34,.25)}.player-skill-node:disabled{filter:grayscale(.85);opacity:.58}.branch-combate{border-top-color:#9b3026}.branch-desarrollo{border-top-color:#2a6e86}.branch-soporte{border-top-color:#5a7b32}
@media(max-width:600px){.player-skill-tree{display:block}.player-skill-branch{margin-bottom:10px}.player-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.player-skill-node{display:flex;flex-direction:column;min-height:112px;text-align:center}.player-skill-node i{font-size:31px}.player-skill-node small{line-height:1.1}}
@media(max-width:430px){.profile-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.options-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;background:transparent!important;border:0!important}
.options-grid .menuitem{min-height:104px;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:44px auto;place-items:center;text-align:center;padding:10px 7px!important;border:1px solid #5b3b16!important;background:radial-gradient(circle at 50% 18%,#49311f,#17110e 72%)!important;color:#f0ddb0!important;box-shadow:inset 0 1px rgba(255,225,154,.2),0 3px 8px rgba(0,0,0,.2)}
.options-grid .menuitem .mi-ico{font-size:30px!important}.options-grid .menuitem .mi-lbl{font-family:var(--font-medieval);font-size:12px;line-height:1.15;color:#f1d38d}.options-grid .menuitem .mi-arrow{display:none}
@media(max-width:430px){.options-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.options-grid .menuitem{min-height:94px}.options-grid .menuitem .mi-lbl{font-size:10px}}
.option-row input[type="range"]{width:min(48%,190px);}.option-row input[type="checkbox"]{width:22px;height:22px;accent-color:var(--gold);}
#topbar,#playercard,#queuehud,#chathud,#viewtabs,#panel,#minimapWrap,#marchas,#cityctrls,#bottomnav,#bottomnav2,#fabBuild,#fabSearch,#fabShop,#screen,.tw-modal,#toast{zoom:var(--ui-scale);}
#city3d,#world3d{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;cursor:grab;}
#city3d:active,#world3d:active{cursor:grabbing;}

/* ================= SISTEMA DE DISEÑO (kit) ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;
    font-weight:700;font-size:13px;padding:9px 12px;border-radius:9px;transition:.12s;color:#08210f;background:var(--ok);}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn:disabled{background:#3a4658;color:#7d8ba0;cursor:not-allowed}
.btn.sec{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid var(--line)}
.btn.gold{background:var(--gold);color:#20160a}
.btn.bad{background:var(--bad);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:7px}
.btn.dia{background:linear-gradient(#8fe9ff,#4fb8e8);color:#053040}
.chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);border:1px solid var(--line);
    padding:3px 8px;border-radius:20px;font-size:12px;font-variant-numeric:tabular-nums}
.chip.no{color:var(--bad);border-color:rgba(232,87,74,.4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* barra de progreso con % */
.pbar{position:relative;height:16px;border-radius:8px;background:rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--line)}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,#48cf7b,#8ce0a8);transition:width .3s}
.pbar.gold>i{background:linear-gradient(90deg,#ffce54,#ffe6a3)}
.pbar>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;
    font-weight:700;color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}

/* modal / hoja inferior */
.tw-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;
    justify-content:center;backdrop-filter:blur(3px);animation:ov .18s ease}
@keyframes ov{from{opacity:0}}
.tw-modal{width:min(460px,96vw);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);
    border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);animation:sheet .2s cubic-bezier(.2,.9,.3,1)}
@keyframes sheet{from{transform:translateY(30px);opacity:.6}}
@media(min-width:640px){.tw-ov{align-items:center}.tw-modal{border-radius:16px}}
@media(max-width:600px){
    .tw-ov,#panel,#screen,.scr-head,.scr-tabs,#bottomnav{backdrop-filter:none!important}
}

/* Ficha de héroe: estadísticas completas y habilidad adaptable. */
#screen[data-screen="heroe"] .hero-upgrade-data>header{align-items:center}
#screen[data-screen="heroe"] .hero-upgrade-data>header>div:first-child>span,
#screen[data-screen="heroe"] .hero-upgrade-description{display:none!important}
#screen[data-screen="heroe"] .hero-upgrade-data-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);grid-template-rows:auto;gap:10px;align-items:stretch}
#screen[data-screen="heroe"] .hero-stat-panel .row b{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;text-align:right}
#screen[data-screen="heroe"] .hero-stat-panel .row>span,
#screen[data-screen="heroe"] .hero-stat-panel .row b,
#screen[data-screen="heroe"] .hero-stat-panel .row b small{color:#000!important;text-shadow:none!important;opacity:1!important}
#screen[data-screen="heroe"] .hero-stat-panel .row b small{font-size:9px;font-weight:900;white-space:nowrap}
#screen[data-screen="heroe"] .hero-march-bonus b{font-size:11px}
@media(max-width:1050px){
    #screen[data-screen="heroe"] .hero-upgrade-data-grid{grid-template-columns:1fr}
    #screen[data-screen="heroe"] .hero-skill-summary{grid-column:1/-1}
}

/* Marcos ilustrados para los nueve slots de héroes y soberano. */
.tw-modal .shared-equipment-manager button.hero-manager-slot{background-color:#050607!important;background-image:var(--slot-bg)!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;border-color:var(--rarity)!important;overflow:hidden}
.tw-modal .shared-equipment-manager button.hero-manager-slot.on{background-image:var(--slot-bg)!important}
.equipment-manager-main .hero-manager-slot.equipped>img{position:relative;z-index:1;width:62%!important;height:62%!important;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 3px 3px #000) drop-shadow(0 0 3px var(--rarity))}
.equipment-manager-main .hero-manager-slot.empty{opacity:1!important}
#screen[data-screen="perfil"] .profile-loadout-slot{background:#130e0c;border-color:var(--rarity)}
#screen[data-screen="perfil"] .profile-slot-art{width:52px;height:52px;display:grid;place-items:center;background-image:var(--slot-bg);background-position:center;background-size:cover;background-repeat:no-repeat}
#screen[data-screen="perfil"] .profile-slot-art>img{position:relative;width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 2px 3px #000) drop-shadow(0 0 2px var(--rarity))}
#screen[data-screen="perfil"] .profile-slot-copy{min-width:0;display:grid;gap:2px;margin-left:2px}
@media(max-width:600px){#screen[data-screen="perfil"] .profile-slot-art{width:38px;height:38px}#screen[data-screen="perfil"] .profile-loadout-slot{grid-template-columns:38px minmax(0,1fr)}}

/* Límites de lectura en Héroes: ficha/equipo y carrusel forman un único bloque
   centrado; el altar mantiene una anchura algo menor. */
#screen[data-screen="heroe"] .hero-upgrade-shell{
    width:min(1450px,100%);margin-inline:auto;box-sizing:border-box;
}
#screen[data-screen="heroes"] .summon-altar{
    width:min(1400px,100%);margin-inline:auto;box-sizing:border-box;
}

/* Cierre dorado coherente en las dos vistas de héroes. */
#screen[data-screen="heroes"] .scr-close,
#screen[data-screen="heroe"] .scr-close{
    width:40px!important;height:40px!important;border-radius:50%!important;
    color:#080502!important;border:1px solid #81570b!important;
    background:linear-gradient(145deg,#fff1a6,#f4c83f 52%,#c88a0a)!important;
    box-shadow:inset 0 1px #fff9d9,inset 0 -2px #8b5908,0 2px 7px #0008!important;
    text-shadow:none!important;
}

/* Forja: filtros metálicos como el resto de pantallas y requisitos verticales,
   con iconografía aprovechando el alto completo de cada fila. */
#screen[data-screen="inventario"] .forge-type-filter{
    display:flex!important;justify-content:flex-start!important;gap:7px!important;
    padding:7px 8px!important;overflow-x:auto;scrollbar-width:thin;
    background:linear-gradient(180deg,#765943,#513c2f)!important;
}
#screen[data-screen="inventario"] .forge-type-filter button{
    flex:0 0 auto!important;width:auto!important;min-width:104px!important;min-height:36px!important;
    padding:7px 13px!important;border:1px solid #59432d!important;border-radius:3px!important;
    background:linear-gradient(#e3c493,#ad8963)!important;color:#21150b!important;
    box-shadow:inset 0 1px #fff1c8,inset 0 -2px #6d4c31,0 2px 4px #0005!important;
    font:800 12px Arial,sans-serif!important;
}
#screen[data-screen="inventario"] .forge-type-filter button.on{
    background:linear-gradient(#f6d56d,#c48a22)!important;border-color:#895d15!important;color:#160d04!important;
}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs{
    display:grid;grid-template-columns:minmax(0,1fr)!important;gap:5px;
}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs>span{
    min-height:52px;padding:6px 10px;grid-template-columns:38px minmax(0,1fr) auto;column-gap:9px;
}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs i,
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs img{
    grid-row:1/span 2;width:34px;height:34px;font-size:28px;align-self:center;object-fit:contain;
}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs small{
    font-size:10px!important;overflow:visible;white-space:normal;
}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs b{
    grid-column:3;grid-row:1/span 2;align-self:center;font-size:12px;white-space:nowrap;
}
#screen[data-screen="inventario"] .forge-gallery-details footer{justify-content:center;padding-top:12px}
#screen[data-screen="inventario"] .forge-gallery-details footer .btn{min-width:170px;width:auto}
@media(max-width:600px){
    #screen[data-screen="inventario"] .forge-type-filter button{min-width:88px!important;padding-inline:10px!important;font-size:11px!important}
    #screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs>span{min-height:48px;padding:5px 8px;grid-template-columns:34px minmax(0,1fr) auto}
    #screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs i,
    #screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs img{width:30px;height:30px;font-size:25px}
}
.tw-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.tw-head h2{font-size:17px;display:flex;align-items:center;gap:8px}
.tw-head .x{background:none;border:none;color:#8fa0b8;font-size:20px;cursor:pointer;line-height:1}
.tw-body{padding:14px 16px}
.tw-acts{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--panel)}
.tw-acts .btn{flex:1}

/* pestañas */
.tabs{display:flex;gap:6px;background:rgba(0,0,0,.25);padding:4px;border-radius:12px;margin-bottom:12px}
.tabs button{flex:1;background:transparent;border:none;color:#9fb0c8;padding:8px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer}
.tabs button.on{background:var(--gold);color:#20160a}

/* quick-actions (tap edificio) */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.06);
    border:1px solid var(--line);border-radius:12px;padding:12px 6px;color:var(--txt);cursor:pointer;font-size:12px;font-weight:600}
.qa button:hover{background:rgba(255,206,84,.15);border-color:var(--gold)}
.qa button b{font-size:24px;font-weight:400}
.qa button:disabled{opacity:.45}

/* tarjeta compacta de edificio (menú construir) */
.bcard{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:8px}
.bcard h4{font-size:12px;display:flex;align-items:center;gap:5px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .co{display:flex;gap:5px;flex-wrap:wrap;font-size:11px;margin:4px 0}
.bcard.lock{opacity:.5}

/* Integra el blanco de los sprites del catálogo con el papel de la tarjeta.
   Arca y Ferrum ya incluyen el fondo correcto y se excluyen desde el HTML. */
.build-card-grid .edimg-paper{mix-blend-mode:multiply}
.build-card-grid>.build-catalog-card{
    display:flex;flex-direction:column;gap:4px;min-width:0;padding:6px;border-radius:0;
}
.build-card-head{display:flex;align-items:center;gap:5px;border-bottom:1px solid rgba(73,48,17,.55)}
.build-card-head .sc-tit{flex:1;min-width:0;font-size:14px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-info-button{
    flex:0 0 22px;width:22px;height:22px;padding:0;border:0;background:transparent;color:#3c2915;
    font:700 16px/1 serif;cursor:pointer;
}
.build-info-button:hover,.build-info-button:focus-visible{color:#8b5d18;outline:1px solid #8b5d18;outline-offset:-2px}
.build-catalog-card>.sc-fun{min-height:15px;font-size:10px;font-weight:750;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-card-main{display:grid;grid-template-columns:74px minmax(0,1fr);gap:5px;align-items:start}
.build-catalog-card .sc-ico{width:74px;height:74px;flex:none;border-radius:0;background:#dfc995}
.build-catalog-card .sc-cost{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:0}
.build-catalog-card .sc-cost .chip{display:block;min-width:0;padding:3px 5px;text-align:left;white-space:nowrap}
.build-card-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:4px;margin-top:auto}
.build-card-meta>.chip{padding:2px 4px;white-space:nowrap}
.build-card-meta .sc-estado{font-size:9px;font-weight:750;line-height:1.15;color:#342410!important;text-align:right}
.build-card-action .btn{width:100%;min-height:30px;margin:0;border-radius:0}
.catalog-building-info .tw-body{overscroll-behavior:contain}

/* Banco de equipo: pergamino arena, inventario sin rótulos bajo cada pieza y
   tres paneles apaisados cuando hay anchura suficiente. */
.bank-upgrade-layout{width:100%;max-width:1250px;margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:1fr;gap:8px;color:#24170a}
.bank-upgrade-layout>section{min-width:0;padding:8px;border:1px solid #6d4a20;background:linear-gradient(180deg,#efdca9,#d8b978);box-shadow:inset 0 0 0 1px #fff5cf66}
.bank-upgrade-layout>section>h3{margin:0 0 7px;padding:4px;border-bottom:1px solid #76552d;color:#27180b;font:800 14px var(--font-medieval);text-align:center;text-transform:uppercase}
.bank-inventory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-height:252px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.bank-inventory-item{position:relative;aspect-ratio:1;min-width:0;padding:3px;border:2px solid var(--rarity);background:color-mix(in srgb,var(--rarity) 22%,#ead09a);color:var(--rarity-text);cursor:pointer;overflow:hidden}
.bank-inventory-item .equipment-grid-icon{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #2b170966)}
.bank-inventory-item small{position:absolute;right:2px;bottom:2px;padding:1px 3px;background:#ead09ae8;color:#21150a!important;font-size:8px;font-weight:900}
.bank-inventory-item.on{outline:2px solid #26170a;outline-offset:-4px;box-shadow:0 0 0 2px #f7e5b0,0 0 8px var(--rarity)}
.bank-preview-panel{display:grid;justify-items:center;align-content:start;gap:7px;text-align:center}
.bank-preview-art{width:min(150px,62%);aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--rarity);background:color-mix(in srgb,var(--rarity) 15%,#e4c98d)}
.bank-preview-art .equipment-viewer-art{width:100%;height:100%;object-fit:contain;background:transparent;border:0}
.bank-preview-identity{display:grid;gap:2px}.bank-preview-identity>b,.bank-preview-identity>span{color:var(--rarity-text);font-weight:900;text-transform:uppercase}.bank-preview-identity>b{font:900 17px var(--font-medieval)}.bank-preview-identity small{color:#422d17!important;font-weight:750}
.bank-preview-stats{width:100%;border-top:1px solid #76552d}.bank-preview-stats h4{margin:5px 0 3px;text-transform:uppercase}.bank-preview-stats>div{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:5px;background:#f1dfaf}.bank-preview-stats span{text-align:left;text-transform:capitalize}.bank-preview-stats i{font-style:normal;color:#4d7c24}.bank-preview-stats strong{color:#356b24}
.bank-cost-panel{display:flex;flex-direction:column}.bank-cost-body{display:grid;gap:7px;margin-bottom:10px}.bank-cost-body>div{display:flex;justify-content:space-between;gap:8px;padding:6px;border-bottom:1px solid #7f6037}.bank-cost-body b{text-align:right}.bank-upgrade-button{width:100%;margin-top:auto!important}
@keyframes bankUpgradeReady{0%,100%{box-shadow:0 0 0 1px #397520,0 0 3px #4b9c2d66}50%{box-shadow:0 0 0 2px #65a943,0 0 10px #55a533aa}}
.bank-inventory-item.upgrade-ready,.bank-upgrade-button.upgrade-ready{border-color:#3f7f29!important;background-color:#b9d69a!important;animation:bankUpgradeReady 1.8s ease-in-out infinite}
@media(min-width:780px){.bank-upgrade-layout{grid-template-columns:minmax(210px,.8fr) minmax(270px,1.1fr) minmax(210px,.8fr);align-items:stretch}.bank-inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:520px}.bank-preview-art{width:min(210px,78%)}}
@media(prefers-reduced-motion:reduce){.bank-inventory-item.upgrade-ready,.bank-upgrade-button.upgrade-ready{animation:none;box-shadow:0 0 0 2px #4d8b32}}
/* Banco alineado con la Forja: metal oscuro, rojo envejecido y color de rareza. */
.bank-upgrade-layout{color:#eadfc9}
.bank-upgrade-layout>section{border-color:#6f513c;background:linear-gradient(145deg,#3c221e 0%,#1b100f 46%,#08090c 100%);box-shadow:inset 0 1px #c89b7255,inset 0 0 0 1px #000,0 5px 14px #0008}
.bank-upgrade-layout>section>h3{padding:5px;color:#f0cf83;border-color:#76552d}
.bank-inventory-item{background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--rarity) 42%,#fff) 48%,var(--rarity) 100%)}
.bank-inventory-item .equipment-grid-icon{filter:drop-shadow(0 3px 3px #000b)}
.bank-inventory-item small{background:#08090cdd;color:#f2dfb7!important}
.bank-equipped-badge{position:absolute;z-index:2;top:3px;right:3px;width:19px;height:19px;display:grid;place-items:center;border:1px solid #f2d27d;border-radius:50%;background:linear-gradient(#8f3528,#421512);color:#fff4c8;font-size:10px;font-weight:950;line-height:1;box-shadow:0 2px 5px #000c}
.bank-inventory-item.on{outline-color:#f0cf83;box-shadow:0 0 0 2px #18100d,0 0 11px var(--rarity)}
.bank-upgrade-layout>.bank-preview-panel{background:radial-gradient(circle at 50% 31%,color-mix(in srgb,var(--rarity) 42%,#38201b) 0%,#170e0e 48%,#07080b 100%)}
.bank-preview-art{background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--rarity) 42%,#fff) 52%,var(--rarity) 100%);box-shadow:inset 0 0 18px #fff8,0 0 10px #000b}
.bank-preview-identity{padding:6px 12px;border-left:3px solid var(--rarity);border-right:3px solid var(--rarity);background:var(--rarity)}
.bank-preview-identity small{color:var(--rarity-text)!important;font-weight:800}
.bank-preview-stats h4{color:#e7c98a}.bank-preview-stats>div{padding:7px;border:1px solid #54402f;background:#090a0d}.bank-preview-stats span{color:#d8c4a0}.bank-preview-stats b{color:#f1d47f}.bank-preview-stats i{color:#72d878}.bank-preview-stats strong{color:#63e17a}
.bank-cost-body>div{padding:8px;border:1px solid #54402f;background:#090a0d;color:#d8c4a0}.bank-cost-body b{color:#f1d47f}
.scrollhint{text-align:center;font-size:11px;color:var(--sub);padding:6px 0 2px}

/* slider */
.tw-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#3a4658;border-radius:3px;margin:8px 0}
.tw-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid #20160a}

/* tooltip */
.tw-tip{position:fixed;z-index:120;max-width:220px;background:#0d1320f5;border:1px solid var(--line);
    color:var(--txt);font-size:12px;padding:8px 10px;border-radius:9px;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.5)}

/* hito (milestone) */
.hito{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px;margin-bottom:7px}
.hito.done{border-color:rgba(72,207,123,.4)}
.hito .lv{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,206,84,.15);color:var(--gold)}
.hito .gr{flex:1;font-size:12px}


/* ---- Minimapa ---- */
#minimapWrap{position:fixed;top:96px;right:16px;z-index:20;width:200px;box-sizing:border-box;padding:6px;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);
    box-shadow:0 8px 24px rgba(0,0,0,.4);}
#minimapWrap.hidden{display:none!important;}
#minimap{display:block;width:100%;height:auto;border-radius:8px;cursor:crosshair;background:#141d29;}
#minimapWrap.collapsed #minimap{display:none}
.hud-collapse-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--gold);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.35px}
.hud-collapse-head button{width:24px;height:24px;padding:0;border:1px solid rgba(255,206,84,.45);border-radius:5px;
    background:rgba(255,206,84,.1);color:var(--gold);font-size:17px;line-height:18px;cursor:pointer}
#minimapWrap .hud-collapse-head{margin-bottom:5px}
#minimapWrap.collapsed .hud-collapse-head{margin-bottom:0}
#minimapWrap.collapsed ~ #marchas:not(.in-city){top:142px}
@media(min-width:521px){
    #minimapWrap:not(.collapsed) ~ #marchas:not(.in-city){top:340px}
}

/* ---- Panel de marchas ---- */
#marchas{position:fixed;top:284px;right:16px;z-index:20;width:200px;box-sizing:border-box;max-height:52vh;overflow-y:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);
    padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);}
#marchas.hidden{display:none!important;}
.mm-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;
    margin-bottom:8px;color:var(--gold);}
.mm-head span{font-size:11px;color:#9fb0c8;}
.mm-head .mm-title{font-size:13px;color:var(--gold);}.mm-collapse{width:24px;height:24px;border:1px solid rgba(255,206,84,.45);border-radius:5px;background:rgba(255,206,84,.1);color:var(--gold);font-size:17px;line-height:18px;cursor:pointer;}
#marchas.in-city{top:168px;}#marchas:has(.mm-collapse[aria-expanded="false"]){overflow:hidden;padding-bottom:2px;}
.mm-empty,.mm-free{font-size:11px;color:#93a3ba;text-align:center;padding:6px 0;}
.mm-guide{display:flex;flex-direction:column;gap:5px;padding:7px 1px;color:#cbd5e4;font-size:11px;line-height:1.35;}
.mm-guide b{color:var(--gold);font-size:12px;}.mm-guide small{color:#93a3ba;text-align:right;}
.mm-guide-open{width:100%;margin-top:6px;padding:7px;border:1px solid rgba(255,206,84,.45);border-radius:7px;background:rgba(255,206,84,.12);color:var(--gold);font-size:11px;font-weight:700;cursor:pointer;}
.mm-guide-open:hover{background:rgba(255,206,84,.22);}
.mm-guide-progress{position:relative;height:12px;margin-bottom:0}
.mm-guide-progress>i{position:absolute;inset:0 auto 0 0}
.mm-guide-progress>small{
    position:absolute;inset:0;display:grid;place-items:center;
    color:#24190d!important;font-size:9px!important;font-weight:900;
    line-height:12px;text-align:center;text-shadow:0 1px rgba(255,255,255,.7);
    font-variant-numeric:tabular-nums;
}
.tutorial-forced [data-tutorial-action],.tutorial-next-cta,.mm-target{
    animation:tutorialCtaGlow 1.15s ease-in-out infinite;
}
@keyframes tutorialCtaGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,206,84,.18);filter:brightness(1)}
    50%{box-shadow:0 0 0 4px rgba(255,206,84,.2),0 0 20px rgba(255,206,84,.72);filter:brightness(1.28)}
}
.mm-target{display:flex;flex-direction:column;gap:3px;width:100%;padding:7px;margin-top:5px;text-align:left;border:1px solid rgba(221,91,74,.45);border-radius:7px;background:rgba(119,35,27,.2);color:#dbe4ef;cursor:pointer;}
.mm-target b{color:#ff9c8c;font-size:11px}.mm-target span{font-size:11px}.mm-target small{color:#93a3ba;font-size:9px;line-height:1.3}.mm-target:hover{background:rgba(119,35,27,.38);}
.mm-notice{margin-top:6px;padding:5px 6px;border-left:2px solid var(--gold);background:rgba(255,206,84,.08);color:#cbd5e4;font-size:10px;}
.mm-free{color:#5f6f84;border-top:1px dashed var(--line);margin-top:6px;}
.mm-item{background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:9px;padding:8px;margin-bottom:7px;}
.mm-top{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mm-sub{font-size:11px;color:#9fb0c8;margin-top:3px;}
.mm-volver{margin-top:6px;width:100%;padding:5px;border-radius:7px;border:1px solid rgba(255,206,84,0.35);
    background:rgba(255,206,84,0.12);color:var(--gold);cursor:pointer;font-size:11px;font-weight:700;}
.mm-volver:hover{background:rgba(255,206,84,0.22);}

/* ---- Controles de escena 3D ---- */
#cityctrls{position:fixed;bottom:178px;left:50%;transform:translateX(-50%);z-index:44;
    display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;
    background:var(--panel);padding:8px 16px;border-radius:12px;border:1px solid var(--gold);
    box-shadow:0 8px 26px rgba(0,0,0,.55);backdrop-filter:blur(6px);}
#cityctrls.hidden{display:none!important;}
#cityctrls label{display:flex;align-items:center;gap:8px;font-size:12px;color:#c4d0e0;}
#cityctrls input[type=range]{width:90px;height:4px;background:#3a4658;border-radius:2px;
    -webkit-appearance:none;appearance:none;cursor:pointer;}
#cityctrls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
    border-radius:50%;background:var(--gold);cursor:pointer;}
#cityctrls button{background:rgba(255,255,255,0.08);border:1px solid var(--line);color:var(--txt);
    padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;}
#zoomDistance{font-size:11px;font-weight:700;white-space:nowrap}
.city-area-designer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-left:10px;border-left:1px solid rgba(255,206,84,.35)}
.city-area-designer.hidden{display:none!important}.city-area-designer span{min-width:120px;color:#ffde7a;font-size:11px;font-weight:800}
.city-area-designer button.on{border-color:#ffce54!important;background:rgba(255,206,84,.22)!important;color:#fff0ad!important}
.city-area-designer button:disabled{opacity:.38;cursor:not-allowed!important}

/* ---- Topbar recursos ---- */
#topbar{position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:stretch;
    gap:1px;padding:0;background:linear-gradient(#0d1320ee,#0d132088);
    border-bottom:1px solid var(--line);z-index:60;backdrop-filter:blur(6px);
    overflow:hidden;flex-wrap:nowrap;}
#topbar img{pointer-events:none;-webkit-user-drag:none}
#topbar::-webkit-scrollbar{display:none;}
.res{display:flex;align-items:center;justify-content:space-between;gap:1px;background:rgba(255,255,255,0.06);
    border:1px solid var(--line);padding:0 1px;border-radius:3px;font-size:14px;
    font-variant-numeric:tabular-nums;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;user-select:none;}
.res:hover,.res:focus-visible{border-color:var(--gold);background:rgba(255,206,84,.16);outline:none;}
.res i{font-style:normal;font-size:15px;line-height:1;}
.res[data-res="oro"] i{display:inline-block;width:15px;height:15px;flex:0 0 15px;border-radius:50%;
    font-size:0;background:radial-gradient(circle at 34% 30%,#fff2a0 0 8%,#ffd84d 9% 45%,#b36a00 72%,#6d3b00 100%);
    border:1px solid #ffdc58;box-shadow:inset 0 0 0 2px rgba(117,62,0,.38),0 0 3px rgba(255,206,84,.45);}
/* ancho fijo del número para que la píldora no cambie de tamaño al variar el recurso */
.res span{font-weight:800;color:var(--gold);display:inline-block;min-width:0;text-align:right;
    font-variant-numeric:tabular-nums;white-space:nowrap;}
.res[data-res="energia"] span{min-width:0;}
.res[data-res="diamantes"] span{min-width:0;}
#topbar .spacer{display:none;}
.lvl{flex:none;font-size:11.5px;font-weight:600;background:rgba(255,206,84,0.12);
    border:1px solid rgba(255,206,84,0.3);padding:2px 7px;border-radius:20px;white-space:nowrap;}

/* En monitores hay altura disponible: la barra gana presencia y la tarjeta
   comienza justo al terminar esta, sin la franja vacía que quedaba entre ambas. */
@media (min-width:640px){
    #topbar{height:38px;min-height:38px}
    #topbar .res{font-size:15px}
    #topbar .res i{font-size:16px}
    #topbar .res[data-res="oro"] i{width:16px;height:16px;flex-basis:16px}
    #playercard{top:38px}
}

@media (max-width:400px){
    .res{font-size:14px;padding:0 1px;}
    .res i{font-size:15px;}
    .res span{min-width:2.4em;}
    .res[data-res="energia"] span{min-width:2.8em;}
    .lvl{font-size:10px;padding:2px 5px;}
}

/* Barra económica: cifras nítidas en teléfonos de 400–420 px. */
@media(max-width:799px){
    #topbar .res{font-family:Arial,sans-serif;font-weight:600;letter-spacing:-.25px}
    #topbar .res span{font-size:12px;font-weight:700;letter-spacing:-.4px;text-rendering:geometricPrecision}
    #topbar .res i{font-size:13px;flex-shrink:0}
    #topbar .res[data-res="oro"] i{width:13px;height:13px;flex-basis:13px}
}
@media(min-width:400px) and (max-width:520px){
    #topbar .res{padding-inline:1px;gap:0;font-size:11.5px}
    #topbar .res span{font-size:11.5px;font-weight:650;letter-spacing:-.5px}
}
@media(max-width:399px){
    #topbar .res span{font-size:11px!important;font-weight:650!important;letter-spacing:-.55px!important}
}
@media(min-width:800px) and (max-width:999px){
    #topbar .res span{font-size:13px;font-weight:700;letter-spacing:-.25px}
}
@media(min-width:1000px){
    #topbar .res span{font-size:clamp(12px,1.05vw,15px);font-weight:700;letter-spacing:-.15px}
}

/* Capacidad visible: el fondo avanza de verde a amarillo y rojo. */
#topbar .res{position:relative;isolation:isolate}
#topbar .res.has-capacity::before{
    content:"";position:absolute;z-index:-1;inset:1px auto 1px 1px;width:var(--capacity-fill,0%);
    max-width:calc(100% - 2px);border-radius:2px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--capacity-color,#36a84b) 82%,#101510),var(--capacity-color,#36a84b));
    opacity:.58;box-shadow:inset 0 0 5px #fff2;transition:width .35s ease,background .35s ease;
}
#topbar .res.has-capacity::after{
    content:"";position:absolute;z-index:2;left:1px;right:1px;bottom:1px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--capacity-color,#36a84b) 0 var(--capacity-fill,0%),#17130f var(--capacity-fill,0%) 100%);
    box-shadow:0 -1px 2px #0008;pointer-events:none;
}
#topbar .res>i,#topbar .res>span{position:relative;z-index:1}
#topbar .res.capacity-full{border-color:#ef493d!important;box-shadow:inset 0 0 6px #ff3a2d99,0 0 4px #d5221a88}
#topbar .res.capacity-full::before{opacity:.76}

@keyframes capacityDangerPulse{0%,100%{filter:brightness(1);box-shadow:inset 0 0 6px #ff3a2d99,0 0 4px #d5221a88}50%{filter:brightness(1.45);box-shadow:inset 0 0 12px #ff2b20,0 0 12px #ff2418}}
@keyframes arcaCapacityPulse{0%,100%{background:#f0dca8;box-shadow:inset 0 0 0 2px #b5120b,0 0 4px #b5120b99}50%{background:#efb0a2;box-shadow:inset 0 0 0 3px #ff2418,0 0 14px #ff2418}}
#topbar .res.capacity-full{animation:capacityDangerPulse 1s ease-in-out infinite!important;cursor:pointer}
.arca-resource-card.capacity-full-focus{border-color:#b5120b!important;animation:arcaCapacityPulse 1s ease-in-out infinite}
.arca-resource-card.capacity-full-focus .row:nth-child(2){color:#9d0e08;font-weight:900}
.arca-capacity-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px}
.arca-capacity-row>.mono{text-align:right}
.arca-expand-now{display:inline-flex!important;width:auto!important;min-width:86px;min-height:24px;padding:3px 7px!important;margin:0!important;position:relative;z-index:1;white-space:nowrap;font-size:12px!important}
.building-delete-head{width:38px;height:38px;padding:0;border:1px solid #7b251d;background:linear-gradient(#d86550,#8f251c);color:#fff;cursor:pointer}
@media(prefers-reduced-motion:reduce){#topbar .res.capacity-full,.arca-resource-card.capacity-full-focus{animation-duration:2.4s}}

/* Equipamiento de héroe: piezas visibles y selección directa desde el slot. */
#screen[data-screen="heroe"] .hero-loadout-slots .hero-equipment-summary-item>img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 2px #0005)}
#screen[data-screen="heroe"] .hero-loadout-slots .hero-equipment-summary-item.equipped{border-color:var(--rarity)!important;box-shadow:inset 0 0 0 1px #f4d99e66,0 0 8px color-mix(in srgb,var(--rarity) 68%,transparent)!important}
.hero-equip-picker{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr);gap:12px;color:#27180b}
.hero-equip-picker>section{padding:12px;border:1px solid #5b4025;background:#d7b977 url('../assets/estilos/pruebafondouno.avif') center/cover}
.hero-equip-picker h3{margin:0 0 9px;color:#2a190a;font:800 17px var(--font-medieval)}
.hero-equipped-current{display:grid;gap:6px;padding:10px;border:1px solid #684824;background:#efd69c}.hero-equipped-current.empty{color:#604522}.hero-equipped-current .btn{width:max-content}
.hero-equip-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.hero-equip-choice{min-width:0;padding:8px;display:grid;justify-items:center;gap:4px;border:2px solid var(--rarity);background:#edcf90;color:#25170a;cursor:pointer}.hero-equip-choice.equipped{box-shadow:0 0 10px var(--rarity);background:#f7dfaa}.hero-equip-choice img{width:64px;height:64px;object-fit:contain}.hero-equip-choice>span{font-size:42px}.hero-equip-choice b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-equip-choice small{font-size:9px}.hero-equip-choice em{padding:3px 7px;background:#543719;color:#f7e3b3;font-style:normal;font-size:9px;font-weight:800}
@media(max-width:620px){.hero-equip-picker{grid-template-columns:1fr}.hero-equip-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Gestor de equipo del héroe: slots compactos arriba e inventario filtrado. */
.hero-equipment-manager{display:grid;grid-template-rows:auto auto minmax(260px,1fr);gap:9px;min-height:min(610px,78vh);color:#eadfc9}
.hero-manager-context{display:grid;grid-template-columns:54px minmax(140px,1fr) minmax(160px,1fr);align-items:center;gap:10px;padding:8px 10px;border:1px solid #664a34;background:linear-gradient(135deg,#3b241f,#17100f 58%,#090a0d)}
.hero-manager-context>img{width:52px;height:58px;object-fit:cover;border:1px solid #a7804d;background:#16100e}.hero-manager-context>div{display:grid;gap:2px}.hero-manager-context>div:last-child{padding-left:12px;border-left:1px solid #66503a}.hero-manager-context b{color:#f0d28d}.hero-manager-context small{color:#bca98b!important}
.hero-manager-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-height:92px}
.hero-manager-slot{min-width:0;padding:7px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;border:2px solid var(--rarity);background:linear-gradient(145deg,#3b231e,#12100f 58%,#08090b);color:#efe1c5;text-align:left;cursor:pointer}.hero-manager-slot.on{outline:2px solid #f0ce78;outline-offset:-5px;box-shadow:0 0 10px var(--rarity)}.hero-manager-slot>img{width:54px;height:58px;object-fit:contain}.hero-manager-slot>i{width:54px;height:58px;display:grid;place-items:center;font-size:34px;font-style:normal}.hero-manager-slot>span{min-width:0;display:grid;gap:3px}.hero-manager-slot small{color:#bca98b!important;text-transform:uppercase}.hero-manager-slot b{overflow:hidden;color:#f1d58e;text-overflow:ellipsis;white-space:nowrap}.hero-manager-slot.empty{opacity:.7}
.hero-manager-inventory{min-height:0;padding:10px;border:1px solid #664a34;background:linear-gradient(145deg,#3a211d,#170f0e 55%,#08090c);box-shadow:inset 0 1px #bd8e6655}.hero-manager-inventory>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #6d523a}.hero-manager-inventory h3{margin:2px 0 0;color:#f0d28d;font:800 18px var(--font-medieval)}.hero-manager-inventory header small{color:#bca98b!important}.hero-manager-current{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#d9c8a9}.hero-manager-current b{color:#f0d28d}.hero-manager-current.empty{color:#a99a82}
.hero-manager-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));align-content:start;gap:8px;max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.hero-manager-piece{position:relative;min-width:0;min-height:178px;padding:7px;display:grid;grid-template-rows:88px minmax(0,1fr) auto;gap:5px;border:2px solid var(--rarity);background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--rarity) 42%,#fff) 52%,var(--rarity));color:#17120d;cursor:pointer}.hero-manager-piece.equipped{outline:3px solid #f1d071;outline-offset:-6px;box-shadow:0 0 12px var(--rarity)}.hero-manager-piece-art{display:grid;place-items:center}.hero-manager-piece-art img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 3px 3px #0008)}.hero-manager-piece-art i{font-size:54px;font-style:normal}.hero-manager-piece-copy{min-width:0;display:grid;gap:2px;text-align:center}.hero-manager-piece-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-manager-piece-copy small{text-transform:uppercase;color:#21170f!important}.hero-manager-piece-copy strong{color:#285c30}.hero-manager-piece em{padding:4px;background:#17110edd;color:#f2d589;font-size:10px;font-style:normal;font-weight:900;text-align:center}.hero-manager-piece.equipped em{background:#356b35;color:#efffdc}
.hero-manager-empty{grid-column:1/-1;min-height:180px;display:grid;place-items:center;align-content:center;gap:10px;color:#dac9aa;text-align:center}.hero-manager-empty .btn{width:max-content}
@media(max-width:650px){.hero-equipment-manager{min-height:0}.hero-manager-context{grid-template-columns:48px minmax(0,1fr)}.hero-manager-context>img{width:46px;height:52px}.hero-manager-context>div:last-child{grid-column:1/-1;padding:7px 0 0;border-left:0;border-top:1px solid #66503a}.hero-manager-slots{grid-template-columns:repeat(3,minmax(92px,1fr));overflow-x:auto}.hero-manager-slot{grid-template-columns:1fr;justify-items:center;text-align:center}.hero-manager-slot>span{width:100%}.hero-manager-slot>img,.hero-manager-slot>i{width:46px;height:46px}.hero-manager-inventory>header{align-items:flex-start;flex-direction:column}.hero-manager-current{width:100%;justify-content:space-between}.hero-manager-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:52vh}.hero-manager-piece{min-height:158px;grid-template-rows:72px minmax(0,1fr) auto}.hero-manager-piece-art img{width:68px;height:68px}}
/* Gestor de héroe sobre arena: contraste estable y selección independiente
   del color de rareza. */
.hero-equipment-manager{padding:8px;background:#d7ba7c url('../assets/estilos/pruebafondouno.avif') center/cover;color:#24170d}
.hero-manager-context{border-color:#74532f;background:linear-gradient(180deg,#f0d99f,#d4b16c);box-shadow:inset 0 1px #fff2c8}
.hero-manager-context>img{border-color:#684824;background:#ead09a}.hero-manager-context>div:last-child{border-color:#8a6b3e}.hero-manager-context b,.hero-manager-context small{color:#24170d!important}
.hero-manager-slot{position:relative;border:1px solid #80603a;background:linear-gradient(180deg,#efd89e,#d0aa63);color:#21150b;box-shadow:inset 0 1px #fff0c3;opacity:1!important}
.hero-manager-slot small,.hero-manager-slot b{color:#21150b!important}.hero-manager-slot.on{border:3px solid #23170e;outline:2px solid #f8e4b4;outline-offset:-6px;background:linear-gradient(180deg,#f7e4b1,#d5ad61);box-shadow:inset 0 0 0 2px #7b562d,0 3px 8px #2b1a0e88}
.hero-manager-slot.on::after{content:'✓';position:absolute;top:5px;right:5px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#24170d;color:#f5dfa8;font-size:12px;font-weight:950;box-shadow:0 1px 3px #0007}
.hero-manager-inventory{border-color:#74532f;background:linear-gradient(180deg,#efd9a2,#d4b36f);box-shadow:inset 0 1px #fff1c6}.hero-manager-inventory>header{border-color:#8a6b3e}.hero-manager-inventory h3,.hero-manager-inventory header small,.hero-manager-current,.hero-manager-current b,.hero-manager-current.empty{color:#24170d!important}
.hero-manager-piece{border-color:var(--rarity);background:linear-gradient(180deg,#f4dfa8,#d8b873);color:#17120d;box-shadow:inset 0 1px #fff3cf}.hero-manager-piece.equipped{outline-color:#2e612f;box-shadow:inset 0 0 0 3px #568549,0 3px 8px #33200f66}.hero-manager-empty{color:#24170d}
/* Las superficies seleccionables son arena neutra; el dorado queda reservado
   para acciones como Equipar y Desequipar. */
.hero-manager-slots{min-height:68px;gap:5px}
.hero-manager-slot{min-height:68px;padding:3px 5px;grid-template-columns:42px minmax(0,1fr);gap:5px;background:linear-gradient(180deg,#ead9ad,#d8c08c);box-shadow:inset 0 1px #fff8df}
.hero-manager-slot>img,.hero-manager-slot>i{width:40px;height:42px}.hero-manager-slot>i{font-size:27px}.hero-manager-slot>span{gap:1px}.hero-manager-slot small{font-size:9px}.hero-manager-slot b{font-size:12px}
.hero-manager-slot.on{border-color:#23170e;background:linear-gradient(180deg,#f3e5c0,#dfc999);box-shadow:inset 0 0 0 2px #7b562d,0 2px 5px #2b1a0e66}
.hero-manager-slot.on::after{top:3px;right:3px;width:18px;height:18px;font-size:10px}
.hero-manager-piece{background:linear-gradient(180deg,#eee0bc,#dcc89a)}
@media(max-width:650px){.hero-manager-slot{grid-template-columns:1fr;min-height:76px;padding:3px}.hero-manager-slot>img,.hero-manager-slot>i{width:36px;height:36px}.hero-manager-slot b{font-size:10px}}

/* Banco legible sobre arena. */
#screen[data-screen="inventario"] .bank-workbench .equipment-viewer,
#screen[data-screen="inventario"] .bank-workbench .equipment-owned{
    border-color:#5a3e21!important;background:#d8ba7a url('../assets/estilos/pruebafondouno.avif') center/cover!important;color:#27180b!important;
}
#screen[data-screen="inventario"] .bank-workbench .equipment-owned h3,
#screen[data-screen="inventario"] .bank-workbench .equipment-viewer small{color:#35210d!important}
#screen[data-screen="inventario"] .bank-workbench .equipment-icon-grid button{background:#ead09a!important;color:#26170a!important}
#screen[data-screen="inventario"] .bank-workbench .equipment-icon-grid small{color:#3b250f!important}

/* Retrato, rol y rareza con metal oscuro en Colección y Mejora. */
#screen[data-screen="heroes"] .hero-portrait-frame,
#screen[data-screen="heroes"] .hero-portrait-frame img,
#screen[data-screen="heroes"] .hero-name-banner,
#screen[data-screen="heroe"] .hero-upgrade-portrait,
#screen[data-screen="heroe"] .hero-upgrade-portrait>span{background:#e4ae5e!important}
#screen[data-screen="heroes"] .hero-lore-panel header>span,
#screen[data-screen="heroe"] .hero-affinity-banner .hh-rarity{background:#090b0f!important;color:var(--rarity)!important;border-color:var(--rarity)!important;text-shadow:none!important}

/* Colección de héroes: sin cian técnico; negro y marrón envejecido. */
#screen[data-screen="heroes"] .hero-portrait-frame{
    border-color:#75522d!important;
    background:#e4ae5e!important;
    box-shadow:0 9px 22px #000b,0 0 0 1px #b88a4b55,0 0 14px #8a5c2c88!important;
}
#screen[data-screen="heroes"] .hero-portrait-frame::after{
    border-color:#9b7444!important;
    box-shadow:inset 0 0 10px #0009,0 0 6px #b0824655!important;
}
#screen[data-screen="heroes"] .hero-name-banner{
    border-color:#6c4927!important;
    background:#e4ae5e!important;
    color:#27180b!important;
    box-shadow:inset 0 1px #a77a4255!important;
}
#screen[data-screen="heroes"] .hero-lore-title-row{
    width:100%;box-sizing:border-box;padding:10px 12px;
    border:1px solid #674725;
    background:linear-gradient(180deg,#4a3322,#281b13);
    box-shadow:inset 0 1px #b0834d55,0 2px 6px #0006;
}
#screen[data-screen="heroes"] .hero-lore-panel header h3{color:#f0c968!important;text-shadow:0 1px #000}
#screen[data-screen="heroes"] .hero-lore-panel header>span{
    margin-top:8px!important;border-color:#6c4927!important;
    background:linear-gradient(180deg,#3d2a1d,#21160f)!important;
    color:#f1d39a!important;
}

/* Forja sin azul cian: negro, metal marrón y arena como única paleta base. */
#screen[data-screen="inventario"] .forge-mobile-head{
    min-height:72px;padding:14px 18px;border-color:#5b4024!important;
    background:#090a0d!important;box-shadow:inset 0 0 0 1px #21170e,0 5px 15px #0009!important;
}
#screen[data-screen="inventario"] .forge-mobile-head>div:first-child small{color:#9d7040!important}
#screen[data-screen="inventario"] .forge-mobile-head>div:first-child b{
    color:#efbd45!important;font:800 clamp(25px,2.6vw,36px) var(--font-medieval)!important;
    letter-spacing:.055em;text-shadow:0 2px #000;
}
#screen[data-screen="inventario"] .forge-mobile-head .forge-tabs{padding:5px;border:1px solid #5a4027;background:#3f2c1f!important}
#screen[data-screen="inventario"] .forge-mobile-head .forge-tabs button,
#screen[data-screen="inventario"] .forge-type-filter button{
    border-color:#5b412a!important;background:linear-gradient(#1a1816,#090a0c)!important;color:#e8d6b4!important;
    box-shadow:inset 0 1px #4f463c,inset 0 -2px #030303!important;text-shadow:none!important;
}
#screen[data-screen="inventario"] .forge-mobile-head .forge-tabs button.on,
#screen[data-screen="inventario"] .forge-type-filter button.on{
    border-color:#956619!important;background:linear-gradient(#74502d,#342115)!important;color:#ffd96b!important;
    box-shadow:inset 0 -3px #b68121,0 0 7px #9a6a2655!important;
}
#screen[data-screen="inventario"] .forge-type-filter{padding:6px 4px;margin-bottom:8px;background:#17120f!important}
#screen[data-screen="inventario"] .forge-gallery-stage,
#screen[data-screen="inventario"] .forge-gallery-viewer,
#screen[data-screen="inventario"] .forge-gallery-details,
#screen[data-screen="inventario"] .forge-gallery-primary,
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs>span,
#screen[data-screen="inventario"] .forge-recipe-gallery>button{
    border-color:#514334!important;background-color:#090b0f!important;background-image:none!important;color:#e8dcc4!important;
}
#screen[data-screen="inventario"] .forge-gallery-viewer{background:radial-gradient(circle at 50% 42%,#211b16,#08090b 72%)!important}
#screen[data-screen="inventario"] .forge-gallery-primary>div{border-left-color:#5a4936!important}
#screen[data-screen="inventario"] .forge-gallery-details>header small,
#screen[data-screen="inventario"] .forge-gallery-primary small,
#screen[data-screen="inventario"] .forge-mobile-reqs small,
#screen[data-screen="inventario"] .forge-recipe-gallery small{color:#a78b66!important}
#screen[data-screen="inventario"] .forge-gallery-require-title,
#screen[data-screen="inventario"] .forge-gallery-label{color:#e9d8b5!important}
#screen[data-screen="inventario"] .forge-recipe-gallery>button.on{background:#241b13!important}
@media(max-width:600px){
    #screen[data-screen="inventario"] .forge-mobile-head{min-height:0;padding:10px}
    #screen[data-screen="inventario"] .forge-mobile-head>div:first-child b{font-size:24px!important}
}

/* ---- Medalla / tarjeta de identidad del jugador (abajo-izquierda) ---- */
#playercard{position:fixed;left:8px;top:37px;z-index:44;display:flex;gap:8px;align-items:center;
    background:linear-gradient(#1a2436ee,#121a28ee);border:1px solid var(--gold);border-radius:12px;
    padding:6px 12px 6px 6px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:64vw;text-align:left;}
#playercard.hidden{display:none!important;}
#playercard:active{transform:scale(.98);}
.pc-av{width:38px;height:60px;border-radius:9px;background:#dfc995;border:1px solid rgba(255,206,84,.4);object-fit:cover;display:block;flex-shrink:0;}
.pc-avatar-col{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.pc-energy{display:none;color:#000;font:700 9px/1.1 var(--font-ui);white-space:nowrap}
.pc-energy b{color:#000;font:inherit}
.pc-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pc-line1{display:flex;align-items:center;gap:6px;}
.pc-name{font-weight:800;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;}
.pc-title{display:block;max-width:78px;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:700;color:#20160a;background:var(--gold);border-radius:10px;padding:1px 6px;white-space:nowrap;flex:0 1 auto;}
.pc-line2{display:flex;gap:12px;font-size:11px;color:var(--sub);}
.pc-line2 b{color:var(--gold);}
.pc-xp{height:4px;border-radius:2px;background:#2a3346;overflow:hidden;margin-top:2px;width:138px;max-width:44vw;}
.pc-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffce54,#ffa41b);transition:width .3s;}
.pc-power{display:flex;align-items:center;gap:4px;color:var(--sub);font-size:10px;line-height:1.1;white-space:nowrap;}
.pc-power b{color:var(--gold);font-size:10.5px;width:auto;min-width:13ch;overflow:visible;font-variant-numeric:tabular-nums;letter-spacing:-.22px}.pc-power>img.emoji{width:1em;height:1em}

@media(max-width:520px){
    #playercard{align-items:flex-start;padding-right:8px;}
    .pc-avatar-col{margin-top:4px}
    #playercard .pc-av{width:42px;height:54px}
    .pc-energy{display:flex;align-items:center;gap:1px}
    #topbar .res[data-res="energia"]{display:none}
    .pc-line1{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;align-items:start}
    .pc-name{max-width:128px}
    .pc-title{max-width:112px;justify-self:start}
    #queuehud{top:136px}
}

/* ---- HUD de colas (izquierda, sobre la medalla; solo Ciudad/Mundo) ---- */
#queuehud{position:fixed;left:8px;top:108px;z-index:44;display:flex;flex-direction:column;gap:1px;width:154px;max-width:46vw;}
#queuehud.hidden{display:none!important;}
.queue-auto-open{animation:queueAutoOpen 1.6s ease-out}
@keyframes queueAutoOpen{0%,35%{filter:drop-shadow(0 0 12px rgba(255,206,84,.95))}100%{filter:none}}

/* Jerarquía de superficies: el papiro deja de ser una mancha caqui uniforme. */
#screen .card,#screen .scard,#screen .bcard,#panel .card,#panel .scard,
.tw-modal .card,.tw-modal .scard,.menuitem,.cattile{
    background:linear-gradient(180deg,#fffaf0,#ead9b5)!important;
    border-color:#684310!important;
    box-shadow:0 3px 9px rgba(42,27,8,.18),inset 0 1px rgba(255,255,255,.8)!important;
}
#screen .card:nth-child(even),#screen .scard:nth-child(even),.menuitem:nth-child(even){
    background:linear-gradient(180deg,#f6ecd7,#dfc89b)!important;
}

/* Colección de héroes: el color de rareza estructura el marco y el retrato. */
.herocard{
    border:2px solid var(--rarity)!important;
    background:linear-gradient(160deg,#fffdf7 0%,#ead9b8 72%,color-mix(in srgb,var(--rarity) 18%,#d7bd88))!important;
    box-shadow:0 4px 10px rgba(42,27,8,.24),inset 0 0 0 1px rgba(255,255,255,.65)!important;
}
.herocard:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(42,27,8,.28),0 0 8px color-mix(in srgb,var(--rarity) 48%,transparent)!important}
.herocard .hc-img{
    border:1px solid color-mix(in srgb,var(--rarity) 72%,#3b260c);
    background:radial-gradient(circle at 50% 28%,#fff9e8 0%,color-mix(in srgb,var(--rarity) 24%,#d7c18f) 62%,#8e7142 100%);
    box-shadow:inset 0 -14px 22px rgba(41,24,5,.2);
}
.herocard .hc-rarity{box-shadow:0 1px 4px color-mix(in srgb,var(--rarity) 55%,transparent)}
.herocard.locked{filter:saturate(.72)}
.hero-card-wrap{position:relative;display:flex;min-width:0}
.hero-card-wrap .herocard{width:100%}
.hero-collection-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:10px 12px;border:1px solid #65451c;background:linear-gradient(135deg,#2e1b12,#120e0c);color:#f0dca7}.hero-collection-head>div{display:grid;gap:3px}.hero-collection-head b{font:700 16px var(--font-medieval);color:#f1c766}.hero-collection-head small{font-size:10px;color:#c9b991}
.hero-bonus-scope{display:grid;gap:3px;margin:7px 0;padding:8px;border-left:3px solid var(--gold);background:rgba(255,255,255,.42);font-size:11px;line-height:1.35}
.hero-xp-table-wrap{max-height:230px;overflow:auto;border-top:1px solid var(--borde-papiro)}
.hero-xp-table{width:100%;border-collapse:collapse;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
.hero-xp-table th,.hero-xp-table td{padding:5px 7px;border-bottom:1px solid rgba(74,47,12,.2)}
.hero-xp-table th:first-child,.hero-xp-table td:first-child{text-align:center}
.hero-xp-table tr.current{background:rgba(218,160,37,.32);font-weight:900}
.hero-level-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hero-level-info{flex:0 0 28px;width:28px;height:28px;padding:0;border:1px solid color-mix(in srgb,var(--rarity) 70%,#3b260c);background:color-mix(in srgb,var(--rarity) 24%,#fff8e7);color:#211407;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 2px 5px rgba(34,20,4,.24)}
.hero-level-info:hover{background:color-mix(in srgb,var(--rarity) 52%,#fff8e7)}
.hero-xp-modal-table{max-height:min(55vh,430px);border:1px solid var(--borde-papiro)}

/* El mismo lenguaje de rareza acompaña al héroe en colección, mejora y altar. */
.herohero>img.herohero-portrait{
    border:2px solid var(--rarity)!important;
    background:radial-gradient(circle at 50% 28%,#fff9e8 0%,color-mix(in srgb,var(--rarity) 32%,#d7c18f) 62%,color-mix(in srgb,var(--rarity) 58%,#70542d) 100%)!important;
    box-shadow:0 0 10px color-mix(in srgb,var(--rarity) 48%,transparent),inset 0 -12px 20px rgba(41,24,5,.2)!important;
}
.summon-card .summon-portrait{
    border:1px solid color-mix(in srgb,var(--rarity) 75%,#3b260c);
    background:radial-gradient(circle at 50% 25%,#fffdf4 0%,color-mix(in srgb,var(--rarity) 34%,#e8d5a8) 58%,color-mix(in srgb,var(--rarity) 62%,#70542d) 100%)!important;
    box-shadow:inset 0 -14px 22px color-mix(in srgb,var(--rarity) 24%,rgba(41,24,5,.35));
}
.queue-collapse-head{padding:5px 7px;background:linear-gradient(#1a2436f2,#121a28f2);border:1px solid var(--line);border-radius:9px}
#queuehud.collapsed{width:auto;min-width:148px}
.qslot{display:flex;align-items:center;gap:7px;background:linear-gradient(#1a2436e6,#121a28e6);
    border:1px solid var(--line);border-radius:10px;padding:5px 8px;cursor:pointer;color:var(--txt);
    text-align:left;position:relative;overflow:hidden;font:inherit;}
.qslot>i.q-ic{font-style:normal;font-size:15px;flex-shrink:0;}
.qslot .q-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.qslot .q-lbl{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qslot .q-sub{font-size:9px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qslot .q-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#2a3346;}
.qslot .q-bar b{display:block;height:100%;background:linear-gradient(90deg,#ffce54,#ffa41b);width:0;}
.qslot.locked{opacity:.5;cursor:default;border-style:dashed;}
.qslot.active{border-color:var(--gold);}

/* ---- Camas del hospital (curación en paralelo) ---- */
.hbed{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
    padding:6px 8px;margin-top:6px;}

/* ---- Chat flotante + log de sesión (derecha; solo Ciudad/Mundo) ---- */
#chathud{position:fixed;right:8px;bottom:116px;z-index:44;width:200px;max-width:46vw;
    background:linear-gradient(#161e2ce6,#0f1622ee);border:1px solid var(--line);border-radius:12px;
    display:flex;flex-direction:column;overflow:visible;box-shadow:0 6px 18px rgba(0,0,0,.45);}
#chathud.hidden{display:none!important;}
.ch-toggle{position:absolute;right:3px;top:3px;z-index:2;width:23px;height:23px;padding:0;border:1px solid var(--line);
    border-radius:7px;background:#111927;color:var(--gold);font-size:0;cursor:pointer;display:grid;place-items:center;}
.ch-toggle>span{font-size:13px;line-height:1}.ch-toggle::after{content:'−';position:absolute;font:800 12px/1 var(--font-ui)}
.ch-toggle>span{visibility:hidden}
.ch-toggle i{position:absolute;right:-7px;top:-7px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;
    border-radius:9px;background:#ef3f37;color:#fff;border:1px solid #fff;font:900 10px/1 var(--font-ui);font-style:normal}
.ch-toggle i.hidden{display:none}
#chathud.collapsed{width:48px!important;height:48px;max-width:none;border-radius:50%;overflow:visible;background:linear-gradient(#2a3346,#1a2230)}
#chathud.collapsed .ch-log,#chathud.collapsed .ch-foot{display:none}
#chathud.collapsed .ch-toggle{inset:0;width:100%;height:100%;border:0;border-radius:50%;background:transparent}
#chathud.collapsed .ch-toggle>span{visibility:visible;font-size:22px}
#chathud.collapsed .ch-toggle::after{display:none}
.ch-log{height:76px;max-height:76px;overflow:hidden;padding:6px 8px;display:flex;flex-direction:column;
    justify-content:flex-end;gap:3px;scroll-behavior:smooth;overflow-anchor:auto;padding-right:31px;}
.ch-line{font-size:10.5px;line-height:1.3;color:#c4d0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-line.is-chat{color:#a8dcff;}
.ch-foot{display:flex;border-top:1px solid var(--line);min-height:29px}.ch-foot select{width:78px;border:0;border-right:1px solid var(--line);background:#111927;color:#e6bd58;font-size:10px;padding:3px}.ch-foot .ch-open{flex:1;border:0}
.ch-empty{color:var(--sub);font-size:10px;}
.ch-open{background:rgba(255,206,84,.12);border:none;border-top:1px solid var(--line);color:var(--gold);
    font-size:11px;font-weight:700;padding:6px;cursor:pointer;text-align:center;}
.ch-open:active{background:rgba(255,206,84,.22);}

/* ---- Relato introductorio guiado ---- */
#loreShade{
    position:fixed;inset:0;z-index:58;background:rgba(16,18,18,.68);
    backdrop-filter:grayscale(.72) brightness(.62);touch-action:none;
}
#loreShade.hidden,#lorePanel.hidden{display:none!important}
#lorePanel{
    position:fixed;z-index:59;left:50%;bottom:116px;transform:translateX(-50%);
    width:min(520px,calc(100vw - 24px));color:#21170d;
}
.lore-sprite{
    position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
    width:116px;height:126px;display:flex;align-items:flex-end;justify-content:center;
    font-size:88px;line-height:1;filter:drop-shadow(0 8px 5px #0009);pointer-events:none;
}
.lore-sprite img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.lore-card{
    position:relative;padding:10px;border:2px solid #5d4217;
    background:linear-gradient(145deg,#fff1c9,#e1c482);box-shadow:0 8px 28px #000b;
}
.lore-chapter{margin:-10px -10px 7px;padding:5px 10px;background:#5d4217;color:#ffe6a7;font:900 10px/1.2 var(--font-ui);letter-spacing:1.2px;text-align:center;text-transform:uppercase}
.lore-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:5px;border-bottom:1px solid #9e7b3e}
.lore-heading b{font-size:14px;text-transform:uppercase}
.lore-heading span{font:800 10px/1 var(--font-ui);color:#73501c}
#loreText{min-height:42px;margin:8px 2px;font-size:13px;font-weight:650;line-height:1.4}
#loreText::after{content:'▌';margin-left:2px;color:#7a4f12;animation:loreCursor .72s steps(1) infinite}
#loreText.typed::after{display:none}
@keyframes loreCursor{50%{opacity:0}}
#loreContinue{
    width:100%;padding:8px;border:1px solid #271804;background:linear-gradient(#ffd35a,#e9a718);
    color:#171006;font-weight:950;cursor:pointer;animation:tutorialCtaGlow 1.15s ease-in-out infinite;
}
body.lore-active{overflow:hidden}
@media(max-width:520px){
    #lorePanel{bottom:112px;width:calc(100vw - 18px)}
    .lore-sprite{width:92px;height:102px;font-size:70px}
    #loreText{font-size:12px;min-height:48px}
}

/* ---- Tabs de vista ---- */
#viewtabs{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:20;
    display:flex;gap:6px;background:var(--panel);padding:5px;border-radius:24px;
    border:1px solid var(--line);}
#viewtabs button{background:transparent;border:none;color:#9fb0c8;padding:7px 18px;
    border-radius:20px;cursor:pointer;font-size:14px;font-weight:600;transition:.2s;}
#viewtabs button.active{background:var(--gold);color:#20160a;}

/* ---- Barra de acciones ---- */
#actionbar{position:fixed;bottom:0;left:0;right:0;height:64px;display:flex;
    justify-content:center;gap:10px;align-items:center;background:linear-gradient(#0d132000,#0d1320ee);
    z-index:20;padding-bottom:6px;}
#actionbar button{background:rgba(255,255,255,0.08);border:1px solid var(--line);
    color:var(--txt);padding:11px 16px;border-radius:12px;cursor:pointer;font-size:14px;
    font-weight:600;transition:.15s;}
#actionbar button:hover{background:rgba(255,206,84,0.18);border-color:var(--gold);transform:translateY(-2px);}

/* ---- Panel modal ---- */
#panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,90vw);background:var(--panel);
    border-left:1px solid var(--line);z-index:40;backdrop-filter:blur(12px);
    display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.9,.3,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.5);}
#panel.hidden{transform:translateX(105%);}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
    border-bottom:1px solid var(--line);}
.panel-head h2{font-size:18px;}
#panelClose{background:none;border:none;color:#8fa0b8;font-size:20px;cursor:pointer;}
#panelBody{padding:14px 16px;overflow-y:auto;flex:1;}
.world-search{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;min-height:128px}
.world-search-side{display:flex;flex-direction:column;gap:6px}
.world-search-side button{min-height:54px;border:1px solid var(--line);background:#111927;color:var(--sub);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:18px;cursor:pointer}
.world-search-side button span{font-size:10px}.world-search-side button.on{color:var(--gold);border-color:var(--gold);background:rgba(255,206,84,.12)}
.world-search-main{position:relative;min-width:0;border:1px solid var(--line);background:rgba(0,0,0,.35);padding:8px}
.world-search-info{position:absolute;z-index:2;top:5px;right:5px;width:28px;height:28px;border:1px solid var(--line);background:var(--gold);color:#080808;font-weight:900;cursor:pointer}
.world-search-types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;min-width:0;padding:0 28px 5px 0}
.world-search-types button{min-width:0;min-height:56px;padding:4px 1px;border:1px solid rgba(255,206,84,.55);background:#0b0f16;color:var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;overflow:hidden}
.world-search-types button span{font-size:10px;font-weight:700}.world-search-hint{color:var(--sub);font-size:11px;padding-top:5px}
.world-search-types button.on{background:var(--gold);color:#080808;border-color:#080808}
.world-search-resource{margin-top:6px}
.world-search-enemy{display:flex;flex-direction:column;gap:7px;height:100%;min-width:0;overflow:hidden}.world-search-target-row{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:74px;padding-right:32px;overflow:hidden}.world-search-preview-wrap{display:grid;place-items:center;width:66px;height:66px;min-width:0;overflow:hidden}.world-search-target-row .world-search-preview{display:block!important;width:66px!important;height:66px!important;min-width:0!important;max-width:66px!important;max-height:66px!important;object-fit:contain!important}.world-search-target-copy{display:flex;min-width:0;flex-direction:column;gap:7px}.world-search-target-name{min-width:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.world-search-target-controls{display:flex;min-width:0;align-items:center;gap:8px}.world-search-enemy .steps{display:flex;flex:0 0 auto;align-items:center;gap:5px}.world-search-enemy .steps button{width:30px;height:30px;border:1px solid var(--line);background:#111927;color:var(--gold)}.world-search-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.world-search-enemy .btn{min-width:0;width:100%;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.march-trip-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:6px 0;padding:6px;border:1px solid var(--line);background:var(--paper2);text-align:center}.march-trip-time span{display:flex;flex-direction:column;min-width:0}.march-trip-time b{color:var(--ink);font-variant-numeric:tabular-nums}
.army-formations .formation-queue-tabs{margin:7px 0}
.army-formations .formation-queue-tab{flex:0 0 92px;padding-inline:5px}
.formation-lane.army-formation-lane{display:grid;grid-template-columns:30px minmax(92px,.65fr) minmax(150px,1.35fr);gap:5px;align-items:stretch}
.army-formation-lane>b{display:grid;place-items:center;border:1px solid var(--borde-papiro);background:#efb62d;color:#171008}
.army-formation-lane button{min-width:0;padding:6px 4px;border:1px solid var(--borde-papiro);background:#ead49e;color:#171008;font-weight:800;white-space:normal;overflow-wrap:anywhere}

/* ---- Tarjetas dentro del panel ---- */
.card{background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;
    padding:12px;margin-bottom:10px;}
.card h3{font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.card .sub{font-size:12px;color:#93a3ba;margin-bottom:8px;line-height:1.4;}
.card .cost{display:flex;gap:10px;font-size:12px;flex-wrap:wrap;margin-bottom:8px;}
.card .cost span{color:var(--gold);}
.card .cost span.no{color:var(--bad);}
.card button{width:100%;background:var(--ok);border:none;color:#08210f;padding:9px;
    border-radius:9px;font-weight:700;cursor:pointer;font-size:13px;}
.card button:disabled{background:#3a4658;color:#7d8ba0;cursor:not-allowed;}
.card button.alt{background:rgba(255,206,84,0.2);color:var(--gold);}

.bar{height:7px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden;margin:6px 0;}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#48cf7b,#8ce0a8);width:0;}

.row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;}
.train-unit-head{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.train-unit-head h3{min-width:0;margin:0}
.train-unit-compose{display:grid;grid-template-columns:minmax(90px,34%) minmax(0,1fr);gap:10px;align-items:stretch}
.train-unit-art{display:block;width:100%;height:100%;min-height:128px;max-height:176px;object-fit:cover;object-position:center 34%;
    border:1px solid rgba(72,48,15,.55);background:#dfc995;box-sizing:border-box}
.train-unit-controls{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.train-unit-controls .tw-slider{margin:2px 0 5px}
.train-unit-controls .row{gap:6px}
.train-unit-controls .row span:last-child{text-align:right;white-space:nowrap}
.army-training-card{display:block!important}
.army-training-card .train-unit-stats,.card>.train-unit-stats{margin:8px 0}
.train-unit-stats{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;
    font-variant-numeric:tabular-nums;border:1px solid rgba(72,48,15,.48)}
.train-unit-stats th,.train-unit-stats td{padding:4px 6px;border:1px solid rgba(72,48,15,.28);line-height:1.15}
.train-unit-stats th{width:28%;text-align:left;font-weight:700;white-space:nowrap;color:var(--tinta,#24190d);background:rgba(72,48,15,.08)}
.train-unit-stats td{width:22%;text-align:right;font-weight:900;color:var(--tinta,#24190d);background:rgba(255,255,255,.13)}
.train-unit-stats .train-rarity{text-transform:capitalize;overflow:hidden;text-overflow:ellipsis}
.cost-labelled{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cost-labelled>strong{flex:0 0 auto;font-size:12px}
.cost-values{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:380px){
    .train-unit-compose{grid-template-columns:minmax(82px,32%) minmax(0,1fr);gap:7px}
    .train-unit-art{min-height:116px;max-height:154px}
    .train-unit-stats{font-size:10px}
    .train-unit-stats th,.train-unit-stats td{padding:4px}
}
.selrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:5px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);}
.selrow small{color:#8b95a3;}
.selrow .steps{display:flex;align-items:center;gap:6px;}
.selrow .steps button{width:26px;height:26px;padding:0;border-radius:6px;background:rgba(255,255,255,0.1);
    border:1px solid var(--line);color:var(--txt);cursor:pointer;font-size:14px;line-height:1;font-weight:700;}
.selrow .steps button.mx{width:auto;padding:0 8px;font-size:11px;color:var(--gold);}
.selrow .steps b{min-width:30px;text-align:center;color:var(--gold);font-variant-numeric:tabular-nums;}
.tag{font-size:10px;padding:2px 7px;border-radius:8px;background:rgba(255,255,255,.1);}
.tag.blue{background:rgba(70,130,255,.25);}
.tag.red{background:rgba(230,90,74,.25);}

/* ---- Tooltip / Toast ---- */
#tooltip{position:fixed;background:#0d1320ee;border:1px solid var(--line);padding:6px 10px;
    border-radius:8px;font-size:12px;pointer-events:none;z-index:60;white-space:nowrap;}
#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#0d1320f0;
    border:1px solid var(--gold);color:var(--gold);padding:10px 20px;border-radius:24px;
    z-index:70;font-size:14px;font-weight:600;transition:opacity .3s,transform .3s;}
.hidden{display:none!important;}
#toast.show{animation:pop .3s;}
@keyframes pop{from{transform:translateX(-50%) translateY(-10px);opacity:0;}}

/* ======================================================= */
/* ===============  REDISEÑO UI (v2)  ==================== */
/* ======================================================= */

/* ---- Navegación inferior (dos filas) ---- */
#bottomnav{position:fixed;bottom:0;left:0;right:0;height:54px;z-index:50;display:flex;
    background:linear-gradient(#131b2af2,#0b1120fb);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom,0);}
.navbtn{flex:1;background:none;border:none;color:var(--sub);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;cursor:pointer;font-size:10px;font-weight:600;
    position:relative;transition:.15s;padding:5px 2px;}
.navbtn i{font-style:normal;font-size:19px;line-height:1;filter:grayscale(.3) brightness(.9);}
.navbtn.active{color:var(--gold);}
.navbtn.active i{filter:none;transform:translateY(-1px);}
.navbtn.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--gold);}
.navbtn.badge::after{content:attr(data-badge);position:absolute;top:4px;right:calc(50% - 20px);
    background:var(--bad);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;
    border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

/* Segunda fila: sistemas + HUD de Ciudad/Mundo */
#bottomnav2{position:fixed;bottom:54px;left:0;right:0;width:100%;height:54px;box-sizing:border-box;z-index:50;display:flex;
    background:linear-gradient(#000000f2,#000000fb);border-top:1px solid var(--line);}
.navbtn2{flex:1;background:none;border:none;border-right:1px solid rgba(255,255,255,.04);
    color:var(--sub);display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;cursor:pointer;font-size:9px;font-weight:600;position:relative;transition:.15s;padding:4px 1px;}
.navbtn2:last-child{border-right:none;}
.navbtn2 i{font-style:normal;font-size:19px;line-height:1;filter:grayscale(.35) brightness(.9);}
.navbtn2.on{color:var(--gold);} .navbtn2.on i{filter:none;}
.navbtn2.active{color:var(--gold);background:rgba(255,206,84,.12);}
.navbtn2.active i{filter:none;transform:translateY(-1px);}
.navbtn2.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;background:var(--gold);}
.navbtn2:disabled{opacity:.35;cursor:default;}
.navbtn2.locked-level{opacity:.42;filter:grayscale(1)}
.navbtn2.locked-level::after{content:'🔒';position:absolute;right:4px;top:3px;font-size:9px}
.navbtn.attention,.navbtn2.attention{animation:tweAttention 1.15s ease-in-out infinite}
@keyframes tweAttention{0%,100%{filter:none}50%{filter:brightness(1.65);box-shadow:inset 0 0 14px rgba(255,190,40,.42)}}
.tutorial-forced{display:flex;flex-direction:column;gap:7px;margin:7px;padding:10px;border:1px solid var(--gold);background:linear-gradient(135deg,#211700,#080808);box-shadow:0 0 14px rgba(255,190,40,.22)}
.tutorial-forced b{color:var(--gold);font-size:13px}.tutorial-forced span{font-size:12px;line-height:1.35}
.saved-formations{margin-top:10px}.saved-formations>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:11px;list-style:none}.saved-formations>summary::-webkit-details-marker{display:none}.saved-formations>summary::after{content:'＋';color:var(--gold);font-size:17px}.saved-formations[open]>summary::after{content:'−'}.saved-formations>summary small{margin-left:auto;margin-right:9px;color:var(--sub);font-size:10px}.saved-formations:not([open]){padding-bottom:0}
.activity-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.activity-hub-card{min-width:0;border:1px solid #5b3b16;background:linear-gradient(145deg,#2b1a12,#100d0b 72%);color:#f3e2b6;box-shadow:inset 0 1px rgba(255,225,154,.2),0 4px 10px rgba(25,13,4,.2)}
.activity-hub-card>summary{display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:8px;min-height:68px;padding:10px;cursor:pointer;list-style:none}
.activity-hub-card>summary::-webkit-details-marker{display:none}.activity-hub-card>summary i{font-style:normal;font-size:29px;text-align:center;filter:drop-shadow(0 2px 2px #000)}
.activity-hub-card>summary span{display:grid;gap:3px;min-width:0}.activity-hub-card>summary b{font-family:var(--font-medieval);color:#f1c766;font-size:14px}.activity-hub-card>summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c8b995;font-size:10px}.activity-hub-card>summary em{font-style:normal;font-size:23px;transition:transform .18s}
.activity-hub-card[open]{grid-column:1/-1;background:linear-gradient(160deg,#32170f,#120d0c 62%,#28180f)}.activity-hub-card[open]>summary em{transform:rotate(90deg)}
.activity-hub-detail{padding:10px;border-top:1px solid rgba(235,190,94,.3)}.activity-hub-detail>.queue-go{width:100%;margin-top:8px}
.activity-hub-card.needs-attention{border-color:#d29b28;box-shadow:0 0 12px rgba(229,166,42,.32),inset 0 1px rgba(255,225,154,.3)}
.activity-army-sections h4{margin:8px 0 5px;color:#e8c779}.activity-army-sections .queue-go{margin-bottom:8px}
.research-confirm{display:grid;gap:10px}
.research-confirm-intro{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;padding:12px;border:1px solid #554334;background:linear-gradient(135deg,#100e0d,#2b100d)}
.research-confirm-intro i{font-style:normal;font-size:58px;text-align:center;filter:drop-shadow(0 3px 3px #000)}
.research-confirm-intro p{margin:0;color:#f0cb69;font:700 14px/1.4 var(--font-medieval)}
.research-level-change{display:flex;align-items:center;justify-content:center;gap:10px}
.research-level-change>span{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
    width:min(150px,38vw);min-height:58px;padding:7px 11px;border-radius:5px;
    border:1px solid #6d5435;
    background:linear-gradient(190deg,#8f7150 0%,#dfc58f 48%,#a9855c 100%);
    color:#28190e;box-shadow:inset 0 1px #fff1c4,inset 0 -2px #5a422c,0 2px 4px #2b1b1233;
}
.research-level-change small{grid-column:1/-1;font-size:10px;color:#4b351f!important;text-transform:uppercase;letter-spacing:.02em}
.research-level-change b{font-size:23px;color:#241407}
.research-level-change em{font-style:normal;font-weight:900;color:#35691f}
.research-level-change>strong{font-size:25px;color:#b87913;text-shadow:0 1px #fff1b2}
.research-confirm-costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.research-cost-row,.research-confirm>.row{
    display:flex;justify-content:space-between;align-items:center;padding:7px 9px;
    border:1px solid #806538!important;border-radius:3px;
    background:linear-gradient(190deg,#a98961 0%,#ead5a5 50%,#ae8a60 100%)!important;
    color:#2a1a0e!important;box-shadow:inset 0 1px #fff4cf,inset 0 -1px #6c5134;
}
.research-cost-row.missing{border-color:#9a3d30!important;color:#8a1f18!important}
.research-confirm>[data-confirm-research]{
    color:#241407!important;border:1px solid #76500d!important;border-radius:3px;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff0b0,inset 0 -2px #563616,0 2px 4px #3d210955!important;
}
@media(max-width:390px){.research-level-change{gap:5px}.research-level-change>span{width:min(128px,38vw);padding:6px 8px}.research-level-change>strong{font-size:20px}}
@media(max-width:430px){.activity-hub-grid{gap:7px}.activity-hub-card>summary{grid-template-columns:34px 1fr 14px;min-height:60px;padding:8px}.activity-hub-card>summary i{font-size:24px}}
.panel-alert{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:4px;border-radius:50%;background:#ef3f37;color:#fff;font:900 11px/1 var(--font-ui);font-style:normal;animation:tweAttention 1.15s ease-in-out infinite}
.tutorial-important{border-color:var(--gold)!important;animation:tutorialBorderPulse 1.45s ease-in-out infinite}
.tutorial-focus{outline:3px solid #ffce54!important;outline-offset:3px;z-index:48!important}
.tutorial-focus::after{content:attr(data-tutorial-focus);position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ef3f37;color:#fff;border:2px solid #fff;font:900 15px/1 var(--font-ui);box-shadow:0 0 0 4px rgba(239,63,55,.25);animation:tutorialBang 1s ease-in-out infinite;pointer-events:none}
.tutorial-search-focus{position:relative;z-index:2;animation:tutorialSearchPulse 1.05s ease-in-out infinite!important}
.tutorial-build-focus{position:relative;border-color:var(--gold)!important;animation:tutorialSearchPulse 1.05s ease-in-out infinite!important}
.upgrade-requirements{margin:8px 0;padding:7px;border:1px solid #5b4815;background:#090909}
.upgrade-requirements>.sub{margin-bottom:4px;color:#d9bc70}
.upgrade-requirement{padding:4px 2px;border-top:1px solid #28210f}
.upgrade-requirement.ok{color:var(--ok)}
.upgrade-requirement.missing{color:var(--bad)}
.upgrade-requirement.actionable{width:100%;background:transparent;border-right:0;border-bottom:0;border-left:0;font:inherit;text-align:left;cursor:pointer}
.upgrade-requirement.actionable:hover,.upgrade-requirement.actionable:focus-visible{background:rgba(255,206,84,.12);color:var(--gold);outline:1px solid var(--gold)}
@keyframes tutorialBorderPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,206,84,.3),0 5px 18px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 4px rgba(255,206,84,.75),0 0 24px rgba(255,190,40,.65)}}
@keyframes tutorialBang{0%,100%{transform:scale(.88);filter:brightness(1)}50%{transform:scale(1.14);filter:brightness(1.45)}}
@keyframes tutorialSearchPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,206,84,.4);filter:brightness(1)}50%{box-shadow:0 0 0 5px rgba(255,206,84,.8),0 0 22px rgba(255,177,28,.8);filter:brightness(1.35)}}

/* ---- Botones flotantes ---- */
/* Construir: arriba a la derecha. Buscar: abajo a la derecha encima de la
   segunda barra. Tienda: abajo a la izquierda. */
.fab{position:fixed;right:14px;top:104px;bottom:auto;z-index:46;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:1px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,206,84,.5);
    background:linear-gradient(#2a3346,#1a2230);color:var(--gold);font-size:20px;cursor:pointer;font-weight:700;
    box-shadow:0 6px 18px rgba(0,0,0,.5);}
.fab span{font-size:9px;color:var(--txt);}
.fab:active{transform:scale(.94);}
/* Buscar: esquina inferior derecha, separado de la segunda barra */
#fabSearch{left:14px;top:auto;bottom:116px;}
/* Tienda: esquina inferior izquierda, subido para no tapar la medalla del jugador */
#fabShop{left:14px;right:auto;top:auto;bottom:180px;
    border-color:rgba(143,233,255,.55);background:linear-gradient(#2b3b52,#1a2230);}
/* Una hoja de acciones del Mundo sustituye temporalmente a los controles
   flotantes: evita que el chat y los FAB queden por encima de su contenido. */
body.world-panel-open #chathud,
body.world-panel-open #fabSearch,
body.world-panel-open #fabShop{display:none!important;}

/* ---- Barra de colocación (ghost) ---- */
#ghostbar{position:fixed;left:50%;bottom:116px;transform:translateX(-50%);z-index:47;width:min(440px,94vw);
    color:var(--tinta);background:linear-gradient(180deg,var(--papel-claro),var(--papel));border:2px solid var(--tinta);
    border-radius:3px;padding:10px 12px;
    box-shadow:0 8px 30px rgba(0,0,0,.55);}
.gb-hint{font-size:12px;color:var(--tinta);text-align:center;margin-bottom:8px;font-weight:700;}
.gb-ok{color:var(--ok);font-weight:700;} .gb-no{color:var(--bad);font-weight:700;}
.gb-btns{display:flex;gap:8px;} .gb-btns .btn{flex:1;}
#ghostbar .btn{color:var(--tinta)!important;background:linear-gradient(#f4d77c,#dca32a)!important;border:1px solid var(--tinta)!important}
#ghostbar .btn.sec{background:linear-gradient(#f7edca,#dcc792)!important}
.mm-guide-action{width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit}

/* ---- Pantalla completa ---- */
#screen{position:fixed;top:52px;bottom:108px;left:0;right:0;z-index:45;display:flex;flex-direction:column;
    background:radial-gradient(120% 80% at 50% 0%,#1d2738,#131a27 70%);animation:scin .22s ease;}
body.deep-screen-open #bottomnav,body.deep-screen-open #bottomnav2{display:none!important}
body.deep-screen-open #screen{bottom:0!important}
#screen{border-top:1px solid #8f6728;box-shadow:inset 0 1px rgba(255,226,151,.18)}
#screen .scr-head{background:linear-gradient(180deg,#252422,#11100f)!important;border-bottom:2px solid #6f4b1d!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.35)}
#screen .scr-head h2{font-family:var(--font-medieval);color:#f0dfb2;text-shadow:0 2px 2px #000}
#screen .scr-body{background:radial-gradient(ellipse at 50% 5%,rgba(114,49,26,.25),transparent 42%),linear-gradient(180deg,#17120f,#0e0c0b)}
#screen .scard{border-color:#68491f;box-shadow:inset 0 1px rgba(255,230,170,.15),0 3px 8px rgba(0,0,0,.18)}
#screen .sec-h{font-family:var(--font-medieval);color:#e9bd59}
#screen[data-screen="eventos"] .scr-tabs{overflow-x:auto;scrollbar-width:thin;justify-content:flex-start;background:#100d0b}
#screen[data-screen="eventos"] .scr-tabs button{flex:0 0 clamp(92px,24vw,150px);min-height:58px;white-space:normal;border:1px solid #4f371d;background:radial-gradient(circle at 50% 15%,#46251b,#17100d 72%);font-family:var(--font-medieval)}
#screen[data-screen="eventos"] .scr-tabs button.on{color:#f2c45d;border-color:#bc8428;box-shadow:inset 0 -3px #bd2e21,0 0 10px rgba(205,139,33,.25)}
.mp-list .mp-row:nth-child(1) .mp-rank,.mp-list .mp-row:nth-child(2) .mp-rank,.mp-list .mp-row:nth-child(3) .mp-rank{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:var(--font-medieval);font-weight:900;color:#241506;text-shadow:0 1px rgba(255,255,255,.45)}
.mp-list .mp-row:nth-child(1) .mp-rank{background:radial-gradient(circle at 35% 25%,#fff1a2,#d99a16 60%,#7c4805);box-shadow:0 0 10px #e3b23c}.mp-list .mp-row:nth-child(2) .mp-rank{background:radial-gradient(circle at 35% 25%,#fff,#aeb5bc 62%,#5d646c)}.mp-list .mp-row:nth-child(3) .mp-rank{background:radial-gradient(circle at 35% 25%,#f2c08a,#a9632d 62%,#563017)}
@keyframes scin{from{opacity:0;transform:translateY(8px);}}
.scr-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);
    background:linear-gradient(#182234,#141c2b);}
.scr-head h2{flex:1;font-size:17px;font-weight:700;}
.scr-back,.scr-close{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);
    width:34px;height:34px;border-radius:10px;font-size:18px;cursor:pointer;line-height:1;}
.scr-back{font-size:24px;}
.scr-tabs{display:flex;gap:6px;padding:10px 12px 4px;overflow-x:auto;}
.scr-tabs button{white-space:nowrap;background:rgba(255,255,255,.06);border:1px solid var(--line);
    color:var(--sub);padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;}
.scr-tabs button.on{background:var(--gold);color:#20160a;border-color:var(--gold);}
.scr-body{flex:1;overflow-y:auto;padding:10px 12px 24px;-webkit-overflow-scrolling:touch;}

/* ---- Categorías de construcción ---- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,140px);justify-content:center;gap:6px;max-width:1016px;margin:0 auto;}
.cattile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 10px;cursor:pointer;
    background:linear-gradient(#212c40,#1a2333);border:1px solid var(--line);border-radius:16px;color:var(--txt);
    transition:.15s;}
.cattile:active{transform:scale(.97);} .cattile:hover{border-color:var(--gold);background:linear-gradient(#26324a,#1c2536);}
.cattile.locked,.cattile:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.48}
.cattile.locked:hover,.cattile:disabled:hover{border-color:var(--line);background:linear-gradient(#212c40,#1a2333)}
.cattile.todos{width:100%;justify-self:stretch;}
@media(max-width:1100px){
    .catgrid{grid-template-columns:repeat(auto-fit,140px);gap:8px;}
    .cattile.todos{width:140px;justify-self:center;}
}
.ct-ico{font-size:34px;line-height:1;}
.ct-nom{font-size:15px;font-weight:700;}
.ct-sub{font-size:11px;color:var(--sub);}

/* ---- Tarjetas grandes (edificios, tropas, investigación, objetos) ---- */
.scardlist{display:flex;flex-direction:column;gap:10px;}
.inventory-grid{display:grid;gap:8px;align-items:stretch}
.inventory-grid>.scard,.inventory-grid>.hintbox{min-width:0;margin:0;box-sizing:border-box}
.inventory-grid-resources{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.inventory-grid-todo,.inventory-grid-aceleradores,.inventory-grid-consumibles,.inventory-grid-especiales{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.inventory-grid-materiales{grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr))}
.inventory-grid-fragments{grid-template-columns:repeat(auto-fit,minmax(min(100%,450px),1fr))}
.inventory-grid-forge{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.inventory-grid-todo>.scard,.inventory-grid-aceleradores>.scard,.inventory-grid-consumibles>.scard,.inventory-grid-especiales>.scard{display:grid;grid-template-columns:58px 1fr;min-height:92px;padding:7px}.inventory-grid-todo .sc-ico,.inventory-grid-aceleradores .sc-ico,.inventory-grid-consumibles .sc-ico,.inventory-grid-especiales .sc-ico{width:54px}.inventory-grid-todo .sc-fun,.inventory-grid-aceleradores .sc-fun,.inventory-grid-consumibles .sc-fun,.inventory-grid-especiales .sc-fun{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9px}
@media(max-width:430px){.inventory-grid-todo,.inventory-grid-aceleradores,.inventory-grid-consumibles,.inventory-grid-especiales{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.inventory-grid-todo>.scard,.inventory-grid-aceleradores>.scard,.inventory-grid-consumibles>.scard,.inventory-grid-especiales>.scard{display:flex;flex-direction:column;min-height:128px;text-align:center}.inventory-grid-todo .sc-ico,.inventory-grid-aceleradores .sc-ico,.inventory-grid-consumibles .sc-ico,.inventory-grid-especiales .sc-ico{margin:auto}.inventory-grid-todo .sc-fun,.inventory-grid-aceleradores .sc-fun,.inventory-grid-consumibles .sc-fun,.inventory-grid-especiales .sc-fun{display:none}}
.inventory-grid .forge-recipe-card{display:block}
.forge-recipe-head{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;padding:8px 8px 0}
.forge-recipe-art{display:block;width:76px;height:76px;object-fit:contain;background:#dfc995;border:1px solid rgba(72,48,15,.38);box-sizing:border-box}
.forge-recipe-head .sc-tit{overflow-wrap:anywhere}
.forge-recipe-head .sub{margin-top:3px}
.forge-attribute-table{margin:8px 0}
.forge-attribute-table th{width:62%}
.forge-attribute-table td{width:38%}
.forge-attribute-table th span{display:inline-block;min-width:18px;text-align:center;margin-right:3px}
.forge-attribute-table .forge-value-missing{color:var(--bad,#a71919);background:rgba(167,25,25,.08)}
.forge-block-title{margin-top:8px;padding:5px 6px;border-bottom:1px solid rgba(72,48,15,.45);font-size:11px;font-weight:900;text-transform:uppercase;color:#24190d;background:rgba(72,48,15,.08)}
.forge-recipe-card .forge-block-title:first-child{margin-top:0}
.forge-requirements-table{margin-top:0}
.forge-fragment-icon{position:relative;display:inline-grid!important;place-items:center;width:31px!important;height:31px;vertical-align:middle}.forge-fragment-icon img{width:29px;height:29px;object-fit:contain;border:1px solid #765232;background:#15120f}.forge-fragment-icon i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:11px}.forge-fragment-row th{white-space:normal!important}
.forge-craft-time{display:flex;justify-content:space-between;gap:10px;margin:7px 0;padding:6px;border:1px solid rgba(72,48,15,.28);color:#24190d;background:rgba(255,255,255,.13);font-size:11px;font-weight:800}
.forge-craft-button{width:100%}
.bag-resource-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px;align-items:start}
.bag-resource-fold{margin:0;min-width:0}
.bag-resource-fold summary{min-height:70px}
.bag-resource-thumb{width:60px;height:60px;object-fit:cover;border:1px solid var(--borde-papiro);margin-right:7px;vertical-align:middle;flex:0 0 60px}
.bag-resource-status{padding:8px 0;color:#171008;font-weight:650;line-height:1.45}
.bag-resource-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.bag-resource-actions .btn{min-width:0;margin:0}
.army-summary-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
.screen-context-banner{margin:0 0 8px;border:1px solid var(--line);background:#dfc995;overflow:hidden;box-sizing:border-box}
.screen-context-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.army-context-banner{height:clamp(130px,22vw,250px)}
.march-context-banner{height:clamp(105px,18vw,190px)}
.events-context-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch;margin-bottom:8px}
.events-context-grid>.scard,.events-context-grid>.screen-context-banner{margin:0;min-width:0}
.events-context-banner{width:min(100%,430px);height:clamp(92px,10vw,132px);min-height:0;justify-self:center}
.events-context-banner img{object-fit:contain}
.events-context-card .sc-body{height:100%;box-sizing:border-box}
.ranking-context-banner,.multiplayer-context-banner,.clan-context-banner{height:clamp(125px,21vw,235px)}
@media(max-width:560px){
    .events-context-banner{width:min(100%,390px);height:104px}
    .army-context-banner,.march-context-banner{height:140px}
}
.fab-icon-only{width:46px!important;height:46px!important;min-width:46px!important;padding:0!important;border-radius:50%!important;font-size:22px!important}
#fabMoveBase{left:14px;right:auto;top:auto;bottom:244px}
.world-home-compass{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;min-width:78px;padding:5px 9px;border:1px solid #9e6d22;background:linear-gradient(#2d2118,#100d0b);color:#f2d88e;box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:pointer}
.world-home-compass i{display:inline-block;font-style:normal;font-size:19px;transform:rotate(var(--home-angle));transition:transform .15s}.world-home-compass span{font:700 10px/1.1 var(--font-medieval);white-space:nowrap}
.army-summary-stats{min-width:0}
.army-training-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:8px;align-items:start}
.army-training-grid>.scard{margin:0;min-width:0}
.acceleration-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.speedup-picker{display:grid;gap:8px}
.speedup-option{display:grid;grid-template-columns:56px minmax(110px,1fr) repeat(auto-fit,minmax(125px,max-content));gap:7px;align-items:center;padding:8px;border:1px solid var(--borde-papiro);background:#ead49e}
.speedup-option .bag-item-icon{width:52px;height:52px}
.speedup-option small{display:block;color:#171008;font-weight:700}
@media(min-width:760px){
    .army-summary-grid{grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr)}
}
@media(min-width:1500px){
    .army-training-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:560px){
    .speedup-option{grid-template-columns:48px minmax(0,1fr)}
    .speedup-option .btn{grid-column:1/-1}
}
.build-card-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;}
.build-card-grid>.scard{height:100%;box-sizing:border-box;}
@media(min-width:650px){
    .build-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:950px){
    .build-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:1250px){
    .build-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(min-width:1550px){
    .build-card-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
.scard{display:flex;gap:12px;background:linear-gradient(#1e2838,#182130);border:1px solid var(--line);
    border-radius:14px;padding:12px;margin-bottom:10px;}
.scardlist .scard{margin-bottom:0;}
.scard.lock{opacity:.6;} .scard.done{border-color:rgba(72,207,123,.4);}
.scard.obra{border-color:rgba(255,206,84,.45);}
.scard .sc-ico{position:relative;flex:0 0 74px;width:74px;height:74px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:#dfc995;}
.sc-ico .edimg{width:100%;height:100%;object-fit:contain;}
.sc-ico .troop-lock-art{object-fit:cover;object-position:center 32%;}
.sc-ico .edemoji{font-size:40px;}
.scard .sc-ico:has(.bag-reserve-icon){background:transparent;border-radius:0;overflow:visible;}
.bag-reserve-icon{display:block;width:74px;height:74px;object-fit:contain;filter:none;}
.scard .sc-ico:has(.bag-item-icon){background:transparent;border-radius:0;overflow:visible;}
.bag-item-icon{display:block;width:74px;height:74px;object-fit:contain;filter:none;}
.lvbadge{position:absolute;bottom:3px;right:3px;background:#0d1320cc;border:1px solid var(--line);color:var(--gold);
    font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;}
.sc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.sc-tit{font-size:15px;font-weight:700;}
.sc-fun{font-size:12px;color:var(--info);}
.sc-cost{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0;}
.sc-estado{font-size:11px;color:var(--sub);}
.sc-body .btn{margin-top:4px;}
.sec-h{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:6px;}
.research-groups{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.research-groups button{padding:10px;border:1px solid var(--line);background:#090909;color:var(--sub);font-weight:800;cursor:pointer}
.research-groups button.on{border-color:var(--gold);background:rgba(255,206,84,.16);color:var(--gold)}
.scr-tabs.research-primary-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:8px;overflow:visible}
.scr-tabs.research-primary-tabs button{width:100%;min-height:46px;padding:11px 14px;font-size:16px;font-weight:900}
.research-groups.research-subgroups-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.research-groups.research-subgroups-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.research-groups[class*="research-subgroups-"] button{min-width:0;padding:8px 4px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.statline{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--txt);}
.statline .st{background:rgba(255,255,255,.05);padding:2px 6px;border-radius:6px;}
.statline,.statline .st{color:var(--tinta,#24190d)!important}
.statline .st{background:rgba(255,255,255,.3);font-weight:850;font-variant-numeric:tabular-nums}
.btn.big{width:100%;padding:14px;font-size:15px;border-radius:12px;margin-top:6px;background:var(--gold);color:#20160a;}
.hintbox{font-size:12px;color:var(--sub);background:rgba(255,255,255,.04);border:1px dashed var(--line);
    border-radius:12px;padding:12px;line-height:1.5;margin-top:10px;}
.event-fold{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:rgba(255,255,255,.025);overflow:hidden;}
.event-fold summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;color:var(--gold);font-weight:800;cursor:pointer;list-style:none;}
.event-fold summary::-webkit-details-marker{display:none;}
.event-fold summary::after{content:'▾';font-size:12px;transition:transform .15s;}
.event-fold[open] summary::after{transform:rotate(180deg);}
.event-fold summary small{margin-left:auto;color:var(--sub);font-size:10px;font-weight:600;}
.event-claim-alert{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:7px;border-radius:50%;background:#d93636;color:#fff;font:900 12px/1 var(--font-ui);box-shadow:0 0 0 2px #3a0d0d,0 0 8px #ef474799;vertical-align:middle;}
.event-fold-body{padding:0 10px 10px;}
.event-tab-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:10px 0 0;border-bottom:2px solid var(--line);}
.event-tab-button{position:relative;min-width:0;min-height:44px;padding:5px 3px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-bottom:0;background:var(--papel-claro,#f0dfb6);color:var(--tinta,#24190d);font:inherit;font-size:clamp(9px,1.15vw,12px);font-weight:800;cursor:pointer;}
.event-tab-button i{font-style:normal;font-size:15px;line-height:1;}
.event-tab-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.event-tab-button.on{background:linear-gradient(#ffd95a,#edb42a);box-shadow:inset 0 -3px 0 #9e6500;}
.event-tab-button .event-claim-alert{position:absolute;top:-7px;right:2px;}
.event-tab-list + .event-fold{margin-top:0;}
.event-fold[data-event-pane]{display:none;border-top:0;margin-top:0;}
.event-fold[data-event-pane].event-tab-active{display:block;}
.event-fold[data-event-pane]>summary{display:none;}
.event-fold[data-event-pane]>.event-fold-body{padding-top:10px;}
.event-info-btn{margin:0 0 9px auto;width:auto}
.event-info-copy p{margin:0 0 10px}
.event-info-copy p:last-child{margin-bottom:0}
.event-info-copy h3{margin:12px 0 5px;font-size:14px}
.event-info-copy ul{margin:0 0 10px;padding-left:20px}
.event-info-copy li{margin:0 0 5px}
.season-layout{display:grid;grid-template-columns:repeat(2,minmax(0,510px));grid-template-areas:"summary ranking" "milestones milestones";gap:10px;align-items:start;justify-content:center}
.season-layout .scard{margin:0;box-sizing:border-box}
.season-card,.season-milestones{width:100%}
.season-summary{grid-area:summary}.season-ranking{grid-area:ranking;position:relative}.season-milestones{grid-area:milestones}
.season-ranking-info{top:6px;right:6px}
.season-milestones>.sec-h{padding:8px 2px 5px}
.season-milestone{padding:8px;margin-bottom:7px!important}
.season-reward-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.season-reward-track{display:grid;grid-template-rows:auto minmax(34px,auto) auto;gap:5px;padding:7px;border:1px solid var(--borde-papiro,#80652f);background:rgba(255,248,222,.35)}
.season-reward-track>b{font-size:12px}.season-reward-track>span{min-width:0;font-size:10.5px;line-height:1.25;overflow-wrap:anywhere}
.season-reward-track .btn{width:100%;margin:0}
.season-reward-track.premium{background:rgba(255,206,84,.18)}
.season-ranking-list{display:flex;flex-direction:column;margin-top:8px;border:1px solid var(--borde-papiro,#80652f)}
.season-ranking-list>div{display:grid;grid-template-columns:minmax(82px,.55fr) minmax(0,1.45fr);gap:8px;padding:8px;border-bottom:1px solid var(--borde-papiro,#80652f);align-items:center}
.season-ranking-list>div:last-child{border-bottom:0}.season-ranking-list span{text-align:right;font-size:11px;overflow-wrap:anywhere}
.season-actions{display:flex;flex-direction:column;gap:6px;margin-top:10px}.season-actions .btn{margin:0;width:100%}
.event-objectives-grid{display:grid;gap:8px;align-items:stretch}
.event-objectives-grid>.scard{margin:0;min-width:0}
.event-objectives-daily{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.event-objectives-weekly{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.shop-groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:8px;align-items:start}
.shop-groups-grid>.shop-fold{margin:0;min-width:0}
@media(max-width:380px){
    .season-reward-tracks{gap:4px}
    .season-reward-track{padding:5px}
    .season-reward-track>span{font-size:9.5px}
}
@media(max-width:700px){
    .season-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"summary" "ranking" "milestones"}
}
@media(max-width:700px){
    .event-tab-list{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-snap-type:x proximity;}
    .event-tab-button{flex:0 0 92px;scroll-snap-align:start;font-size:10px;}
}
.event-fold-daily{border-left:3px solid #63c7ff;}.event-fold-weekly{border-left:3px solid #9b8cff;}
.event-fold-tutorial{border-left:3px solid #57d88b;}.event-fold-campaign{border-left:3px solid #e19a52;}.event-fold-achievement{border-left:3px solid var(--gold);}
.tutorial-mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:6px;align-items:start}
.tutorial-mission-grid>.tutorial-mission{margin:0;min-width:0}
.tutorial-story-intro{border-color:var(--gold)}
.tutorial-story-copy{padding:7px 9px;border-left:3px solid var(--gold);background:rgba(255,206,84,.12);color:#171008;font-weight:700;font-style:italic;line-height:1.4}
.tutorial-mission-complete{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:7px 10px;border:1px solid #817866;background:linear-gradient(#c8c3b7,#aaa69d);color:#45413a;filter:grayscale(1)}
.tutorial-mission-complete span{font-weight:850}.tutorial-mission-complete small{font-weight:750;color:#4e4a43}
.tutorial-mission>summary{min-height:40px;box-sizing:border-box}
.campaign-chapter{margin-bottom:7px}.campaign-chapter.chapter-done{filter:grayscale(.55);opacity:.78}
.campaign-objective{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:5px 7px;border-bottom:1px solid rgba(60,42,18,.18);font-weight:750}
.campaign-objective.done{color:#486b36}.campaign-objective:last-child{border-bottom:0}
.achievement-list{display:flex;flex-direction:column;border:1px solid rgba(60,42,18,.35);background:rgba(255,248,222,.2)}
.achievement-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(150px,1fr) auto;gap:10px;align-items:center;padding:9px;border-bottom:1px solid rgba(60,42,18,.28)}
.achievement-row:last-child{border-bottom:0}.achievement-row.done{background:rgba(88,130,55,.12)}
.achievement-copy{min-width:0}.achievement-copy b,.achievement-copy small{display:block}.achievement-copy small{margin-top:2px;color:#5f5546}
.achievement-progress{min-width:0}.achievement-progress .progress{margin:0}.achievement-reward{font-size:11px;margin-top:3px;color:#574114}
@media(max-width:700px){.achievement-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 7px;padding:6px 7px}.achievement-copy b{font-size:13px;line-height:1.15}.achievement-copy small{font-size:10px;line-height:1.2}.achievement-progress{grid-column:1/-1;grid-row:2}.achievement-reward{font-size:10px}.achievement-row .btn{grid-column:2;grid-row:1;padding:4px 6px!important;font-size:10px!important;min-height:26px}}
.building-upgrade-button:disabled{cursor:not-allowed!important;color:#5c574d!important;border-color:#7d776c!important;background:linear-gradient(#c9c5bc,#aaa69f)!important;box-shadow:none!important;filter:grayscale(1)}
.building-upgrade-button:disabled.requirement-upgrade-focus{animation:none!important;outline:0!important}
.upgrade-disabled-reason{margin-top:5px;color:var(--bad)!important;font-weight:800!important}
.requirement-upgrade-focus{position:relative;z-index:2;animation:requirementUpgradePulse .72s ease-in-out infinite!important}
@keyframes requirementUpgradePulse{0%,100%{outline:2px solid #ffce54;outline-offset:2px;box-shadow:0 0 0 2px rgba(255,206,84,.35),0 0 10px rgba(255,177,28,.5)}50%{outline:4px solid #fff1a8;outline-offset:4px;box-shadow:0 0 0 7px rgba(255,206,84,.55),0 0 24px rgba(255,140,0,.9);filter:brightness(1.25)}}
.event-fold .event-fold-body .scard:last-child{margin-bottom:0;}
.shop-fold summary::after{display:none}.shop-fold-meta{display:flex;align-items:center;gap:8px;margin-left:auto}.shop-fold-meta i{display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--gold);background:rgba(255,206,84,.12);color:var(--gold);font:900 22px/1 var(--font-medieval)}.shop-fold-meta i::before{content:'+'}.shop-fold[open] .shop-fold-meta i::before{content:'−'}.shop-fold summary small{margin-left:0}.shop-fold summary:hover .shop-fold-meta i{background:var(--gold);color:#130d05}
.clan-fold-logs{border-left:3px solid #b9c5d8;}.clan-fold-progress{border-left:3px solid #57d88b;}.clan-fold-league{border-left:3px solid #9b8cff;}.clan-fold-capital{border-left:3px solid var(--gold);}.clan-fold-tech{border-left:3px solid #63c7ff;}
.clan-fold-rallies{border-left:3px solid #e19a52}.clan-fold-cooperation{border-left:3px solid #57d88b}
.clan-fold summary small{max-width:44%;text-align:right;line-height:1.15;}
.clan-fold-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;align-items:start;margin:8px 0}
.clan-fold-grid>.clan-fold{margin:0;min-width:0}
.clan-fold>summary{position:relative;padding-left:32px;padding-right:42px}
.clan-fold>summary>span:first-child::before{content:'';position:absolute;left:11px;top:50%;width:11px;height:11px;border:2px solid #24190d;border-radius:50%;transform:translateY(-50%);box-sizing:border-box}
.clan-fold[open]>summary>span:first-child::before{background:#24190d;box-shadow:inset 0 0 0 2px #e7bd45}
.clan-summary-info{position:absolute;right:9px;top:50%;width:25px;height:25px;padding:0!important;transform:translateY(-50%);border:1px solid #24190d!important;border-radius:50%;background:#ead49e!important;color:#171008!important;font:900 14px/23px var(--font-ui)!important;cursor:pointer;z-index:2}
.clan-info-button{display:block;margin:0 0 8px auto}
.clan-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.clan-section-heading h3{margin:0}
.clan-progress-action{display:flex;align-items:center;gap:10px}
.clan-progress-action>.mp-name{flex:1 1 auto;min-width:0;text-align:left;white-space:normal}
.clan-progress-action>.btn{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.clan-shop-title{margin:9px 0 5px;font-weight:900;text-transform:uppercase}
@media(max-width:479px){
    .clan-progress-action{display:grid;grid-template-columns:minmax(0,1fr) auto}
    .clan-progress-action>.btn{justify-self:end}
}
@media(min-width:480px){
    .clan-fold-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .clan-fold-grid>.clan-fold[open]{grid-column:1/-1}
}
.promo-row{display:flex;gap:8px}.promo-row input{min-width:0;flex:1;}
.world-event-army{display:grid;grid-template-columns:repeat(5,minmax(42px,1fr));gap:6px;}
.world-event-army label{display:flex;min-width:0;flex-direction:column;gap:3px;color:var(--tinta);font-size:10px;font-weight:800}
.world-event-army label>span{display:flex;min-width:0;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.world-event-army label small{color:var(--tinta-suave);font-size:8px;font-weight:700}
.world-event-army input{width:100%;min-width:0;}
.world-event-army select{grid-column:1/4;min-width:0;}
.world-event-army .btn{grid-column:4/6;width:100%;min-width:0;}
.world-event-reward{margin:5px 0;border:1px solid var(--borde-papiro);background:rgba(255,255,255,.2)}
.world-event-reward>summary{padding:5px 7px;list-style:none;cursor:pointer;color:var(--tinta);font-size:11px;font-weight:850}
.world-event-reward>summary::-webkit-details-marker{display:none}
.world-event-reward>summary::after{content:'＋';float:right}
.world-event-reward[open]>summary::after{content:'−'}
.world-event-reward>div{padding:6px 7px;border-top:1px solid var(--borde-papiro);color:var(--tinta-suave);font-size:10px;line-height:1.4}
.queue-overview{display:flex;flex-direction:column;gap:7px;margin-bottom:10px;}
.queue-capacity{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:7px;margin-bottom:10px;padding:12px;border:1px solid var(--gold);background:linear-gradient(135deg,rgba(255,206,84,.13),rgba(0,0,0,.72));}
.queue-capacity h3{grid-column:1/-1;color:var(--gold);font-size:16px;margin-bottom:2px}
.queue-capacity-row{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;padding:8px;background:rgba(0,0,0,.38);border-left:2px solid rgba(255,206,84,.55)}
.queue-capacity-row>i{font-style:normal;font-size:20px;text-align:center}.queue-capacity-row>div{display:flex;flex-direction:column;gap:2px}
.queue-capacity-row b{color:var(--gold);font-size:13px}.queue-capacity-row span{font-size:12px;font-weight:700}.queue-capacity-row small{color:var(--sub);font-size:10.5px;line-height:1.35}
.queue-fold{border:1px solid var(--line);background:rgba(255,255,255,.035);overflow:hidden;}
.queue-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 10px;color:var(--gold);font-weight:800;cursor:pointer;list-style:none;}
.queue-fold>summary::-webkit-details-marker{display:none;}
.queue-fold>summary::after{content:'＋';flex:none;order:3;width:22px;height:22px;border:1px solid rgba(255,206,84,.5);display:grid;place-items:center;font-size:15px;line-height:1;}
.queue-fold[open]>summary::after{content:'−';}
.queue-fold>summary small{margin-left:auto;color:var(--sub);font-size:10px;font-weight:600;}
.queue-fold[open]>summary{border-bottom:1px solid var(--line);background:rgba(255,206,84,.08);}
.queue-fold-body{display:flex;flex-direction:column;gap:7px;padding:8px;}
.queue-task{padding:8px;border:1px solid rgba(255,206,84,.24);background:#050505;}
.queue-task .row{gap:8px}.queue-task .row>b:first-child{min-width:0;overflow-wrap:anywhere;}
.queue-task .bar{margin:6px 0;}
.queue-formation{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.queue-empty{padding:9px;color:var(--sub);font-size:11px;text-align:center;border:1px dashed rgba(255,255,255,.15);}
.queue-slot-strip{display:flex!important;flex-direction:row!important;gap:5px!important;margin:4px 0}
.queue-slot-strip span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #654819;font-size:11px!important;font-weight:900!important}
.queue-slot-strip .free{background:#d7e0b0!important;color:#21310e!important}
.queue-slot-strip .busy{background:#dda025!important;color:#1d1306!important}
.queue-slot-strip .locked{background:#b8a786!important;color:#5b4d35!important}
.active-queue-details>h3,.formation-queues h3{color:#171008;font-size:15px;margin:4px 0}
.formation-queues{margin:10px 0;padding:10px;border:1px solid rgba(36,25,13,.58);background:linear-gradient(180deg,#efddb2,#d9c18c)}
.formation-queue-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:7px}
.formation-queue-tab{flex:0 1 150px;max-width:150px;min-width:42px;padding:8px 6px;border:1px solid #654819;background:#d7c18f;color:#24190d;font-weight:800;cursor:pointer}
.formation-queue-tab.on{background:linear-gradient(180deg,#f2ca59,#dda025);color:#000}
.formation-power{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;color:#171008}
.formation-lanes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:7px}
.formation-lane{display:grid;grid-template-columns:minmax(100px,1fr) minmax(100px,1fr) 54px;gap:7px;align-items:center;padding:8px;margin-top:5px;border:1px solid rgba(36,25,13,.45);background:rgba(255,248,222,.38);color:#171008;font-size:12px}
.formation-lanes-grid .formation-lane{margin-top:0}
.formation-lane b{text-align:right;font-size:13px}
.formation-info-button{width:100%;margin-top:8px}
.operational-queues{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,315px),1fr))}
.operational-queues>h3{grid-column:1/-1}
.operational-queues .queue-fold{align-self:start}
.queue-go{width:100%;margin-top:5px}
.march-formation-tabs{display:flex;gap:3px;margin-bottom:8px}
.march-formation-tab{
    flex:0 0 calc((100% - 12px)/5);min-width:0;padding:6px 2px;border:1px solid #654819;background:#d7c18f;
    color:#24190d;font-size:12px;line-height:1;font-weight:900;cursor:pointer;
}
.march-formation-tab.on{background:linear-gradient(180deg,#f2ca59,#dda025);color:#000}
.march-power-card{margin-bottom:8px;padding:9px;border:1px solid rgba(36,25,13,.55);background:rgba(255,248,222,.42);color:#171008}
.march-power-line{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:nowrap}
.march-power-line span,.march-power-line b{white-space:nowrap}
.march-power-card.power-low .pbar>i{background:linear-gradient(90deg,#a71919,#e3483f)!important}
.march-power-card.power-mid .pbar>i{background:linear-gradient(90deg,#d28b13,#ffd34e)!important}
.march-power-card.power-high .pbar>i{background:linear-gradient(90deg,#238b45,#55cf71)!important}
.march-lane{display:grid;grid-template-columns:28px minmax(115px,1fr) minmax(105px,1fr) minmax(130px,1.2fr);gap:6px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(36,25,13,.25)}
.march-lane-number{display:grid;place-items:center;width:25px;height:25px;border:1px solid #654819;background:#dda025;color:#171008;font-weight:900}
.march-lane>button{min-height:36px;padding:6px;border:1px solid #654819;background:#ead49e;color:#171008;font-weight:800;text-align:left;cursor:pointer}
.march-lane.locked>button{font-weight:650}
.march-lane-hero.empty{
    color:#000;background:linear-gradient(180deg,#f2ca59,#dda025);
    border-color:#24190d;font-weight:900;
}
.march-lane>label{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center;color:#171008;font-size:11px;font-weight:800}
.march-lane input[type=range]{width:100%;accent-color:#b87916}
.lane-choice-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.lane-choice{display:flex;flex-direction:column;gap:3px;padding:10px;border:1px solid #654819;background:#ead49e;color:#171008;text-align:left;cursor:pointer}
.lane-choice small{color:#3b2a16!important}
.lane-choice.troop-choice{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:10px;min-height:68px}
.lane-choice.troop-choice .formation-choice-image{width:46px;height:46px;max-width:100%;grid-column:1;grid-row:1}
.lane-choice.troop-choice .lane-choice-copy{grid-column:2;grid-row:1}
.lane-choice-icon{display:grid;place-items:center;font-size:23px;line-height:1}
.lane-choice-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.lane-choice-copy b,.lane-choice-copy small{overflow-wrap:anywhere;white-space:normal}
.lane-choice.hero-choice{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:8px;min-height:70px}
.lane-choice.no-character{min-height:58px;justify-content:center;text-align:center}
.formation-choice-image{display:block;flex:0 0 auto;width:46px;height:46px;object-fit:cover;background:#dfc995;border:1px solid var(--borde-papiro)}
.formation-choice-image.hero{width:54px;height:54px}
.formation-choice-image.troop{object-fit:contain}
.formation-current-choice{display:flex!important;align-items:center;gap:7px;min-width:0}
.formation-current-choice>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.march-lane .formation-choice-image,.army-formation-lane .formation-choice-image{width:38px;height:38px}
.hospital-troop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px;margin:8px 0}
.hospital-troop-choice{display:flex!important;align-items:center;gap:8px;width:100%!important;padding:6px!important;text-align:left}
.hospital-troop-choice>span{display:flex;min-width:0;flex-direction:column}
.hospital-troop-choice small{color:inherit;opacity:.8}
.march-save-current{width:100%;margin-top:7px}
@media(max-width:700px){
    .march-lane{grid-template-columns:26px 1fr 1fr}
    .march-lane>label{grid-column:2/4}
    .march-lane>button{
        min-width:0;min-height:32px;padding:4px 5px;font-size:11px;
        line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .march-lane.locked>button{font-size:9.5px;letter-spacing:-.2px}
}
@media(max-width:520px){
    .formation-lane{grid-template-columns:1fr 1fr 40px;gap:4px;padding:7px 5px;font-size:10px}
    .formation-lane.army-formation-lane{grid-template-columns:26px minmax(78px,.72fr) minmax(0,1.28fr);gap:4px}
    .army-formations .formation-queue-tab{flex-basis:78px}
    .march-power-card{padding:7px}
    .march-power-line{font-size:11px;padding:3px 0}
    .march-power-line span{font-weight:750}
}

/* HUD coherente: negro y oro en todos los controles flotantes. */
#playercard,#queuehud .queue-collapse-head,.qslot,#chathud,#marchas,#minimapWrap{
    background:linear-gradient(180deg,rgba(10,10,8,.96),rgba(0,0,0,.92));
    border-color:rgba(255,206,84,.48);
}
#fabBuild,#fabShop,#fabSearch{
    background:linear-gradient(180deg,#17140b,#050505);
    border-color:var(--gold);
    box-shadow:0 5px 18px rgba(0,0,0,.65),0 0 0 1px rgba(255,206,84,.12);
}
#fabBuild span,#fabShop span,#fabSearch span{color:var(--gold)}

/* Escala automática de escritorio: móvil conserva su densidad actual. */
@media (min-width:1400px) and (min-height:760px){
    :root{--desktop-hud-scale:1.18}
    #playercard,#queuehud,#chathud,#marchas,#minimapWrap,#fabBuild,#fabShop,#fabSearch{
        zoom:calc(var(--ui-scale) * var(--desktop-hud-scale));
    }
    #queuehud{width:174px}
    #marchas,#minimapWrap{width:226px}
    #chathud{width:226px}
    .pc-name{font-size:14px}.pc-line2{font-size:12px}
    .qslot .q-lbl{font-size:11px}.qslot .q-sub{font-size:10px}
    .mm-guide,.mm-target span{font-size:12px}
}
@media (min-width:2200px) and (min-height:900px){
    :root{--desktop-hud-scale:1.34}
    #queuehud{width:190px}
    #marchas,#minimapWrap,#chathud{width:244px}
}

/* Debe ir después de la regla base de #queuehud para reservar la altura
   adicional de la tarjeta de jugador en móvil. */
@media(max-width:520px){
    #queuehud{top:124px}
}
.arena-rival{align-items:center;padding:10px;}
.arena-avatar{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-size:28px;background:radial-gradient(circle,#26364e,#111827);border:1px solid var(--line);}
.arena-rival-head{display:flex;justify-content:space-between;gap:8px;}.arena-rival-head span{color:var(--gold);font-size:11px;}
.arena-stats{display:flex;gap:6px;flex-wrap:wrap;}.arena-stats span{font-size:10px;color:var(--sub);padding:3px 6px;background:rgba(255,255,255,.05);border-radius:6px;}.arena-stats b{color:var(--txt);}
.arena-outcomes{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0;font-size:10.5px}
.arena-outcomes span{padding:4px 6px;border-left:2px solid;background:rgba(255,255,255,.04)}
.arena-outcomes .win{color:var(--ok);border-color:var(--ok)}.arena-outcomes .loss{color:#ff9a8d;border-color:var(--bad)}
.arena-block-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:9px;align-items:start}
.arena-block-grid>.scard{margin:0;min-width:0}
.arena-opponents{margin-top:9px}
.arena-opponents-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:8px;align-items:stretch}
.arena-opponents-grid>.scard,.arena-opponents-grid>.hintbox{margin:0;min-width:0}
.arena-reward-table{display:flex;flex-direction:column;margin-top:8px;border:1px solid var(--line)}
.arena-reward-table>div{display:grid;grid-template-columns:minmax(76px,.45fr) minmax(0,1.55fr);gap:7px;align-items:center;padding:7px;border-bottom:1px solid var(--line)}
.arena-reward-table>div:last-child{border-bottom:0}
.arena-reward-table span{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;min-width:0}
.arena-reward-table i{font-style:normal;white-space:nowrap}
.xp-seals{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.xp-seal-compact{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:42px;height:30px;padding:3px 7px;border:1px solid #806526;background:linear-gradient(#fff0b8,#d5b66d);color:#281909;font:800 12px var(--font-ui);cursor:pointer;box-shadow:inset 0 1px #fff7d5,0 2px 4px #0004}.xp-seal-compact:hover,.xp-seal-compact:focus-visible{border-color:#d3a52e;filter:brightness(1.08)}

/* ---- Lote de entrenamiento ---- */
.lotebar{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--sub);margin-bottom:10px;flex-wrap:wrap;}
.lotebar .lb{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);padding:6px 12px;
    border-radius:9px;font-weight:700;cursor:pointer;}
.lotebar .lb.on{background:var(--gold);color:#20160a;}

/* ---- Preparación de marcha ---- */
.mp-target{font-size:14px;font-weight:700;text-align:center;padding:8px;margin-bottom:10px;
    background:rgba(255,206,84,.1);border:1px solid rgba(255,206,84,.3);border-radius:12px;}
.fslots{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.fslot{display:flex;flex-direction:column;gap:2px;padding:8px;background:rgba(255,255,255,.05);
    border:1px solid var(--line);border-radius:10px;color:var(--txt);cursor:pointer;font-size:12px;text-align:left;}
.fslot b{font-size:12px;} .fslot span{font-size:11px;color:var(--sub);}
.fslot:active{transform:scale(.97);}
.hpicks,.fbtns{display:flex;gap:6px;flex-wrap:wrap;}
.hpick{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:rgba(255,255,255,.05);
    border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:var(--txt);cursor:pointer;font-size:12px;font-weight:600;}
.hpick small{font-size:10px;color:var(--sub);font-weight:400;}
.hpick.on{background:rgba(255,206,84,.18);border-color:var(--gold);color:var(--gold);}
.fbtn{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:8px 12px;
    color:var(--txt);cursor:pointer;font-size:12px;font-weight:600;}
.fbtn.on{background:var(--gold);color:#20160a;border-color:var(--gold);}

/* ---- Héroes ---- */
/* tarjetas compactas: se llenan tantas como quepan (~9 por fila en ~1000px) */
.herogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;}
.herocard{background:linear-gradient(#202a3d,#182231);border:1px solid var(--line);border-width:1px 1px 2px 1px;
    border-radius:10px;padding:5px;cursor:pointer;color:var(--txt);display:flex;flex-direction:column;gap:3px;transition:.15s;}
.herocard:active{transform:scale(.97);}
.hc-img{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;
    background:#dfc995;}
.hc-img>img{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
.herocard.locked{filter:none;opacity:1;}
/* héroe no conseguido: imagen a media intensidad (visible pero suave); desbloqueado se ve pleno */
.herocard.locked .hc-img>img{opacity:.5;filter:grayscale(.4) brightness(.9);}
.herocard.locked .hc-nom,.herocard.locked .hc-rol{opacity:.7;}
.hc-lock{position:absolute;top:5px;right:5px;font-size:13px;line-height:1;background:rgba(8,12,20,.78);
    border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:3px 5px;backdrop-filter:blur(2px);}
.hc-nom{font-size:10.5px;font-weight:700;line-height:1.1;}
.hc-rol{min-height:11px;font-size:8.5px;line-height:1.1;color:#3e301c;}
.hc-rarity{display:inline-block;align-self:center;max-width:calc(100% - 8px);margin:2px auto;padding:2px 5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid color-mix(in srgb,var(--rarity) 72%,#000);
    border-radius:8px;background:var(--rarity);color:#111;font-size:7.5px;font-weight:900;line-height:1;text-transform:uppercase;}
.hc-lvl{font-size:11px;font-weight:700;color:var(--gold);}
.hc-st{font-size:9.5px;color:var(--sub);}
.hc-frag{margin-top:2px;}
.summon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.summon-info{width:36px;height:36px;flex:0 0 36px;border:1px solid var(--gold);border-radius:50%;background:#111927;color:var(--gold);font-size:21px;cursor:pointer;}
.summon-pity{display:flex;justify-content:space-between;gap:10px;margin:10px 0;padding:7px 9px;border:1px solid var(--line);background:rgba(0,0,0,.2);font-size:12px;}
.summon-pity b{color:var(--gold);}
.summon-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.summon-actions .btn{display:flex;justify-content:center;gap:5px;min-width:0;}
.summon-status{margin-top:8px;color:var(--sub);font-size:11px;text-align:center;min-height:15px;}
.summon-status:has(b){color:var(--bad);}
.summon-denied{animation:summonDenied .38s ease;}
@keyframes summonDenied{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.summon-rates{display:grid;gap:7px;margin-bottom:10px;}
.summon-rates>div{display:flex;justify-content:space-between;padding:9px 10px;border-left:4px solid var(--rarity);background:rgba(255,255,255,.04);}
.summon-rates b{color:var(--rarity);}
.summon-dismiss{text-align:center;margin-top:10px;}
.summon-roulette,.summon-inline-roulette{position:relative;width:100%;overflow:hidden;padding:12px 0;background:linear-gradient(180deg,#eefaff 0%,#bfe8ff 48%,#fff 100%);border:1px solid #79bfe7;}
.summon-inline-roulette{margin:8px 0 6px;min-height:104px}
.summon-roulette::before,.summon-roulette::after,.summon-inline-roulette::before,.summon-inline-roulette::after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:15%;pointer-events:none;}
.summon-roulette::before,.summon-inline-roulette::before{left:0;background:linear-gradient(90deg,rgba(220,244,255,.96),transparent)}
.summon-roulette::after,.summon-inline-roulette::after{right:0;background:linear-gradient(-90deg,rgba(255,255,255,.96),transparent)}
.summon-marker{position:absolute;z-index:5;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);background:var(--gold);box-shadow:0 0 9px var(--gold);pointer-events:none;}
.summon-marker::before,.summon-marker::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;}
.summon-marker::before{top:0;border-top:9px solid var(--gold)}.summon-marker::after{bottom:0;border-bottom:9px solid var(--gold)}
.summon-track{display:flex;gap:8px;width:max-content;will-change:transform;}
.summon-card{position:relative;width:90px;flex:0 0 90px;padding:5px 5px 22px;border:2px solid var(--rarity);background:#fffdf4;color:#171008;text-align:center;box-shadow:0 3px 8px rgba(37,91,126,.22),inset 0 -18px 25px color-mix(in srgb,var(--rarity) 13%,transparent);}
.summon-portrait{height:70px;display:flex;align-items:center;justify-content:center;font-size:38px;background:radial-gradient(circle,#fff,#d9f1ff 74%);overflow:hidden;}
.summon-portrait img{width:100%;height:100%;object-fit:cover;}
.summon-card strong,.summon-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.summon-card strong{font-size:10px;margin-top:5px;}.summon-card .summon-rarity{position:absolute;right:4px;bottom:4px;display:inline-block;max-width:calc(100% - 8px);padding:2px 5px;border:1px solid color-mix(in srgb,var(--rarity) 72%,#000);border-radius:8px;background:var(--rarity);color:#111;font-size:8px;font-weight:900;line-height:1;text-transform:uppercase;}
.summon-roulette.stopped .summon-card.winner,.summon-inline-roulette.stopped .summon-card.winner{animation:summonWinner .8s ease infinite alternate;}
.summon-inline-result{min-height:18px;margin:3px 0 8px;color:#171008;font-size:11px;font-weight:800;text-align:center}
.summon-inline-result small{display:block;margin-top:3px;font-size:9px}
@keyframes summonWinner{to{box-shadow:0 0 18px var(--rarity),inset 0 -20px 30px color-mix(in srgb,var(--rarity) 30%,transparent);transform:scale(1.04)}}
.summon-spinning{text-align:center;margin-top:10px;}
.summon-reveal{margin-top:12px;}.summon-reveal ul{list-style:none;margin:7px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:5px;}
.summon-reveal li{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-left:3px solid var(--rarity);background:rgba(255,255,255,.04);font-size:11px;}
.summon-reveal li b{color:var(--rarity);}.summon-reveal .btn{width:100%;}
@media(max-width:430px){.summon-actions{grid-template-columns:1fr}.summon-card{width:80px;flex-basis:80px}.summon-portrait{height:62px}.tw-modal:has(.summon-roulette){width:100vw}}
.herohero{display:flex;gap:12px;align-items:center;background:linear-gradient(#212c40,#1a2333);
    border:1px solid var(--line);border-left-width:4px;border-radius:14px;padding:12px;margin-bottom:12px;}
.herohero>img.herohero-portrait{flex:0 0 76px;width:76px;height:76px;border-radius:12px;object-fit:cover;
    background:#dfc995;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
.herohero-info{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px}.hh-nom{flex:1 0 100%;font-size:17px;font-weight:800}.hh-rarity{display:inline-block;padding:2px 6px;border:1px solid color-mix(in srgb,var(--rarity) 72%,#000);background:var(--rarity);color:#111;font-size:8px;font-weight:900;line-height:1;text-transform:uppercase}.hh-meta{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:10px;font-weight:700;color:var(--tinta)}.hh-meta span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.hh-meta img{width:14px!important;height:14px!important;object-fit:contain!important;margin:0!important}.hh-rol{font-size:12px}.hh-af{font-size:11px;color:var(--sub);margin-top:2px}
.hero-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;margin-top:8px}
.hero-progress-column,.hero-support-column{display:grid;gap:8px;min-width:0}
.hero-detail-grid .scard{margin:0;min-width:0;box-sizing:border-box}
@media(min-width:415px){
    .hero-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){.herohero{gap:8px;padding:8px}.herohero>img.herohero-portrait{flex-basis:66px;width:66px;height:66px}.hh-nom{font-size:15px}.hh-meta{font-size:9px;gap:3px 7px}}
.eqrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.eqrow .btn{width:auto;}

/* ---- Menú ---- */
.menulist{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto;}
.menuitem{display:flex;align-items:center;gap:12px;background:linear-gradient(#1e2838,#182130);
    border:1px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--txt);font-size:15px;font-weight:600;cursor:pointer;text-align:left;}
.menuitem .mi-ico{flex:0 0 26px;width:26px;text-align:center;font-size:19px;font-style:normal;}
.menuitem .mi-lbl{flex:1;}
.menuitem .mi-arrow{color:var(--sub);font-size:20px;}
.menuitem:active{transform:scale(.98);}
.menuitem:hover{border-color:var(--gold);}

/* ---- Pestañas de correo (badge) + correo nuevo ---- */
.tabdot{background:var(--bad);color:#fff;font-size:9px;font-weight:800;padding:0 5px;border-radius:8px;margin-left:2px;}
.scard.nuevo{border-color:rgba(255,206,84,.45);}

/* ---- ajustes responsive de controles existentes ---- */
@media(max-width:520px){
    /* Acciones del Mundo: hoja inferior parcial en móvil. */
    #panel{top:auto;left:0;right:0;bottom:108px;width:100%;height:auto;max-height:min(48dvh,440px);
        box-sizing:border-box;border-left:0;border-top:1px solid var(--gold);border-radius:14px 14px 0 0;
        box-shadow:0 -16px 42px rgba(0,0,0,.62);transform:translateY(0);visibility:visible;
        transition:transform .28s cubic-bezier(.2,.9,.3,1),visibility 0s;}
    #panel.hidden{display:flex!important;transform:translateY(calc(100% + 112px));visibility:hidden;
        pointer-events:none;transition:transform .24s ease,visibility 0s .24s;}
    #panelBody{min-height:0;max-height:calc(48dvh - 48px);overscroll-behavior:contain;padding-bottom:14px;}
    .panel-head{flex:0 0 auto;min-height:44px;box-sizing:border-box;}
    #panelClose{width:44px;height:44px;margin:-8px -8px -8px 0;display:grid;place-items:center;}
    #panel.panel-search{bottom:108px;max-height:min(42dvh,300px);}
    #panel.panel-search #panelBody{max-height:calc(min(42dvh,300px) - 44px);overflow:hidden;padding:6px 8px 10px;}
    #panel.panel-search .panel-head{min-height:42px;}
    .world-search{grid-template-columns:62px minmax(0,1fr);min-height:112px;gap:6px}
    .world-search-side button{min-height:52px;font-size:16px}.world-search-side button span{font-size:8px}
    .world-search-main{padding:6px}.world-search-types{gap:3px}.world-search-types button{min-height:50px}
    .world-search-target-row{grid-template-columns:56px minmax(0,1fr);gap:5px;min-height:58px;padding-right:0}.world-search-preview-wrap{width:54px;height:54px}.world-search-target-row .world-search-preview{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important}.world-search-target-copy{gap:5px}.world-search-target-controls{gap:5px}.world-search-target-name{font-size:11px}.world-search-level{font-size:10px}.world-search-enemy .steps{gap:3px}.world-search-enemy .steps button{width:27px;height:27px;padding:0}.world-search-info{top:3px;right:3px;width:25px;height:25px}.world-search-types{padding-right:28px}
    .world-search-enemy .btn{padding:7px 3px;font-size:10px}
    /* La barra de recursos ENVUELVE en dos filas en vez de cortar los últimos
       recursos. Se compacta cada píldora para que quepan más por fila. */
    #topbar{gap:1px;padding:0;height:34px;min-height:34px;justify-content:stretch;}
    .res{min-width:0;padding:0 1px;font-size:14px;gap:1px;}
    .res i{font-size:15px;}
    .res span{min-width:0;}
    .res[data-res="energia"] span{min-width:0;}
    #topbar .spacer{display:none;}
    .lvl{white-space:nowrap;}
    /* la medalla y el chat no deben solaparse en móviles estrechos */
    #playercard{max-width:52vw;}
    .pc-name{max-width:28vw;}
    #chathud{max-width:44vw;}
    #queuehud{max-width:50vw;}
    /* ambas barras conservan la misma altura y siempre muestran icono + nombre */
    #bottomnav2{height:54px;bottom:54px;}
    #bottomnav2 .navbtn2{font-size:7.5px;gap:3px;padding:4px 1px;}
    #bottomnav2 .navbtn2 i{font-size:19px;}
    #bottomnav2 .navbtn2 span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    #screen{bottom:108px;}
    .world-event-army{grid-template-columns:repeat(5,minmax(36px,1fr));}
.arena-avatar{flex-basis:46px;width:46px;height:46px;font-size:24px;}
}
.battle-replay{display:block;width:100%;height:auto;max-height:42vh;background:#111927;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}

/* ======================================================= */
/* ========  SKIN GÓTICO (marrón oscuro + oro)  ========== */
/* ======================================================= */
/* Capa reversible: mantiene el diseño anterior pero con    */
/* paleta marrón/dorada, ángulos rectos y espaciado apretado*/
/* Para desactivar: borra desde aquí hasta el final.        */
:root{
    /* --- paleta gótica --- */
    --bg:#160f09;                    /* marrón muy oscuro     */
    --panel:rgba(34,23,13,0.95);     /* madera oscura         */
    --gold:#ffce54;                  /* oro (acento/títulos)  */
    --gold2:#f0b429;                 /* oro profundo          */
    --line:rgba(255,206,84,0.20);    /* filete dorado tenue   */
    --txt:#efdcae;                   /* pergamino claro       */
    --sub:#b39b6d;                   /* pergamino apagado     */
    /* --- espaciado apretado (más que antes) --- */
    --s1:2px; --s2:4px; --s3:6px; --s4:8px; --s6:10px;
    --r:0;
}
/* ángulos rectos en todo */
[class],[id]{border-radius:0!important;}

/* fondo y tipografía gótica */
html,body{background:#000 fixed;
    color:var(--txt);
    font-family:var(--font-ui);}
#screen{background:#000;}

/* superficies -> madera oscura con filete dorado */
#topbar,#viewtabs,#panel,#minimapWrap,#marchas,#cityctrls,#ghostbar,#screen,
.tw-modal,.card,.scard,.bcard,.hito,.mm-item,.menuitem,.cattile,.herocard,
.herohero,.hintbox,.chip,#tooltip,.tw-tip{
    background:#000!important;
    border:1px solid var(--line)!important;}
#topbar{background:#000!important;border-bottom:2px solid var(--gold2)!important;}
#bottomnav{background:#000!important;border-top:2px solid var(--gold2)!important;}
#toast{background:#000!important;border:1px solid var(--gold)!important;}

/* títulos y acentos en oro */
.panel-head h2,.scr-head h2,.tw-head h2,.card h3,.sc-tit,.sec-h,.hh-nom,
.mm-head,.res span,.hc-lvl,.lvl,.mp-target{color:var(--gold)!important;
    text-shadow:0 1px 2px #000;letter-spacing:.3px;}
.panel-head,.scr-head,.tw-head{background:#000!important;
    border-bottom:1px solid var(--gold2)!important;}

/* botones dorados sobre madera */
.btn,.card button{background:#000!important;color:var(--gold)!important;
    border:1px solid var(--gold2)!important;font-weight:700;text-shadow:0 1px 1px #000;}
.btn:hover,.card button:hover{filter:brightness(1.15);}
.btn.gold,.btn.big,.card button:not(:disabled):not(.alt){
    background:linear-gradient(#ffce54,#d99a1f)!important;color:#2a1706!important;
    border-color:#ffe6a3!important;text-shadow:none;}
.btn:disabled,.card button:disabled{background:#241a10!important;color:#6b5c3d!important;border-color:#3a2c18!important;}

/* estado activo/seleccionado -> oro encendido */
.tabs button.on,#viewtabs button.active,.navbtn.active,.fbtn.on,.lotebar .lb.on,
.hpick.on,.scr-tabs button.on{
    background:linear-gradient(#ffce54,#e0a52a)!important;color:#2a1706!important;
    border-color:#ffe6a3!important;}
.navbtn{color:var(--sub);} .navbtn.active{color:var(--gold);}
.navbtn.active::before{background:var(--gold);}

/* barras de progreso doradas */
.pbar>i,.bar>i{background:linear-gradient(90deg,#ffce54,#f0b429)!important;}

/* espaciado apretado en contenedores */
.card,.scard,.bcard{padding:6px;margin-bottom:5px;}
.scardlist,.catgrid,.qa,.herogrid,.grid2{gap:5px;}
.btn{padding:5px 10px;font-size:12px;}
.btn.big{padding:9px;}
.scr-body{padding:6px 8px 16px;}
.scr-head{padding:7px 10px;} .scr-tabs{padding:6px 8px 3px;}
#panelBody{padding:6px 10px;} .panel-head{padding:8px 10px;}
.tw-body{padding:8px 10px;} .tw-head{padding:8px 10px;} .tw-acts{padding:8px 10px;}
.menuitem{padding:9px 10px;}
#cityctrls{padding:5px 10px;gap:10px;}

/* ===================== PANTALLA DE INICIO ===================== */
#startScreen{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
    background:#0a0d16;overflow:hidden;transition:opacity .6s ease;}
#startScreen.fade-out{opacity:0;pointer-events:none;}
#startScreen.hidden{display:none;}
#flBg{position:absolute;inset:0;z-index:0;mix-blend-mode:screen;}
#flBg canvas{width:100%;height:100%;display:block;}
.start-inner{position:relative;z-index:1;text-align:center;padding:24px;width:min(760px,100%);pointer-events:none;}
.start-inner > *{pointer-events:auto;}
.start-emblema{font-size:56px;line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.75));margin-bottom:6px;}
.start-emblema img{
    display:block;
    width:clamp(190px,24vw,270px);
    max-height:36vh;
    height:auto;
    margin:0 auto;
    object-fit:contain;
}
.start-emblema:has(img) + .start-title{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}
/* Título metálico (acero pulido) con borde negro */
.start-title{font-size:clamp(36px,8vw,84px);font-weight:900;letter-spacing:3px;margin:0;white-space:nowrap;
    background:linear-gradient(180deg,#ffffff 0%,#d3dae6 20%,#9aa3b5 48%,#5c6474 52%,#b6bfce 78%,#eef2f8 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    -webkit-text-stroke:2px #05070c;paint-order:stroke fill;
    text-shadow:0 3px 0 rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.7);}
.start-sub{margin:10px 0 30px;color:#c6cddb;font-size:clamp(13px,3.4vw,17px);font-weight:700;letter-spacing:1px;
    -webkit-text-stroke:.5px rgba(0,0,0,.55);text-shadow:0 2px 10px rgba(0,0,0,.8);}
/* Botón metálico con borde negro */
.start-btn{cursor:pointer;width:min(340px,86vw);min-height:56px;font-weight:900;font-size:18px;letter-spacing:1px;color:#211500;
    padding:15px 28px;border-radius:12px;border:2px solid #ffe39a;
    background:linear-gradient(180deg,#ffe07a 0%,#ffc43d 48%,#db9215 100%);
    text-shadow:0 1px 0 rgba(255,255,255,.6);
    box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 5px rgba(0,0,0,.25);
    transition:transform .12s,box-shadow .2s,filter .2s;animation:startPulse 2.6s ease-in-out infinite;}
.start-btn:hover{transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(0,0,0,.25);}
.start-btn:active{transform:translateY(1px);}
.start-foot{margin-top:26px;color:#8792a6;font-size:12px;letter-spacing:.5px;text-shadow:0 2px 8px rgba(0,0,0,.8);}

/* Panel de cuenta en la portada (login/registro/modo) */
.start-auth{width:min(340px,86vw);margin:0 auto 20px;background:rgba(10,14,24,.88);border:1px solid rgba(255,214,104,.38);
    border-radius:14px;padding:12px;backdrop-filter:blur(6px);text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.sa-modes{display:flex;gap:8px;margin-bottom:10px;}
.sa-mode{flex:1;min-height:44px;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:rgba(22,29,44,.92);
    color:#f0f3f8;font-weight:800;font-size:13px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.sa-mode.on{background:linear-gradient(#ffce54,#e0a52a);color:#20160a;border-color:#ffe6a3;}
.sa-hint{font-size:12px;color:#aab4c6;line-height:1.5;}
.sa-me{font-size:13px;color:#dbe3f0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sa-tabs{display:flex;gap:6px;margin-bottom:8px;}
.sa-tabs button{flex:1;padding:7px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
    color:#c6cddb;font-weight:700;font-size:12px;cursor:pointer;}
.sa-tabs button.on{background:rgba(255,206,84,.16);color:#ffce54;border-color:rgba(255,206,84,.5);}
.sa-form{display:flex;flex-direction:column;gap:8px;}
.sa-formtit{font-weight:800;color:#ffce54;font-size:13px;}
.sa-form input{padding:10px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);
    color:#eef2f8;font-size:14px;outline:none;}
.sa-form input:focus{border-color:#ffce54;}
.sa-err{font-size:11.5px;color:var(--bad);min-height:1px;line-height:1.4;}
.start-btn.sm{width:100%;min-height:46px;font-size:14px;padding:11px 20px;border-radius:10px;animation:none;}
.sa-link{background:none;border:none;color:#8fb7ff;font-size:12px;cursor:pointer;text-decoration:underline;padding:2px;align-self:center;}
.sa-design{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.sa-dev{min-height:38px;padding:8px 12px;border-radius:9px;border:1px solid rgba(116,220,255,.55);background:rgba(27,83,105,.72);color:#dff8ff;font-weight:800;cursor:pointer;}
.sa-dev:hover{background:rgba(37,113,142,.9);}
@media(max-width:520px){
    .start-inner{padding:18px 14px;}
    .start-emblema{font-size:48px;margin-bottom:6px;}
    .start-emblema img{width:180px;max-height:28vh;}
    .start-title{font-size:clamp(32px,10.5vw,41px);letter-spacing:1px;}
    .start-sub{margin:8px 0 24px;font-size:12px;letter-spacing:.4px;}
    .start-auth{width:min(350px,92vw);padding:12px;}
    .start-btn{width:min(350px,92vw);}
    .start-foot{max-width:340px;margin:24px auto 0;line-height:1.7;}
}
@keyframes startPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 5px rgba(0,0,0,.25);}
    50%{box-shadow:0 12px 40px rgba(150,170,200,.55),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(0,0,0,.25);}}

/* ===================== MULTIJUGADOR ===================== */
.mp{display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.mp-modes{display:flex;gap:8px}
.mp-mode{flex:1;padding:11px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);
    color:var(--txt);font-weight:700;font-size:14px;cursor:pointer;transition:.12s}
.mp-mode.on{background:var(--gold);color:#20160a;border-color:var(--gold)}
.mp-status{font-size:11px;font-weight:800;letter-spacing:.5px;text-align:center;color:var(--muted,#9aa7bd)}
.mp-status.online{color:var(--ok)} .mp-status.error{color:var(--bad)}
.mp-authtabs{display:flex;gap:6px}
.mp-authtabs button{flex:1;padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--txt);font-weight:700;cursor:pointer}
.mp-authtabs button.on{background:rgba(255,206,84,.15);border-color:var(--gold);color:var(--gold)}
.mp-form{display:flex;flex-direction:column;gap:9px}
.mp-form input{padding:11px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.28);
    color:var(--txt);font-size:14px;outline:none}
.mp-form input:focus{border-color:var(--gold)}
.mp-avatar-label{margin:4px 0;font-size:11px;font-weight:800}
.mp-avgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mp-av{aspect-ratio:1;padding:2px;border-radius:10px;border:1px solid var(--line);background:#dfc995;cursor:pointer;overflow:hidden}
.mp-av.sel{border-color:var(--gold);outline:3px solid var(--gold);outline-offset:1px}
.mp-avatar-choice,.mp-avatar-image{display:block;width:100%;height:100%;object-fit:cover}
.sa-avatar-label{margin:2px 0 -2px;text-align:left;font-size:12px;font-weight:900;color:#24190d}
.sa-avgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.sa-av{aspect-ratio:1;padding:2px;border:1px solid var(--borde-papiro);background:#dfc995;cursor:pointer;overflow:hidden;min-width:0}
.sa-av.sel{border-color:#000;outline:3px solid #dda025;outline-offset:1px}
.sa-avatar-image{display:block;width:100%;height:100%;object-fit:cover}
.mp-err{color:var(--bad);font-size:12.5px;min-height:15px;font-weight:600}
.mp-link{background:none;border:none;color:var(--gold);font-size:13px;cursor:pointer;padding:6px;text-decoration:underline;align-self:center}
.mp-link:hover{filter:brightness(1.15)}
.mp-me{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:11px}
.mp-me-av{display:block;width:46px;height:46px;overflow:hidden;border:1px solid var(--borde-papiro);background:#dfc995}
.mp-me-info{flex:1;min-width:0}
.mp-me-name{font-weight:800;font-size:16px;color:var(--gold)}
.mp-sec-tit{font-weight:800;font-size:13px;color:var(--gold);margin:6px 0 2px}
.mp-list{display:flex;flex-direction:column;gap:5px}

/* ---- Perfil del jugador ---- */
.perfil-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(#1f2a3d,#182130);
    border:1px solid var(--gold);border-radius:14px;padding:12px 14px;margin-bottom:10px;}
.perfil-av{width:54px;height:54px;border-radius:12px;background:rgba(255,206,84,.14);
    border:1px solid rgba(255,206,84,.4);display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;}
.perfil-avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.perfil-nom{font-size:18px;font-weight:800;}
.perfil-tit{font-size:12px;color:var(--gold);font-weight:700;}
.mp-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px}
.mp-row.world-event-army{display:grid;grid-template-columns:repeat(5,minmax(36px,1fr));gap:6px;}
.mp-rank{font-weight:800;color:var(--gold);min-width:30px}
.mp-av-sm{display:inline-block;width:30px;height:30px;overflow:hidden;border:1px solid var(--borde-papiro);background:#dfc995;vertical-align:middle;flex:none}
.hero-fragment-image{display:block;width:100%;height:100%;object-fit:contain;background:#dfc995}
.mp-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-pow{color:var(--gold);font-weight:700;font-size:12px}
.mp-dot{width:8px;height:8px;border-radius:50%;background:#5a6678;display:inline-block;flex:none}
.mp-dot.online,.mp-dot.on{background:var(--ok)} .mp-dot.idle{background:var(--gold)} .mp-dot.away{background:#8a94a6}

/* ===================== TIENDA ===================== */
.tienda-saldo{text-align:center;font-size:15px;margin:4px 0 12px;color:var(--txt);}
.tienda-saldo b{color:#8fe9ff;}
.tienda-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.tienda-grid-compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.tcard{position:relative;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;}
.tc-ico{font-size:34px;line-height:1;}
.shop-item-icon{display:block;width:72px;height:72px;object-fit:contain;margin:auto;background:transparent}
.shop-info-image{display:block;width:112px;height:112px;object-fit:contain;margin:auto;background:transparent}
.tc-nom{max-width:100%;font-weight:800;font-size:13px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;}
.tc-da{font-size:11.5px;color:var(--gold);min-height:18px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;}
.tcard .btn{width:100%;margin-top:2px;}
.tcard-info{position:absolute;top:5px;right:5px;width:25px;height:25px;padding:0!important;display:grid;place-items:center;border-radius:50%!important;font-size:14px!important;font-weight:900;line-height:1;z-index:1}
.tcard-compact{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    gap:5px 8px;
    padding:8px;
    text-align:left;
}
.tcard-compact .tc-ico{
    grid-column:1;
    grid-row:1;
    width:44px;
    text-align:center;
}
.tcard-compact .shop-item-icon{width:44px;height:44px}
.tcard-compact .tc-meta{
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding-right:25px;
}
.tcard-compact .tc-da{min-height:0;margin-top:3px}
.tcard-compact>.btn{
    grid-column:1/-1;
    grid-row:2;
    margin:0;
}
.info-help{display:block;margin:0 0 9px auto;padding:7px 10px;border:1px solid var(--borde-papiro);background:#ead49e;color:#171008;font-weight:800;cursor:pointer}
.info-copy{color:#171008;font-size:13px;font-weight:650;line-height:1.5}
.shop-info-detail{display:grid;gap:10px;color:#171008}
.shop-info-icon{text-align:center;font-size:42px}

/* ===================== CLANES ===================== */
.clan-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,206,84,.14),rgba(255,255,255,.04));
    border:1px solid var(--line);border-radius:14px;padding:14px;}
.clan-tag{font-size:22px;font-weight:900;color:var(--gold);background:rgba(0,0,0,.3);border-radius:10px;padding:8px 12px;white-space:nowrap;}
.clan-hinfo{flex:1;min-width:0;}
.clan-name{font-weight:800;font-size:18px;color:var(--txt);}
.clan-war{display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(232,87,74,.1);
    border:1px solid rgba(232,87,74,.35);border-radius:10px;padding:9px 12px;font-size:14px;}
.clan-war-side{flex:1;text-align:center;color:var(--muted,#9aa7bd);}
.clan-war-side.win{color:var(--ok);font-weight:700;}
.clan-war-side b{font-size:18px;color:var(--txt);}
.clan-war-vs{color:var(--bad);font-weight:800;font-size:12px;}
.mp-row.clan-mine{border-color:var(--gold);background:rgba(255,206,84,.12);}

/* ===================== CHAT ===================== */
.chat{display:flex;flex-direction:column;height:100%;min-height:340px}
.chat-head{display:flex;gap:6px;margin-bottom:6px}
.chat-ch{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--txt);font-weight:700;font-size:12.5px;cursor:pointer}
.chat-ch.on{background:rgba(255,206,84,.15);border-color:var(--gold);color:var(--gold)}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:6px 2px;min-height:200px;max-height:52vh}
.chat-msg{max-width:80%;align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line);
    border-radius:11px;padding:6px 10px;font-size:13.5px;line-height:1.35}
.chat-msg.mine{align-self:flex-end;background:rgba(255,206,84,.16);border-color:rgba(255,206,84,.35)}
.chat-from{display:block;width:max-content;max-width:100%;margin:0 0 2px;padding:0;border:0;background:none;color:var(--gold);
    font:inherit;font-size:11px;font-weight:800;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;
    text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis}
.chat-from:hover,.chat-from:focus-visible,.chat-from[aria-expanded="true"]{color:#ffe6a3;text-decoration-color:currentColor;outline:none}
.chat-body{word-break:break-word}
.chat-at{display:block;font-size:10px;color:var(--muted,#9aa7bd);text-align:right;margin-top:2px}
.chat-user-menu{margin-top:6px;padding:4px;min-width:160px;border:1px solid rgba(255,206,84,.45);border-radius:8px;
    background:#111722;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.chat-user-menu[hidden]{display:none}
.chat-user-menu button{display:block;width:100%;padding:8px;border:0;border-radius:5px;background:transparent;color:var(--txt);
    font-size:12px;font-weight:700;text-align:left;cursor:pointer}
.chat-user-menu button:hover,.chat-user-menu button:focus-visible{background:rgba(255,206,84,.15);outline:none}
.chat-user-menu button.danger{color:#ff8d8d}
.chat-form{display:flex;gap:7px;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.chat-form input{flex:1;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.28);color:var(--txt);font-size:14px;outline:none}
.chat-form input:focus{border-color:var(--gold)}

/* ===================== PIEL DE PAPIRO DEL HUD ===================== */
:root{
    --papel:#dfc995;
    --papel-claro:#f0dfb6;
    --papel-sombra:#b99a60;
    --tinta:#24190d;
    --tinta-suave:#5d4a2e;
    --borde-papiro:#72501c;
    --acento-papiro:#8b5d18;
}
#topbar,
#playercard,
#queuehud .queue-collapse-head,
#queuehud .qslot,
#marchas,
#minimapWrap,
#chathud,
#bottomnav,
#bottomnav2{
    color:var(--tinta);
    border-color:var(--borde-papiro);
    background:
        linear-gradient(100deg,rgba(255,255,255,.16),transparent 32%,rgba(91,55,14,.08)),
        linear-gradient(180deg,var(--papel-claro),var(--papel));
    box-shadow:0 3px 10px rgba(34,22,8,.32),inset 0 1px rgba(255,255,255,.5);
}
#topbar .res{
    color:var(--tinta);
    border-color:rgba(83,55,18,.46);
    background:rgba(255,248,218,.38);
}
#topbar .res span,
#playercard .pc-name,
#playercard .pc-line2,
#playercard .pc-power,
#playercard .pc-power span,
#queuehud .queue-collapse-head,
#queuehud .q-lbl,
#marchas .mm-title,
#marchas .mm-guide b,
#chathud{
    color:var(--tinta);
    text-shadow:0 1px rgba(255,255,255,.32);
}
#playercard .pc-title{
    color:#fff2cf;
    border-color:#59380d;
    background:linear-gradient(180deg,#966822,#68420f);
}
#playercard .pc-xp{background:#8e7b5b}
#playercard .pc-xp > *{background:linear-gradient(90deg,#b77a17,#e7b638)}
#queuehud .qslot{
    border-color:rgba(85,57,19,.52);
    background:linear-gradient(180deg,rgba(247,229,184,.96),rgba(213,188,132,.96));
}
#queuehud .qslot.active{border-color:#7b4d08;box-shadow:inset 3px 0 #9a6513}
#queuehud .qslot.free{
    border-color:rgba(104,72,27,.42);
    background:linear-gradient(180deg,rgba(255,247,220,.98),rgba(239,220,174,.98));
    box-shadow:inset 3px 0 rgba(255,255,255,.68);
}
#queuehud .qslot.locked{opacity:.72;background:linear-gradient(180deg,#d5c39d,#bda87d)}
#queuehud .q-sub,
#marchas .mm-guide,
#marchas .mm-guide p,
#chathud .ch-line{color:var(--tinta-suave)}
#queuehud .q-bar{background:#8e7b5b}
#queuehud .q-bar > *{background:linear-gradient(90deg,#b77a17,#e7b638)}
#marchas .tutorial-forced,
#marchas .mm-guide,
#marchas .mm-guide-open{
    color:var(--tinta);
    border-color:var(--borde-papiro);
    background:linear-gradient(180deg,#f4e5bf,#d9bf88);
}
#marchas .tutorial-forced b,
#marchas .mm-guide-open{color:var(--tinta)}
#chathud select,
#chathud button{
    color:var(--tinta);
    border-color:rgba(82,54,16,.5);
    background:rgba(246,226,177,.72);
}
#fabBuild,#fabShop,#fabSearch{
    color:var(--tinta);
    border-color:var(--borde-papiro);
    background:linear-gradient(180deg,var(--papel-claro),var(--papel));
    box-shadow:0 4px 12px rgba(34,22,8,.38),inset 0 1px rgba(255,255,255,.55);
}
#fabBuild span,#fabShop span,#fabSearch span{color:var(--tinta);text-shadow:none}
#bottomnav .navbtn,#bottomnav2 .navbtn2{color:var(--tinta-suave);text-shadow:none}
#bottomnav .navbtn.active,#bottomnav2 .navbtn2.active{
    color:var(--tinta);
    background:rgba(116,75,17,.18);
    box-shadow:inset 0 2px var(--acento-papiro);
}

/* La interfaz completa usa el mismo contraste papel/tinta.
   Estos !important sustituyen la antigua capa gótica, que también los usaba. */
#topbar,#playercard,#queuehud .queue-collapse-head,#queuehud .qslot,
#marchas,#minimapWrap,#chathud,#bottomnav,#bottomnav2,#panel,#screen,
.tw-modal,.card,.scard,.bcard,.hito,.mm-item,.menuitem,.cattile,.herocard,
.herohero,.hintbox,.chip,#tooltip,.tw-tip{
    color:var(--tinta)!important;
    border-color:var(--borde-papiro)!important;
    background:
        linear-gradient(100deg,rgba(255,255,255,.16),transparent 34%,rgba(91,55,14,.07)),
        linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
}
#topbar{border-bottom:2px solid var(--tinta)!important}
#bottomnav,#bottomnav2{border-top:2px solid var(--tinta)!important}
#bottomnav2{border-bottom:0!important}
#bottomnav .navbtn,#bottomnav2 .navbtn2{
    color:var(--tinta-suave)!important;
    border-color:rgba(36,25,13,.16)!important;
}
#bottomnav .navbtn.active,#bottomnav2 .navbtn2.active,#bottomnav2 .navbtn2.on{
    color:var(--tinta)!important;
    background:linear-gradient(180deg,#f1c958,#d99b20)!important;
}
#bottomnav .navbtn.active::before,#bottomnav2 .navbtn2.active::before{background:var(--tinta)!important}
#playercard .pc-power,#playercard .pc-power span,#playercard .pc-power b{color:#000!important;text-shadow:none}
.panel-head,.scr-head,.tw-head{
    color:var(--tinta)!important;
    border-color:var(--tinta)!important;
    background:linear-gradient(180deg,#f1ddb0,#d5ba82)!important;
}
.panel-head h2,.scr-head h2,.tw-head h2,.card h3,.sc-tit,.sec-h,.hh-nom,
.mm-head,.mm-title,.res span,.hc-lvl,.lvl{
    color:var(--tinta)!important;
    text-shadow:none!important;
}
#panelClose,.scr-close,.scr-back,.tw-close,.mm-collapse,
.queue-collapse-head button{
    color:#000!important;
    border:1px solid #000!important;
    background:var(--papel-claro)!important;
    text-shadow:none!important;
}
#panelClose:hover,.scr-close:hover,.scr-back:hover,.tw-close:hover,.mm-collapse:hover,
.queue-collapse-head button:hover{background:#f6e8c6!important}
#screen .sub,#panel .sub,.tw-modal .sub,
#screen small,#panel small,.tw-modal small{color:var(--tinta-suave)!important}
#screen .tabs button,#screen .scr-tabs button,#panel .tabs button,.tw-modal .tabs button{
    color:var(--tinta)!important;
    border-color:var(--borde-papiro)!important;
    background:#d5bd88!important;
    text-shadow:none!important;
}
#screen .tabs button.on,#screen .scr-tabs button.on,#panel .tabs button.on,.tw-modal .tabs button.on{
    color:#000!important;
    background:linear-gradient(180deg,#f2ca59,#dda025)!important;
}
#marchas .mm-guide,#marchas .mm-notice,#marchas .mm-item{
    color:var(--tinta)!important;
    border-color:rgba(36,25,13,.58)!important;
    background:rgba(255,244,211,.42)!important;
}
#marchas .mm-guide small,#marchas .mm-sub,#marchas .mm-free{color:var(--tinta-suave)!important}
#marchas .mm-target{
    color:var(--tinta)!important;
    border-color:#8b261d!important;
    background:#ecc7ae!important;
}
#marchas .mm-target b{color:#7b1812!important}
#marchas .mm-target small{color:#4b2b20!important}
#marchas .mm-guide-open{
    color:#000!important;
    border-color:#000!important;
    background:var(--papel-claro)!important;
}
#marchas .tutorial-forced [data-tutorial-action],
#marchas .tutorial-next-cta{
    color:#000!important;
    border-color:#000!important;
    background:linear-gradient(180deg,#f2ca59,#dda025)!important;
    text-shadow:none!important;
}

/* Portada y carga: el movimiento se conserva, pero teñido como un grabado
   sobre papel para evitar los fondos azulados y negros. */
#startScreen{background:radial-gradient(circle at 50% 34%,var(--papel-claro),var(--papel) 58%,var(--papel-sombra))!important}
#flBg{mix-blend-mode:multiply!important;filter:sepia(1) saturate(.42) brightness(1.35);opacity:.32}
.start-sub,.start-foot,.start-auth{
    color:var(--tinta)!important;
    border:1px solid var(--borde-papiro)!important;
    background:linear-gradient(180deg,rgba(244,229,191,.96),rgba(217,191,136,.96))!important;
    text-shadow:none!important;
    box-shadow:0 8px 24px rgba(36,25,13,.28),inset 0 1px rgba(255,255,255,.55)!important;
}
.start-sub{display:inline-block;margin:10px auto 20px;padding:7px 14px}
.start-foot{display:inline-block;padding:7px 12px}
.start-foot a,.sa-link{color:#4d2d08!important}
.sa-mode,.sa-dev,.sa-tabs button{
    color:var(--tinta)!important;
    border-color:var(--borde-papiro)!important;
    background:#d4ba82!important;
    box-shadow:inset 0 1px rgba(255,255,255,.45)!important;
}
.sa-mode.on,.sa-tabs button.on{
    color:#000!important;
    background:linear-gradient(180deg,#f2ca59,#dda025)!important;
}
.sa-dev:hover,.sa-mode:hover,.sa-tabs button:hover{background:#ead49e!important}
.sa-hint,.sa-me,.sa-formtit{color:var(--tinta)!important}
.sa-form input{
    color:#000!important;
    border-color:var(--borde-papiro)!important;
    background:#f6e8c6!important;
}

/* Las dos filas forman una sola cuadrícula, con el mismo filete fino. */
#bottomnav,#bottomnav2{border-top:1px solid var(--tinta)!important}
#bottomnav .navbtn,#bottomnav2 .navbtn2{
    border-right:1px solid rgba(36,25,13,.34)!important;
}
#bottomnav .navbtn:last-child,#bottomnav2 .navbtn2:last-child{border-right:0!important}

/* Neutralización definitiva de los componentes internos de la antigua piel
   gótica. El lienzo del mapa, el minimapa y los estados de peligro conservan
   sus colores funcionales; el resto de la interfaz usa papel y tinta. */
.tabs,.qa button,.upgrade-requirements,
.world-search-side button,.world-search-main,.world-search-types button,
.world-search-enemy .steps button,.selrow .steps button,
.research-groups button,.queue-capacity,.queue-capacity-row,.queue-task,
.arena-avatar,.arena-stats span,.lotebar .lb,.hpick,.fbtn,
.summon-info,.summon-pity,.summon-roulette,.summon-card,.summon-portrait,
.mp-mode,.mp-authtabs button,.mp-form input,.mp-me,.mp-row,
.perfil-hero,.tcard,.clan-tag,.chat-ch,.chat-msg,.chat-user-menu,
.chat-form input,.chat-user-menu button,.option-row input,.option-row select{
    color:var(--tinta)!important;
    border-color:rgba(36,25,13,.55)!important;
    background:linear-gradient(180deg,#f0dfb6,#d8c08b)!important;
    text-shadow:none!important;
}
.btn:not(.bad),.card button:not(.bad),.tw-modal button:not(.bad){
    color:var(--tinta)!important;
    border-color:var(--borde-papiro)!important;
    background:linear-gradient(180deg,#efddb2,#cfb277)!important;
    text-shadow:none!important;
}
.btn.gold,.btn.big,.card button:not(:disabled):not(.alt),
.tabs button.on,.scr-tabs button.on,.research-groups button.on,
.lotebar .lb.on,.hpick.on,.fbtn.on,.mp-mode.on,.mp-authtabs button.on,
.chat-ch.on{
    color:#000!important;
    border-color:#5f3d09!important;
    background:linear-gradient(180deg,#f2ca59,#dda025)!important;
}
.btn:disabled,.card button:disabled,.tw-modal button:disabled{
    color:#76684e!important;
    border-color:#9a875f!important;
    background:#c8b58c!important;
}
.upgrade-requirement,.queue-fold>summary,.event-fold summary,
.shop-fold summary,.saved-formations>summary,
.mp-sec-tit,.perfil-tit,.mp-rank,.mp-pow,.tc-da,
.queue-capacity h3,.queue-capacity-row b,.card .cost span{
    color:var(--tinta)!important;
    text-shadow:none!important;
}
.pbar,.bar,.qslot .q-bar{
    border-color:#5f4e31!important;
    background:#8e7b5b!important;
}
.pbar>span{color:#000!important;text-shadow:0 1px rgba(255,255,255,.45)!important}
.tw-tip,#tooltip,#toast{
    color:var(--tinta)!important;
    border-color:var(--borde-papiro)!important;
    background:linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
    text-shadow:none!important;
}
.ch-foot select,.ch-foot .ch-open{
    color:var(--tinta)!important;
    border-color:rgba(36,25,13,.5)!important;
    background:#e5cf9d!important;
}
.chat-user-menu button:hover,.chat-user-menu button:focus-visible{
    color:#000!important;
    background:#e2b84c!important;
}
.lvbadge{
    color:#000!important;
    border-color:#000!important;
    background:var(--papel-claro)!important;
}

/* Contraste de lectura: el gris y el oro heredados dejan de usarse como
   color de texto sobre papel en tienda, eventos y restricciones. */
#screen .sub,#panel .sub,.tw-modal .sub,
.event-fold summary small,.shop-fold summary small,
.hito .gr,.hito .gr .sub,.tcard .tc-nom,.tcard .tc-da,
.upgrade-requirements,.upgrade-requirement,
.queue-capacity-row small{
    color:#1f170d!important;
    opacity:1!important;
    text-shadow:none!important;
    font-weight:600;
}
.hito .lv,.shop-fold-meta i{
    color:#000!important;
    border-color:#4f3511!important;
    background:#e7cc91!important;
}
.event-fold,.event-fold-body,.hito{
    color:var(--tinta)!important;
    border-color:rgba(36,25,13,.58)!important;
    background:linear-gradient(180deg,#efddb2,#d9c18c)!important;
}
.event-fold summary,.event-fold summary span,
.shop-fold summary,.shop-fold summary span,
.scard .sc-tit,.tcard .tc-nom{
    color:var(--tinta)!important;
    text-shadow:none!important;
}

/* Control flotante de cámara. */
#cityctrls{
    color:var(--tinta)!important;
    border:1px solid var(--borde-papiro)!important;
    background:linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
    box-shadow:0 6px 18px rgba(36,25,13,.3),inset 0 1px rgba(255,255,255,.55)!important;
}
#cityctrls label{color:var(--tinta)!important;text-shadow:none!important}
#cityctrls input[type=range]{background:#887454!important;accent-color:#b87916}
#cityctrls input[type=range]::-webkit-slider-thumb{
    border:1px solid #4f3511!important;
    background:#d99f28!important;
    box-shadow:none!important;
}
#cityctrls button{
    color:#000!important;
    border:1px solid #4f3511!important;
    background:#ead49e!important;
    text-shadow:none!important;
}
#cityctrls button:hover{background:#e0b84e!important}
.tienda-saldo,.tienda-saldo b{
    color:#171008!important;
    text-shadow:none!important;
}
#screen .tienda-saldo + .event-fold,
#screen .tienda-saldo ~ .sub{
    color:#1f170d!important;
    font-weight:600!important;
}

/* Cabeceras y controles de Mapa/Objetivos: papel y tinta, también contraídos. */
#minimapWrap .hud-collapse-head,
#minimapWrap .hud-collapse-head span,
#marchas .mm-head,
#marchas .mm-title{
    color:var(--tinta)!important;
    text-shadow:none!important;
}
#minimapWrap .hud-collapse-head button,
#marchas .mm-collapse{
    color:#000!important;
    border:1px solid #000!important;
    background:var(--papel-claro)!important;
    box-shadow:none!important;
}
#minimapWrap .hud-collapse-head button:focus-visible,
#marchas .mm-collapse:focus-visible{
    outline:2px solid #24190d!important;
    outline-offset:2px;
}

/* En móvil se apilan verticalmente para no invadir la placa del jugador ni
   solaparse entre sí. */
@media(max-width:520px){
    #minimapWrap{
        top:142px;
        right:8px;
        width:min(200px,52vw);
    }
    #minimapWrap.collapsed ~ #marchas:not(.in-city){top:194px}
    #minimapWrap:not(.collapsed) ~ #marchas:not(.in-city){top:378px}
    #marchas.in-city{top:180px}
    #marchas{
        right:8px;
        width:min(200px,52vw);
        max-height:calc(100dvh - 296px);
    }
    #marchas .mm-guide{gap:3px;padding:5px 1px;line-height:1.2}
    #marchas .mm-guide-open{margin-top:4px;padding:5px 3px}
}

/* Legibilidad global sobre papiro. Ningún texto informativo visible depende
   ya de opacidad, gris claro u oro tenue para establecer jerarquía. */
:root{
    --sub:#2a1e11;
    --muted:#2a1e11;
}
#screen .sub,#panel .sub,.tw-modal .sub,
#screen small,#panel small,.tw-modal small,
#screen .sc-estado,#panel .sc-estado,.tw-modal .sc-estado,
.ct-sub,.scrollhint,.gb-hint,.world-search-hint,
.queue-empty,.queue-fold>summary small,.saved-formations>summary small,
.arena-stats span,.lotebar,.fslot span,.hpick small,
.hc-st,.hc-rol,.hh-rol,.hh-af,.summon-status,
.mp-status,.clan-war-side,.chat-at,.ch-empty{
    color:#171008!important;
    opacity:1!important;
    font-weight:600!important;
    text-shadow:none!important;
}
#screen [style*="color:var(--gold)"],
#panel [style*="color:var(--gold)"],
.tw-modal [style*="color:var(--gold)"]{
    color:#171008!important;
}
.scard.lock,.bcard.lock,.qslot.locked,
.qa button:disabled,.navbtn:disabled,.navbtn2:disabled,
.navbtn2.locked-level,.herocard.locked .hc-nom,
.herocard.locked .hc-rol{
    opacity:1!important;
}
.scard.lock,.bcard.lock,.qslot.locked,.navbtn2.locked-level{
    background:linear-gradient(180deg,#d7c49a,#bda77b)!important;
}
.btn:disabled,.card button:disabled,.tw-modal button:disabled,
input:disabled,select:disabled{
    color:#21170c!important;
    opacity:1!important;
    font-weight:700!important;
}

/* Formación, ejército, bolsa y mensajes: texto firme sobre el pergamino. */
#screen .mp-target,#panel .mp-target,.tw-modal .mp-target,
#screen .selrow,#panel .selrow,.tw-modal .selrow,
#screen .selrow>span,#panel .selrow>span,.tw-modal .selrow>span,
#screen .selrow .steps b,#panel .selrow .steps b,.tw-modal .selrow .steps b,
#screen .sc-fun,#panel .sc-fun,.tw-modal .sc-fun,
#screen .row,#panel .row,.tw-modal .row,
#screen .hintbox,#panel .hintbox,.tw-modal .hintbox{
    color:#171008!important;
    opacity:1!important;
    font-weight:650!important;
    text-shadow:none!important;
}
#screen .selrow small,#panel .selrow small,.tw-modal .selrow small{
    color:#3b2a16!important;
    font-weight:700!important;
}
#screen .selrow .steps button,#panel .selrow .steps button,.tw-modal .selrow .steps button,
#screen input[type="number"],#panel input[type="number"],.tw-modal input[type="number"]{
    color:#000!important;
    border-color:#5d421d!important;
    background:#f7e8c2!important;
    font-weight:800!important;
    text-shadow:none!important;
}
#screen .info-help,#panel .info-help,.tw-modal .info-help,
#screen .tcard-info,#panel .tcard-info,.tw-modal .tcard-info{
    color:#171008!important;
    border-color:#5d421d!important;
    background:#ead49e!important;
    text-shadow:none!important;
}

/* Acciones reconocibles: todo control disponible usa el amarillo/negro del
   tutorial. Los estados bloqueados siguen siendo neutros para no prometer una
   acción que el jugador todavía no puede ejecutar. */
.btn:not(:disabled):not(.bad),
.card button:not(:disabled):not(.bad),
.tw-modal button:not(:disabled):not(.bad),
.menuitem:not(:disabled),
.event-fold>summary,
.shop-fold>summary,
.queue-fold>summary,
.saved-formations>summary,
.info-help:not(:disabled),
.tcard-info:not(:disabled),
.summon-info:not(:disabled),
#panelClose,.scr-close,.scr-back,.tw-close{
    color:#000!important;
    border:1px solid #5f3d09!important;
    background:linear-gradient(180deg,#f6d663,#dfa421)!important;
    text-shadow:none!important;
}
.btn:not(:disabled):not(.bad):hover,
.menuitem:not(:disabled):hover,
.event-fold>summary:hover,
.shop-fold>summary:hover,
.queue-fold>summary:hover,
.saved-formations>summary:hover,
.info-help:not(:disabled):hover,
.tcard-info:not(:disabled):hover,
.summon-info:not(:disabled):hover,
#panelClose:hover,.scr-close:hover,.scr-back:hover,.tw-close:hover{
    filter:brightness(1.08);
    background:linear-gradient(180deg,#ffe681,#e7ad29)!important;
}
.hero-obtain-cta{
    display:block;
    margin-top:6px;
    padding:6px 8px;
    color:#000;
    border:1px solid #5f3d09;
    background:linear-gradient(180deg,#f6d663,#dfa421);
    font-size:11px;
    font-weight:900;
    text-align:center;
}
.hero-obtain-cta.hero-improve-cta{
    border-color:#24558e;
    background:linear-gradient(180deg,#79bdff,#438bd8);
    color:#050b12;
}

/* En Recursos, cada grupo vuelve a ser una franja clara. Solo el mando de
   desplegar destaca como botón amarillo/negro. */
#screen .shop-fold>summary{
    color:#171008!important;
    border:1px solid rgba(36,25,13,.45)!important;
    background:linear-gradient(180deg,#f2e2bc,#d9c28d)!important;
}
#screen .shop-fold>summary:hover{filter:none;background:linear-gradient(180deg,#f7e9c8,#e2cc98)!important}
#screen .shop-fold>summary::after{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    flex:0 0 25px;
    color:#000;
    border:1px solid #5f3d09;
    background:linear-gradient(180deg,#f6d663,#dfa421);
    line-height:1;
}

/* Navegación principal: ambas filas comparten exactamente la misma escala. */
#bottomnav .navbtn,#bottomnav2 .navbtn2{
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.15!important;
    color:#171008!important;
    letter-spacing:0!important;
}
#bottomnav .navbtn i,#bottomnav2 .navbtn2 i{
    font-size:20px!important;
    line-height:1!important;
}
#bottomnav .navbtn span,#bottomnav2 .navbtn2 span{
    display:block!important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media(max-width:520px){
    #bottomnav .navbtn,#bottomnav2 .navbtn2{
        font-size:9px!important;
        gap:3px!important;
        padding:4px 1px!important;
    }
    #bottomnav .navbtn i,#bottomnav2 .navbtn2 i{font-size:20px!important}
}

/* Colores funcionales accesibles: variantes oscuras y saturadas para texto. */
:root{
    --bad:#86150f;
    --ok:#145a2f;
    --info:#174f87;
    --dia:#07566a;
}
.pc-lvl,.pc-lvl b,.pc-line2,.pc-line2 b,
.hc-lvl,.summon-pity,.summon-pity span,.summon-pity b{
    color:#000!important;
    opacity:1!important;
    font-weight:800!important;
    text-shadow:none!important;
}
#screen [style*="var(--bad)"],#panel [style*="var(--bad)"],.tw-modal [style*="var(--bad)"],
.chip.no,.gb-no,.mp-status.error,.mp-err,.clan-war-vs,
.summon-status:has(b),.card .cost span.no,.upgrade-requirement.missing,
.arena-outcomes .loss,.chat-user-menu button.danger{
    color:#86150f!important;
    opacity:1!important;
    font-weight:800!important;
    text-shadow:none!important;
}
#screen [style*="var(--ok)"],#panel [style*="var(--ok)"],.tw-modal [style*="var(--ok)"],
.gb-ok,.mp-status.online,.arena-outcomes .win{
    color:#145a2f!important;
    opacity:1!important;
    font-weight:800!important;
    text-shadow:none!important;
}

/* La antigua piel gótica declara #ghostbar en negro con !important.
   Esta regla final garantiza que la colocación de edificios conserve la
   superficie de papiro y el contraste de tinta del resto de la interfaz. */
#ghostbar{
    color:var(--tinta)!important;
    background:
        linear-gradient(100deg,rgba(255,255,255,.18),transparent 34%,rgba(91,55,14,.08)),
        linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
    border:2px solid var(--tinta)!important;
}
#ghostbar .gb-hint{color:var(--tinta)!important;text-shadow:none!important}

/* Paneles HUD minimizados: se convierten en accesos flotantes compactos.
   Las reglas usan !important para conservar 48 px incluso con el escalado
   de HUD de monitores grandes. */
.hud-icon-toggle{
    position:relative;width:48px;height:48px;padding:0;display:grid;place-items:center;
    border:1px solid var(--borde-papiro)!important;border-radius:50%!important;
    color:var(--tinta)!important;
    background:linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
    box-shadow:0 4px 12px rgba(34,22,8,.38),inset 0 1px rgba(255,255,255,.55);
    font-size:23px;line-height:1;cursor:pointer;
}
.hud-icon-toggle .panel-alert{
    position:absolute;right:-5px;top:-5px;margin:0;
}
#queuehud.collapsed{
    width:48px!important;min-width:48px!important;max-width:48px!important;
}
#minimapWrap.collapsed{
    width:48px!important;height:48px!important;padding:0!important;
    border-radius:50%!important;overflow:visible!important;
}
#minimapWrap.collapsed #minimap{display:none!important}
#minimapWrap.collapsed .hud-collapse-head{
    display:block;width:100%;height:100%;margin:0!important;
}
#minimapWrap.collapsed .hud-collapse-head>span{display:none!important}
#minimapWrap.collapsed .hud-collapse-head button{
    display:grid;place-items:center;width:100%;height:100%;padding:0;
    border:0!important;border-radius:50%!important;background:transparent!important;
    font-size:23px;line-height:1;
}
#marchas.collapsed{
    width:48px!important;height:48px!important;max-height:none!important;
    padding:0!important;overflow:visible!important;border-radius:50%!important;
}
#marchas.collapsed #marchasBody{width:100%;height:100%}
#marchas.collapsed .guide-icon-toggle{border:0!important}

/* HUD de Ciudad despejado para la futura franja narrativa inferior.
   Construir ya está disponible desde el flujo de la ciudad y no se duplica
   como FAB; Objetivos ocupa su antigua altura. Tienda y Chat ascienden una
   posición para liberar el espacio situado sobre las dos navegaciones. */
#fabBuild{display:none!important}
#marchas.in-city{top:104px!important}
#fabShop{bottom:308px}
#chathud{bottom:244px}

@media(max-width:520px){
    #marchas.in-city{top:116px!important}
    #fabShop{bottom:300px}
    #chathud{bottom:236px}
}

/* Teléfonos especialmente estrechos (Galaxy S8 y equivalentes).
   La tarjeta recibe un ancho real —no solo un máximo— para que el nombre
   aproveche el espacio disponible. La barra conserva todos los recursos en
   una fila reduciendo únicamente su contenido interior. */
@media(max-width:369px){
    #topbar .res{
        gap:0;
        padding-inline:1px;
        font-size:12.5px;
    }
    #topbar .res i{font-size:13px;flex-shrink:0}
    #topbar .res[data-res="oro"] i{
        width:13px;height:13px;flex-basis:13px;
    }
    #topbar .res span{
        min-width:0;
        font-size:12.5px;
        letter-spacing:-.3px;
    }
    #playercard{
        width:min(216px,60vw);
        max-width:60vw;
        box-sizing:border-box;
        gap:5px;
        padding:5px 6px 5px 5px;
    }
    #playercard .pc-avatar-col{margin-top:2px}
    #playercard .pc-av{width:42px;height:54px}
    #playercard .pc-info{flex:1 1 auto;min-width:0}
    #playercard .pc-name{
        width:100%;
        max-width:none;
        font-size:12px;
    }
    #playercard .pc-title{max-width:100%;font-size:8.5px}
    #playercard .pc-xp{width:100%;max-width:none}
}

/* El estado de cada cola y, especialmente, su cuenta atrás son información
   operativa principal: deben conservar el mismo contraste que las etiquetas. */
#queuehud .qslot .q-sub{
    color:#21170d!important;
    font-size:10px;
    font-weight:750;
    line-height:1.25;
    letter-spacing:.08px;
    opacity:1!important;
    font-variant-numeric:tabular-nums;
    text-shadow:0 1px rgba(255,255,255,.36);
}
#queuehud .qslot.active .q-sub{
    color:#120c06!important;
    font-weight:850;
}

/* En escritorio, Colas y marchas debe conservar el mismo respiro bajo la
   tarjeta del jugador que ya tiene en móvil, tanto plegado como desplegado. */
@media(min-width:521px){
    #queuehud{top:124px}
}

/* Progresión completa de los edificios dentro de Info. El desplazamiento se
   limita a la tabla para mantener siempre visibles la descripción y el nivel. */
.building-progression{
    margin-top:8px;border:1px solid var(--borde-papiro);
    background:rgba(255,248,220,.36);
}
.building-progression-head{
    display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
    padding:7px 8px;border-bottom:1px solid var(--borde-papiro);
    background:linear-gradient(180deg,var(--papel-claro),var(--papel));
}
.building-progression-head span{font-size:10px;color:var(--tinta-suave);text-align:right}
.building-progression-scroll{
    max-height:min(48vh,460px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-gutter:stable;font-variant-numeric:tabular-nums;
}
.building-level-row{
    position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    gap:7px;align-items:start;padding:7px 8px;border-bottom:1px solid rgba(92,65,25,.24);
    color:var(--tinta);background:rgba(255,250,230,.2);
}
.building-level-row:last-child{border-bottom:0}
.building-level-row.current{
    background:linear-gradient(90deg,rgba(246,184,45,.42),rgba(255,248,220,.42));
    box-shadow:inset 3px 0 #b8750b;
}
.building-level-row.milestone:not(.current){background:rgba(235,190,91,.2)}
.building-level-number{display:flex;flex-direction:column;align-items:center;line-height:1}
.building-level-number small{font-size:8px;text-transform:uppercase;color:var(--tinta-suave)}
.building-level-number b{font-size:17px;margin-top:2px}
.building-level-detail{min-width:0}
.building-level-power{font-weight:800;font-size:11px}
.building-level-power small{font-weight:600;color:var(--tinta-suave)}
.building-level-stats{display:flex;gap:4px 9px;flex-wrap:wrap;margin-top:3px}
.building-level-stats span{font-size:10px;font-weight:650}
.building-level-unlock{
    margin-top:4px;padding:3px 5px;border-left:3px solid #b8750b;
    background:rgba(224,166,43,.18);font-size:10px;font-weight:800;
}
.building-level-current{
    align-self:center;padding:2px 4px;border:1px solid #8b5a0b;
    background:#e9b43e;color:#21170d;font-size:9px;font-weight:900;text-transform:uppercase;
}
@media(max-width:520px){
    .building-progression-head{align-items:flex-start;flex-direction:column}
    .building-progression-head span{text-align:left}
    .building-progression-scroll{max-height:44vh}
    .building-level-row{grid-template-columns:38px minmax(0,1fr);padding:6px}
    .building-level-current{position:absolute;right:5px;top:5px}
    .building-level-row.current .building-level-detail{padding-right:42px}
}

/* Resumen de formación plegado de inicio para mantener visible el envío. */
.march-summary-fold{overflow:hidden}
.march-summary-fold>summary{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:8px 10px;cursor:pointer;font-weight:900;list-style:none;
}
.march-summary-fold>summary::-webkit-details-marker{display:none}
.march-summary-fold>summary i{
    width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;
    border:1px solid var(--borde-papiro);font-style:normal;font-size:18px;
    background:linear-gradient(180deg,var(--papel-claro),var(--papel));
}
.march-summary-fold[open]>summary{border-bottom:1px solid var(--borde-papiro)}
.march-summary-fold[open]>summary i{font-size:0}
.march-summary-fold[open]>summary i::before{content:"−";font-size:18px}
@media(max-width:520px){
    .march-summary-fold>summary{padding:1px 10px}
}

/* Navegación por coordenadas del mundo. Se apoya sobre la segunda barra. */
#worldCoords{
    position:fixed;left:50%;bottom:110px;z-index:39;transform:translateX(-50%);
    width:min(330px,calc(100vw - 24px));color:var(--tinta);
}

/* Una sola barra inferior. Los sistemas secundarios se abren desde un botón
   compacto situado sobre ella y no consumen otra fila permanente. */
#bottomnav2.utility-nav{
    position:fixed!important;left:auto!important;right:10px!important;bottom:64px!important;
    width:auto!important;height:auto!important;display:block!important;overflow:visible!important;
    border:0!important;background:transparent!important;box-shadow:none!important;z-index:52;
}
#bottomnav2 .utility-toggle{
    width:58px!important;height:48px!important;padding:3px!important;border:2px solid var(--tinta)!important;
    background:linear-gradient(180deg,var(--papel-claro),var(--papel))!important;
    box-shadow:0 4px 13px #0008!important;color:var(--tinta)!important;
}
#bottomnav2 .utility-items{
    position:absolute;right:0;bottom:55px;width:min(310px,calc(100vw - 20px));padding:6px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
    border:2px solid var(--tinta);background:linear-gradient(180deg,var(--papel-claro),var(--papel));
    box-shadow:0 7px 22px #0009;transform-origin:bottom right;transition:opacity .16s,transform .16s;
}
#bottomnav2.collapsed .utility-items{opacity:0;transform:scale(.9) translateY(8px);pointer-events:none;visibility:hidden}
#bottomnav2 .utility-items .navbtn2{
    width:auto!important;min-width:0!important;height:56px!important;padding:4px 2px!important;
    border:1px solid var(--borde-papiro)!important;background:#fff8e7!important;color:var(--tinta)!important;
}
#bottomnav2 .utility-items .navbtn2 span{display:block!important;font-size:8px!important;white-space:normal!important;line-height:1.05}
#bottomnav2 .utility-items .navbtn2 i{font-size:20px!important}
#bottomnav2 .utility-items .navbtn2.on,#bottomnav2 .utility-items .navbtn2.active{background:#efb62d!important}
#worldCoords{bottom:64px!important}

/* Preparación de marcha: menos decoración vertical y una acción final
   siempre alcanzable, incluso con las tres filas desbloqueadas. */
.march-context-banner{max-height:74px;overflow:hidden}
.march-context-banner img{width:100%;height:74px!important;object-fit:cover;object-position:center 42%}
.march-power-card{margin-block:4px!important;padding-block:5px!important}
.march-send-sticky{position:sticky;bottom:0;z-index:4;margin-top:5px!important;box-shadow:0 -4px 12px rgba(36,22,5,.3)}
@media(max-width:520px){
    #screen:has(.march-send-sticky) .scr-body{padding-bottom:8px}
    .march-context-banner{max-height:48px}
    .march-context-banner img{height:48px!important}
    .march-lane{padding-block:4px!important;gap:3px!important}
    .march-summary-fold{margin-block:3px!important}
    .march-send-sticky{bottom:-1px}
}
#worldCoords.hidden{display:none!important}
#worldCoordsToggle{
    display:flex;flex-direction:column;align-items:center;gap:1px;margin:0 auto;min-width:116px;padding:4px 12px;
    border:1px solid var(--borde-papiro);background:linear-gradient(180deg,var(--papel-claro),var(--papel));
    color:var(--tinta);font-weight:900;box-shadow:0 2px 8px #0007;
}
.world-distance-line{display:flex;align-items:center;justify-content:center;gap:5px;line-height:1}
.world-distance-line em{font-size:8px;font-style:normal;text-transform:uppercase;opacity:.72}
#worldCoordsDistance{font-size:11px;font-weight:950;color:#8b250f}
#worldCoordsToggle>span{line-height:1.05}
#worldCoordsPanel{
    position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
    width:min(310px,calc(100vw - 32px));box-sizing:border-box;padding:9px;
    border:2px solid var(--borde-papiro);background:linear-gradient(180deg,var(--papel-claro),var(--papel));
    box-shadow:0 5px 18px #0009;
}
#worldCoordsPanel.hidden{display:none!important}
.world-coords-title{font-weight:900;text-transform:uppercase;margin-bottom:7px}
.world-coords-fields,.world-coords-actions{display:flex;gap:7px}
.world-coords-fields label{display:flex;align-items:center;gap:4px;flex:1;font-weight:900}
.world-coords-fields input{width:100%;min-width:0;padding:6px;border:1px solid var(--borde-papiro);background:#fff7db;color:#17120a}
.world-coords-actions{margin-top:7px}
.world-coords-actions button,.world-coords-favorites button{
    flex:1;padding:6px;border:1px solid #201707;background:#efb62d;color:#171006;font-weight:900;
}
.world-coords-favorites{margin-top:7px}
.world-coords-tabs{display:flex;gap:3px;overflow-x:auto;scrollbar-width:thin}
.world-coords-tabs button{
    flex:0 0 calc((100% - 12px)/5);min-width:52px;padding:4px 3px;
    display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;overflow:hidden;
    background:#ead49c;color:var(--tinta);
}
.world-coords-tabs button span,.world-coords-tabs button b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.world-coords-tabs button span{font-size:9px}
.world-coords-tabs button b{font-size:10px}
.world-coords-tabs button.on{background:#efb62d;box-shadow:inset 0 -3px #171006}
.world-coords-selected{
    display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:4px;padding:4px;
    border:1px solid var(--borde-papiro);background:#fff1c7;font-size:10px;
}
.world-coords-selected>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.world-coords-selected>div{display:flex;gap:3px;flex:0 0 auto}
.world-coords-selected button{padding:4px 6px}
.world-coords-selected button.danger{background:#b9362b;color:#fff}
@media(max-width:520px){
    #worldCoords{bottom:110px}
    #worldCoordsToggle{padding:5px 10px}
}
.sovereign-equipment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 16px}.sovereign-slot{min-width:0}.sovereign-slot .sc-body{align-items:center;text-align:center}@media(max-width:520px){.sovereign-equipment{gap:6px}.sovereign-slot .sc-ico{display:none}.sovereign-slot .btn{font-size:11px;padding:7px 5px}}

/* Bolsa de jugador: lectura visual inmediata. El detalle vive en la ventana
   contextual; la vista de diseño conserva las tarjetas documentales. */
.bag-compact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,112px));gap:8px;justify-content:start;align-content:start;width:100%;max-width:none;margin:0}
.bag-compact-item{position:relative;display:grid;place-items:center;align-content:center;min-width:0;aspect-ratio:1/1;padding:7px;border:2px solid #5f4729;border-radius:4px;background:radial-gradient(circle at 50% 30%,#806e4d,#30291f 68%,#17130f);box-shadow:inset 0 1px #d6c39566,0 3px 7px #0005;color:#f4e2b0;cursor:pointer;overflow:hidden}
.bag-compact-item:hover,.bag-compact-item:focus-visible{border-color:#c59b4c;filter:brightness(1.1)}
.bag-compact-item>img,.bag-compact-item>.bag-item-icon{width:78%;height:78%;object-fit:contain;filter:none}
.bag-compact-item>b{position:absolute;bottom:4px;left:4px;right:4px;font-size:10px;line-height:1;color:#f5e6bd;text-shadow:0 1px 2px #000}
.bag-qty{position:absolute;right:4px;bottom:4px;padding:1px 4px;border:1px solid #bda36e;background:#15120ee8;color:#fff4d2;font:700 11px var(--font-medieval)}
.bag-compact-item>b+.bag-qty{bottom:18px}
.bag-new{position:absolute;z-index:2;left:-25px;top:8px;width:88px;transform:rotate(-42deg);padding:2px;background:#b71916;color:#ffe892;font:900 10px var(--font-ui);box-shadow:0 1px 3px #000}
.bag-detail{display:grid;justify-items:center;gap:10px;text-align:center;color:#392810}.bag-detail>img{width:112px;height:112px;object-fit:contain}.bag-detail p{margin:0;max-width:420px;line-height:1.4}.bag-detail .btn{min-width:180px}
@media(max-width:430px){.bag-compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bag-compact-item{width:100%}}

/* Jerarquía cromática: marrón-caqui legible para navegación y superficies;
   el amarillo intenso queda reservado para las acciones importantes. */
#screen{background:#a98e5d!important}
#screen .scr-head{background:linear-gradient(180deg,#7d6948,#604e35)!important;border-bottom-color:#a98242!important}
#screen .scr-head h2{color:#fff0c6!important;text-shadow:0 1px 2px #24170b!important}
#screen .scr-body{background:radial-gradient(ellipse at 50% 0%,#ead8a9 0,#d1b77f 48%,#ac8f5c 100%)!important;color:#2c1d0d}
#screen .scr-body .sub,#screen .scr-body small,#screen .scr-body .sc-fun{color:#4c3820!important}
#screen .sec-h{color:#412a10!important;text-shadow:0 1px #f6e6b7}
#screen .scr-tabs{background:#b79b67!important;border-bottom:1px solid #806331}
#screen .scr-tabs button{background:linear-gradient(#9a8057,#796443)!important;border:1px solid #73562d!important;color:#fff1cb!important;border-radius:3px!important}
#screen .scr-tabs button.on{background:linear-gradient(#e0c888,#b99a5a)!important;color:#291b0c!important;border-color:#8e6727!important;box-shadow:inset 0 1px #fff1c6,0 0 8px #8a622855!important}
#screen .btn.sec,#screen button.sec{background:linear-gradient(#7d6a4b,#5c4c35)!important;color:#fff0c9!important;border-color:#a88a55!important}
#screen .scard,#screen .card,#screen .mp-row{background:linear-gradient(180deg,#ead8a8,#c9aa70)!important;border-color:#8d6e3d!important;color:#2c1d0d!important}
#screen[data-screen="heroes"] .scr-body{background:linear-gradient(180deg,#ead9ab,#d0b681 52%,#aa8c5b)!important}
#screen[data-screen="heroes"] .scr-head h2{visibility:visible!important;opacity:1!important;color:#fff0c6!important}
#bottomnav2.hidden{display:none!important}
#fabMoveBase{background:linear-gradient(180deg,#d8c697,#aa9360)!important;border:2px solid #5e4728!important;color:#2f2112!important}
#screen .event-fold>summary,#screen .shop-fold>summary,#screen .queue-fold>summary,#screen .saved-formations>summary{
    color:#2d1d0d!important;border:1px solid #8e6d39!important;
    background:linear-gradient(180deg,#e6d19d,#c3a66f)!important;
}
#screen .event-fold>summary small,#screen .shop-fold>summary small{color:#513b20!important}
#screen .event-fold,#screen .event-fold-body{color:#2b1c0d!important;border-color:#91703d!important;background:linear-gradient(180deg,#ead8a8,#ccb079)!important}
#bottomnav2 .utility-items .navbtn2.on,#bottomnav2 .utility-items .navbtn2.active{background:linear-gradient(#a58a59,#79633f)!important;color:#fff5d5!important}
@media(min-width:900px){#screen .scr-body>.scardlist,#screen .scr-body>.mp-list,#screen .scr-body>.options-grid,#screen .scr-body>.inventory-grid{max-width:1180px;margin-left:auto;margin-right:auto}.options-grid{grid-template-columns:repeat(auto-fit,minmax(210px,320px));justify-content:center}}

/* Sistema visual adulto y coherente: carbón, granate apagado, metal envejecido
   y pergamino únicamente en superficies de lectura. */
:root{
    --ui-coal:#171412;
    --ui-coal-soft:#29221e;
    --ui-oxblood:#4b1714;
    --ui-oxblood-light:#713024;
    --ui-steel:#8d877d;
    --ui-steel-light:#c4b9a6;
    --ui-paper:#dfc895;
    --ui-paper-light:#f0dfb4;
    --ui-ink:#24170d;
}
#screen,#panel,.tw-modal{font-family:var(--font-ui)!important}
#screen h1,#screen h2,#screen h3,#panel h2,#panel h3,.tw-modal h2,.tw-modal h3,
#screen .sc-tit,#screen .sec-h{font-family:var(--font-medieval)!important;letter-spacing:.015em}
.panel-head,.scr-head,.tw-head,
#screen .scr-head,#panel .panel-head,.tw-modal .tw-head{
    color:#eee2c7!important;
    border-color:var(--ui-steel)!important;
    background:linear-gradient(180deg,#37322e 0%,#926c52 58%,#302820 100%)!important;
    box-shadow:inset 0 1px #b8b0a355,inset 0 -2px #531713!important;
}
.panel-head h2,.scr-head h2,.tw-head h2,#screen .scr-head h2{
    color:#eee2c7!important;text-shadow:0 1px 2px #000!important;
}
#screen .scr-body,#panel .panel-body{
    color:var(--ui-ink)!important;
    background:radial-gradient(ellipse at 50% 0%,#ead9ad 0%,#d8be87 48%,#b99b67 100%)!important;
}
#screen .card,#screen .scard,#screen .bcard,#panel .card,#panel .scard,
.tw-modal .card,.tw-modal .scard,
#screen .card:nth-child(even),#screen .scard:nth-child(even),.menuitem:nth-child(even){
    color:var(--ui-ink)!important;
    border:1px solid #806538!important;
    background:linear-gradient(180deg,var(--ui-paper-light),var(--ui-paper))!important;
    box-shadow:inset 0 1px #fff7dc,0 2px 5px #2b1b0c33!important;
}
#screen .sub,#panel .sub,.tw-modal .sub,#screen small,#panel small,.tw-modal small,
#screen .sc-fun,#panel .sc-fun,.tw-modal .sc-fun{color:#513a22!important;opacity:1!important}

/* Navegación: metal y granate; el dorado queda para confirmar acciones. */
#screen .scr-tabs,.tabs,.research-groups{background:linear-gradient(180deg,#2b2723,#171412)!important;border-color:#8b8171!important}
#screen .scr-tabs button,#screen .tabs button,#panel .tabs button,.tw-modal .tabs button,
.research-groups button,.btn.sec,.card button.sec,.tw-modal button.sec{
    color:#e9dcc0!important;
    border:1px solid #8b8171!important;
    background:linear-gradient(180deg,#594039,#321d1a 52%,#211817)!important;
    box-shadow:inset 0 1px #d1c3aa44!important;
    text-shadow:0 1px 1px #000!important;
}
#screen .scr-tabs button.on,#screen .tabs button.on,#panel .tabs button.on,.tw-modal .tabs button.on,
.research-groups button.on{
    color:#ffe7a3!important;
    border-color:#b4a68d!important;
    background:linear-gradient(180deg,#7a3329,#4a1714 58%,#281311)!important;
    box-shadow:inset 0 1px #e5cab166,0 0 7px #6e211866!important;
}
.btn:not(.sec):not(.bad),.card button:not(.sec):not(.bad),.tw-modal button:not(.sec):not(.bad){
    color:#241407!important;border-color:#76500d!important;
    background:linear-gradient(180deg,#efd071,#c99025 58%,#a76816)!important;
    box-shadow:inset 0 1px #fff0b0,0 2px 4px #3d210955!important;text-shadow:0 1px #fff3c266!important;
}

/* El selector de un edificio funciona como lanzador de contextos. */
.building-modal{border:1px solid var(--ui-steel)!important;background:var(--ui-coal)!important;box-shadow:0 12px 38px #000b!important}
.building-modal .tw-body{padding:8px;background:linear-gradient(180deg,#cdb27b,#ad8e59)!important}
.building-modal .building-action-tabs{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;
    margin:0 0 8px;padding:6px;border:1px solid #80786b;border-radius:0!important;
}
.building-modal .building-action-tabs button{min-height:42px;border-radius:2px!important;font-size:12px;font-weight:850}
.building-modal .tw-actions{padding:7px;border-top:1px solid #887e6c;background:linear-gradient(180deg,#2b2420,#171412)!important}
.building-modal .tw-actions .btn{width:100%;min-height:38px}

/* Investigación: tarjetas uniformes y texto siempre legible. */
#screen[data-screen="investigacion"] .scard,
#screen[data-screen="investigacion"] .scard:nth-child(even){
    background:linear-gradient(180deg,#ead9ae,#cfb176)!important;color:var(--ui-ink)!important;border-color:#76603a!important;
}
#screen[data-screen="investigacion"] .sc-fun,
#screen[data-screen="investigacion"] .sub,
#screen[data-screen="investigacion"] small{color:#4c351e!important;text-shadow:none!important}

/* Árbol del soberano: se elimina el cian y las tres ramas comparten familia. */
.player-skill-branch,.player-skill-node{
    border-color:#70675b!important;background:linear-gradient(145deg,#2a201d,#100e0d)!important;color:#d8c9ad!important;
}
.player-skill-branch h3,.player-skill-node b{color:#e2bd67!important}
.branch-combate,.branch-desarrollo,.branch-soporte{border-top-color:#7b3027!important}
.player-skill-node.learned{border-color:#a96830!important;box-shadow:0 0 8px #6f211a66!important}

/* Eventos: contexto compacto, pestañas al ancho de su contenido y tarjetas
   legibles de 360 px que nunca superan tres columnas. */
.event-tab-list{display:flex!important;justify-content:flex-start;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.event-tab-button{flex:0 0 auto!important;width:auto;min-width:88px;padding:7px 11px!important}
.events-context-card .sc-body{background:linear-gradient(135deg,#ead9ad 0%,#cfb47d 57%,#74503a 100%);padding:10px;color:#24170d}
.event-daily-reward{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid #806139}
.events-world-context{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch;width:min(100%,1000px);margin:0 auto}
.events-calendar-card{display:grid!important;grid-template-rows:auto;padding:0!important;overflow:hidden}
.events-world-context .events-context-banner{width:100%;height:100%;min-height:120px;margin:0;border:0;border-bottom:1px solid #806139}
.events-calendar-card>.sc-body{padding:10px}
.events-conquest-card>.sc-body{min-height:150px;background-image:linear-gradient(90deg,rgba(234,217,173,.94),rgba(234,217,173,.72) 58%,rgba(234,217,173,.18)),url('../assets/pantallas/eventos.avif')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.events-daily-card .event-daily-reward{margin:0;padding:10px;border:0;min-height:48px;box-sizing:border-box}
.events-context-stack{display:grid;gap:7px;grid-template-columns:minmax(0,1fr)}
.events-context-stack>.scard{margin:0!important}
.events-context-stack .event-daily-reward{margin:0;padding:0;border:0}
[data-events-online] .event-fold:not(.promo-fold)>.event-fold-body{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
[data-events-online] .event-fold-body>.event-info-btn,
[data-events-online] .event-fold-body>.sub{grid-column:1/-1}
[data-events-online] .event-fold-body>.scard{margin:0;min-width:0;background:linear-gradient(135deg,#f0dfb4 0%,#d6bb83 65%,#8b6245 100%)!important}
@media(min-width:760px){
    .events-world-context{grid-template-columns:minmax(0,1fr)}
    [data-events-online] .event-fold:not(.promo-fold)>.event-fold-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.forge-tabs{display:flex;gap:6px;margin:0 0 10px;padding:6px;background:linear-gradient(180deg,#2b2723,#171412);border:1px solid #8b8171}
.forge-tabs button{flex:0 1 260px;min-height:40px;color:#e9dcc0;border:1px solid #8b8171;background:linear-gradient(180deg,#594039,#321d1a 52%,#211817);font-weight:850;cursor:pointer}
.forge-tabs button.on{color:#ffe7a3;border-color:#b4a68d;background:linear-gradient(180deg,#7a3329,#4a1714 58%,#281311)}
.forge-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:8px}
.forge-hero-grid>.scard{margin:0}
.forge-hero-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.forge-hero-slots button{display:grid;place-items:center;gap:2px;min-width:0;padding:7px 3px;border:1px solid #806538;background:linear-gradient(#f0dfb4,#cfb47d);color:#24170d;cursor:pointer}
.forge-hero-slots i{font-style:normal;font-size:23px}.forge-hero-slots small,.forge-hero-slots b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.forge-hero-slots button.equipped{border-color:#9a5a21;background:linear-gradient(#e4c67d,#a8753f)}

/* Círculo de Adiestramiento y Banco: cada progresión tiene ahora su espacio. */
.training-hero-layout{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(280px,1.28fr);gap:12px;max-width:900px;margin:0 auto;align-items:stretch}
.training-hero-portrait,.training-skill-panel,.bank-piece-focus,.bank-piece-list{border:1px solid #735a39;background:linear-gradient(180deg,#f1dfb8,#d2b47d);box-shadow:inset 0 1px #fff1c7,0 4px 10px #2b1b1233}
.training-hero-portrait{display:grid;place-items:center;align-content:center;gap:6px;padding:18px;text-align:center;border-top:4px solid var(--rarity)}
.training-hero-portrait img{width:min(220px,100%);aspect-ratio:4/5;object-fit:contain;border:2px solid var(--rarity);background:radial-gradient(circle,#f9e9bf,#9d8054)}
.training-hero-portrait b{font:800 21px var(--font-medieval)}.training-hero-portrait small{font-weight:800;text-transform:capitalize}
.training-skill-panel{display:grid;align-content:start;gap:10px;padding:16px}.training-skill-panel p{margin:0;line-height:1.45}
.training-stars{display:flex;justify-content:center;gap:7px;padding:12px;border:1px solid #806538;background:#251b13}
.training-stars span{font-size:38px;line-height:1;color:#625747;text-shadow:0 2px #000}.training-stars span.on{color:#ffc733;text-shadow:0 0 9px #ffb400,0 2px #6b3a00}
.training-effect-grid,.bank-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.training-effect-grid>div,.bank-comparison>div{display:grid;gap:4px;padding:10px;border:1px solid #806538;background:#fff4d3}.training-effect-grid i,.bank-comparison i{font-style:normal;font-size:24px;font-weight:900}.training-effect-grid small,.bank-comparison small{font-weight:800}.training-effect-grid b,.bank-comparison b{color:#6b3219}
.training-cost{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px;border:1px solid #806538;background:#fff4d3}.training-cost b{text-align:right}
.bank-layout{display:grid;grid-template-columns:minmax(190px,.62fr) minmax(300px,1.38fr);gap:12px;max-width:920px;margin:0 auto 14px}.bank-piece-list{display:grid;align-content:start;gap:5px;padding:8px}.bank-piece-list button{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:6px;padding:8px;text-align:left;border:1px solid #806538;background:#ead6a7;color:#24170d;cursor:pointer}.bank-piece-list button.on{border-color:#8e401d;background:#ffc95f;box-shadow:inset 0 0 0 2px #fff0a8}.bank-piece-list button small{font-weight:800}
.bank-piece-focus{display:grid;justify-items:center;align-content:start;gap:9px;padding:16px;border-top:4px solid var(--rarity)}.bank-piece-focus>img{width:min(210px,55%);aspect-ratio:1;object-fit:contain;background:#dfc995;border:2px solid var(--rarity)}.bank-piece-focus h3{margin:0;font:800 21px var(--font-medieval)}.bank-piece-focus .bank-comparison,.bank-piece-focus .training-cost,.bank-piece-focus>.btn{width:min(100%,560px);box-sizing:border-box}.bank-piece-emoji{font-size:90px}
@media(max-width:650px){.training-hero-layout,.bank-layout{grid-template-columns:1fr}.training-hero-portrait{grid-template-columns:100px 1fr;justify-items:start;text-align:left}.training-hero-portrait img{grid-row:1/3;width:90px}.bank-piece-list{grid-template-columns:repeat(2,minmax(0,1fr))}.bank-piece-list .sec-h{grid-column:1/-1}.training-stars span{font-size:31px}}
@media(min-width:1160px){
    [data-events-online] .event-fold:not(.promo-fold)>.event-fold-body{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Árbol del soberano: pergamino tostado que cae hacia carbón/granate en las
   esquinas, sin la antigua familia cian. */
.player-skill-branch{
    background:radial-gradient(circle at 22% 12%,#bda16d 0%,#7d5b3e 42%,#3a241d 74%,#171110 100%)!important;
}
.player-skill-node{
    background:radial-gradient(circle at 18% 10%,#d2b77e 0%,#8a6746 38%,#422a21 72%,#1a1210 100%)!important;color:#f0dfbd!important;
}
.player-skill-node small{color:#dfc99f!important}

/* Ficha breve del edificio y contextos secundarios. */
.building-choice-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;padding:4px}
.building-choice{width:auto;min-width:86px;min-height:24px;padding:3px 8px;border:1px solid #4b351f!important;color:#2a180b!important;background:linear-gradient(90deg,#49362a 0%,#b88b62 18%,#efd49a 50%,#b88b62 82%,#49362a 100%)!important;box-shadow:inset 0 1px #fff1bd,inset 0 -2px #332218,0 2px 5px rgba(0,0,0,.3)!important;text-shadow:0 1px #f8e2ad!important;font:700 12px var(--font-medieval)!important;white-space:nowrap;cursor:pointer}
.building-choice:hover{filter:brightness(1.13)}
.building-choice small{display:block;margin-top:7px;color:#cbbda3!important;font:600 11px var(--font-ui)!important}
.building-context-head{display:flex;align-items:center;gap:10px;margin:-2px -2px 9px;padding:5px 8px;background:linear-gradient(180deg,#302824,#181413);border:1px solid #7e7165;color:#ead8b3}
.building-back,.building-move-head{width:34px;height:31px;border:1px solid #968675!important;background:linear-gradient(180deg,#514740,#282321)!important;color:#f1dcae!important;font-size:21px!important;cursor:pointer}
.building-context-head strong{font:700 14px var(--font-medieval);letter-spacing:.02em}
.building-modal .tw-head h2{margin-right:auto}
@media(max-width:639px){
    .tw-ov:has(.building-modal){padding-bottom:clamp(34px,6vh,56px);box-sizing:border-box;background:rgba(0,0,0,.68)}
    .tw-ov:has(.building-modal)::after{content:"";position:absolute;z-index:0;left:50%;bottom:0;transform:translateX(-50%);width:min(460px,96vw);height:clamp(34px,6vh,56px);background:#080604;border-inline:1px solid #33261d;box-sizing:border-box}
    .tw-ov:has(.building-modal)>.building-modal{position:relative;z-index:1}
}
@media(min-width:640px){
    .building-modal{transform:translateY(-8px)}
}
@media(max-width:330px){.building-choice-grid{gap:5px}.building-choice{min-width:76px;font-size:11px!important}}

/* Metal caqui iluminado: bordes oscuros y foco claro central. */
#screen .scr-head{
    background:linear-gradient(90deg,#3c3028 0%,#8f6b52 18%,#b98e6b 50%,#8f6b52 82%,#3c3028 100%)!important;
    border-bottom-color:#5b4026!important;
}
#screen .scr-tabs,#screen .tabs,.research-groups{
    background:linear-gradient(90deg,#403129 0%,#9a7658 50%,#403129 100%)!important;
}
#screen .scr-tabs button,#screen .tabs button,#panel .tabs button,.tw-modal .tabs button,
.research-groups button,.btn.sec,.card button.sec,.tw-modal button.sec{
    color:#29190e!important;
    border-color:#54402b!important;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#49372c 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 2px 4px #2b1b1244!important;
    text-shadow:0 1px #f4deb0!important;
}
#screen .scr-tabs button.on,#screen .tabs button.on,#panel .tabs button.on,.tw-modal .tabs button.on,
.research-groups button.on{
    color:#241307!important;
    border-color:#66451e!important;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
}

/* Perfil del soberano: navegación compacta y equipo visible. */
.profile-overview{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(260px,1.15fr) minmax(220px,.95fr);gap:8px;align-items:stretch;margin-bottom:8px}
.profile-overview>.perfil-hero{margin:0;min-width:0}
.profile-overview>.profile-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0}
.profile-overview>.profile-summary-grid>div{padding:8px 5px}
.profile-overview>.profile-equipment-strip{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;margin:0}
.profile-overview>.profile-equipment-strip button{min-height:0}
.profile-section-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 0}
.profile-section-nav button,.profile-equipment-strip button{border:1px solid #887b6c;background:linear-gradient(180deg,#4e1718,#211011);color:#ead9b7;box-shadow:inset 0 1px #ffffff22,0 2px 4px #0004;cursor:pointer}
.profile-section-nav button{min-height:55px;font-size:19px}.profile-section-nav span{display:block;margin-top:4px;font:700 10px var(--font-ui)}
.profile-equipment-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:9px}
.profile-equipment-strip button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:7px}
.profile-equipment-strip i{grid-row:1/3;font-size:25px;font-style:normal}.profile-equipment-strip small{color:#cdbc9d!important}.profile-equipment-strip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}

/* Opciones: bloques densos, ayuda desplegable y accesos secundarios granate. */
#screen[data-screen="opciones"] .scr-body{display:grid;gap:8px;align-content:start}
#screen[data-screen="opciones"] .scard{margin:0}
#screen[data-screen="opciones"] .option-row{min-height:34px;padding:5px 0;margin:0!important}
#screen[data-screen="opciones"] .compact-options .option-row+ .option-row{border-top:1px solid #725d392f}
.option-info{display:inline-block;position:relative;margin-left:5px;vertical-align:middle}.option-info summary{display:grid;place-items:center;width:22px;height:22px;border:1px solid #8a7451;background:#3a1716;color:#efcf82;cursor:pointer;list-style:none;font:700 12px var(--font-ui)}.option-info summary::-webkit-details-marker{display:none}.option-info p{position:absolute;z-index:5;top:25px;left:-110px;width:min(280px,70vw);margin:0;padding:9px;border:1px solid #8d8171;background:#1c1714;color:#eadcc0;font:600 11px/1.4 var(--font-ui);box-shadow:0 5px 15px #0007}
#screen[data-screen="opciones"] .options-grid .menuitem{background:linear-gradient(180deg,#571b1b,#291112)!important;border-color:#8d8171!important;color:#eadcc0!important}
@media(max-width:520px){.profile-section-nav{gap:4px}.profile-section-nav button{font-size:17px}.profile-section-nav span{font-size:9px}.profile-equipment-strip{grid-template-columns:1fr 1fr 1fr}.profile-equipment-strip button{grid-template-columns:1fr;text-align:center}.profile-equipment-strip i{grid-row:auto}.profile-equipment-strip b{display:none}}
@media(max-width:760px){.profile-overview{grid-template-columns:minmax(0,1fr)}.profile-overview>.profile-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-overview>.profile-equipment-strip{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.profile-overview>.profile-equipment-strip button{min-height:58px}}
@media(max-width:430px){.profile-overview>.profile-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Metal caqui compartido en el HUD principal. Mantiene el mismo foco central
   de las pestañas, con marcos oscuros y una lectura clara sobre el mapa. */
#topbar,
#bottomnav{
    border-color:#4b351f!important;
    background:linear-gradient(90deg,#3c3028 0%,#8f6b52 18%,#b98e6b 50%,#8f6b52 82%,#3c3028 100%)!important;
    box-shadow:inset 0 1px #d7b990,inset 0 -2px #302118,0 3px 9px #20150d66!important;
}
#topbar .res,
#bottomnav .navbtn{
    color:#29190e!important;
    border-color:#54402b!important;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#d0a68d 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d!important;
    text-shadow:0 1px #f4deb0!important;
}
#topbar .res span,
#bottomnav .navbtn span{
    color:#29190e!important;
    text-shadow:0 1px #f4deb0!important;
}
#bottomnav .navbtn.active{
    color:#241307!important;
    border-color:#66451e!important;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff0b3,inset 0 -2px #4a2c13,0 -2px 7px #2b1b1244!important;
}

#playercard,
#queuehud .queue-collapse-head{
    color:#29190e!important;
    border-color:#54402b!important;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#49372c 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 9px #20150d66!important;
    text-shadow:0 1px #f4deb0!important;
}

/* Sistema metálico compartido: navegación fuerte y contenido suave. */
:root{
    --metal-fuerte:linear-gradient(90deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#d0a68d 100%);
    --metal-activo:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#f7e4bd 100%);
    --metal-suave:linear-gradient(110deg,#d9bf91 0%,#ead8ad 42%,#cbaa78 78%,#a98464 100%);
    --metal-marco:#54402b;
}
#screen .scr-head,
#screen[data-screen="clanes"] .clan-head,
#screen[data-screen="formaciones"] .scr-head{
    color:#29190e!important;background:var(--metal-fuerte)!important;border-color:var(--metal-marco)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 2px 5px #2b1b1244!important;text-shadow:0 1px #f4deb0!important;
}
#screen .scr-close,.tw-modal .x,.building-modal .x{
    color:#2b1909!important;border-color:#6d4a18!important;background:linear-gradient(135deg,#d99a19 0%,#f5cd55 58%,#fff4c9 100%)!important;
    box-shadow:inset 0 1px #fff9dc,inset 0 -2px #9b6410,0 2px 4px #0004!important;
}
#screen[data-screen="eventos"] .event-tab-button,
#screen[data-screen="opciones"] .options-grid .menuitem,
#screen[data-screen="formaciones"] .formation-queue-tab,
#screen[data-screen="formaciones"] .queue-go,
.forge-tabs button,.forge-craft-button{
    color:#29190e!important;border-color:var(--metal-marco)!important;background:var(--metal-fuerte)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 2px 4px #2b1b1244!important;text-shadow:0 1px #f4deb0!important;
}
#screen[data-screen="eventos"] .event-tab-button.on,
#screen[data-screen="formaciones"] .formation-queue-tab.on,
.forge-tabs button.on{background:var(--metal-activo)!important}

/* Mensajes conserva sobrias sus subpestañas internas; solo la cabecera usa metal. */
#screen[data-screen="mensajes"] .scr-body .tabs button{
    color:#eadcc0!important;background:linear-gradient(180deg,#39251f,#1d1512)!important;text-shadow:none!important;
}

/* Contenedores de segundo nivel: metal más leve para mantener la jerarquía. */
#screen[data-screen="eventos"] .events-context-card .sc-body,
#screen[data-screen="eventos"] .events-calendar-card,
#screen[data-screen="eventos"] .event-fold-body>.scard,
#screen[data-screen="heroes"] .scard,
#screen[data-screen="heroes"] .altar-panel,
#screen[data-screen="ejercito"] .scard,
#screen[data-screen="formaciones"] .formation-queues,
#screen[data-screen="formaciones"] .activity-hub-card,
#screen[data-screen="opciones"] .scard,
.sovereign-equipment>.scard,.forge-hero-card,.forge-recipe-card{
    color:#29190e!important;border-color:#735a39!important;background:var(--metal-suave)!important;
    box-shadow:inset 0 1px #f5e3ba,inset 0 -2px #725439,0 3px 8px #2b1b122b!important;
}

/* Botones flotantes del mundo: iconos cuadrados, sin rótulo visible. */
#fabSearch,#fabShop,#fabMoveBase{
    width:48px!important;height:48px!important;min-width:48px!important;padding:0!important;display:grid;place-items:center;
    color:#29190e!important;border:2px solid var(--metal-marco)!important;background:var(--metal-fuerte)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 7px #0005!important;font-size:21px!important;
}
#fabSearch span,#fabShop span{display:none!important}

/* Investigación: tarjetas de 320–360 px, centradas y sin estirarse. */
#screen[data-screen="investigacion"] .research-card-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),360px));justify-content:center;align-items:start;gap:8px;
}
#screen[data-screen="investigacion"] .research-card-grid>.scard{margin:0;min-width:0}

/* Actividad y formaciones. */
.activity-hub-card{background:var(--metal-suave)!important;color:#29190e!important;border-color:#735a39!important}
.activity-hub-card>summary b,.activity-hub-card>summary small{color:#41291b!important}
.formation-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.formation-heading .formation-queue-tabs{flex:1;min-width:0}
.formation-heading .formation-info-button{flex:0 0 auto;width:auto;margin:0;padding:8px 11px;background:var(--metal-fuerte);border:1px solid var(--metal-marco);color:#29190e;font-weight:800}
.formation-queue-tab{flex-basis:120px;max-width:150px}

/* Forja: recetas compactas, metal suave y dos columnas internas. */
.inventory-grid-forge{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),360px));justify-content:center;align-items:start}
.forge-recipe-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start}
.forge-recipe-columns>section{min-width:0;border:1px solid #846b45;background:rgba(244,225,181,.25)}
.forge-recipe-columns .forge-block-title{margin-top:0}
.forge-recipe-columns .forge-attribute-table{margin-bottom:0}
.forge-recipe-card .forge-craft-button{margin-top:8px}
.forge-tabs{background:var(--metal-suave)!important;border-color:#735a39!important}
.sovereign-slot,.forge-hero-slots button{background:var(--metal-suave)!important;border-color:#735a39!important}

/* La ilustración contextual de Eventos no domina la pantalla de escritorio. */
@media(min-width:760px){
    .events-calendar-card{grid-template-rows:minmax(150px,clamp(180px,25vw,340px)) auto!important}
    .events-world-context .events-context-banner{height:clamp(180px,25vw,340px)!important;min-height:0!important}
}
@media(max-width:620px){
    .forge-recipe-columns{grid-template-columns:1fr}
}

/* Segunda pasada metálica: más volumen visual y controles compactos. */
#screen[data-screen="heroes"] .hero-collection-head{
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#fff 50%,#b58c66 83%,#d0a68d 100%)!important;
}

/* La ilustración ocupa la tarjeta y la cantidad se superpone sin crear aire. */
.bag-compact-item{padding:2px!important;border-width:1px!important}
.bag-compact-item>img,.bag-compact-item>.bag-item-icon{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important}
.bag-qty{right:2px!important;bottom:2px!important;padding:1px 2px!important;border:0!important;background:#15120ed9!important;box-shadow:0 0 0 1px #d7bd82aa}
.bag-compact-item>b+.bag-qty{bottom:15px!important}

/* HUD: metal suave en los paneles y metal fuerte en sus accesos/acciones. */
#queuehud .qslot,
#chathud,
#minimapWrap,
#marchas,
.march-lane-hero,.march-lane-troop,.formation-current-choice{
    color:#29190e!important;border-color:#735a39!important;background:var(--metal-suave)!important;
    box-shadow:inset 0 1px #f5e3ba,inset 0 -2px #725439,0 3px 8px #2b1b122b!important;
}
#queuehud .queue-collapse-head,
#chathud .ch-foot,#chathud .ch-open,#chathud .ch-toggle,
#minimapWrap .hud-collapse-head,
#marchas .mm-head,#marchas .hud-icon-toggle,
#marchas .btn,
.building-choice{
    color:#29190e!important;border-color:var(--metal-marco)!important;background:var(--metal-fuerte)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 2px 5px #2b1b1244!important;text-shadow:0 1px #f4deb0!important;
}
#marchas .btn:not(.sec),#chathud .ch-open{background:var(--metal-activo)!important}
#chathud.collapsed,#minimapWrap.collapsed,#marchas.collapsed,
#chathud.collapsed .ch-toggle,#minimapWrap.collapsed .hud-collapse-head button,#marchas.collapsed .guide-icon-toggle{
    width:48px!important;height:48px!important;border-radius:3px!important;background:var(--metal-fuerte)!important;
}

/* Un panel contextual del mundo debe quedar por encima de toda navegación. */
body.world-panel-open #bottomnav2,
body.world-panel-open #fabMoveBase{display:none!important}

/* Forja: acción dentro de Atributos y columnas equilibradas. */
.forge-recipe-columns>section{display:flex;flex-direction:column;padding:0!important}
.forge-recipe-columns .forge-craft-button{margin:5px 3px 3px!important;width:calc(100% - 6px)!important}
.forge-recipe-columns .forge-craft-time{margin:3px!important;padding:4px!important}
.forge-recipe-columns .forge-requirements-table{flex:1}
#playercard .pc-name,
#playercard .pc-line2,
#playercard .pc-power,
#playercard .pc-power span,
#playercard .pc-power b,
#queuehud .queue-collapse-head span{
    color:#29190e!important;
    text-shadow:0 1px #f4deb0!important;
}

/* Héroes: metal como estructura y rareza como identificación. */
#screen[data-screen="heroes"] .hero-collection-head{
    color:#29190e!important;
    border-color:#66451e!important;
    background:linear-gradient(190deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff0b3,inset 0 -2px #4a2c13,0 3px 8px #2b1b1244!important;
}
#screen[data-screen="heroes"] .hero-collection-head b,
#screen[data-screen="heroes"] .hero-collection-head small{
    color:#29190e!important;
    text-shadow:0 1px #f8e2ad!important;
}
#screen[data-screen="heroes"] .herocard{
    border-color:var(--rarity)!important;
    background:
        radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--rarity) 24%,#f3d9a2) 0%,transparent 48%),
        linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#49372c 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 7px #2b1b1255,0 0 7px color-mix(in srgb,var(--rarity) 38%,transparent)!important;
}

/* Perfil y recursos: controles metálicos legibles y comportamiento idéntico
   con ratón, teclado y táctil. */
#topbar .res{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    margin:0;
    cursor:pointer;
    pointer-events:auto;
}
.profile-section-nav button,
.profile-equipment-strip button{
    color:#1f160d!important;
    border-color:#5a3b21!important;
    background:linear-gradient(90deg,#ffbb47 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff1b7,inset 0 -2px #6b431e,0 2px 4px #0005!important;
    text-shadow:0 1px #f8df9a!important;
}
.profile-section-nav button:nth-child(1){background:linear-gradient(90deg,#6a4527 0%,#d6a64c 25%,#f3d074 52%,#b77a32 82%,#493021 100%)!important}
.profile-section-nav button:nth-child(2){background:linear-gradient(90deg,#5a3b2d 0%,#c18d5c 24%,#e7c188 52%,#a86e49 82%,#3f2c24 100%)!important}
.profile-section-nav button:nth-child(3){background:linear-gradient(90deg,#504233 0%,#bda06d 24%,#ead49c 52%,#9b7a4c 82%,#392e26 100%)!important}
.profile-section-nav button:nth-child(4){background:linear-gradient(90deg,#70471f 0%,#d39b3b 24%,#f1c965 52%,#b16b25 82%,#4b2d19 100%)!important}
.profile-section-nav button:hover,
.profile-section-nav button:focus-visible{
    filter:brightness(1.12) saturate(1.08);
    outline:2px solid #f3d074;
    outline-offset:-3px;
}
.profile-section-nav button span,
.profile-equipment-strip button small,
.profile-equipment-strip button b{
    color:#1f160d!important;
    text-shadow:0 1px #f8df9a!important;
}

/* La tarjeta de escritorio usa la misma jerarquía que móvil: nombre, título,
   nivel y energía bajo el retrato. Los textos largos se recortan sin ensancharla. */
#playercard{align-items:flex-start;padding-right:8px;max-width:min(64vw,245px)}
#playercard .pc-avatar-col{margin-top:2px}
#playercard .pc-energy{display:flex;align-items:center;gap:1px}
#playercard .pc-info{flex:1 1 auto;min-width:0}
#playercard .pc-line1{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;align-items:start;width:100%}
#playercard .pc-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#playercard .pc-title{max-width:100%;justify-self:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Resumen y detalle avanzado del perfil: metal suave para jerarquía secundaria. */
#screen[data-screen="perfil"] .profile-summary-grid>div,
#screen[data-screen="perfil"] .profile-advanced{
    color:#21170e!important;
    border-color:#5a3b21!important;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#6f4931 100%)!important;
    box-shadow:inset 0 1px #fff0bd,inset 0 -2px #4a2c13,0 2px 5px #2b1b1244!important;
}
#screen[data-screen="perfil"] .profile-summary-grid span,
#screen[data-screen="perfil"] .profile-summary-grid b,
#screen[data-screen="perfil"] .profile-advanced>summary{
    color:#21170e!important;
    text-shadow:0 1px #f7dfaa!important;
}
#screen[data-screen="perfil"] .profile-advanced-body{
    display:grid;
    grid-template-columns:repeat(3,minmax(260px,1fr));
    gap:8px;
    align-items:start;
}
#screen[data-screen="perfil"] .profile-advanced-body>.scard{margin:0;min-width:0}
@media(max-width:900px){#screen[data-screen="perfil"] .profile-advanced-body{grid-template-columns:1fr}}

/* Construcción: las categorías son superficies metálicas suaves. El oro más
   intenso queda reservado para confirmar construcciones y otras acciones. */
#screen[data-screen="construir"] .catgrid .cattile{
    color:#24170d!important;
    border:1px solid #765232!important;
    background:linear-gradient(190deg,#8c684b 0%,#c9a779 18%,#ead09b 50%,#c3a071 82%,#755039 100%)!important;
    box-shadow:inset 0 1px #fff2c8,inset 0 -2px #5a3b27,0 3px 7px #2b1b1238!important;
    text-shadow:0 1px #f8e5ba!important;
}
#screen[data-screen="construir"] .catgrid .cattile .ct-nom,
#screen[data-screen="construir"] .catgrid .cattile .ct-sub{
    color:#24170d!important;
    text-shadow:0 1px #f8e5ba!important;
}
#screen[data-screen="construir"] .catgrid .cattile:not(:disabled):hover,
#screen[data-screen="construir"] .catgrid .cattile:not(:disabled):focus-visible{
    border-color:#4b2e19!important;
    background:linear-gradient(190deg,#9c704c 0%,#d2ad75 18%,#f3d9a4 50%,#c9945d 82%,#67412a 100%)!important;
    filter:brightness(1.04);
    outline:2px solid #f1c96b;
    outline-offset:-3px;
}
#screen[data-screen="construir"] .catgrid .cattile:active{transform:scale(.98)}
#screen[data-screen="construir"] .catgrid .cattile:disabled{
    filter:grayscale(.72)!important;
    opacity:.5!important;
}
#screen[data-screen="construir"] .catgrid .cattile.completed:disabled{
    filter:saturate(.55)!important;
    opacity:.68!important;
}
#screen[data-screen="heroes"] .herocard .hc-nom,
#screen[data-screen="heroes"] .herocard .hc-rol,
#screen[data-screen="heroes"] .herocard .hc-st{
    color:#29190e!important;
    text-shadow:0 1px #f4deb0!important;
}
#screen[data-screen="heroes"] .summon-altar{
    border-color:#54402b!important;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#49372c 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 9px #20150d66!important;
}
#screen[data-screen="heroes"] .summon-inline-roulette,
#screen[data-screen="heroes"] .summon-roulette{
    border-color:#66451e!important;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 2px #fff0b3,inset 0 -2px #4a2c13!important;
}
#screen[data-screen="heroes"] .summon-inline-roulette::before,
#screen[data-screen="heroes"] .summon-roulette::before{background:linear-gradient(90deg,#5a3b21e8,transparent)!important}
#screen[data-screen="heroes"] .summon-inline-roulette::after,
#screen[data-screen="heroes"] .summon-roulette::after{background:linear-gradient(-90deg,#5a3b21e8,transparent)!important}
#screen[data-screen="heroes"] .summon-card{
    color:#29190e!important;
    border-color:var(--rarity)!important;
    background:
        radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--rarity) 28%,#f6dda9) 0%,transparent 50%),
        linear-gradient(190deg,#49372c 0%,#b58c66 17%,#e3c38b 50%,#b58c66 83%,#49372c 100%)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 7px #2b1b1266,0 0 8px color-mix(in srgb,var(--rarity) 45%,transparent)!important;
}
#screen[data-screen="heroes"] .summon-card strong{color:#29190e!important;text-shadow:0 1px #f4deb0!important}
#screen[data-screen="heroes"] .summon-actions .btn,
#screen[data-screen="heroes"] [data-open-altar]{
    color:#241307!important;
    border-color:#66451e!important;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff0b3,inset 0 -2px #4a2c13,0 2px 5px #2b1b1255!important;
    text-shadow:0 1px #f8e2ad!important;
}

/* Objetivo principal: franja permanente, compacta y exclusiva de la Ciudad. */
#marchas[hidden]{display:none!important}
#marchas.city-objective-bar{
    top:auto!important;right:auto!important;left:8px!important;bottom:64px!important;
    width:min(360px,calc(100vw - 82px))!important;max-height:none!important;
    padding:0!important;overflow:visible!important;border:0!important;border-radius:3px!important;
    background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;
}
.city-objective-strip{
    position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 18px;align-items:center;
    width:100%;min-height:54px;padding:3px 7px 3px 3px;overflow:visible;cursor:pointer;text-align:left;
    color:#29190e;border:1px solid #54402b;border-radius:3px;
    background:linear-gradient(190deg,#49372c 0%,#b58c66 17%,#fff 50%,#b58c66 83%,#d0a68d 100%);
    box-shadow:inset 0 1px #fff8dc,inset 0 -2px #39281d,0 3px 9px #20150d80;
    animation:cityObjectivePulse 1.7s ease-in-out infinite;
}
.city-objective-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;font-size:30px;
    border:1px solid #6b4b28;border-radius:50%;background:radial-gradient(circle at 50% 40%,#f8dda0,#93652e 72%,#392518 100%);
    box-shadow:inset 0 1px #fff3c4,0 2px 5px #28180f88}
.city-objective-icon i{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 3px;
    color:#fff;background:#b31313;border:2px solid #f5d5a0;border-radius:999px;font:900 11px/1 var(--font-ui);
    box-shadow:0 1px 3px #250b0baa}
.city-objective-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:1px;padding-left:5px;line-height:1.08}
.city-objective-copy b{overflow:hidden;color:#29190e;font-size:12px;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px #fff1c8}
.city-objective-copy small{color:#146a21;font-size:12px;font-weight:900;text-shadow:0 1px #e9f1c9}
.city-objective-arrow{font-size:27px;font-weight:900;color:#5b371d;text-shadow:0 1px #fff1c8}
.city-objective-strip:hover{filter:brightness(1.08)}
.city-objective-strip:focus-visible{outline:3px solid #ffd35a;outline-offset:2px}
@keyframes cityObjectivePulse{
    0%,100%{box-shadow:inset 0 1px #fff8dc,inset 0 -2px #39281d,0 3px 9px #20150d80,0 0 0 0 #f0bd4680}
    50%{box-shadow:inset 0 1px #fff8dc,inset 0 -2px #39281d,0 3px 9px #20150d80,0 0 0 4px #f0bd4628}
}
@media(max-width:520px){
    #marchas.city-objective-bar{left:5px!important;bottom:58px!important;width:min(330px,calc(100vw - 70px))!important}
    .city-objective-strip{grid-template-columns:48px minmax(0,1fr) 14px;min-height:48px}
    .city-objective-icon{width:42px;height:42px;font-size:26px}
}

/* Estados de interacción inequívocos en Forja y Eventos. */
.forge-craft-button:disabled,
.sovereign-slot button:disabled,
.forge-hero-slots button:disabled,
#screen[data-screen="eventos"] button:disabled{
    pointer-events:none!important;cursor:not-allowed!important;filter:grayscale(.8) brightness(.72)!important;
    opacity:.55!important;color:#554f47!important;border-color:#706b62!important;
    background:linear-gradient(90deg,#716d67 0%,#aaa59c 50%,#716d67 100%)!important;
    box-shadow:inset 0 1px #d6d2ca,inset 0 -2px #47443f!important;text-shadow:none!important;
}

/* Pestañas: la activa es dorada y las alternativas retroceden visualmente. */
:root{--metal-activo:linear-gradient(90deg,#ffbb47 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)}
.forge-tabs button:not(.on){
    filter:saturate(.34) brightness(.88);color:#403b35!important;
    background:linear-gradient(90deg,#77736d 0%,#b5afa5 50%,#77736d 100%)!important;
}
.forge-tabs button.on,
#screen[data-screen="eventos"] .event-tab-button.on{filter:none!important;background:var(--metal-activo)!important}

/* Las secciones de Eventos siguen disponibles aunque no estén elegidas.
   Conservan el metal cálido; la activa se reconoce por su luz dorada. */
#screen[data-screen="eventos"] .event-tab-button:not(.on){
    filter:none!important;opacity:1!important;color:#29190e!important;
    background:var(--metal-fuerte)!important;
}

/* Eventos: ilustración proporcionada y columna informativa flexible. */
@media(min-width:760px){
    .events-world-context{grid-template-columns:290px minmax(360px,1fr)!important;justify-content:center}
    .events-calendar-card{width:290px;grid-template-rows:auto auto!important}
    .events-world-context .events-context-banner{width:290px!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important}
    .events-world-context .events-context-banner img{display:block;width:100%!important;height:auto!important;max-width:290px!important;object-fit:contain!important}
    .events-context-stack{grid-template-rows:minmax(0,1fr) auto}
}

/* Actividad contraída: el mismo botón metálico cuadrado que Tienda/Mapa. */
#queuehud.collapsed{
    width:48px!important;height:48px!important;min-width:48px!important;max-width:48px!important;
    padding:0!important;overflow:visible!important;border:2px solid var(--metal-marco)!important;border-radius:3px!important;
    background:var(--metal-fuerte)!important;box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 3px 7px #0005!important;
}
#queuehud.collapsed .queue-icon-toggle{width:100%!important;height:100%!important;padding:0!important;border:0!important;border-radius:1px!important;background:transparent!important;font-size:23px!important}

/* Cabecera de colección más luminosa para conservar la lectura. */
#screen[data-screen="heroes"] .hero-collection-head{
    background:linear-gradient(90deg,#ffbb47 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
}

/* Eventos: nombre de sección + ayuda mínima, sin rótulos sobredimensionados. */
.event-section-heading{
    grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:28px;padding:1px 2px;border-bottom:1px solid #806139;
}
.event-section-heading h3{margin:0;color:#29190e;font:800 14px/1.1 var(--font-medieval);text-shadow:0 1px #f4deb0}
.event-section-heading .event-info-btn{
    flex:0 0 28px;width:28px!important;height:28px!important;min-width:28px!important;margin:0!important;padding:1px!important;
    display:grid;place-items:center;font-size:17px!important;line-height:1!important;
}
.event-section-heading-world{justify-content:flex-end;border-bottom:0}

/* Chat: tinta oscura y un poco más de peso sobre el metal claro. */
#chathud .ch-line,
#chathud .ch-line.is-chat{
    color:#100b08!important;font-weight:750!important;text-shadow:0 1px rgba(255,255,255,.38)!important;
}
#chathud .ch-empty{color:#34261c!important;font-weight:700!important}
#chathud .ch-foot select,
#chathud .ch-foot .ch-open{
    color:#100b08!important;font-weight:800!important;text-shadow:0 1px rgba(255,255,255,.42)!important;
}
#screen[data-screen="mensajes"] .chat-form input{
    color:#080604!important;font-weight:650!important;caret-color:#080604!important;
    background:#f5e4bd!important;border-color:#6a5035!important;
}
#screen[data-screen="mensajes"] .chat-form input::placeholder{color:#5b4b3e!important;opacity:1}

/* Portada: el mismo lenguaje metálico del HUD deja claro que ya se entra
   en la interfaz del juego. El lema y la cuenta usan metal suave; las
   decisiones y la llamada principal ganan un marco más marcado. */
#startScreen .start-sub{
    color:#29190e!important;border:2px solid #54402b!important;border-radius:2px!important;
    background:var(--metal-suave)!important;
    box-shadow:inset 0 1px #fff1c7,inset 0 -2px #60472f,0 5px 14px #24170d55!important;
    text-shadow:0 1px #f4deb0!important;
}
#startScreen .start-auth{
    border:2px solid #54402b!important;border-radius:2px!important;
    background:linear-gradient(190deg,#b58c66 0%,#e3c38b 48%,#c49a6e 100%)!important;
    box-shadow:inset 0 1px #fff1c7,inset 0 -2px #60472f,0 8px 22px #24170d66!important;
}
#startScreen .sa-mode,
#startScreen .sa-dev,
#startScreen .sa-tabs button{
    color:#29190e!important;border:1px solid #54402b!important;border-radius:2px!important;
    background:var(--metal-fuerte)!important;
    box-shadow:inset 0 1px #f8dfab,inset 0 -2px #39281d,0 2px 4px #24170d44!important;
    text-shadow:0 1px #f4deb0!important;
}
#startScreen .sa-mode.on,
#startScreen .sa-tabs button.on{
    color:#241307!important;background:var(--metal-activo)!important;
    box-shadow:inset 0 1px #fff0b3,inset 0 -2px #4a2c13,0 0 8px #d9a83966!important;
}
#startScreen #startPlay,
#startScreen .start-btn{
    color:#241307!important;border:2px solid #5a3b21!important;border-radius:2px!important;
    background:linear-gradient(90deg,#5a3b21 0%,#ca9a48 18%,#f3d074 50%,#ca9a48 82%,#5a3b21 100%)!important;
    box-shadow:inset 0 1px #fff0b3,inset 0 -3px #4a2c13,0 8px 22px #24170d66!important;
    text-shadow:0 1px #fff0b3!important;
}
/* Colección de héroes: ficha maestra y carrusel inspirados en el mockup de referencia. */
#screen[data-screen="heroes"]{--hero-bg:#090a0f;--hero-panel:#111218;--hero-line:#3d311d}
#screen[data-screen="heroes"] .scr-head{background:#090a0eef!important;border-bottom:1px solid var(--hero-line)!important;box-shadow:none!important;padding:1px 20px!important}
#screen[data-screen="heroes"] .scr-head h2{font:700 clamp(20px,3vw,30px) var(--font-medieval)!important;letter-spacing:.08em;color:#e3bd43!important;text-shadow:0 1px #000!important}
#screen[data-screen="heroes"] .scr-close{width:38px!important;height:38px!important;border-radius:50%!important;color:#e3bd43!important;border:1px solid #8d7024!important;background:#17140c!important;box-shadow:inset 0 0 0 3px #0b0c10!important;font-size:17px!important}
#screen[data-screen="heroes"] .scr-tabs{gap:24px;padding:9px 24px 0!important;background:#090a0e;border-bottom:1px solid #262015}
#screen[data-screen="heroes"] .scr-tabs button{padding:6px 0 9px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:none!important;color:#8994a6!important;box-shadow:none!important;font-size:13px!important}
#screen[data-screen="heroes"] .scr-tabs button.on{color:#e5bc36!important;border-bottom-color:#e5bc36!important}
#screen[data-screen="heroes"] .scr-body{padding:0!important;background:#17150c!important;color:#e5e7eb!important}
.hero-roster-shell{min-height:100%;display:flex;flex-direction:column;gap:14px;padding:16px 20px 0;box-sizing:border-box;background-color:#17150c;background-image:linear-gradient(90deg,rgba(23,21,12,.48),rgba(23,21,12,.42) 18%,rgba(23,21,12,.78)),linear-gradient(rgba(23,21,12,.3),rgba(23,21,12,.68)),url('../assets/estilos/fondo_duro.avif');background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-showcase{display:grid;grid-template-columns:minmax(210px,280px) minmax(250px,1fr);gap:16px;align-items:stretch;max-width:860px;width:100%;margin:0 auto}
.hero-showcase-left{display:flex;flex-direction:column;align-items:center;min-width:0}
.hero-portrait-frame{position:relative;width:auto;max-width:100%;height:clamp(205px,32vh,285px);aspect-ratio:3/4;padding:8px;box-sizing:border-box;border:2px solid var(--rarity);background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 35%,#251d0e),#15120c 34%,#08090d);box-shadow:0 9px 22px #000b,0 0 10px var(--rarity),0 0 24px color-mix(in srgb,var(--rarity) 72%,transparent),0 0 42px color-mix(in srgb,var(--rarity) 38%,transparent)}
.hero-portrait-frame::after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--rarity) 88%,#fff);box-shadow:inset 0 0 10px color-mix(in srgb,var(--rarity) 45%,transparent),0 0 8px color-mix(in srgb,var(--rarity) 55%,transparent);pointer-events:none}
.hero-portrait-frame img{width:100%;height:100%;display:block;object-fit:cover;background:#14151b}
.hero-showcase-lock{position:absolute;inset:8px;display:grid;place-items:center;background:#05060a99;font-size:32px;filter:grayscale(1)}
.hero-name-banner{width:min(100%,260px);box-sizing:border-box;margin-top:8px;padding:7px 10px;display:flex;justify-content:center;gap:8px;border:1px solid var(--rarity);background:linear-gradient(90deg,#11110f,#252116,#11110f);font:700 11px var(--font-medieval);text-align:center;text-transform:uppercase;letter-spacing:.08em;color:#f4e8c0}
.hero-name-banner span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-name-banner b{color:var(--rarity);white-space:nowrap}
.hero-showcase-progress{width:min(100%,260px);margin-top:10px}.hero-showcase-progress>div{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}.hero-showcase-progress b{color:var(--rarity)}
.hero-showcase-progress>i{display:block;height:7px;margin-top:5px;padding:1px;box-sizing:border-box;border:1px solid #50401f;border-radius:6px;background:#11110e;overflow:hidden}.hero-showcase-progress>i>span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 75%,#8f741d),var(--rarity))}
.hero-showcase-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,410px);margin-top:11px}.hero-showcase-actions button{min-height:36px;border-radius:4px;font-size:12px;font-weight:800;cursor:pointer}.hero-showcase-actions button:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.55}
.hero-primary-action{border:1px solid color-mix(in srgb,var(--rarity) 70%,#7d5e13);background:linear-gradient(#f0d35f,#9a791d);color:#0b0b0b}.hero-info-action{border:1px solid #31527a;background:linear-gradient(#1c3049,#0d1826);color:#c6dcf5}
.hero-lore-panel{min-width:0;padding:18px;display:flex;flex-direction:column;border:1px solid #54492b;background-color:#17150c;background-image:linear-gradient(rgba(23,21,12,.82),rgba(23,21,12,.9)),url('../assets/estilos/fondodiv.avif');background-position:center;background-size:cover;box-shadow:inset 0 0 22px #0008}
.hero-lore-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.hero-lore-panel header h3{margin:0;font:700 22px var(--font-medieval);text-transform:uppercase;letter-spacing:.04em;color:var(--rarity)}.hero-title-stars{color:#f2c94c;font-size:18px;line-height:1;letter-spacing:2px;text-shadow:0 0 5px #d79d18,0 0 11px #d79d1877;white-space:nowrap}.hero-lore-panel header small{display:block;margin-top:3px;color:#94a4b9;text-transform:uppercase;letter-spacing:.08em}.hero-lore-panel header span{display:inline-block;margin-top:10px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--rarity) 65%,#2b2417);background:color-mix(in srgb,var(--rarity) 13%,#17140e);color:var(--rarity);font-size:10px;font-weight:900;text-transform:uppercase}
.hero-lore-panel p{margin:14px 0 10px;color:#d6d8de;font-size:12px;line-height:1.65}.hero-lore-panel blockquote{margin:0 0 14px;padding-left:10px;border-left:2px solid var(--rarity);color:color-mix(in srgb,var(--rarity) 72%,#fff);font:italic 12px/1.5 var(--font-medieval)}
.hero-ability-card{margin-top:auto;min-height:88px;padding:13px;display:flex;flex-direction:column;justify-content:center;border:1px solid #46371e;background:linear-gradient(135deg,#15161c,#101117)}.hero-ability-card small{color:#8994a6;font-size:9px;letter-spacing:.12em}.hero-ability-card b{margin:5px 0;color:var(--rarity);font:700 17px var(--font-medieval)}.hero-ability-card span{color:#b9bdc7;font-size:10px}
.hero-collection-slot{display:flex;align-items:center;gap:13px;width:100%;margin:4px 0 12px;padding:10px 12px;box-sizing:border-box;border:1px solid #30271a;background:#0d0e13}.hero-collection-slot>div{display:grid;gap:2px;min-width:115px}.hero-collection-slot small{color:#8d96a7;font-size:9px;letter-spacing:.12em}.hero-collection-slot b{color:#e8c34e;font:700 14px var(--font-medieval)}.hero-collection-slot p{flex:1;margin:0;color:#8f98a8;font-size:9px;line-height:1.4}.hero-collection-slot button{padding:7px 9px;border:1px solid #745b20;border-radius:4px;background:#17140d;color:#e6bf40;font-size:9px;font-weight:800;cursor:pointer}
.hero-roster-dock{position:sticky;bottom:0;z-index:4;display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:7px;margin:auto -20px 0;padding:14px 16px 12px;border-top:1px solid #30271a;background:#08090dee;backdrop-filter:blur(7px)}
.hero-roster-track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px 3px 7px;scrollbar-width:thin;scrollbar-color:#777 #e8e8e8;scroll-snap-type:x proximity}
.hero-roster-arrow{height:100%;min-height:76px;border:0;background:transparent;color:#e9ac19;font-size:30px;cursor:pointer}
.hero-roster-card{position:relative;flex:0 0 68px;width:68px;padding:4px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;scroll-snap-align:center;border:1px solid #292a31;border-radius:5px;background:#12131a;color:#e7e8eb;cursor:pointer;box-sizing:border-box}
.hero-roster-card.selected{border:2px solid var(--rarity);background:color-mix(in srgb,var(--rarity) 12%,#131419);box-shadow:0 0 11px color-mix(in srgb,var(--rarity) 45%,transparent)}.hero-roster-card.locked{opacity:.58;filter:saturate(.35)}
.hero-roster-selected{position:absolute;z-index:2;top:-7px;padding:1px 4px;border-radius:3px;background:var(--rarity);color:#101010;font-size:7px;font-weight:900}
.hero-roster-portrait{position:relative;display:block;width:58px;height:54px;overflow:hidden;border-radius:3px;background:#0b0c10}.hero-roster-portrait img{width:100%;height:100%;object-fit:cover}.hero-roster-card.locked img{filter:grayscale(.75) brightness(.48)}.hero-roster-portrait i{position:absolute;inset:0;display:grid;place-items:center;background:#05060a66;font-style:normal}
.hero-roster-card>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#e7e8eb;font-size:9px;text-transform:uppercase;white-space:nowrap}.hero-roster-card>small{color:var(--rarity);font-size:7px;text-transform:uppercase}.hero-roster-stars{max-width:100%;color:var(--rarity);font-size:9px;line-height:1;white-space:nowrap}
@media(max-width:640px){
    .hero-roster-shell{padding:12px 12px 0}.hero-showcase{grid-template-columns:minmax(150px,1fr) minmax(145px,1fr);gap:10px}.hero-portrait-frame{height:clamp(190px,31vh,245px);padding:6px}.hero-portrait-frame::after{inset:6px}.hero-lore-panel{padding:11px}.hero-lore-panel header h3{font-size:17px}.hero-lore-panel p{font-size:10px;line-height:1.5}.hero-lore-panel blockquote{font-size:10px}.hero-ability-card{min-height:64px;padding:9px}.hero-ability-card b{font-size:13px}.hero-ability-card span{font-size:8px}.hero-name-banner{font-size:9px}.hero-showcase-actions button{font-size:10px}.hero-collection-slot{gap:9px}.hero-collection-slot p{display:none}.hero-collection-slot button{margin-left:auto}.hero-roster-dock{margin:auto -12px 0;padding-inline:7px}.hero-roster-card{flex-basis:62px;width:62px}.hero-roster-portrait{width:52px;height:50px}
}
@media(max-width:390px){.hero-showcase{grid-template-columns:1fr}.hero-showcase-left{max-width:260px;margin:auto}.hero-lore-panel{min-height:230px}.hero-collection-slot>div{min-width:0}.hero-collection-slot b{font-size:12px}}
/* Arquitectura de equipamiento: Forja, Banco, Bolsa, soberano y héroes */
.forge-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;padding:12px 0}.forge-recipe-tile{border:1px solid var(--rarity,#8b7355);box-shadow:inset 0 0 0 1px #000,0 5px 18px #0008;background:#111218;padding:14px;display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center}.forge-recipe-tile.locked{filter:saturate(.45);opacity:.72}.forge-recipe-tile header h3{margin:0;color:var(--rarity);font-family:var(--font-medieval)}.forge-recipe-tile header small,.forge-recipe-tile>b,.forge-recipe-tile>.hh-rarity{display:block}.forge-icon-art{width:64px;height:64px;object-fit:contain;font-size:42px;display:grid;place-items:center;border:1px solid var(--rarity);background:#090a0f}.forge-reqs{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;font-size:12px}.forge-reqs span{padding:5px;background:#090a0f;border:1px solid #2b2d35}.enough{color:#62d989!important}.missing{color:#ff6f6f!important}.forge-recipe-tile>.btn{grid-column:1/-1}
.equipment-workbench{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:18px}.equipment-viewer,.equipment-owned{border:1px solid #55451e;background:#101117;padding:18px}.equipment-viewer{display:grid;gap:13px;justify-items:center;text-align:center;box-shadow:inset 0 0 0 1px #000}.equipment-viewer-art{width:150px;height:150px;object-fit:contain;font-size:92px;display:grid;place-items:center;border:2px solid var(--rarity);background:#090a0f}.equipment-viewer h3{margin:2px;color:var(--rarity)}.upgrade-cost{width:100%;display:flex;justify-content:space-between;border:1px solid currentColor;padding:8px}.equipment-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}.equipment-icon-grid button{min-height:74px;color:#eee;background:#0b0c11;border:2px solid var(--rarity,#55451e);display:grid;place-items:center;position:relative;padding:6px;cursor:pointer}.equipment-icon-grid button.on{box-shadow:0 0 12px var(--rarity);background:#201b0b}.equipment-grid-icon{width:46px;height:46px;object-fit:contain;font-size:34px;display:grid;place-items:center}.equipment-icon-grid small{font-size:10px;color:#e7c65a}.bag-equipment-catalog{display:grid;width:100%;max-width:1200px;margin:0 auto}.bag-equipment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,140px));gap:10px;justify-content:start}.bag-equipment-item{position:relative;display:grid;place-items:center;align-content:center;aspect-ratio:1;min-width:0;padding:8px;border:2px solid var(--rarity,#55451e);background:#e3c98e;color:#171008;cursor:pointer;overflow:hidden}.bag-equipment-item:hover,.bag-equipment-item:focus-visible{filter:brightness(1.06);box-shadow:0 0 9px color-mix(in srgb,var(--rarity) 65%,transparent)}.bag-equipment-item .equipment-grid-icon{width:78%;height:78%;max-width:none;max-height:none;background:transparent;object-fit:contain;font-size:52px}.bag-equipment-item small{position:absolute;right:4px;bottom:4px;color:#ffd648;-webkit-text-stroke:.6px #120b05;text-shadow:-1px -1px 0 #120b05,1px -1px 0 #120b05,-1px 1px 0 #120b05,1px 1px 0 #120b05;font-size:11px;font-weight:900}.bag-equipment-empty{grid-column:1/-1}.equipment-bag-detail,.equipment-current{border:2px solid var(--rarity);padding:16px;display:grid;gap:8px}.equipment-bag-detail>div{font-size:58px}
.sovereign-picker-group{padding:10px 0;border-bottom:1px solid #3d3527}.sovereign-picker-group h3{color:#e7c65a}.hero-equipment-workbench{margin:14px 0 18px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;border:1px solid #54492b;background-color:#17150c;background-image:linear-gradient(rgba(23,21,12,.84),rgba(23,21,12,.91)),url('../assets/estilos/fondodiv.avif');background-position:center;background-size:cover;padding:10px}.hero-equipment-slots{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:5px}.hero-equipment-slots button{background:#100f09;color:#ddd;border:1px solid var(--rarity);min-height:48px;padding:2px}.hero-equipment-slots button.on{box-shadow:0 0 9px var(--rarity);background:#24200f}.hero-equipment-slots i{display:block;font-size:24px}.hero-equipment-detail{border:1px solid var(--rarity);padding:10px;display:grid;grid-template-columns:96px minmax(300px,1.25fr) minmax(210px,.75fr);gap:14px;align-items:stretch;background:#0d0d09b8}.hero-equipment-art{font-size:54px;display:grid;place-items:center;background:#0d0d09;border:1px solid var(--rarity)}.hero-equipment-piece{display:grid;grid-template-columns:minmax(145px,1fr) minmax(110px,.7fr);gap:12px;min-width:0}.hero-equipment-summary{display:flex;flex-direction:column;justify-content:center;min-width:0}.hero-equipment-detail b{display:block;color:var(--rarity);margin:4px 0 10px}.hero-equipment-actions{display:flex;gap:6px;flex-wrap:wrap}.hero-equipment-stats{display:grid;grid-template-columns:1fr auto;grid-auto-rows:minmax(28px,auto);align-content:center;gap:4px 12px;margin:0;padding-left:14px;border-left:1px solid #51472d}.hero-equipment-detail dt{color:#aabdd8}.hero-equipment-detail dd{margin:0;font-weight:800;color:#f3e3a2;text-align:right}.hero-total-stats{display:flex;flex-direction:column;justify-content:center;padding-left:14px;border-left:1px solid #51472d}.hero-total-stats>small{margin-bottom:6px;font-weight:900;text-transform:uppercase;color:#4b3017!important}.hero-total-stats dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0}.hero-total-stats dd{display:flex;align-items:center;gap:10px}.hero-total-stats dd b{min-width:34px;margin:0!important;color:#2b190a!important;text-align:right}.hero-total-stats dd em{min-width:72px;color:#68491f;font-size:9px;font-style:normal;text-align:right}
.bag-equipment-group{border-color:#76542c;background:#dec184}
.bag-equipment-group h3{color:#171008}
.bag-equipment-group .equipment-icon-grid button{background:#e3c98e;color:#171008}
.bag-equipment-group .equipment-icon-grid small{color:#ffd648;-webkit-text-stroke:.6px #120b05;text-shadow:-1px -1px 0 #120b05,1px -1px 0 #120b05,-1px 1px 0 #120b05,1px 1px 0 #120b05;font-weight:900}
.bag-equipment-group .equipment-grid-icon{background:transparent}
@media(max-width:430px){.bag-equipment-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.bag-equipment-item{width:100%;padding:3px}.bag-equipment-item .equipment-grid-icon{width:74%;height:74%;font-size:34px}.bag-equipment-item small{right:2px;bottom:2px;font-size:9px}}
@media(max-width:700px){.equipment-workbench{grid-template-columns:1fr}.equipment-viewer{padding:12px}.equipment-viewer-art{width:110px;height:110px;font-size:64px}.forge-catalog{grid-template-columns:1fr}.hero-equipment-workbench{grid-template-columns:48px minmax(0,1fr);padding:7px;gap:7px}.hero-equipment-slots button{min-height:44px}.hero-equipment-slots i{font-size:21px}.hero-equipment-detail{grid-template-columns:62px minmax(0,1fr);gap:7px;padding:7px}.hero-equipment-art{font-size:36px}.hero-equipment-piece{grid-template-columns:minmax(92px,1fr) minmax(76px,.7fr);gap:6px}.hero-equipment-stats{padding-left:7px;gap:2px 6px;font-size:11px}.hero-total-stats{grid-column:1/-1;padding:7px 0 0;border-left:0;border-top:1px solid #51472d}.hero-total-stats>small{margin-bottom:4px}.hero-total-stats dl{grid-template-columns:repeat(6,auto);justify-content:space-between;gap:4px}.hero-total-stats dd{gap:4px}.hero-total-stats dd em{min-width:0;font-size:8px}.hero-equipment-summary small,.hero-equipment-summary b{font-size:11px}.hero-equipment-actions .btn{padding:5px 7px;font-size:10px}}

/* Paleta de Héroes: negro rojizo, sin dominante amarilla. */
#screen[data-screen="heroes"] .scr-body{background:#100706!important}
.hero-roster-shell{background-color:#100706;background-image:linear-gradient(90deg,rgba(12,5,5,.62),rgba(18,7,6,.48) 48%,rgba(8,3,4,.82)),linear-gradient(rgba(10,4,4,.42),rgba(7,3,4,.78)),url('../assets/estilos/fondo_duro.avif')}
.hero-lore-panel{border-color:#493026;background-color:#100706;background-image:linear-gradient(rgba(11,5,5,.86),rgba(13,5,5,.93)),url('../assets/estilos/fondodiv.avif');box-shadow:inset 0 0 26px #000b}
.hero-equipment-workbench{border-color:#493026;background-color:#100706;background-image:linear-gradient(rgba(11,5,5,.86),rgba(13,5,5,.94)),url('../assets/estilos/fondodiv.avif')}
.hero-roster-dock{border-top-color:#493026;background-color:#0b0505;background-image:linear-gradient(rgba(8,3,4,.88),rgba(12,4,5,.94)),url('../assets/estilos/fondodiv.avif');background-position:center;background-size:cover;box-shadow:0 -8px 24px #0009}
.hero-roster-card{border-color:#382824;background-color:#0d0707;background-image:linear-gradient(rgba(9,4,5,.82),rgba(10,4,5,.94)),url('../assets/estilos/fondodiv.avif');background-position:center;background-size:cover}

/* Opciones: las etiquetas deben leerse como tinta negra sobre el metal claro. */
#screen[data-screen="opciones"] .options-grid .menuitem .mi-lbl{
    color:#100b07!important;
    text-shadow:none!important;
}

/* Héroes: mostrar la ilustración de fondo con su color original. Las capas
   neutras son deliberadamente leves y sustituyen el antiguo velo rojizo. */
#screen[data-screen="heroes"] .scr-body{background:#0b0d11!important}
#screen[data-screen="heroes"] .hero-roster-shell{
    background-color:#0b0d11;
    background-image:linear-gradient(180deg,rgba(5,7,10,.06),rgba(5,7,10,.18)),url('../assets/estilos/fondo_duro.avif');
}
#screen[data-screen="heroes"] .hero-lore-panel,
#screen[data-screen="heroes"] .hero-equipment-workbench{
    border-color:#3d4148;
    background-color:#101217;
    background-image:linear-gradient(rgba(9,11,15,.68),rgba(9,11,15,.78)),url('../assets/estilos/fondodiv.avif');
    box-shadow:inset 0 0 18px #0007;
}
#screen[data-screen="heroes"] .hero-roster-dock{
    border-top-color:#30343b;
    background-color:#080a0e;
    background-image:linear-gradient(rgba(7,9,13,.74),rgba(7,9,13,.84)),url('../assets/estilos/fondodiv.avif');
}
#screen[data-screen="heroes"] .hero-roster-card{
    border-color:#2d323a;
    background-color:#0c0e13;
    background-image:linear-gradient(rgba(8,10,14,.68),rgba(8,10,14,.82)),url('../assets/estilos/fondodiv.avif');
}

/* Ficha de mejora del héroe: tarjetas CSS compactas, sin el frame raster
   estirado, acciones proporcionadas y piezas en una sola fila. */
#screen[data-screen="heroe"] .hero-skill-summary::after,
#screen[data-screen="heroe"] .hero-equipment-summary-card::after{
    content:none!important;
    display:none!important;
}
#screen[data-screen="heroe"] .hero-skill-summary,
#screen[data-screen="heroe"] .hero-equipment-summary-card{
    border:1px solid #252a31!important;
    border-radius:3px!important;
    background:#0c0e12!important;
    box-shadow:inset 0 0 0 1px #050608,0 3px 8px #0007!important;
}
#screen[data-screen="heroe"] .hero-skill-description{margin:7px 0 4px;color:#d4d7dc;font-size:11px;line-height:1.45}
#screen[data-screen="heroe"] .hero-skill-level{display:block;color:#9ca5b2;font-size:9px}
#screen[data-screen="heroe"] .hero-compact-action{display:block;width:58%!important;min-width:128px;max-width:220px;margin:9px auto 0!important}
#screen[data-screen="heroe"] .hero-equipment-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;overflow-x:auto}
#screen[data-screen="heroe"] .hero-equipment-summary-item{appearance:none;font:inherit;cursor:pointer}
#screen[data-screen="heroe"] .hero-equipment-summary-item>b{font-size:12px}
.hero-equipment-popup{display:grid;gap:12px}.hero-equipment-popup header{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--rarity);background:#0d0f14;color:#e5e7eb}.hero-equipment-popup header>span{font-size:34px}.hero-equipment-popup header>div{display:grid;gap:3px}.hero-equipment-popup header b{color:var(--rarity);font-size:16px}.hero-equipment-popup header small{color:#aab1bc}.hero-equipment-popup section{display:grid;gap:5px}.hero-equipment-popup section>div{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border-bottom:1px solid #3b4049;background:#151820}.hero-equipment-popup section b{color:var(--rarity)}.hero-equipment-popup>p{margin:0;color:#b7bdc7;font-size:10px;line-height:1.45}

/* Forja de equipo: catálogo vertical y legible, pensado como inventario móvil. */
.forge-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 10px;padding:12px 14px;border:1px solid #5c4c2c;background:linear-gradient(135deg,#17191f,#0d0f14);box-shadow:0 6px 18px #0008}.forge-mobile-head>div:first-child{display:grid;gap:2px}.forge-mobile-head>div:first-child small{color:#9f8b62;font-size:9px;letter-spacing:1.4px}.forge-mobile-head>div:first-child b{color:#f0d07a;font:700 20px var(--font-medieval)}.forge-mobile-head .forge-tabs{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:4px;margin:0}.forge-mobile-head .forge-tabs button{min-height:42px;padding:8px 14px;border:1px solid #4a4f58;background:#1d2027;color:#d4d8df;font-weight:800}.forge-mobile-head .forge-tabs button.on{border-color:#e2b949;background:linear-gradient(#f1cc6a,#bc7c13);color:#171006;box-shadow:inset 0 0 0 1px #ffe9a4}
.forge-type-filter{display:flex;gap:5px;margin-bottom:10px;overflow-x:auto;scrollbar-width:thin}.forge-type-filter button{flex:0 0 auto;min-width:104px;padding:7px 12px;border:1px solid #393f49;background:#11141a;color:#b9c0ca;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.forge-type-filter button i{font-style:normal}.forge-type-filter button.on{border-color:#d5aa42;background:#28200f;color:#ffe28b;box-shadow:inset 0 -2px #d5aa42}
.forge-mobile-catalog{display:grid;grid-template-columns:repeat(2,minmax(330px,1fr));gap:9px}.forge-mobile-recipe{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:1fr auto;min-height:196px;border:1px solid var(--rarity);background:linear-gradient(135deg,#171a20 0,#0d0f14 72%);box-shadow:inset 0 0 0 1px #000,0 5px 14px #0008;overflow:hidden}.forge-mobile-recipe::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--rarity)}.forge-mobile-recipe.locked{filter:saturate(.45);opacity:.68}.forge-mobile-art{display:grid;place-items:center;align-self:start;margin:13px 0 0 12px;width:70px;height:82px;border:1px solid color-mix(in srgb,var(--rarity) 55%,#252931);background:radial-gradient(circle,#242833,#0a0c10 72%)}.forge-mobile-art .forge-icon-art{width:62px;height:72px;object-fit:contain;font-size:42px;display:grid;place-items:center}.forge-mobile-info{min-width:0;padding:12px 12px 7px}.forge-mobile-info header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px}.forge-mobile-info header .hh-rarity{width:max-content;color:#111}.forge-mobile-info header small{color:#adb5c1;font-size:10px;text-align:right}.forge-mobile-info h3{grid-column:1/-1;margin:2px 0 3px;color:var(--rarity);font:700 17px/1.12 var(--font-medieval);white-space:normal;overflow-wrap:anywhere}.forge-mobile-stat{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:6px 0;padding:6px 8px;border-left:2px solid var(--rarity);background:#090b0f}.forge-mobile-stat small{color:#7f8793;font-size:8px}.forge-mobile-stat b{color:#f3df9e;font-size:13px;white-space:nowrap}.forge-mobile-reqs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.forge-mobile-reqs>span{min-width:0;min-height:42px;padding:4px 3px;border:1px solid #303640;background:#0a0c11;display:grid;grid-template-columns:20px 1fr;align-items:center;column-gap:3px}.forge-mobile-reqs i,.forge-mobile-reqs img{grid-row:1/span 2;width:19px;height:19px;object-fit:contain;font-style:normal}.forge-mobile-reqs small{min-width:0;color:#89929e;font-size:7px;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forge-mobile-reqs b{font-size:9px;white-space:nowrap}.forge-mobile-reqs .enough b{color:#61df8e}.forge-mobile-reqs .missing b{color:#ff7171}.forge-mobile-recipe footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid #30343b;background:#090b0f}.forge-mobile-recipe footer>span{color:#9da5b0;font-size:10px}.forge-mobile-recipe footer .btn{width:auto;min-width:150px;margin:0;padding:8px 14px}.forge-specific-fragment{border-color:var(--rarity)!important}
@media(max-width:900px){.forge-mobile-catalog{grid-template-columns:1fr}}
@media(max-width:600px){.forge-mobile-head{align-items:stretch;flex-direction:column}.forge-mobile-head .forge-tabs{width:100%}.forge-type-filter button{min-width:92px}.forge-mobile-recipe{grid-template-columns:76px minmax(0,1fr);min-height:190px}.forge-mobile-art{width:61px;height:72px;margin-left:10px}.forge-mobile-art .forge-icon-art{width:54px;height:64px}.forge-mobile-info{padding:10px 8px 6px}.forge-mobile-info h3{font-size:15px}.forge-mobile-reqs{grid-template-columns:repeat(2,minmax(0,1fr))}.forge-mobile-recipe footer .btn{min-width:132px}}

/* Panel unificado de mejora del héroe. */
#screen[data-screen="heroe"] .scr-body:has(.hero-upgrade-shell){display:block!important;padding:12px!important}
#screen[data-screen="heroe"] .hero-upgrade-shell{width:min(1420px,100%);margin:0 auto;border:1px solid #424852;background:#0b0e13;box-shadow:inset 0 0 0 1px #050608,0 12px 34px #000b;overflow:hidden}
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero{display:grid!important;grid-template-columns:104px minmax(230px,1fr) minmax(290px,.72fr);align-items:center;gap:15px;width:auto!important;max-width:none!important;margin:0!important;padding:14px 17px;border:0!important;border-bottom:1px solid #3c424b!important;border-left:4px solid var(--rarity)!important;border-radius:0!important;background:linear-gradient(90deg,#171b23,#101319)!important;box-shadow:none!important}
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero::after,#screen[data-screen="heroe"] .hero-upgrade-shell .hero-progress-column>.scard::after{content:none!important;display:none!important}
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-portrait{width:92px!important;height:92px!important;border:2px solid var(--rarity);border-radius:2px!important;background:#11151d}
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-info{display:grid;gap:8px;min-width:0}
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-primary{display:flex;align-items:baseline;gap:12px;min-width:0}
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-nom{flex:0 1 auto;font:800 24px var(--font-medieval);color:#f0d584;white-space:nowrap}
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-rol{color:#d8dde5;font-size:12px}
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-secondary{display:flex;align-items:center;gap:10px;color:#bfc6d0;font-size:11px;font-weight:700}
#screen[data-screen="heroe"] .herohero-level{display:grid;gap:8px;padding:10px 12px;border:1px solid #3d434d;background:#0b0e13}
#screen[data-screen="heroe"] .herohero-level>div:first-child{display:flex;align-items:center;gap:9px}.herohero-level>div:first-child>b{color:#f1d98e;font:700 15px var(--font-medieval);text-transform:uppercase}.herohero-level>div:first-child>span{color:#e9b735;letter-spacing:2px}.herohero-level .hero-level-info{margin-left:auto}
#screen[data-screen="heroe"] .hero-detail-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto;gap:10px;margin:0;padding:10px;background:#0b0e13}
#screen[data-screen="heroe"] .hero-progress-column{grid-column:1;grid-row:1;width:auto!important;max-width:none!important}
#screen[data-screen="heroe"] .hero-support-column{display:contents!important;width:auto!important;max-width:none!important}
#screen[data-screen="heroe"] .hero-skill-summary{grid-column:2;grid-row:1}
#screen[data-screen="heroe"] .hero-equipment-summary-card{grid-column:1/-1;grid-row:2}
#screen[data-screen="heroe"] .hero-progress-column>.scard,#screen[data-screen="heroe"] .hero-skill-summary,#screen[data-screen="heroe"] .hero-equipment-summary-card{height:100%;border:1px solid #333943!important;border-radius:0!important;background:#11151b!important;box-shadow:none!important}
#screen[data-screen="heroe"] .hero-progress-column .row{min-height:34px;border-bottom:1px solid #292f38;color:#e6e9ee}
#screen[data-screen="heroe"] .hero-progress-column .row>span:last-child{font-weight:900;color:#f1d98e}
#screen[data-screen="heroe"] .hero-skill-heading{color:#f0cf72;font-size:17px}
#screen[data-screen="heroe"] .hero-skill-description{color:#f4f1e8!important;font-size:13px;line-height:1.5}
#screen[data-screen="heroe"] .hero-skill-level{color:#c7ccd4!important;font-size:10px}
#screen[data-screen="heroe"] .hero-equipment-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px;overflow:visible}
#screen[data-screen="heroe"] .hero-equipment-summary-item{min-height:112px;background:#171b22;color:#e7e9ed;border:1px solid var(--rarity,#48505b);justify-content:center}
#screen[data-screen="heroe"] .hero-equipment-summary-item>b{color:#f1d98e;white-space:normal}
#screen[data-screen="heroe"] .hero-equipment-summary-item>small{color:#aeb5bf}
#screen[data-screen="heroe"] .hero-equipment-summary-card .hero-compact-action,#screen[data-screen="heroe"] .hero-skill-summary .hero-compact-action{width:min(240px,60%)!important}
@media(max-width:700px){#screen[data-screen="heroe"] .scr-body:has(.hero-upgrade-shell){padding:5px!important}#screen[data-screen="heroe"] .hero-upgrade-shell .herohero{grid-template-columns:78px minmax(0,1fr)!important;gap:9px;padding:9px!important}#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-portrait{width:72px!important;height:76px!important}#screen[data-screen="heroe"] .hero-upgrade-shell .hh-primary{display:grid;gap:2px}#screen[data-screen="heroe"] .hero-upgrade-shell .hh-nom{font-size:18px}#screen[data-screen="heroe"] .hero-upgrade-shell .hh-secondary{gap:6px;font-size:9px;flex-wrap:wrap}#screen[data-screen="heroe"] .herohero-level{grid-column:1/-1;padding:8px}#screen[data-screen="heroe"] .hero-detail-grid{grid-template-columns:1fr!important;grid-template-rows:auto!important;padding:6px;gap:6px}#screen[data-screen="heroe"] .hero-progress-column,#screen[data-screen="heroe"] .hero-skill-summary,#screen[data-screen="heroe"] .hero-equipment-summary-card{grid-column:1!important;grid-row:auto!important}#screen[data-screen="heroe"] .hero-equipment-summary-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory}#screen[data-screen="heroe"] .hero-equipment-summary-item{flex:0 0 118px;min-height:100px;scroll-snap-align:start}}

/* Forja tipo galería: visor, atributos y carrusel de recetas. */
.forge-gallery-stage{width:min(1040px,100%);margin:12px auto 10px;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);border:1px solid var(--rarity);background:#0b0e13;box-shadow:inset 0 0 0 1px #050608,0 10px 28px #000a}.forge-gallery-viewer{min-height:360px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid #333943;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rarity) 18%,#171b22),#080a0e 70%)}.forge-gallery-art{width:min(250px,72%);height:230px;object-fit:contain;font-size:120px;display:grid;place-items:center;filter:drop-shadow(0 10px 15px #000)}.forge-gallery-viewer>small{margin-top:8px;color:#aeb6c1}.forge-gallery-viewer>h3{margin:5px 0 0;color:var(--rarity);font:700 24px var(--font-medieval)}.forge-gallery-details{padding:22px;display:flex;flex-direction:column;min-width:0}.forge-gallery-details>header small{color:#838d9a;font-size:9px;letter-spacing:1.4px}.forge-gallery-details>header h3{margin:4px 0 14px;color:#f0d584;font:700 22px var(--font-medieval)}.forge-gallery-primary{display:grid;grid-template-columns:58px repeat(2,1fr);align-items:center;gap:10px;padding:12px;border:1px solid #343b46;background:#12161d}.forge-gallery-primary>span{font-size:34px;text-align:center}.forge-gallery-primary>div{display:grid;gap:3px;border-left:1px solid #343b46;padding-left:12px}.forge-gallery-primary small{color:#8f99a6;font-size:8px}.forge-gallery-primary b{color:#f2d77e;font-size:18px}.forge-gallery-require-title{margin:16px 0 7px;color:#cbd1d9;font:700 12px var(--font-medieval);text-transform:uppercase}.forge-gallery-details .forge-mobile-reqs{grid-template-columns:repeat(2,minmax(0,1fr))}.forge-gallery-details .forge-mobile-reqs>span{min-height:50px}.forge-gallery-details footer{margin-top:auto;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:10px}.forge-gallery-details footer>span{color:#aeb5bf}.forge-gallery-details footer .btn{width:auto;min-width:190px}.forge-gallery-label{width:min(1040px,100%);margin:0 auto 6px;display:flex;justify-content:space-between;color:#e4e7eb;font:700 12px var(--font-medieval)}.forge-gallery-label small{color:#8f98a4}.forge-recipe-gallery{width:min(1040px,100%);margin:0 auto;display:flex;gap:7px;padding:4px 2px 10px;overflow-x:auto;scroll-snap-type:x mandatory}.forge-recipe-gallery>button{position:relative;flex:0 0 112px;min-height:132px;padding:7px;border:1px solid #343b46;background:#11141a;color:#d8dce3;display:grid;grid-template-rows:68px auto auto;justify-items:center;align-items:center;scroll-snap-align:start;cursor:pointer}.forge-recipe-gallery>button::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--rarity);opacity:.55}.forge-recipe-gallery>button.on{border-color:var(--rarity);background:#20242c;box-shadow:0 0 12px color-mix(in srgb,var(--rarity) 55%,transparent)}.forge-gallery-thumb{width:62px;height:62px;object-fit:contain;font-size:40px;display:grid;place-items:center}.forge-recipe-gallery .hh-rarity{position:absolute;top:5px;left:5px;font-size:6px}.forge-recipe-gallery b{max-width:100%;color:#e7d08c;font-size:9px;line-height:1.15;text-align:center}.forge-recipe-gallery small{color:#9da6b2;font-size:8px}
@media(max-width:700px){.forge-gallery-stage{grid-template-columns:1fr}.forge-gallery-viewer{min-height:235px;padding:14px;border-right:0;border-bottom:1px solid #333943}.forge-gallery-art{height:150px;width:min(180px,60%);font-size:88px}.forge-gallery-viewer>h3{font-size:19px}.forge-gallery-details{padding:14px}.forge-gallery-details>header h3{font-size:18px}.forge-gallery-primary{grid-template-columns:45px repeat(2,1fr);padding:9px}.forge-gallery-details footer{margin-top:14px}.forge-gallery-details footer .btn{min-width:150px}.forge-recipe-gallery>button{flex-basis:96px;min-height:120px}}

/* Fondo solicitado para el panel completo de mejora del héroe. El color
   papiro permanece visible si la imagen no puede cargarse. */
#screen[data-screen="heroe"] .hero-upgrade-shell{
    background-color:#d9bf86!important;
    background-image:url('../assets/estilos/pruebafondouno.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero{
    background:linear-gradient(90deg,rgba(17,20,27,.88),rgba(12,15,20,.78))!important;
}
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-detail-grid{
    background:rgba(11,14,19,.64)!important;
}
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-progress-column>.scard,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-skill-summary,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-card{
    background:rgba(15,19,25,.84)!important;
}

/* Variante definitiva: la textura AVIF se muestra tal cual en el panel grande
   y se repite como fondo propio de cada bloque, sin velos azul/cian. */
#screen[data-screen="heroe"] .hero-upgrade-shell,
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero,
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-level,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-detail-grid,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-progress-column>.scard,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-skill-summary,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-card,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-item{
    background-color:#d9bf86!important;
    background-image:url('../assets/estilos/pruebafondouno.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="heroe"] .hero-upgrade-shell,
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero,
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-level,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-progress-column .row,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-skill-description,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-skill-level,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-item,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-item>b,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-equipment-summary-item>small{
    color:#24170a!important;
}
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-progress-column .row>span:last-child,
#screen[data-screen="heroe"] .hero-upgrade-shell .hero-skill-heading,
#screen[data-screen="heroe"] .hero-upgrade-shell .sec-h,
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-nom,
#screen[data-screen="heroe"] .hero-upgrade-shell .herohero-level>div:first-child>b{
    color:#3a2108!important;
    text-shadow:0 1px #f6dfa7;
}
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-rol,
#screen[data-screen="heroe"] .hero-upgrade-shell .hh-secondary{
    color:#4b3218!important;
}

/* Mejora de héroe v2: misma arquitectura que Colección. */
#screen[data-screen="heroe"] .hero-upgrade-v2{width:min(1280px,100%);background-color:#d9bf86!important;background-image:url('../assets/estilos/pruebafondouno.avif')!important;background-size:cover!important;color:#24170a}
.hero-upgrade-main{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(480px,1.18fr);min-height:570px}
.hero-upgrade-visual{padding:18px;border-right:1px solid #5d4427;background:rgba(225,188,119,.18)}
.hero-loadout{display:grid;grid-template-columns:186px minmax(0,1fr);gap:12px;align-items:start}
.hero-loadout-slots{display:grid;grid-template-rows:repeat(3,1fr);gap:7px}
#screen[data-screen="heroe"] .hero-loadout-slots .hero-equipment-summary-item{min-width:0;min-height:0;padding:6px 3px;justify-content:center;border:1px solid #50371e;background-color:#d9bf86!important;background-image:url('../assets/estilos/pruebafondouno.avif')!important;background-size:cover!important;color:#24170a!important;box-shadow:inset 0 0 0 1px #f4d99e66}
.hero-loadout-slots .hero-equipment-summary-item>span{font-size:29px}.hero-loadout-slots .hero-equipment-summary-item>b{font-size:10px!important;color:#2c1b0a!important;white-space:normal}.hero-loadout-slots .hero-equipment-summary-item>small{font-size:8px;color:#513719!important}
.hero-upgrade-portrait{display:grid;grid-template-rows:minmax(0,1fr);border:2px solid #3f6fb1;background:#0c1017;box-shadow:0 0 12px #2785ff88}.hero-upgrade-portrait img{width:100%;height:390px;object-fit:cover;object-position:top}
.hero-level-strip{display:flex;align-items:center;gap:9px;margin-top:12px;padding:7px 8px;border:1px solid #5a4025;background:rgba(236,201,133,.76)}.hero-level-strip>b{font:800 15px var(--font-medieval);white-space:nowrap}.hero-star-cell{display:flex;align-items:center;gap:3px;padding:5px 8px;border:1px solid #25170c;background:linear-gradient(#6d4b2c,#3d2818);box-shadow:inset 0 0 0 1px #a47c4c;color:#f6dfaa}.hero-star-cell>span{margin-right:4px;font-size:9px;font-weight:900}.hero-star-cell i{font-style:normal;font-size:17px;color:#2a211c;-webkit-text-stroke:1px #0a0705;text-shadow:0 1px #8c735d}.hero-star-cell i.on{color:#ffc13b;-webkit-text-stroke:1px #211307;text-shadow:0 0 6px #ffad24}.hero-level-strip .hero-level-info{margin-left:auto}
.hero-upgrade-visual>.prog{margin:7px 0}.hero-upgrade-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.hero-upgrade-actions .xp-seals{margin:0}.hero-upgrade-actions>.btn{width:auto;min-width:160px}
.hero-upgrade-data{padding:24px;display:flex;flex-direction:column;background:rgba(225,188,119,.12)}.hero-upgrade-data>header{display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;padding-bottom:15px;border-bottom:1px solid #694b29}.hero-upgrade-data>header h2{margin:0;color:#2c1a08;font:800 30px var(--font-medieval)}.hero-upgrade-data>header>div:first-child>span{display:block;margin-top:4px;color:#59391b;font-weight:800}.hero-upgrade-data>header .hh-secondary{justify-content:flex-end}.hero-upgrade-description{margin:16px 0;padding:11px 13px;border-left:3px solid #3e6ba2;background:rgba(250,224,166,.38);color:#2b1b0b;font-size:13px;line-height:1.55}
.hero-upgrade-data-grid{display:grid;grid-template-rows:auto auto;gap:10px;flex:1}.hero-stat-panel,.hero-upgrade-v2 .hero-skill-summary{padding:14px;border:1px solid #584021;background-color:#d9bf86!important;background-image:url('../assets/estilos/pruebafondouno.avif')!important;background-position:center!important;background-size:cover!important;color:#24170a}.hero-stat-panel .sec-h,.hero-upgrade-v2 .hero-skill-heading{margin-bottom:7px;color:#342008!important;font-size:16px}.hero-stat-panel .row{min-height:38px;border-bottom:1px solid #785a34;color:#24170a!important}.hero-stat-panel .row b{color:#24170a}.hero-upgrade-v2 .hero-skill-description,.hero-upgrade-v2 .hero-skill-level{color:#24170a!important}.hero-upgrade-v2 .hero-skill-summary .hero-compact-action{width:min(260px,60%)!important;margin-top:14px!important}
.hero-upgrade-roster{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:5px;padding:10px;border-top:1px solid #3c2a17;background:#0b0e13}.hero-upgrade-roster-track{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x mandatory}.hero-upgrade-roster-track>button{position:relative;flex:0 0 78px;min-height:104px;padding:4px;border:1px solid #343a43;background:#11151b;color:#d8dde5;display:grid;grid-template-rows:68px auto auto;justify-items:center;scroll-snap-align:start;cursor:pointer}.hero-upgrade-roster-track>button.on{border-color:#4698ff;box-shadow:0 0 9px #3489ff}.hero-upgrade-roster-track>button.locked{filter:grayscale(1);opacity:.44}.hero-upgrade-roster-track img{width:62px;height:66px;object-fit:cover;object-position:top}.hero-upgrade-roster-track b{max-width:100%;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-upgrade-roster-track small{color:var(--rarity);font-size:7px;text-transform:uppercase}.hero-roster-arrow{height:58px;border:0;background:transparent;color:#ffc52f;font-size:30px;cursor:pointer}
@media(max-width:760px){.hero-upgrade-main{grid-template-columns:1fr;min-height:0}.hero-upgrade-visual{padding:9px;border-right:0;border-bottom:1px solid #5d4427}.hero-loadout{grid-template-columns:166px minmax(0,1fr);max-width:330px;margin:auto}.hero-upgrade-portrait img{height:300px}.hero-loadout-slots .hero-equipment-summary-item>span{font-size:24px}.hero-loadout-slots .hero-equipment-summary-item>b{font-size:8px!important}.hero-level-strip{flex-wrap:wrap}.hero-star-cell{margin-left:auto}.hero-level-strip .hero-level-info{margin-left:0}.hero-upgrade-actions{align-items:stretch}.hero-upgrade-actions>.btn{min-width:130px}.hero-upgrade-data{padding:12px}.hero-upgrade-data>header{grid-template-columns:1fr}.hero-upgrade-data>header h2{font-size:23px}.hero-upgrade-data>header .hh-secondary{justify-content:flex-start}.hero-upgrade-description{margin:10px 0}.hero-stat-panel,.hero-upgrade-v2 .hero-skill-summary{padding:10px}.hero-upgrade-roster{grid-template-columns:28px minmax(0,1fr) 28px;padding:7px 3px}.hero-upgrade-roster-track>button{flex-basis:68px;min-height:96px;grid-template-rows:60px auto auto}.hero-upgrade-roster-track img{width:56px;height:58px}}
@media(max-width:700px){#screen[data-screen="heroe"] .hero-detail-grid{grid-template-columns:1fr!important}#screen[data-screen="heroe"] .hero-equipment-summary-grid{min-width:0}#screen[data-screen="heroe"] .hero-equipment-summary-item{padding-inline:3px}#screen[data-screen="heroe"] .hero-equipment-summary-item>b{font-size:11px}}

/* Pestañas legibles sobre el metal claro. */
#screen[data-screen="heroes"] .scr-tabs button,
#screen[data-screen="heroes"] .scr-tabs button.on{
    color:#080604!important;
    text-shadow:none!important;
}

/* Cierre compartido de todas las pantallas: círculo dorado y X negra. */
#screen .scr-close{
    width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;
    color:#090603!important;border:1px solid #80550b!important;
    background:linear-gradient(145deg,#fff0a8 0%,#f3c844 48%,#c98b0d 100%)!important;
    box-shadow:inset 0 1px #fff8d3,inset 0 -2px #8b5a08,0 2px 6px #0007!important;
    text-shadow:none!important;font-size:19px!important;line-height:1!important;
}

/* Eventos: fondo original sin tintes ni capas superpuestas. */
#screen[data-screen="eventos"] .scr-body{
    background-color:#d0b681!important;
    background-image:url('../assets/estilos/fondodiv.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Las secciones internas dejan ver fondodiv.png sin sustituir las tarjetas. */
#screen[data-screen="eventos"] [data-events-online],
#screen[data-screen="eventos"] .event-fold[data-event-pane],
#screen[data-screen="eventos"] .event-fold[data-event-pane]>.event-fold-body{
    background-color:transparent!important;
    background-image:none!important;
}
#screen[data-screen="eventos"] .event-fold[data-event-pane]{border-color:transparent!important;box-shadow:none!important}

/* Anchura editorial por sección: las pestañas conservan todo el ancho y solo
   se centra el contenido de lectura/juego. */
#screen[data-screen="eventos"] .event-content-limit,
#screen[data-screen="eventos"] .event-fold[data-event-pane]{
    width:100%;margin-inline:auto;box-sizing:border-box;
}
#screen[data-screen="eventos"] .event-content-1250,
#screen[data-screen="eventos"] .event-fold[data-event-pane="daily"],
#screen[data-screen="eventos"] .event-fold[data-event-pane="weekly"],
#screen[data-screen="eventos"] .event-fold[data-event-pane="tutorial"],
#screen[data-screen="eventos"] .event-fold[data-event-pane="campaign"],
#screen[data-screen="eventos"] .event-fold[data-event-pane="achievement"],
#screen[data-screen="eventos"] .event-fold[data-event-pane="promo"]{max-width:1250px}
#screen[data-screen="eventos"] .event-fold[data-event-pane="world"]{max-width:1800px}
#screen[data-screen="eventos"] .event-content-1600{max-width:1600px}
#screen[data-screen="eventos"] .event-fold[data-event-pane="achievement"]>.event-fold-body>.event-section-heading,
#screen[data-screen="eventos"] .event-fold[data-event-pane="achievement"]>.event-fold-body>.achievement-list{grid-column:1/-1;width:100%;box-sizing:border-box}
@media(min-width:701px){#screen[data-screen="eventos"] .event-fold[data-event-pane="achievement"] .achievement-row{grid-template-columns:minmax(280px,2fr) minmax(240px,1.35fr) minmax(82px,auto);padding:10px 14px}}

/* Construcción de la Ciudad: categorías y catálogo de edificios. */
#screen[data-screen="construir"] .scr-body{
    background-color:#17110c!important;
    background-image:url('../assets/estilos/obra.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Fondo solicitado para Global y las secciones online de Tutorial. */
#screen[data-screen="eventos"] [data-events-online="global"],
#screen[data-screen="eventos"] [data-events-online="tutorial"]{
    min-height:100%;
    box-sizing:border-box;
    background-color:#0d0a08!important;
    background-image:url('../assets/estilos/fondouno.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}

/* Mundo: los objetivos mantienen 500 px útiles y pasan a una fila de tres
   columnas únicamente cuando el contenedor puede alojarlos sin comprimirlos. */
.event-fold[data-event-pane="world"]>.event-fold-body>.world-event-layout{grid-column:1/-1;width:100%;max-width:100%;box-sizing:border-box}
.world-event-layout{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:10px;align-items:start;min-width:0;container-type:inline-size}
.world-event-sidebar,.world-event-targets{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.world-event-sidebar .events-world-context{width:100%;max-width:300px;margin:0;grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
.world-event-sidebar .events-calendar-card{width:100%!important;max-width:100%;box-sizing:border-box}
.world-event-sidebar .events-world-context>.scard{margin:0!important}
.world-event-intro{position:relative;min-width:0}.world-event-intro>.event-section-heading{position:absolute;z-index:2;right:0;top:0;min-height:26px;margin:0}.world-event-intro>.sub{margin:0;padding:6px 38px 6px 8px;min-height:26px;background:#ead9adcc;border:1px solid #806139;color:#2b1c0d!important;box-sizing:border-box}
.world-event-targets>.world-event-target{margin:0!important;width:100%;box-sizing:border-box}
@media(min-width:1200px){
    .world-event-targets{grid-template-columns:repeat(3,minmax(0,1fr))}
    .world-event-targets>.world-event-intro{grid-column:1/-1}
}
@media(max-width:1100px){.world-event-layout{grid-template-columns:minmax(0,1fr)}.world-event-sidebar,.world-event-targets{width:100%;max-width:100%}.world-event-sidebar .events-world-context{max-width:100%}}

/* Bolsa: mismo fondo en todas sus categorías. */
#screen[data-screen="inventario"] .scr-body{
    background-color:#0d0a08!important;
    background-image:url('../assets/estilos/siempre.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}
#screen[data-screen="inventario"] .scr-body>.bag-compact-grid,
#screen[data-screen="inventario"] .scr-body>.inventory-grid,
#screen[data-screen="inventario"] .scr-body>.bag-equipment-catalog{
    width:100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

/* La tienda comparte escenario y densidad visual con la Bolsa. */
#screen[data-screen="tienda"] .scr-body{
    background-color:#0d0a08!important;
    background-image:url('../assets/estilos/siempre.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}
#screen[data-screen="tienda"] .tienda-saldo{display:inline-flex;align-items:center;gap:6px;margin:4px 0 10px;padding:5px 9px;border:2px solid #080604;background:#15120ef0;color:#f1c84c!important;font-family:var(--font-medieval);text-shadow:0 1px 2px #000!important;box-shadow:inset 0 0 0 1px #9a7226,0 2px 5px #0008}
#screen[data-screen="tienda"] .tienda-saldo b{color:#ffe276!important;font:900 15px var(--font-medieval);text-shadow:0 1px 2px #000,0 0 5px #8a5c0b!important}
.shop-compact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,112px));gap:8px;justify-content:start;align-content:start;width:100%}
.shop-compact-card{position:relative;min-width:0;aspect-ratio:1/1}
.shop-compact-buy{position:absolute;inset:0;display:grid;place-items:center;align-content:center;width:100%;height:100%;padding:2px;border:1px solid #5f4729;background:radial-gradient(circle at 50% 30%,#806e4d,#30291f 68%,#17130f);box-shadow:inset 0 1px #d6c39566,0 3px 7px #0005;color:#f4e2b0;cursor:pointer;overflow:hidden}
.shop-compact-buy:not(:disabled):hover,.shop-compact-buy:not(:disabled):focus-visible{border-color:#c59b4c;filter:brightness(1.1)}.shop-compact-buy:disabled{cursor:not-allowed;filter:grayscale(.85);opacity:.62}
.shop-compact-buy>img{width:100%;height:100%;object-fit:contain}.shop-compact-emoji{font-size:48px;line-height:1}
.shop-compact-qty,.shop-compact-price{position:absolute;padding:1px 3px;border:0;background:#15120edc;color:#fff4d2;box-shadow:0 0 0 1px #d7bd82aa;font:700 10px var(--font-medieval);line-height:1.25;white-space:nowrap}.shop-compact-qty{right:3px;bottom:3px}.shop-compact-price{left:3px;bottom:3px}
.shop-compact-info{position:absolute;z-index:3;right:3px;top:3px;width:20px;height:20px;padding:0;display:grid;place-items:center;border:1px solid #d7bd82;background:#ead49e;color:#171008;font:900 11px/1 var(--font-ui);cursor:pointer;box-shadow:0 1px 3px #0007}
.shop-groups-grid>.shop-fold{border:2px solid #080604!important;background:#120e09!important;box-shadow:inset 0 0 0 1px #6f511e,0 2px 6px #0008!important}
#screen[data-screen="tienda"] .shop-fold>summary{min-height:43px;border:0!important;background:linear-gradient(180deg,#392a16,#21170d)!important;color:#f1c84c!important;font:800 14px var(--font-medieval)!important;letter-spacing:.2px;text-shadow:0 1px 2px #000,0 0 5px #8a5c0b!important;box-shadow:inset 0 1px #765625,inset 0 -1px #080604!important}
#screen[data-screen="tienda"] .shop-fold>summary:hover{background:linear-gradient(180deg,#49361c,#2a1d0f)!important;color:#ffe276!important}
#screen[data-screen="tienda"] .shop-fold>summary>span:first-child{color:inherit!important;font:inherit!important}
#screen[data-screen="tienda"] .shop-fold>summary small{color:#f1c84c!important;font:700 9px var(--font-medieval)!important;text-shadow:0 1px 2px #000!important}
#screen[data-screen="tienda"] .shop-fold>summary::after{border:1px solid #050403!important;background:linear-gradient(#f4cb4d,#ad7411)!important;color:#130c03!important;box-shadow:inset 0 1px #fff0a1,0 1px 3px #0008!important}
.shop-diamond-hint{width:max-content;max-width:100%;margin:13px auto 2px;padding:7px 13px;border:2px solid #080604;background:rgba(19,14,8,.94);color:#f1c84c;font:800 14px var(--font-medieval);text-align:center;letter-spacing:.2px;text-shadow:0 1px 2px #000,0 0 5px #8a5c0b;box-shadow:inset 0 0 0 1px #6f511e,0 2px 6px #0008}
@media(max-width:600px){#screen[data-screen="tienda"] .shop-fold>summary{font-size:12px!important}.shop-diamond-hint{font-size:12px;padding:6px 9px}}
.shop-category-especiales,.shop-category-fragmentos{grid-template-columns:repeat(auto-fill,106px)}
.shop-category-especiales .shop-compact-card,.shop-category-fragmentos .shop-compact-card{width:106px;height:106px;aspect-ratio:auto}
.shop-category-especiales .shop-compact-buy>img,.shop-category-fragmentos .shop-compact-buy>img{width:106px;height:106px;object-fit:contain}
@media(max-width:430px){.shop-compact-grid,.shop-category-especiales,.shop-category-fragmentos{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.shop-compact-card,.shop-category-especiales .shop-compact-card,.shop-category-fragmentos .shop-compact-card{width:100%;height:auto;aspect-ratio:1/1}.shop-category-especiales .shop-compact-buy>img,.shop-category-fragmentos .shop-compact-buy>img{width:100%;height:100%}}

/* Clanes: fondo del área de contenido. */
#screen[data-screen="clanes"] .scr-body{
    background-color:#b99156!important;
    background-image:url('../assets/estilos/desierto.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Investigación: fondo común para grupos y subcategorías. */
#screen[data-screen="investigacion"] .scr-body{
    background-color:#17120d!important;
    background-image:url('../assets/estilos/biblios.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Submenú Actividad. */
#screen[data-screen="formaciones"] .scr-body{
    background-color:#17110c!important;
    background-image:url('../assets/estilos/actividad.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Mensajes: fondo común para todas sus pestañas. */
#screen[data-screen="mensajes"] .scr-body{
    width:min(100%,1600px);
    max-width:1600px;
    margin-inline:auto;
    box-sizing:border-box;
    background-color:#17110c!important;
    background-image:url('../assets/estilos/mensajes.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Mensajes: la escena pertenece al fondo exterior; el cuerpo limitado deja
   verla completa y no crea una franja opaca de 1600 px. */
#screen[data-screen="mensajes"]{
    background-color:#17110c!important;
    background-image:url('../assets/estilos/mensajes.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="mensajes"] .scr-body{
    background-color:transparent!important;
    background-image:none!important;
    background-attachment:scroll!important;
}

/* Ranking general: Global, Tú, Sector y Clanes. */
#screen[data-screen="ranking"]{
    background-color:#17100b!important;
    background-image:url('../assets/estilos/super.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="ranking"] .scr-body{
    background-color:#17100b!important;
    background-image:url('../assets/estilos/super.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Arena, tanto local como multijugador. */
#screen[data-screen="ranking"]:has(.arena-block-grid){
    background-image:url('../assets/estilos/arena.avif')!important;
}
#screen[data-screen="ranking"] .scr-body:has(.arena-block-grid){
    background-color:#17100b!important;
    background-image:url('../assets/estilos/arena.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Menú de Opciones y sus subsecciones. */
#screen[data-screen="opciones"] .scr-body{
    background-color:#17100b!important;
    background-image:url('../assets/estilos/opciones.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Forja: catálogo del soberano y catálogo de héroes. */
#screen[data-screen="inventario"] .scr-body:has(.forge-catalog){
    background-color:#160b07!important;
    background-image:url('../assets/estilos/forja.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Círculo de Adiestramiento, para cualquier héroe. */
#screen[data-screen="entrenamiento-heroe"] .scr-body{
    background-color:#0d0a08!important;
    background-image:url('../assets/estilos/siempre.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Ejército: resumen, tropas, entrenamiento y hospital. */
#screen[data-screen="ejercito"] .scr-body{
    background-color:#15100b!important;
    background-image:url('../assets/estilos/ejercito.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* Celebración al completar edificios: brillo, partículas y recepción de poder. */
.building-upgrade-sprite{position:fixed;z-index:10021;width:80px;height:181px;pointer-events:none;transform:translate(-50%,-92%);background:url('../assets/sprites/upgrade.png') 0 0/320px 181px no-repeat;filter:drop-shadow(0 0 8px #ffd85c);animation:buildingUpgradeSprite .8s steps(4,end) 1}
@keyframes buildingUpgradeSprite{from{background-position:0 0}to{background-position:-320px 0}}
.level-up-sprite{position:fixed;z-index:10030;width:78px;height:208px;pointer-events:none;transform:translate(-50%,-50%);background:url('../assets/sprites/subida.png') 0 0/312px 208px no-repeat;mix-blend-mode:multiply;filter:drop-shadow(0 0 9px #ffd44c);animation:levelUpSprite .8s steps(4,end) 1}
@keyframes levelUpSprite{from{background-position:0 0}to{background-position:-312px 0}}
.building-reward-flight{position:fixed;inset:0;z-index:10020;pointer-events:none;overflow:hidden}.building-reward-flight i{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#ffe36b;box-shadow:0 0 5px #fff7bd,0 0 12px #ffc42f,0 0 20px #ff7b19;opacity:0;animation:buildingXpFlight var(--dur) cubic-bezier(.35,.02,.18,1) var(--delay) forwards}.building-reward-flight i:nth-child(3n){width:5px;height:5px;background:#77caff;box-shadow:0 0 7px #a8ddff,0 0 15px #328cff}.building-reward-flight i:nth-child(4n){border-radius:1px;transform:rotate(45deg)}@keyframes buildingXpFlight{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}12%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1.35)}70%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.15)}}.building-power-gain{position:absolute;transform:translate(-50%,-50%);padding:4px 8px;border:1px solid #f7cf57;border-radius:12px;background:#160c08dd;color:#ffe67c;font:900 13px var(--font-medieval);text-shadow:0 0 7px #ff9d28;animation:buildingPowerGain 1.35s ease-out forwards}@keyframes buildingPowerGain{0%{opacity:0;transform:translate(-50%,0) scale(.65)}18%{opacity:1;transform:translate(-50%,-18px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-72px) scale(.9)}}#playercard.power-received{animation:playerPowerReceived 1.25s ease-out;transform-origin:center}@keyframes playerPowerReceived{0%,100%{filter:none}18%{filter:brightness(1.75) drop-shadow(0 0 12px #ffd64d);transform:scale(1.035)}48%{filter:brightness(1.25) drop-shadow(0 0 7px #ff9d28);transform:scale(1.012)}}

/* Ficha del héroe: mismo escenario que la colección, sin velos ni degradados. */
#screen[data-screen="heroe"] .scr-body{background-color:#100706!important;background-image:url('../assets/estilos/fondo_duro.avif')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.hero-skill-heading{display:flex!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.hero-skill-stars{display:inline-flex;gap:2px;white-space:nowrap}.hero-skill-stars i{font-style:normal;color:#897c60;text-shadow:none}.hero-skill-stars i.on{color:#e8b92f;text-shadow:0 0 5px #d99924}.hero-skill-summary .btn{width:100%;margin-top:8px}
.hero-equipment-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:7px;margin:7px 0}.hero-equipment-summary-item{min-width:0;padding:8px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--rarity,#806f52);background:#f2dfac;color:#2a190b}.hero-equipment-summary-item>span{font-size:23px}.hero-equipment-summary-item>b{max-width:100%;margin:3px 0;color:#2a190b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-equipment-summary-item>small{font-size:9px}.hero-equipment-summary-item.empty{opacity:.78}.hero-equipment-summary-stats{width:100%;display:grid;gap:3px;margin-top:6px}.hero-equipment-summary-stats>span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;padding-top:3px;border-top:1px solid #8a704744;text-align:left}.hero-equipment-summary-stats small{font-size:8px}.hero-equipment-summary-stats strong{color:#76520b;text-align:right}.hero-equipment-summary-card>.sc-body>.btn{width:100%}

/* Los botones principales usan marco CSS. El antiguo frame.png tenía zonas
   blancas sin transparencia y producía rectángulos alrededor del botón. */
.btn.big:not(:disabled),
.btn:not(.sec):not(.sm):not(.bad):not(.dia):not(:disabled),
.world-event-army [data-world-attack]:not(:disabled),
[data-world-claim].btn:not(:disabled),
[data-server-mission].btn:not(:disabled){
    border:1px solid #805615!important;
    border-image:none!important;
    background-clip:border-box!important;
    box-shadow:inset 0 1px #fff0a3,inset 0 -2px #8c570b,0 2px 5px #0006!important;
}

/* Marcos compactos de recursos: brillo dorado limpio sin alterar el reparto
   flexible de la barra ni la legibilidad de cantidades e iconos. */
#topbar .res{
    position:relative;
    isolation:isolate;
    border:1px solid #8b7655!important;
    border-radius:3px!important;
    background:linear-gradient(180deg,#3b342d 0%,#211d1a 48%,#141311 100%)!important;
    box-shadow:0 1px 3px rgba(0,0,0,.72),inset 0 1px rgba(222,202,151,.42),inset 0 -1px #050504,inset 0 0 8px rgba(0,0,0,.38)!important;
}
#topbar .res::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:2px;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(222,203,158,.1) 0%,transparent 35%,transparent 68%,rgba(180,137,62,.06) 100%);
}
#topbar .res::after{
    content:"";
    position:absolute;
    inset:1px;
    z-index:0;
    border-radius:2px;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(238,214,158,.08),inset 0 0 5px rgba(0,0,0,.32);
}
#topbar .res>i,#topbar .res>span{position:relative;z-index:1}
#topbar .res,#topbar .res span{color:#e3c36f!important;text-shadow:0 1px 1px #000,0 0 4px rgba(191,141,45,.2)!important}
.resource-odometer-digit{display:inline-grid;place-items:center;min-width:.61em;height:1em;overflow:hidden;vertical-align:middle;font-variant-numeric:tabular-nums}
.resource-odometer-digit>span{display:block;min-width:100%;line-height:1em;text-align:center;will-change:transform,opacity,filter}
#topbar .res:hover,#topbar .res:focus-visible{
    border-color:#c1a466!important;
    background:linear-gradient(180deg,#494036 0%,#29231e 48%,#181512 100%)!important;
    box-shadow:0 1px 4px rgba(0,0,0,.8),0 0 6px rgba(185,137,53,.2),inset 0 1px rgba(238,217,165,.5),inset 0 -1px #050504!important;
}
#topbar .res.capacity-full{
    border-color:#ff3b2f!important;
    background:linear-gradient(180deg,#a51c16 0%,#72110d 52%,#3b0907 100%)!important;
}
#topbar .res.capacity-full span{color:#ffe083!important}

/* Pase de temporada compacto: columnas por hito y dos pistas horizontales. */
.season-pass-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 0 8px;scrollbar-width:thin}.season-pass-matrix{display:grid;grid-template-columns:76px repeat(7,minmax(126px,1fr));grid-template-rows:32px 110px 110px;gap:5px;min-width:990px;align-items:stretch}.season-pass-corner,.season-points-head,.season-track-label,.season-prize-card{border:1px solid var(--borde-papiro,#80652f);box-sizing:border-box}.season-pass-corner,.season-points-head{display:flex;align-items:center;justify-content:center;background:#e8d29c;color:#24170d;font-weight:900}.season-points-head{gap:3px;font-size:14px}.season-points-head small{font-size:9px}.season-track-label{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#ead9ad;color:#24170d;font-size:17px;box-shadow:4px 0 7px #0003}.season-track-label b{font-size:10px}.season-track-label.premium{background:#e7c879}.season-prize-card{display:grid;grid-template-rows:minmax(0,1fr) 25px;gap:4px;padding:5px;background:#f0dfb4;color:#24170d}.season-prize-card.premium{background:#edd18c}.season-prize-card.lock{filter:saturate(.72);opacity:.82}.season-prize-items{display:flex;gap:4px;align-items:center;justify-content:center;min-height:0}.season-prize-item{position:relative;flex:0 1 66px;aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:2px;border:1px solid #5f4729;border-radius:3px;background:radial-gradient(circle at 50% 30%,#806e4d,#30291f 68%,#17130f);box-shadow:inset 0 1px #d6c39566,0 2px 5px #0005;overflow:hidden}.season-prize-card.premium .season-prize-item{background:radial-gradient(circle at 50% 30%,#8b7449,#382b1b 68%,#17110b)}.season-prize-item img{width:100%;height:100%;object-fit:contain;display:block}.season-prize-item i{font-style:normal;font-size:38px}.season-prize-item .bag-qty{right:2px!important;bottom:2px!important;padding:1px 3px!important;font-size:10px!important}.season-prize-card>.btn{width:100%;height:25px;min-height:0;margin:0;padding:2px 5px;font-size:9px}.season-milestones>.sec-h{color:#f2d17a;text-shadow:0 1px 3px #000,0 0 5px #000}
@media(max-width:700px){.season-pass-matrix{grid-template-columns:56px repeat(7,116px);grid-template-rows:29px 102px 102px;min-width:901px}.season-track-label b{font-size:9px;writing-mode:vertical-rl;transform:rotate(180deg)}.season-prize-card{padding:4px}.season-prize-item{flex-basis:59px}.season-prize-item i{font-size:33px}}
/* Ilustración de la Fortaleza Corrompida en Eventos del Mundo. */
#screen[data-screen="eventos"] .world-event-target-fortress>.sc-body{
    background-image:linear-gradient(90deg,rgba(234,216,168,.94),rgba(234,216,168,.74) 55%,rgba(234,216,168,.22)),url('../assets/estilos/fortaleza.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="eventos"] .world-event-target-boss>.sc-body{
    background-image:linear-gradient(90deg,rgba(234,216,168,.94),rgba(234,216,168,.74) 55%,rgba(234,216,168,.22)),url('../assets/estilos/coloso.jpeg')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="eventos"] .world-event-target-horde>.sc-body{
    background-image:linear-gradient(90deg,rgba(234,216,168,.94),rgba(234,216,168,.74) 55%,rgba(234,216,168,.22)),url('../assets/estilos/sin nombre.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
/* Objetivos mundiales: un objetivo visible, tropas ilustradas y cantidades
   controladas mediante steppers. */
.world-event-targets{grid-template-columns:minmax(0,1fr)!important}
.world-event-targets>.world-event-intro,.world-event-targets>.world-event-target-tabs,.world-event-targets>.world-event-target{grid-column:1/-1}
.world-event-target-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #9a7a42;background:linear-gradient(180deg,#24272a 0%,#51565a 45%,#191b1d 100%);box-shadow:inset 0 1px #d9d0b066,inset 0 -1px #070707,0 2px 5px #0005}
.world-event-target-tabs button{position:relative;min-width:0;min-height:48px;padding:6px 8px;border:1px solid #777b7d;background:linear-gradient(180deg,#74797c 0%,#34383b 48%,#181a1c 52%,#4a4e51 100%);box-shadow:inset 0 1px #c9cccd,inset 0 -1px #101112;color:#f0bd36;font-weight:900;text-shadow:-1px -1px 0 #120d07,1px -1px 0 #120d07,-1px 1px 0 #120d07,1px 1px 0 #120d07,0 2px 3px #000;cursor:pointer}.world-event-target-tabs button small{display:block;margin-top:2px;color:#ffe28a!important;text-shadow:0 1px 2px #000}.world-event-target-tabs button:hover{border-color:#d1aa53;filter:brightness(1.12)}.world-event-target-tabs button.on{border:1px solid #e2b84f;background:linear-gradient(180deg,#9da2a4 0%,#555b5e 46%,#25282a 52%,#686e71 100%);box-shadow:inset 0 1px #f2f3ee,inset 0 -3px #d59b21,0 0 0 1px #6d4b16,0 2px 6px #0008}.world-event-target-tabs button.on::after{content:'';position:absolute;left:12%;right:12%;bottom:2px;height:2px;background:#ffd35a;box-shadow:0 0 5px #ffc028}
#screen[data-screen="eventos"] .world-event-target>.sc-body{min-height:430px;padding:12px;background-position:center top!important}
.world-event-title{min-height:32px;padding:6px 8px;border:1px solid #76552f;background:#ead9addd}
.world-event-army{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.world-event-troops{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:7px}
.world-event-troop{min-width:0;padding:6px;display:grid;grid-template-rows:112px auto auto 30px;gap:3px;justify-items:center;border:1px solid #75552f;background:linear-gradient(#f1dfb2,#d9bd7f);color:#24170d;box-shadow:inset 0 1px #fff4d4}.world-event-troop-art{width:100%;height:112px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#f4e5bf 0%,#e4cc94 100%)}.world-event-troop-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 36%;filter:drop-shadow(0 3px 3px #0007)}.world-event-troop-art i{font-size:54px;font-style:normal}.world-event-troop>b{font-size:12px}.world-event-troop>small{color:#5d4226!important;font-size:9px}
.world-event-stepper{width:100%;height:30px;display:grid;grid-template-columns:30px minmax(0,1fr) 30px}.world-event-stepper button,.world-event-stepper input{min-width:0;height:30px;padding:0;border:1px solid #6e4b27;border-radius:0;box-sizing:border-box}.world-event-stepper button{background:#4b3423;color:#f5dfaa;font-size:18px;font-weight:900;cursor:pointer}.world-event-stepper input{border-left:0;border-right:0;background:#fff5da;color:#21150a;font-weight:900;text-align:center;-moz-appearance:textfield}.world-event-stepper input::-webkit-inner-spin-button,.world-event-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.world-event-actions{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr);gap:8px}.world-event-actions select,.world-event-actions .btn{width:100%;min-height:36px;margin:0}
@media(max-width:760px){.world-event-target-tabs{grid-template-columns:1fr}.world-event-target-tabs button{min-height:40px}.world-event-troops{grid-template-columns:repeat(2,minmax(0,1fr))}.world-event-troop{grid-template-rows:88px auto auto 30px}.world-event-troop-art{height:88px}.world-event-actions{grid-template-columns:1fr}#screen[data-screen="eventos"] .world-event-target>.sc-body{min-height:0}}
/* Segundo nivel de navegación de Tutorial y Temporada. */
.event-section-switch{display:flex;gap:5px;overflow-x:auto;margin:0 0 9px;padding:5px;border:1px solid #6d5130;background:#211711cc}.event-section-switch button{flex:0 0 auto;min-width:105px;padding:8px 11px;border:1px solid #765a37;background:linear-gradient(#d8c18c,#aa8b58);color:#2a1a0d;font-weight:850;cursor:pointer}.event-section-switch button.on{background:linear-gradient(#ffd75a,#d69a17);box-shadow:inset 0 -3px #8d5700}

/* Prueba de marco oscuro en el HUD compartido por Ciudad y Mundo.
   La imagen es una capa sin interacción: no bloquea botones ni el minimapa. */
#playercard,
#queuehud .qslot,
#fabShop,
#fabMoveBase,
#fabSearch,
#chathud.collapsed,
#minimapWrap{
    position:fixed;
}
#queuehud .qslot{
    position:relative;
}
#playercard::after,
#queuehud .qslot::after,
#fabShop::after,
#fabMoveBase::after,
#fabSearch::after,
#chathud.collapsed::after,
#minimapWrap::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    background:url('../assets/estilos/frame-boton-oscuro.png?v=3') center/100% 100% no-repeat;
}
#playercard>* ,
#queuehud .qslot>* ,
#fabShop>* ,
#fabMoveBase>* ,
#fabSearch>* ,
#chathud.collapsed>* ,
#minimapWrap>*{
    position:relative;
    z-index:9;
}

/* El minimapa es casi cuadrado: estirar el frame horizontal completo deformaba
   las esquinas y emborronaba los largueros. Border-image conserva las cuatro
   esquinas a su tamaño y solo alarga los tramos rectos del marco. */
#minimapWrap::after{
    inset:-3px;
    box-sizing:border-box;
    background:none!important;
    border:12px solid transparent;
    border-image:url('../assets/estilos/frame-boton-oscuro.png?v=4') 18 fill stretch;
}
#minimapWrap.collapsed::after{
    inset:-2px;
    border-width:9px;
}

/* Ancho de lectura en pantallas grandes: las cabeceras y pestañas conservan
   todo el ancho, mientras el contenido principal queda centrado. */
#screen[data-screen="perfil"] .scr-body,
#screen[data-screen="habilidades-jugador"] .scr-body{
    width:min(100%,1100px);
    max-width:1100px;
    margin-inline:auto;
    box-sizing:border-box;
}
@media(min-width:641px){
    #screen[data-screen="heroes"] .hero-roster-dock{padding:6px 10px 5px;grid-template-columns:32px minmax(0,1fr) 32px;gap:5px}
    #screen[data-screen="heroes"] .hero-roster-track{gap:7px;padding:1px 2px 2px}
    #screen[data-screen="heroes"] .hero-roster-card{flex-basis:82px;width:82px;padding:3px 4px 4px}
    #screen[data-screen="heroes"] .hero-roster-portrait{width:72px;height:68px}
    #screen[data-screen="heroes"] .hero-roster-card>b{font-size:10px}
    #screen[data-screen="heroes"] .hero-roster-card>small{font-size:8px}
}
#screen[data-screen="heroes"] .hero-roster-dock{
    width:min(1405px,100%);
    max-width:1405px;
    margin:0 auto!important;
    box-sizing:border-box;
}
#screen[data-screen="guia"] .scr-body{
    width:min(100%,1250px);
    max-width:1250px;
    margin-inline:auto;
    box-sizing:border-box;
}
#screen[data-screen="ranking"] .scr-body{
    width:min(100%,1150px);
    max-width:1150px;
    margin-inline:auto;
    box-sizing:border-box;
}

/* Perfil: el escenario de la Forja ocupa tanto el fondo exterior como el
   cuerpo central limitado, igual que el tratamiento aplicado a Ranking. */
#screen[data-screen="perfil"],
#screen[data-screen="perfil"] .scr-body{
    background-color:#17100b!important;
    background-image:url('../assets/estilos/forja.avif')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="perfil"] .scr-body{background-attachment:local!important}
#screen[data-screen="perfil"] .scr-head{
    min-height:54px!important;
    padding:1px 20px!important;
    border-bottom:1px solid #3d311d!important;
    background:#090a0eef!important;
    box-shadow:none!important;
}
#screen[data-screen="perfil"] .scr-head h2{
    color:#e3bd43!important;
    font:700 clamp(20px,3vw,30px) var(--font-medieval)!important;
    letter-spacing:.08em!important;
    text-shadow:0 1px #000!important;
    text-transform:uppercase;
}
.sovereign-empty-slot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0}
.sovereign-empty-slot p{margin:0}.sovereign-empty-slot .btn{width:auto!important;min-width:96px;margin:0!important}
#screen[data-screen="heroes"] .hero-equipment-piece,
#screen[data-screen="heroes"] .hero-total-stats{border:1px solid #76562f;background:rgba(247,213,145,.2);box-sizing:border-box}
#screen[data-screen="heroes"] .hero-equipment-piece{gap:7px;padding:8px}
#screen[data-screen="heroes"] .hero-piece-stats{display:flex;flex-direction:column;justify-content:center;min-width:0}
#screen[data-screen="heroes"] .hero-piece-stats>small,
#screen[data-screen="heroes"] .hero-total-stats>small{color:#34200d!important;font-weight:900;text-transform:uppercase}
#screen[data-screen="heroes"] .hero-equipment-stats{padding-left:7px;border-left:1px solid #76562f}
#screen[data-screen="heroes"] .hero-total-stats{margin-left:8px;padding:9px 11px;border-left:1px solid #76562f}
#screen[data-screen="heroes"] .hero-total-stats dt{color:#21150b!important;font-weight:850}
#screen[data-screen="heroes"] .hero-equipment-workbench{
    width:min(920px,100%);
    max-width:920px;
    margin:14px auto 18px;
    box-sizing:border-box;
}

/* Equipo del héroe: la pieza y el total son dos tarjetas inequívocas. */
#screen[data-screen="heroes"] .hero-equipment-detail{
    grid-template-columns:96px minmax(430px,1.45fr) minmax(245px,.8fr);
    gap:12px;
}
#screen[data-screen="heroes"] .hero-equipment-piece{
    grid-template-columns:minmax(155px,.82fr) minmax(205px,1.18fr);
    gap:10px;
}
#screen[data-screen="heroes"] .hero-piece-stats{
    padding:8px 10px;
    border:1px solid #76562f;
    background:rgba(247,213,145,.22);
}
#screen[data-screen="heroes"] .hero-piece-stats>small{white-space:nowrap}
#screen[data-screen="heroes"] .hero-equipment-stats{margin-top:5px}
#screen[data-screen="heroes"] .hero-total-stats{margin-left:2px}
@media(max-width:940px) and (min-width:701px){
    #screen[data-screen="heroes"] .hero-equipment-detail{grid-template-columns:82px minmax(355px,1fr) minmax(220px,.72fr)}
    #screen[data-screen="heroes"] .hero-equipment-piece{grid-template-columns:minmax(135px,.75fr) minmax(190px,1.25fr)}
}
@media(max-width:700px){
    #screen[data-screen="heroes"] .hero-equipment-detail{grid-template-columns:62px minmax(0,1fr)}
    #screen[data-screen="heroes"] .hero-equipment-piece{grid-template-columns:minmax(92px,1fr) minmax(150px,1fr)}
    #screen[data-screen="heroes"] .hero-piece-stats{padding:6px 7px}
    #screen[data-screen="heroes"] .hero-piece-stats>small{font-size:9px}
    #screen[data-screen="heroes"] .hero-total-stats{margin-left:0}
}

/* Marco compacto en la información principal y avanzada del soberano. */
#screen[data-screen="perfil"] .perfil-hero,
#screen[data-screen="perfil"] .profile-summary-grid>div,
#screen[data-screen="perfil"] .profile-advanced,
#screen[data-screen="perfil"] .profile-advanced-body>.scard,
#screen[data-screen="ranking"] .mp-list>.mp-row{
    position:relative;
}
#screen[data-screen="perfil"] .perfil-hero::after,
#screen[data-screen="perfil"] .profile-summary-grid>div::after,
#screen[data-screen="perfil"] .profile-advanced::after,
#screen[data-screen="perfil"] .profile-advanced-body>.scard::after,
#screen[data-screen="ranking"] .mp-list>.mp-row::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    background:url('../assets/estilos/frame-boton-oscuro.png?v=3') center/100% 100% no-repeat;
}
#screen[data-screen="perfil"] .profile-advanced::after,
#screen[data-screen="perfil"] .profile-advanced-body>.scard::after{display:none!important;content:none!important}
#screen[data-screen="perfil"] .profile-advanced,
#screen[data-screen="perfil"] .profile-advanced-body>.scard{
    border:1px solid #6f512d!important;
    box-shadow:0 2px 5px #2b1b1238!important;
}
#screen[data-screen="perfil"] .perfil-hero>*,
#screen[data-screen="perfil"] .profile-summary-grid>div>*,
#screen[data-screen="perfil"] .profile-advanced>*,
#screen[data-screen="perfil"] .profile-advanced-body>.scard>*,
#screen[data-screen="ranking"] .mp-list>.mp-row>*{
    position:relative;
    z-index:2;
}

/* Las posiciones del ranking deben leerse como una clasificación compacta,
   no como filas que atraviesan todo el escritorio. */
#screen[data-screen="ranking"] .mp-list{
    width:min(100%,700px);
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

/* Ficha del héroe: escenario continuo exterior/interior y ancho de lectura. */
#screen[data-screen="heroe"]{
    background-color:#100706!important;
    background-image:url('../assets/estilos/fondo_duro.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
#screen[data-screen="heroe"] .scr-body{
    width:min(100%,1200px);
    max-width:1200px;
    margin-inline:auto;
    box-sizing:border-box;
    background-color:#100706!important;
    background-image:url('../assets/estilos/fondo_duro.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:local!important;
}

/* En escritorio: Identidad | Nivel y atributos | Habilidad + Equipamiento.
   Cada columna queda limitada a 400 px dentro de un cuerpo de 1200 px. */
@media(min-width:1000px){
    #screen[data-screen="heroe"] .scr-body:has(.hero-detail-grid){
        display:grid;
        grid-template-columns:repeat(3,minmax(0,400px));
        justify-content:center;
        align-items:start;
        gap:8px;
    }
    #screen[data-screen="heroe"] .scr-body:has(.hero-detail-grid)>.herohero{
        width:100%;
        max-width:400px;
        margin:0;
        box-sizing:border-box;
    }
    #screen[data-screen="heroe"] .hero-detail-grid{
        display:contents;
    }
    #screen[data-screen="heroe"] .hero-progress-column,
    #screen[data-screen="heroe"] .hero-support-column{
        width:100%;
        max-width:400px;
        box-sizing:border-box;
    }
}

/* Ficha compacta de héroe inspirada en el boceto móvil: identidad y nivel
   comparten cabecera; atributos/habilidad quedan a la izquierda y las tres
   ranuras de equipo forman una columna estrecha a la derecha. */
#screen[data-screen="heroe"] .herohero-level-mobile{display:none}
@media(max-width:700px){
    #screen[data-screen="heroe"] .herohero{
        display:grid;
        grid-template-columns:78px minmax(104px,1fr) minmax(128px,.9fr);
        gap:8px;
        align-items:start;
        padding:8px;
    }
    #screen[data-screen="heroe"] .herohero>img.herohero-portrait{
        width:78px;
        height:82px;
        flex-basis:auto;
        border-radius:0;
    }
    #screen[data-screen="heroe"] .herohero-info{align-content:start;gap:5px}
    #screen[data-screen="heroe"] .hh-nom{font-size:16px;white-space:nowrap}
    #screen[data-screen="heroe"] .hh-meta{display:grid;gap:4px;font-size:9px}
    #screen[data-screen="heroe"] .herohero-level-mobile{display:grid;gap:8px;padding:5px 7px;background:#ead69f;color:#2b1a0a;min-height:72px;box-sizing:border-box}
    #screen[data-screen="heroe"] .herohero-level-mobile>b{font:700 14px var(--font-medieval);text-transform:uppercase}
    #screen[data-screen="heroe"] .herohero-level-mobile .bar{margin:0}
    #screen[data-screen="heroe"] .hero-level-desktop{display:none}
    #screen[data-screen="heroe"] .hero-detail-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1.7fr) minmax(108px,.82fr)!important;
        grid-template-rows:auto auto;
        gap:7px;
        align-items:start;
    }
    #screen[data-screen="heroe"] .hero-progress-column{grid-column:1;grid-row:1;min-width:0}
    #screen[data-screen="heroe"] .hero-support-column{display:contents}
    #screen[data-screen="heroe"] .hero-skill-summary{grid-column:1;grid-row:2;min-width:0}
    #screen[data-screen="heroe"] .hero-equipment-summary-card{grid-column:2;grid-row:1 / span 2;min-width:0}
    #screen[data-screen="heroe"] .hero-equipment-summary-grid{grid-template-columns:1fr!important;gap:5px;overflow:visible}
    #screen[data-screen="heroe"] .hero-equipment-summary-item{min-height:92px;padding:7px 3px!important;justify-content:center}
    #screen[data-screen="heroe"] .hero-equipment-summary-item>span{font-size:28px}
    #screen[data-screen="heroe"] .hero-equipment-summary-item>b{font-size:11px!important}
    #screen[data-screen="heroe"] .hero-equipment-summary-item>small{font-size:8px}
    #screen[data-screen="heroe"] .hero-equipment-summary-card .sc-body{padding:5px}
    #screen[data-screen="heroe"] .hero-equipment-summary-card .sec-h{font-size:11px;white-space:nowrap}
    #screen[data-screen="heroe"] .hero-equipment-summary-card .hero-compact-action{width:88%!important;min-width:0;font-size:9px;padding-inline:3px}
    #screen[data-screen="heroe"] .hero-progress-column .sc-body{padding:10px}
    #screen[data-screen="heroe"] .hero-progress-column .row{font-size:11px;gap:5px}
    #screen[data-screen="heroe"] .hero-skill-summary .sc-body{padding:9px}
    #screen[data-screen="heroe"] .hero-skill-heading{font-size:12px}
    #screen[data-screen="heroe"] .hero-skill-description{color:#f4f1e8!important;font-size:11px}
    #screen[data-screen="heroe"] .hero-skill-level{color:#d8d2c7!important}
}
@media(max-width:370px){
    #screen[data-screen="heroe"] .herohero{grid-template-columns:68px minmax(92px,1fr) minmax(112px,.9fr);gap:5px}
    #screen[data-screen="heroe"] .herohero>img.herohero-portrait{width:68px;height:76px}
    #screen[data-screen="heroe"] .herohero-level-mobile{padding-inline:5px}
    #screen[data-screen="heroe"] .hero-detail-grid{grid-template-columns:minmax(0,1.6fr) minmax(100px,.85fr)!important}
}

/* Marco compacto en las tres columnas de la ficha del héroe. La tercera
   columna mantiene marcos separados para Habilidad y Equipamiento. */
#screen[data-screen="heroe"] .herohero,
#screen[data-screen="heroe"] .hero-progress-column>.scard,
#screen[data-screen="heroe"] .hero-skill-summary,
#screen[data-screen="heroe"] .hero-equipment-summary-card{
    position:relative;
}
#screen[data-screen="heroe"] .herohero::after,
#screen[data-screen="heroe"] .hero-progress-column>.scard::after,
#screen[data-screen="heroe"] .hero-skill-summary::after,
#screen[data-screen="heroe"] .hero-equipment-summary-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    background:url('../assets/estilos/frame-boton-oscuro.png?v=3') center/100% 100% no-repeat;
}
#screen[data-screen="heroe"] .herohero>*,
#screen[data-screen="heroe"] .hero-progress-column>.scard>*,
#screen[data-screen="heroe"] .hero-skill-summary>*,
#screen[data-screen="heroe"] .hero-equipment-summary-card>*{
    position:relative;
    z-index:2;
}

/* La columna central es más alta: el sprite se deformaba. Aquí funciona mejor
   un marco CSS oscuro, estable a cualquier altura. */
#screen[data-screen="heroe"] .hero-progress-column>.scard{
    border:2px solid #30271f!important;
    box-shadow:
        inset 0 0 0 1px #75634b,
        inset 0 0 9px rgba(20,14,10,.38),
        0 3px 7px rgba(0,0,0,.48)!important;
}
#screen[data-screen="heroe"] .hero-progress-column>.scard::after{
    content:none!important;
    display:none!important;
}

/* Héroes: acabado desierto y metal marrón, sin superficies azul cian. */
#screen[data-screen="heroes"] .hero-lore-panel,
#screen[data-screen="heroes"] .hero-ability-card,
#screen[data-screen="heroes"] .hero-collection-slot,
#screen[data-screen="heroes"] .hero-equipment-workbench,
#screen[data-screen="heroes"] .hero-equipment-detail,
#screen[data-screen="heroes"] .hero-equipment-art{
    border-color:#5b4023!important;
    background-color:#d9bf86!important;
    background-image:url('../assets/estilos/pruebafondouno.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    color:#24170a!important;
}
#screen[data-screen="heroes"] .hero-lore-panel p,
#screen[data-screen="heroes"] .hero-lore-panel blockquote,
#screen[data-screen="heroes"] .hero-ability-card small,
#screen[data-screen="heroes"] .hero-ability-card span,
#screen[data-screen="heroes"] .hero-collection-slot p,
#screen[data-screen="heroes"] .hero-collection-slot small,
#screen[data-screen="heroes"] .hero-equipment-summary small,
#screen[data-screen="heroes"] .hero-equipment-stats dt{color:#392614!important}
#screen[data-screen="heroes"] .hero-info-action{
    border-color:#5a3b1c!important;
    background:linear-gradient(#765431,#3f2a18)!important;
    color:#f8e5b5!important;
}
#screen[data-screen="heroes"] .hero-equipment-slots button{
    border-color:#654722!important;
    background:#d2ad69 url('../assets/estilos/pruebafondouno.avif') center/cover!important;
    color:#26180a!important;
}
#screen[data-screen="heroes"] .hero-equipment-slots button.on{box-shadow:0 0 9px #c99232!important;background-color:#e3c27f!important}
#screen[data-screen="heroes"] .hero-roster-dock,
#screen[data-screen="heroe"] .hero-upgrade-roster{
    border-color:#563b20!important;
    background:#c69b58 url('../assets/estilos/pruebafondouno.avif') center/cover!important;
}
#screen[data-screen="heroes"] .hero-roster-card,
#screen[data-screen="heroe"] .hero-upgrade-roster-track>button{
    border-color:#5a4025!important;
    background:#d1ad70 url('../assets/estilos/pruebafondouno.avif') center/cover!important;
    color:#26180a!important;
}
#screen[data-screen="heroes"] .hero-roster-card>b,
#screen[data-screen="heroe"] .hero-upgrade-roster-track b{color:#26180a!important}
#screen[data-screen="heroes"] .hero-roster-portrait,
#screen[data-screen="heroe"] .hero-upgrade-roster-track img{background:#75502d!important}
#screen[data-screen="heroe"] .hero-upgrade-roster-track>button.on{
    border-color:var(--rarity,#a97829)!important;
    box-shadow:0 0 10px color-mix(in srgb,var(--rarity,#d39b34) 70%,#8a5b20)!important;
}

/* Rareza visible en los dos selectores y en el visualizador del héroe. */
#screen[data-screen="heroes"] .hero-roster-card,
#screen[data-screen="heroe"] .hero-upgrade-roster-track>button{
    border:3px solid var(--rarity)!important;
    box-shadow:inset 0 0 0 1px #24160d,0 0 7px color-mix(in srgb,var(--rarity) 62%,transparent)!important;
}
#screen[data-screen="heroes"] .hero-roster-portrait,
#screen[data-screen="heroe"] .hero-upgrade-roster-track img{
    border:1px solid var(--rarity)!important;
    background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--rarity) 50%,#f5deb0),color-mix(in srgb,var(--rarity) 48%,#51341d))!important;
}
#screen[data-screen="heroes"] .hero-roster-card>small,
#screen[data-screen="heroe"] .hero-upgrade-roster-track small{
    color:var(--rarity)!important;
    font-weight:950;
    -webkit-text-stroke:.7px #090604;
    paint-order:stroke fill;
    text-shadow:-1px -1px 0 #090604,1px -1px 0 #090604,-1px 1px 0 #090604,1px 1px 0 #090604;
}
#screen[data-screen="heroes"] .hero-roster-stars,
#screen[data-screen="heroes"] .hero-title-stars,
#screen[data-screen="heroes"] .hero-lore-panel header>span,
#screen[data-screen="heroe"] .hero-affinity-banner .hh-rarity{
    -webkit-text-stroke:.7px #090604!important;
    paint-order:stroke fill;
    text-shadow:-1px -1px 0 #090604,1px -1px 0 #090604,-1px 1px 0 #090604,1px 1px 0 #090604!important;
    font-weight:950!important;
}
#screen[data-screen="heroes"] .hero-portrait-frame,
#screen[data-screen="heroe"] .hero-upgrade-portrait{
    border:3px solid var(--rarity)!important;
    background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--rarity) 34%,#e8cf99),color-mix(in srgb,var(--rarity) 30%,#24170e))!important;
    box-shadow:0 0 12px color-mix(in srgb,var(--rarity) 75%,transparent)!important;
}

/* Gestor de equipo del héroe: tile desértico en vez del amarillo plano. */
.hero-equipment-manager{
    background-color:#b99156!important;
    background-image:url('../assets/estilos/desierto.avif')!important;
    background-position:center!important;
    background-size:cover!important;
}
.hero-equipment-manager .hero-manager-context,
.hero-equipment-manager .hero-manager-slot,
.hero-equipment-manager .hero-manager-inventory{
    background-color:rgba(225,204,157,.9)!important;
    background-image:linear-gradient(rgba(239,220,174,.84),rgba(202,171,113,.82)),url('../assets/estilos/desierto.avif')!important;
    background-position:center!important;
    background-size:cover!important;
}
.hero-equipment-manager .hero-manager-piece{
    background-color:#dfc58e!important;
    background-image:linear-gradient(145deg,rgba(255,255,255,.76),color-mix(in srgb,var(--rarity) 24%,rgba(214,184,126,.88))),url('../assets/estilos/desierto.avif')!important;
    background-position:center!important;
    background-size:cover!important;
}
.hero-equipment-manager .hero-manager-slot,
.hero-equipment-manager .hero-manager-piece{
    background-color:#b99156!important;
    background-image:linear-gradient(rgba(244,224,181,.28),rgba(113,78,43,.16)),url('../assets/estilos/desierto.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
.hero-equipment-manager .hero-manager-slot.on{
    background-image:linear-gradient(rgba(255,237,190,.18),rgba(82,55,31,.24)),url('../assets/estilos/desierto.avif')!important;
}
.hero-equipment-manager .hero-manager-piece.equipped{
    background-image:linear-gradient(rgba(111,153,85,.18),rgba(51,91,46,.24)),url('../assets/estilos/desierto.avif')!important;
}
.shared-equipment-manager{grid-template-rows:auto auto minmax(260px,1fr)!important;min-height:min(870px,88vh)}
.equipment-manager-main{display:grid;grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:10px;min-width:0}
.equipment-manager-main>.hero-manager-slots{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:6px;min-height:0;overflow:visible!important}
.equipment-manager-main .hero-manager-slot{display:grid;place-items:center;aspect-ratio:1;min-height:0;padding:5px!important}
.equipment-manager-main .hero-manager-slot>img,.equipment-manager-main .hero-manager-slot>i{width:80%!important;height:80%!important;max-width:68px;max-height:68px;object-fit:contain;font-size:42px}
.equipment-stat-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;padding:8px;border:2px solid #120c07;background:#b99156 url('../assets/estilos/desierto.avif') center/cover;box-shadow:inset 0 0 0 1px #d9bd80,0 2px 6px #0006}
.equipment-stat-comparison>div{min-width:0;padding:8px;border:1px solid #4f351d;background:rgba(238,215,165,.88);overflow:hidden}
.equipment-stat-comparison h3{min-height:34px;margin:0 0 7px;padding-bottom:5px;border-bottom:1px solid #79572f;color:#2b190b;font:800 14px var(--font-medieval);text-transform:uppercase}
.equipment-current-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(110px,34%);gap:8px;min-height:0}
.equipment-stat-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 8px;max-height:245px;overflow-y:auto;overscroll-behavior:contain}
.equipment-stat-grid>div,.equipment-compare-row{display:grid;grid-template-columns:minmax(78px,1fr) auto;align-items:center;gap:7px;min-height:31px;padding:3px 5px;border-bottom:1px solid #92714366;color:#2b1a0d}
.equipment-stat-grid>div b{color:#2b1a0d;text-align:right;font-variant-numeric:tabular-nums}
.equipment-preview-art{display:grid!important;place-items:center!important;min-height:150px;border:2px solid var(--rarity);background:#d7bb7e88;box-shadow:inset 0 0 18px #fff2c288}
.equipment-preview-art img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 4px 4px #0008)}.equipment-preview-art i{font-size:82px;font-style:normal}
.equipment-compare-row{grid-template-columns:minmax(70px,1fr) auto minmax(52px,auto)!important}
.equipment-compare-row em{font-style:normal;font-weight:950;text-align:right;font-variant-numeric:tabular-nums}.equipment-compare-row.up em{color:#16732c}.equipment-compare-row.down em{color:#b11f1f}.equipment-compare-row.same em{color:#685c4a}
.shared-equipment-manager .hero-manager-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;max-height:clamp(280px,46vh,490px);overflow-y:auto;padding:3px;align-content:start}
.shared-equipment-manager .hero-manager-piece{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:0;padding:2px!important;grid-template-rows:1fr;overflow:hidden}
.shared-equipment-manager .hero-manager-piece-art{width:100%;height:100%;display:grid;place-items:center}.shared-equipment-manager .hero-manager-piece-art img{width:94%;height:94%;object-fit:contain}.shared-equipment-manager .hero-manager-piece-art i{font-size:clamp(25px,4vw,48px)}
.hero-manager-piece.preview{outline:3px solid #fff1a0;outline-offset:-5px;box-shadow:inset 0 0 0 3px #24160b,0 0 13px 3px var(--rarity)!important;filter:brightness(1.08)}
.hero-manager-equipped-flag{position:absolute;z-index:3;top:2px;right:2px;width:20px;height:20px;display:grid;place-items:center;border:1px solid #f6dfa2;border-radius:50%;background:#20160ee8;color:#ffe38b;font:950 11px var(--font-ui);box-shadow:0 1px 4px #0009}
.equipment-manager-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}.equipment-manager-actions:empty{display:none}.equipment-manager-actions .btn{width:100%;min-width:0;margin:0!important}.equipment-manager-actions .btn:only-child{grid-column:1/-1}
.tw-modal .shared-equipment-manager button.hero-manager-slot{background-color:#fff!important;background-image:url('../assets/estilos/fondouno.avif')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.tw-modal .shared-equipment-manager button.hero-manager-slot.on{background-color:#fff!important;background-image:url('../assets/estilos/fondouno.avif')!important}
/* En el inventario, la rareza manda: fondo oscuro para no competir con el sprite. */
.tw-modal .shared-equipment-manager button.hero-manager-piece,
.tw-modal .shared-equipment-manager button.hero-manager-piece.preview,
.tw-modal .shared-equipment-manager button.hero-manager-piece.equipped{
    background-color:#030405!important;
    background-image:none!important;
    border-color:var(--rarity)!important;
}
#screen[data-screen="heroe"] .hero-loadout-slots .hero-equipment-summary-item{background-color:#fff!important;background-image:url('../assets/estilos/fondouno.avif')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.shared-equipment-manager .hero-manager-inventory{background-color:#fff!important;background-image:url('../assets/estilos/desierto.avif')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.shared-equipment-manager .hero-manager-inventory>header{padding:7px 9px;border:1px solid #4d3019;background:rgba(241,222,178,.9);box-shadow:inset 0 0 0 1px rgba(255,246,215,.7)}
.shared-equipment-manager .hero-manager-inventory>header h3,.shared-equipment-manager .hero-manager-inventory>header small,.shared-equipment-manager .hero-manager-current,.shared-equipment-manager .hero-manager-current b{color:#241508!important;text-shadow:0 1px #fff0c1!important}
@media(max-width:760px){
    .shared-equipment-manager{min-height:0;grid-template-rows:auto auto minmax(260px,1fr)!important;padding:5px}
    .equipment-manager-main{grid-template-columns:minmax(118px,42%) minmax(0,58%);gap:6px}
    .equipment-manager-main>.hero-manager-slots{gap:4px}
    .equipment-manager-main .hero-manager-slot{padding:2px!important}
    .equipment-manager-main .hero-manager-slot>img,.equipment-manager-main .hero-manager-slot>i{width:82%!important;height:82%!important;font-size:27px}
    .equipment-stat-comparison{grid-template-columns:1fr;padding:5px;min-height:0}
    .equipment-current-panel{display:none!important}
    .equipment-equip-prefix{display:none}
    .equipment-stat-comparison h3{min-height:0;font-size:12px;white-space:normal}
    .equipment-stat-comparison>div{padding:5px}
    .equipment-future-panel .equipment-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:235px;overflow-y:auto}
    .equipment-stat-grid>div,.equipment-compare-row{grid-template-columns:minmax(0,1fr) auto!important;gap:3px;min-height:29px;padding:2px 3px;font-size:9px}
    .equipment-compare-row em{grid-column:1/-1;font-size:8px}
    .shared-equipment-manager .hero-manager-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-height:52vh}
    .hero-manager-equipped-flag{width:17px;height:17px;font-size:9px}
    .shared-equipment-manager .hero-manager-inventory{padding:6px}
    .shared-equipment-manager .hero-manager-inventory>header{margin-bottom:5px;padding:5px 7px}
    .shared-equipment-manager .hero-manager-inventory>header h3{font-size:13px}
    .equipment-manager-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.equipment-manager-actions .btn{min-width:0;padding:6px 4px;font-size:9px}
}
#screen[data-screen="heroe"] .hero-upgrade-actions>.btn,
#screen[data-screen="heroe"] .hero-equipment-summary-item{
    border-color:#5a3d20!important;
    background-color:#d3ad68!important;
    background-image:url('../assets/estilos/pruebafondouno.avif')!important;
    background-position:center!important;
    background-size:cover!important;
    color:#25170a!important;
}

/* Encabezados legibles sobre la ilustración de arena. */
#screen[data-screen="heroe"] .hero-affinity-banner,
#screen[data-screen="heroe"] .hero-stat-panel>.sec-h,
#screen[data-screen="heroe"] .hero-skill-summary>.hero-skill-heading{
    box-sizing:border-box;
    min-height:34px;
    padding:7px 10px!important;
    border:1px solid #4d321a!important;
    background:linear-gradient(180deg,rgba(190,145,82,.97),rgba(139,94,48,.97))!important;
    box-shadow:inset 0 0 0 1px rgba(244,210,148,.38),0 2px 4px rgba(45,25,9,.25)!important;
    color:#211308!important;
    text-shadow:0 1px rgba(244,214,160,.35)!important;
}
#screen[data-screen="heroe"] .hero-affinity-banner{
    display:flex!important;
    align-items:center;
    justify-content:flex-start!important;
    gap:8px!important;
    white-space:nowrap;
}
#screen[data-screen="heroe"] .hero-stat-panel>.sec-h,
#screen[data-screen="heroe"] .hero-skill-summary>.hero-skill-heading{
    margin:-5px -5px 10px!important;
    font-size:15px!important;
    letter-spacing:.035em;
}
@media(max-width:760px){
    #screen[data-screen="heroe"] .hero-affinity-banner{width:100%;white-space:normal}
}

/* Círculo de Adiestramiento: ficha compacta y jerarquía de Héroes. */
#screen[data-screen="entrenamiento-heroe"] .scr-head{
    min-height:58px!important;
    background:#0d0d0f!important;
    border-bottom:2px solid #8e672d!important;
}
#screen[data-screen="entrenamiento-heroe"] .scr-head h2{
    color:#efbd42!important;
    font:800 clamp(22px,3vw,34px) var(--font-medieval)!important;
    letter-spacing:.055em;
    text-shadow:0 2px #000!important;
}
#screen[data-screen="entrenamiento-heroe"] .scr-body{background:#cba76a url('../assets/estilos/pruebafondouno.avif') center/cover!important}
#screen[data-screen="entrenamiento-heroe"] .training-hero-layout{max-width:1040px;grid-template-columns:minmax(210px,.68fr) minmax(360px,1.32fr);gap:12px}
#screen[data-screen="entrenamiento-heroe"] .training-hero-portrait{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:4px!important;overflow:hidden;border-top:3px solid var(--rarity);box-shadow:0 0 13px color-mix(in srgb,var(--rarity) 70%,transparent),inset 0 1px #fff1c7}
.training-portrait-art{display:grid;place-items:center;min-height:0;flex:1;padding:2px;background:#b89865}
#screen[data-screen="entrenamiento-heroe"] .training-portrait-art img{width:100%;height:100%;max-height:390px;aspect-ratio:auto;object-fit:contain;border:2px solid var(--rarity);background:radial-gradient(circle,#d9c28e,#9d8054);box-shadow:0 0 8px var(--rarity),0 0 20px color-mix(in srgb,var(--rarity) 82%,transparent)}
.training-hero-caption{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 9px;padding:8px 10px;border-top:1px solid #4e351c;background:linear-gradient(#76512e,#3d2817);color:#f7e4b3;text-align:left}
.training-hero-caption b{font:800 20px var(--font-medieval)!important}.training-hero-caption>span{grid-column:1;color:#f0d59c;font-size:12px;font-weight:800}.training-hero-caption small{grid-column:2;grid-row:1/3;padding:4px 7px;border:1px solid color-mix(in srgb,var(--rarity) 70%,#fff);background:var(--rarity)!important;color:#fff!important;text-shadow:0 1px #000;text-transform:uppercase;box-shadow:0 0 7px var(--rarity),0 0 14px color-mix(in srgb,var(--rarity) 72%,transparent)}
#screen[data-screen="entrenamiento-heroe"] .training-skill-panel{padding:14px;gap:12px}
.training-skill-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid #5b3d20;background:linear-gradient(#c49352,#8d5f32)}
.training-skill-heading>.sec-h{margin:0!important;color:#241407!important;font-size:clamp(19px,2vw,26px)!important;line-height:1.1}
.training-skill-heading .training-stars{flex:0 0 auto;padding:5px 8px;border-color:#4c331c}
.training-skill-heading .training-stars span{font-size:25px}
#screen[data-screen="entrenamiento-heroe"] .training-skill-panel>p{font-size:16px}
.training-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.training-actions .btn{width:100%;min-height:40px}.training-actions .btn span{font-size:16px;vertical-align:-1px}
@media(max-width:650px){
    #screen[data-screen="entrenamiento-heroe"] .scr-head{min-height:50px!important}
    #screen[data-screen="entrenamiento-heroe"] .scr-head h2{font-size:20px!important}
    #screen[data-screen="entrenamiento-heroe"] .training-hero-layout{grid-template-columns:1fr;gap:8px}
    #screen[data-screen="entrenamiento-heroe"] .training-hero-portrait{display:grid;grid-template-columns:minmax(110px,42%) 1fr;align-items:stretch}
    #screen[data-screen="entrenamiento-heroe"] .training-portrait-art{padding:1px}
    #screen[data-screen="entrenamiento-heroe"] .training-portrait-art img{max-height:210px}
    .training-hero-caption{border-top:0;border-left:1px solid #4e351c;align-content:center;grid-template-columns:1fr;padding:9px}
    .training-hero-caption b{font-size:17px!important}.training-hero-caption>span,.training-hero-caption small{grid-column:1;grid-row:auto}.training-hero-caption small{justify-self:start}
    #screen[data-screen="entrenamiento-heroe"] .training-skill-panel{padding:9px}
    .training-skill-heading{align-items:flex-start;flex-direction:column;padding:8px}
    .training-skill-heading .training-stars{width:100%;box-sizing:border-box;justify-content:center}
    .training-skill-heading .training-stars span{font-size:27px}
    #screen[data-screen="entrenamiento-heroe"] .training-skill-panel>p{font-size:14px}
    .training-effect-grid{gap:5px}.training-effect-grid>div{padding:7px}.training-effect-grid i{font-size:17px}
    .training-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}

/* Cabecera heroica compartida en los sistemas principales. */
#screen:is([data-screen="eventos"],[data-screen="inventario"],[data-screen="mensajes"],[data-screen="clanes"],[data-screen="investigacion"],[data-screen="formaciones"],[data-screen="ranking"],[data-screen="ejercito"],[data-screen="opciones"],[data-screen="guia"]) .scr-head{
    min-height:54px!important;
    padding:2px 16px!important;
    border-bottom:2px solid #8c681f!important;
    background:#0b0b0d!important;
    box-shadow:inset 0 1px #2b251b,0 3px 7px #0007!important;
}
#screen:is([data-screen="eventos"],[data-screen="inventario"],[data-screen="mensajes"],[data-screen="clanes"],[data-screen="investigacion"],[data-screen="formaciones"],[data-screen="ranking"],[data-screen="ejercito"],[data-screen="opciones"],[data-screen="guia"]) .scr-head h2{
    color:#e9b936!important;
    font:800 clamp(22px,3vw,34px) var(--font-medieval)!important;
    letter-spacing:.065em!important;
    text-shadow:0 2px #000!important;
    text-transform:uppercase;
}
#screen:is([data-screen="eventos"],[data-screen="inventario"],[data-screen="mensajes"],[data-screen="clanes"],[data-screen="investigacion"],[data-screen="formaciones"],[data-screen="ranking"],[data-screen="ejercito"],[data-screen="opciones"],[data-screen="guia"]) .scr-close{
    width:42px!important;height:42px!important;border-radius:50%!important;
    color:#080502!important;border:1px solid #81570b!important;
    background:linear-gradient(145deg,#fff1a6,#f4c83f 52%,#c88a0a)!important;
    box-shadow:inset 0 1px #fff9d9,inset 0 -2px #8b5908,0 2px 7px #0008!important;
}

/* Eventos: navegación compacta con el mismo metal de las categorías de Bolsa. */
#screen[data-screen="eventos"] .scr-tabs,
#screen[data-screen="eventos"] .event-tab-list{
    display:flex!important;align-items:stretch;justify-content:flex-start!important;gap:7px!important;
    padding:7px 8px!important;overflow-x:auto;scrollbar-width:thin;
    background:linear-gradient(180deg,#765943,#513c2f)!important;
}
#screen[data-screen="eventos"] .scr-tabs button,
#screen[data-screen="eventos"] .event-tab-button{
    flex:0 0 auto!important;width:auto!important;min-width:104px!important;min-height:36px!important;
    padding:7px 13px!important;border:1px solid #59432d!important;border-radius:3px!important;
    background:linear-gradient(#e3c493,#ad8963)!important;color:#21150b!important;
    box-shadow:inset 0 1px #fff1c8,inset 0 -2px #6d4c31,0 2px 4px #0005!important;
    font:800 12px Arial,sans-serif!important;white-space:nowrap!important;
}
#screen[data-screen="eventos"] .scr-tabs button.on,
#screen[data-screen="eventos"] .event-tab-button.on{
    background:linear-gradient(#f6d56d,#c48a22)!important;border-color:#895d15!important;color:#160d04!important;
}

/* Todos / Altar: botones metálicos compactos y sin pictogramas. */
#screen[data-screen="heroes"] .scr-tabs{gap:7px!important;padding:7px 10px!important;background:linear-gradient(#72533e,#4c372b)!important}
#screen[data-screen="heroes"] .scr-tabs button{
    min-width:112px;min-height:37px;padding:7px 16px!important;border:1px solid #59432d!important;border-radius:3px!important;
    background:linear-gradient(#d9bb8e,#a78360)!important;color:#24170b!important;
    box-shadow:inset 0 1px #fff0c4,inset 0 -2px #684a32,0 2px 4px #0005!important;
    font:800 12px Arial,sans-serif!important;
}
#screen[data-screen="heroes"] .scr-tabs button.on{background:linear-gradient(#f2d16f,#bd8320)!important;border-color:#855a16!important;color:#160d04!important}
#screen[data-screen="heroes"] .hero-info-action{border-color:#4b3018!important;background:linear-gradient(#76502d,#3b2616)!important;color:#f5dfaa!important}
@media(max-width:600px){
    #screen:is([data-screen="eventos"],[data-screen="inventario"],[data-screen="mensajes"],[data-screen="clanes"],[data-screen="investigacion"],[data-screen="formaciones"],[data-screen="ranking"],[data-screen="ejercito"],[data-screen="opciones"],[data-screen="guia"]) .scr-head{min-height:48px!important;padding-inline:8px!important}
    #screen:is([data-screen="eventos"],[data-screen="inventario"],[data-screen="mensajes"],[data-screen="clanes"],[data-screen="investigacion"],[data-screen="formaciones"],[data-screen="ranking"],[data-screen="ejercito"],[data-screen="opciones"],[data-screen="guia"]) .scr-head h2{font-size:20px!important}
    #screen[data-screen="eventos"] .scr-tabs button,#screen[data-screen="eventos"] .event-tab-button{min-width:88px!important;padding-inline:10px!important;font-size:11px!important}
}

/* Ajustes finales de Héroes y Forja (mantener al final para prevalecer sobre
   las variantes históricas de estas pantallas). */
#screen[data-screen="heroe"] .hero-upgrade-shell{width:100%!important;max-width:1450px!important;margin-inline:auto!important;box-sizing:border-box}
#screen[data-screen="heroes"] .summon-altar{width:100%!important;max-width:1400px!important;margin-inline:auto!important;box-sizing:border-box}
#screen[data-screen="heroes"] .summon-actions{grid-template-columns:repeat(2,minmax(0,600px))!important;justify-content:center!important}
#screen[data-screen="heroes"] .summon-actions .btn{width:100%!important;max-width:600px!important;margin-inline:auto!important}
@media(max-width:430px){#screen[data-screen="heroes"] .summon-actions{grid-template-columns:minmax(0,1fr)!important}}
#screen[data-screen="heroes"] .scr-close,#screen[data-screen="heroe"] .scr-close{width:40px!important;height:40px!important;border-radius:50%!important;color:#080502!important;border:1px solid #81570b!important;background:linear-gradient(145deg,#fff1a6,#f4c83f 52%,#c88a0a)!important;box-shadow:inset 0 1px #fff9d9,inset 0 -2px #8b5908,0 2px 7px #0008!important;text-shadow:none!important}
#screen[data-screen="inventario"] .forge-type-filter{display:flex!important;justify-content:flex-start!important;gap:7px!important;padding:7px 8px!important;overflow-x:auto;background:linear-gradient(180deg,#765943,#513c2f)!important}
#screen[data-screen="inventario"] .forge-type-filter button{flex:0 0 auto!important;width:auto!important;min-width:104px!important;min-height:36px!important;padding:7px 13px!important;border:1px solid #59432d!important;border-radius:3px!important;background:linear-gradient(#e3c493,#ad8963)!important;color:#21150b!important;box-shadow:inset 0 1px #fff1c8,inset 0 -2px #6d4c31,0 2px 4px #0005!important;font:800 12px Arial,sans-serif!important}
#screen[data-screen="inventario"] .forge-type-filter button.on{background:linear-gradient(#f6d56d,#c48a22)!important;border-color:#895d15!important;color:#160d04!important}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs>span{min-height:52px!important;padding:6px 10px!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;column-gap:9px!important}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs i,#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs img{grid-row:1/span 2!important;width:34px!important;height:34px!important;font-size:28px!important;align-self:center;object-fit:contain}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs small{font-size:10px!important;overflow:visible!important;white-space:normal!important}
#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs b{grid-column:3!important;grid-row:1/span 2!important;align-self:center;font-size:12px!important;white-space:nowrap}
#screen[data-screen="inventario"] .forge-gallery-details footer{justify-content:center!important;padding-top:12px!important}
#screen[data-screen="inventario"] .forge-gallery-details footer .btn{min-width:170px!important;width:auto!important}
@media(max-width:600px){#screen[data-screen="inventario"] .forge-type-filter button{min-width:88px!important;padding-inline:10px!important;font-size:11px!important}#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs>span{min-height:48px!important;padding:5px 8px!important;grid-template-columns:34px minmax(0,1fr) auto!important}#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs i,#screen[data-screen="inventario"] .forge-gallery-details .forge-mobile-reqs img{width:30px!important;height:30px!important;font-size:25px!important}}

/* Ficha de receta: requisitos y atributos comparten el espacio al 50 %. */
#screen[data-screen="inventario"] .forge-gallery-info-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#screen[data-screen="inventario"] .forge-gallery-info-columns>section{min-width:0}
#screen[data-screen="inventario"] .forge-gallery-info-columns .forge-gallery-require-title{margin-top:0}
#screen[data-screen="inventario"] .forge-object-attributes{display:grid;gap:5px}
#screen[data-screen="inventario"] .forge-object-attributes>div{min-height:52px;padding:7px 10px;box-sizing:border-box;border:1px solid #2b2d35;background:#090a0f;display:flex;align-items:center;justify-content:space-between;gap:8px}
#screen[data-screen="inventario"] .forge-object-attributes span{color:#aeb6c1;font-size:10px}
#screen[data-screen="inventario"] .forge-object-attributes b{color:#f2d77e;text-align:right}
#screen[data-screen="inventario"] .forge-gallery-details footer{justify-content:center!important}
#screen[data-screen="inventario"] .forge-gallery-details footer .btn{min-width:min(270px,100%)!important}
@media(max-width:700px){#screen[data-screen="inventario"] .forge-gallery-info-columns{grid-template-columns:1fr}}

/* Banco: previsualización equilibrada en dos mitades. */
#screen[data-screen="inventario"] .bank-preview-panel{display:block!important}
#screen[data-screen="inventario"] .bank-preview-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:300px}
#screen[data-screen="inventario"] .bank-preview-visual,#screen[data-screen="inventario"] .bank-preview-data{min-width:0;display:flex;flex-direction:column}
#screen[data-screen="inventario"] .bank-preview-visual{align-items:center}
#screen[data-screen="inventario"] .bank-preview-visual>h3{width:100%;box-sizing:border-box;margin:0 0 8px;padding:5px;border-bottom:1px solid #76552d;color:#f0cf83;font:800 14px var(--font-medieval);text-align:center;text-transform:uppercase}
#screen[data-screen="inventario"] .bank-preview-art{width:min(100%,230px);margin:auto;aspect-ratio:1}
#screen[data-screen="inventario"] .bank-preview-data{gap:8px}
#screen[data-screen="inventario"] .bank-preview-identity{min-height:112px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
#screen[data-screen="inventario"] .bank-preview-identity>b{font-size:clamp(13px,1.3vw,17px);line-height:1.15}
#screen[data-screen="inventario"] .bank-preview-stats{flex:1;display:flex;flex-direction:column}
#screen[data-screen="inventario"] .bank-preview-stats>div{grid-template-columns:minmax(0,1fr) auto auto auto;min-height:38px;box-sizing:border-box}

@media(max-width:600px){
    #screen[data-screen="inventario"] .forge-mobile-head{display:grid!important;grid-template-columns:minmax(105px,.72fr) minmax(205px,1.28fr);align-items:center!important;gap:6px!important;padding:5px 6px!important;margin-bottom:5px!important}
    #screen[data-screen="inventario"] .forge-mobile-head>div:first-child{gap:0}
    #screen[data-screen="inventario"] .forge-mobile-head>div:first-child small{font-size:6px!important;letter-spacing:.8px}
    #screen[data-screen="inventario"] .forge-mobile-head>div:first-child b{font-size:15px!important;line-height:1.05}
    #screen[data-screen="inventario"] .forge-mobile-head .forge-tabs{width:auto!important;padding:3px!important;gap:3px!important}
    #screen[data-screen="inventario"] .forge-mobile-head .forge-tabs button{min-width:0!important;min-height:32px!important;padding:4px 6px!important;font-size:12px!important}
    #screen[data-screen="inventario"] .forge-type-filter{padding:3px!important;margin-bottom:5px!important}
    #screen[data-screen="inventario"] .forge-type-filter button{min-height:32px!important;padding-block:4px!important}
    #screen[data-screen="inventario"] .bank-preview-layout{gap:6px;min-height:245px}
    #screen[data-screen="inventario"] .bank-preview-visual>h3{font-size:11px;margin-bottom:5px}
    #screen[data-screen="inventario"] .bank-preview-art{width:min(100%,170px)}
    #screen[data-screen="inventario"] .bank-preview-identity{min-height:96px;padding:5px 6px}
    #screen[data-screen="inventario"] .bank-preview-identity>b{font-size:11px}
    #screen[data-screen="inventario"] .bank-preview-identity>span,#screen[data-screen="inventario"] .bank-preview-identity small{font-size:9px}
    #screen[data-screen="inventario"] .bank-preview-stats h4{font-size:11px;margin:3px 0}
    #screen[data-screen="inventario"] .bank-preview-stats>div{min-height:34px;padding:4px;font-size:10px;gap:4px}
}
@media(max-width:350px){#screen[data-screen="inventario"] .forge-mobile-head{grid-template-columns:1fr}#screen[data-screen="inventario"] .bank-preview-layout{grid-template-columns:1fr}}

/* Ficha del soberano: equipo alrededor del retrato y datos en una segunda columna. */
#screen[data-screen="perfil"] .profile-top-tabs{display:flex;justify-content:flex-start;gap:4px;margin:0 0 8px;padding:4px;border:1px solid #604429;background:#100d0b}
#screen[data-screen="perfil"] .profile-top-tabs button{min-height:36px;padding:6px 16px;border:1px solid #72583a;background:linear-gradient(#4b3527,#211712);color:#e5d2ae;font-weight:800;cursor:pointer}
#screen[data-screen="perfil"] .profile-top-tabs button.on{border-color:#d4a83e;background:linear-gradient(#c7963e,#67411e);color:#1d1208;box-shadow:inset 0 -3px #e6bd54}
#screen[data-screen="perfil"] .profile-sovereign-grid{display:grid;grid-template-columns:minmax(430px,1.05fr) minmax(380px,.95fr);gap:10px;align-items:stretch}
#screen[data-screen="perfil"] .profile-sovereign-loadout,#screen[data-screen="perfil"] .profile-sovereign-data{min-width:0;padding:10px;border:1px solid #6b4b2d;background:linear-gradient(145deg,#3b251b,#170f0d 55%,#08090b);box-shadow:inset 0 0 0 1px #000,0 5px 15px #0008}
#screen[data-screen="perfil"] .profile-sovereign-loadout{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(150px,1.25fr) minmax(105px,.8fr);gap:7px;align-items:center}
#screen[data-screen="perfil"] .profile-loadout-side{display:grid;gap:6px;align-content:center}
#screen[data-screen="perfil"] .profile-loadout-slot{min-width:0;min-height:62px;padding:5px;border:1px solid var(--rarity);background:linear-gradient(100deg,#e9c568,#a56f2e 72%,#432718);color:#1d1208;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:6px;text-align:left;cursor:pointer;box-shadow:inset 0 1px #ffe7a0,0 2px 5px #0009}
#screen[data-screen="perfil"] .profile-loadout-slot>img,#screen[data-screen="perfil"] .profile-loadout-slot>i{width:44px;height:44px;object-fit:contain;display:grid;place-items:center;background:#07080a;font-size:28px;font-style:normal}
#screen[data-screen="perfil"] .profile-loadout-slot span{min-width:0;display:grid;gap:2px}
#screen[data-screen="perfil"] .profile-loadout-slot small{font-size:10px;color:#38200d!important;font-weight:800}
#screen[data-screen="perfil"] .profile-loadout-slot b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
#screen[data-screen="perfil"] .profile-sovereign-portrait{align-self:stretch;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #715437;background:radial-gradient(circle,#d7b979,#8b6441 58%,#251712 100%)}
#screen[data-screen="perfil"] .profile-sovereign-portrait .perfil-av{width:min(190px,88%);height:auto;aspect-ratio:1;border-radius:0;border:2px solid #b98a37;background:#090a0c}
#screen[data-screen="perfil"] .profile-sovereign-portrait small{color:#f2d48e!important;font:800 12px var(--font-medieval);text-transform:uppercase}
#screen[data-screen="perfil"] .profile-sovereign-data{display:flex;flex-direction:column;gap:8px}
#screen[data-screen="perfil"] .profile-sovereign-data>header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:8px;border-bottom:1px solid #76552d}
#screen[data-screen="perfil"] .profile-sovereign-data h3{margin:0;color:#f0cf83;font:900 23px var(--font-medieval)}
#screen[data-screen="perfil"] .profile-sovereign-data header p{margin:3px 0 0;color:#cdbb9b;font-weight:750}
#screen[data-screen="perfil"] .profile-xp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding:8px;border:1px solid #51402e;background:#090a0d}
#screen[data-screen="perfil"] .profile-xp-row>div>span{display:block;margin-bottom:5px;color:#d9c497;font-size:11px;font-weight:800}
#screen[data-screen="perfil"] .profile-complete-stats{display:grid;gap:4px}
#screen[data-screen="perfil"] .profile-key-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:4px}
#screen[data-screen="perfil"] .profile-key-stats>div{min-width:0;padding:7px 5px;border:1px solid #715333;background:linear-gradient(#caa56a,#8e633e);color:#21150a;text-align:center;display:grid;gap:3px}
#screen[data-screen="perfil"] .profile-key-stats span{font-size:9px;font-weight:800}
#screen[data-screen="perfil"] .profile-key-stats b{overflow:hidden;text-overflow:ellipsis;font-size:12px}
#screen[data-screen="perfil"] .profile-complete-stats>.row{margin:0;padding:5px 7px;border:1px solid #493a2b;background:#090a0d;color:#ddc9a5}
#screen[data-screen="perfil"] .profile-city-panels{display:grid;grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;gap:10px;margin:10px auto 0}
#screen[data-screen="perfil"] .profile-city-panels>.scard{width:100%;max-width:400px;margin:0;box-sizing:border-box}
@media(max-width:900px){#screen[data-screen="perfil"] .profile-sovereign-grid{grid-template-columns:1fr}#screen[data-screen="perfil"] .profile-sovereign-loadout{min-height:360px}}
@media(max-width:600px){
    #screen[data-screen="perfil"] .profile-top-tabs{position:sticky;top:0;z-index:2;margin-bottom:5px;padding:3px}
    #screen[data-screen="perfil"] .profile-top-tabs button{flex:1;min-width:0;min-height:32px;padding:4px 3px;font-size:10px}
    #screen[data-screen="perfil"] .profile-sovereign-loadout{grid-template-columns:minmax(70px,.8fr) minmax(110px,1.2fr) minmax(70px,.8fr);gap:4px;min-height:285px;padding:5px}
    #screen[data-screen="perfil"] .profile-loadout-side{gap:4px}
    #screen[data-screen="perfil"] .profile-loadout-slot{min-height:48px;padding:2px;grid-template-columns:34px minmax(0,1fr);gap:3px}
    #screen[data-screen="perfil"] .profile-loadout-slot>img,#screen[data-screen="perfil"] .profile-loadout-slot>i{width:32px;height:32px;font-size:21px}
    #screen[data-screen="perfil"] .profile-loadout-slot small{font-size:7px}#screen[data-screen="perfil"] .profile-loadout-slot b{font-size:8px}
    #screen[data-screen="perfil"] .profile-sovereign-portrait{min-height:260px}
    #screen[data-screen="perfil"] .profile-sovereign-data{padding:6px}
    #screen[data-screen="perfil"] .profile-sovereign-data>header{min-height:48px;padding:5px}
    #screen[data-screen="perfil"] .profile-sovereign-data h3{font-size:18px}
    #screen[data-screen="perfil"] .profile-sovereign-data header p{font-size:10px}
    #screen[data-screen="perfil"] .profile-xp-row{grid-template-columns:1fr;padding:6px}#screen[data-screen="perfil"] .profile-xp-row .btn{width:100%}
    #screen[data-screen="perfil"] .profile-key-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    #screen[data-screen="perfil"] .profile-city-panels{grid-template-columns:minmax(0,400px)}
}

/* Sobrescritura final: los marcos de slot sustituyen por completo al desierto. */
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot,
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot.on,
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot.empty,
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot.equipped{
    padding:0!important;
    background-color:#030405!important;
    background-image:var(--slot-bg)!important;
    background-position:center!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    border:3px solid var(--rarity)!important;
    box-shadow:inset 0 0 0 2px #080a0c,0 0 7px var(--rarity)!important;
    overflow:hidden!important;
    opacity:1!important;
}
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot.equipped>img{
    position:absolute!important;z-index:1!important;inset:8%!important;width:84%!important;height:84%!important;
    max-width:none!important;max-height:none!important;object-fit:contain!important;
    background:transparent!important;filter:drop-shadow(0 2px 3px #000)!important;
}
html body .tw-modal .shared-equipment-manager .equipment-manager-main button.hero-manager-slot.equipped>i{position:absolute!important;z-index:1!important;inset:9%!important;width:82%!important;height:82%!important;display:grid!important;place-items:center!important;font-size:clamp(30px,5vw,58px)!important;font-style:normal!important;background:transparent!important}
#screen[data-screen="perfil"] .profile-slot-art{
    width:52px;height:52px;display:grid;place-items:center;overflow:hidden;
    background-color:#030405!important;background-image:var(--slot-bg)!important;
    background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
}
#screen[data-screen="perfil"] .profile-slot-art{position:relative}
#screen[data-screen="perfil"] .profile-slot-art>img{position:absolute;inset:5%;width:90%!important;height:90%!important;object-fit:contain!important;background:transparent!important}
#screen[data-screen="perfil"] .profile-slot-art>i{position:absolute;inset:5%;display:grid;place-items:center;font-size:30px;font-style:normal}
@media(max-width:600px){#screen[data-screen="perfil"] .profile-slot-art{width:38px;height:38px}}

/* Tarjeta vertical de slot compartida por soberano y héroes. */
#screen[data-screen="perfil"] .equipment-slot-card,
#screen[data-screen="heroe"] .equipment-slot-card{
    min-width:0!important;display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;justify-items:center!important;
    align-items:center!important;gap:3px!important;text-align:center!important;padding:4px!important;
    border:2px solid var(--rarity)!important;background:#120e0c!important;overflow:hidden!important;
}
#screen[data-screen="perfil"] .equipment-slot-type,
#screen[data-screen="heroe"] .equipment-slot-type{width:100%;color:#dfc691!important;font-size:9px!important;font-weight:900!important;text-align:center;text-transform:uppercase;line-height:1.1}
#screen[data-screen="perfil"] .equipment-slot-art,
#screen[data-screen="heroe"] .equipment-slot-art{position:relative!important;width:min(100%,68px)!important;height:auto!important;aspect-ratio:1!important;display:grid!important;place-items:center!important;background-color:#030405!important;background-image:var(--slot-bg)!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;overflow:hidden!important}
#screen[data-screen="perfil"] .equipment-slot-art>img,#screen[data-screen="heroe"] .equipment-slot-art>img{position:absolute!important;inset:5%!important;width:90%!important;height:90%!important;object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 2px 2px #000)!important}
#screen[data-screen="perfil"] .equipment-slot-art>i,#screen[data-screen="heroe"] .equipment-slot-art>i{position:absolute!important;inset:6%!important;display:grid!important;place-items:center!important;font-size:32px!important;font-style:normal!important}
#screen[data-screen="perfil"] .equipment-slot-meta,#screen[data-screen="heroe"] .equipment-slot-meta{width:100%;min-width:0!important;display:grid!important;gap:1px!important;text-align:center!important}
#screen[data-screen="perfil"] .equipment-slot-meta>b,#screen[data-screen="heroe"] .equipment-slot-meta>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0d07e!important;font-size:9px!important;line-height:1.1;text-shadow:0 1px #000!important}
#screen[data-screen="perfil"] .equipment-slot-meta>small,#screen[data-screen="heroe"] .equipment-slot-meta>small{color:#c8b490!important;font-size:8px!important;line-height:1.1}
#screen[data-screen="heroe"] .hero-loadout-slots{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:5px!important}
#screen[data-screen="heroe"] .hero-loadout-slots .hero-equipment-summary-item{min-height:0!important;aspect-ratio:1!important;padding:3px!important;background-image:none!important}
#screen[data-screen="heroe"] .hero-loadout-slots .equipment-slot-art{width:100%!important;max-width:58px!important}

/* Equipamiento del héroe alrededor de su retrato, como la silueta del soberano. */
#screen[data-screen="heroe"] .hero-loadout.hero-loadout-slots{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,minmax(76px,1fr))!important;gap:5px!important;
    width:100%!important;height:390px!important;max-width:none!important;margin:0!important;
    align-items:stretch!important;overflow:hidden!important;
}
#screen[data-screen="heroe"] .hero-loadout .hero-upgrade-portrait{
    grid-column:3/6;grid-row:2/5;min-width:0;min-height:0;height:auto!important;
    align-self:stretch;overflow:hidden;border-color:#5b3d1d;background:#090a0c;box-shadow:none;
}
#screen[data-screen="heroe"] .hero-loadout .hero-upgrade-portrait img{
    width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;
    object-position:50% 18%!important;
}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item{
    position:relative!important;min-width:0!important;min-height:0!important;height:auto!important;
    aspect-ratio:auto!important;padding:2px!important;overflow:hidden!important;background:#100d0a!important;
    grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;
}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="casco"]{grid-column:3/6;grid-row:1}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="arma"]{grid-column:1/3;grid-row:1}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="armadura"]{grid-column:1/3;grid-row:2}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="escudo"]{grid-column:1/3;grid-row:3}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="accesorio"]{grid-column:1/3;grid-row:4}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="guantes"]{grid-column:6/8;grid-row:1}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="botas"]{grid-column:6/8;grid-row:2}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="cinturon"]{grid-column:6/8;grid-row:3}
#screen[data-screen="heroe"] .hero-loadout .hero-equipment-summary-item[data-hero-slot-manage="montura"]{grid-column:6/8;grid-row:4}
#screen[data-screen="heroe"] .hero-loadout .equipment-slot-art{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100%!important;aspect-ratio:auto!important}
#screen[data-screen="heroe"] .hero-loadout .equipment-slot-art>img{z-index:1!important;inset:2%!important;width:96%!important;height:96%!important}
#screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay{
    position:absolute!important;z-index:4;left:3px;right:3px;bottom:3px;display:grid!important;gap:0!important;
    padding:3px;background:linear-gradient(0deg,#050403f2,#050403c4);pointer-events:none;
    color:#f5d77f!important;text-align:center;text-shadow:0 1px 2px #000;
}
#screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay b,
#screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay small{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit!important;line-height:1.05;
}
#screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay b{font-size:8px!important}
#screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay small{font-size:7px!important}

/* En el soberano la leyenda también queda debajo y siempre por delante del sprite. */
#screen[data-screen="perfil"] .profile-loadout-slot.equipment-slot-card{
    position:relative!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;
}
#screen[data-screen="perfil"] .profile-loadout-slot .equipment-slot-type{display:none!important}
#screen[data-screen="perfil"] .profile-loadout-slot .equipment-slot-art{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:100%!important;aspect-ratio:auto!important}
#screen[data-screen="perfil"] .profile-loadout-slot .equipment-slot-art>img{z-index:1!important;inset:2%!important;width:96%!important;height:96%!important}
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy{
    position:absolute!important;z-index:4;left:3px;right:3px;bottom:3px;width:auto!important;display:grid!important;gap:0!important;
    padding:3px!important;background:linear-gradient(0deg,#050403f2,#050403c4);text-align:center!important;pointer-events:none;
}
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy b,
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy small{display:block!important;color:#f5d77f!important;text-shadow:0 1px 2px #000!important;line-height:1.05!important}
@media(max-width:600px){
    #screen[data-screen="perfil"] .equipment-slot-card,#screen[data-screen="heroe"] .equipment-slot-card{padding:2px!important;gap:2px!important}
    #screen[data-screen="perfil"] .equipment-slot-art,#screen[data-screen="heroe"] .equipment-slot-art{width:min(100%,52px)!important}
    #screen[data-screen="perfil"] .equipment-slot-meta>b,#screen[data-screen="heroe"] .equipment-slot-meta>b{font-size:7px!important}
    #screen[data-screen="heroe"] .hero-loadout.hero-loadout-slots{height:330px!important;grid-template-rows:repeat(4,minmax(60px,1fr))!important;gap:4px!important}
    #screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay{left:2px;right:2px;bottom:2px;padding:2px}
    #screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy{left:2px;right:2px;bottom:2px;padding:2px!important}
    #screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay b{font-size:7px!important}
    #screen[data-screen="heroe"] .hero-loadout .hero-slot-overlay small{font-size:6px!important}
}

/* Silueta central 3x3 y nueve slots distribuidos en el perímetro. */
#screen[data-screen="perfil"] .profile-sovereign-loadout{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,minmax(68px,1fr))!important;gap:7px!important;
    min-width:0!important;min-height:0!important;width:100%!important;height:480px!important;aspect-ratio:auto!important;
    padding:8px!important;align-items:stretch!important;overflow:hidden!important;box-sizing:border-box!important;
}
#screen[data-screen="perfil"] .profile-sovereign-portrait{grid-column:3/6;grid-row:2/5;min-height:0!important;align-self:stretch}
#screen[data-screen="perfil"] .profile-loadout-slot{min-width:0!important;min-height:0!important;height:auto!important;padding:5px!important;grid-template-columns:52px minmax(0,1fr)!important;background:#130e0c!important}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="casco"]{grid-column:3/6;grid-row:1}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="arma"]{grid-column:1/3;grid-row:1}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="armadura"]{grid-column:1/3;grid-row:2}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="escudo"]{grid-column:1/3;grid-row:3}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="accesorio"]{grid-column:1/3;grid-row:4}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="guantes"]{grid-column:6/8;grid-row:1}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="botas"]{grid-column:6/8;grid-row:2}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="cinturon"]{grid-column:6/8;grid-row:3}
#screen[data-screen="perfil"] .profile-loadout-slot[data-profile-slot="montura"]{grid-column:6/8;grid-row:4}
#screen[data-screen="perfil"] .profile-sovereign-portrait .perfil-av{width:min(180px,76%)}
#screen[data-screen="perfil"] .profile-xp-row{padding:5px 7px;align-items:center}
#screen[data-screen="perfil"] .profile-xp-row>div>span{margin-bottom:2px;font-size:9px}
#screen[data-screen="perfil"] .profile-xp-row .btn{min-height:30px;padding-block:4px}
#screen[data-screen="perfil"] .profile-complete-list{overflow:hidden;border:1px solid #775a35;background:linear-gradient(180deg,#ead29a,#caa76d);box-shadow:inset 0 1px #fff1c0;color:#21160c}
#screen[data-screen="perfil"] .profile-complete-list>.row{min-height:31px;margin:0!important;padding:5px 9px!important;border:0!important;border-bottom:1px solid #8c6b3d!important;background:transparent!important;color:#21160c!important;font-weight:750}
#screen[data-screen="perfil"] .profile-complete-list>.row:last-child{border-bottom:0!important}
#screen[data-screen="perfil"] .profile-complete-list>.row>span{color:#21160c!important;text-shadow:0 1px #f9e4b4}
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy small{color:#d6bc8e!important;text-shadow:none!important}
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy b{color:#f2d584!important;text-shadow:0 1px #000!important}
@media(max-width:600px){
    #screen[data-screen="perfil"] .profile-sovereign-loadout{gap:4px!important;padding:4px!important;width:100%!important;height:330px!important;aspect-ratio:auto!important;grid-template-rows:repeat(4,minmax(58px,1fr))!important}
    #screen[data-screen="perfil"] .profile-loadout-slot{padding:2px!important;grid-template-columns:38px minmax(0,1fr)!important}
    #screen[data-screen="perfil"] .profile-slot-copy b{display:none}
    #screen[data-screen="perfil"] .profile-sovereign-portrait .perfil-av{width:min(145px,82%)}
}

/* La tarjeta del perfil reserva toda la celda al sprite; la leyenda es superpuesta. */
#screen[data-screen="perfil"] .profile-loadout-slot.equipment-slot-card{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;padding:4px!important}
#screen[data-screen="perfil"] .profile-loadout-slot .profile-slot-copy{margin:0!important}
@media(max-width:600px){#screen[data-screen="perfil"] .profile-loadout-slot.equipment-slot-card{grid-template-columns:1fr!important;padding:2px!important}#screen[data-screen="perfil"] .profile-slot-copy b{display:block!important}}

/* Rareza y nivel equilibran las dos columnas del contextual de equipo. */
.shared-equipment-manager .equipment-panel-meta{min-height:25px;margin:0 0 5px;padding:2px 5px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid color-mix(in srgb,var(--rarity) 70%,#5e4a31);background:color-mix(in srgb,var(--rarity) 12%,#ead3a0)}
.shared-equipment-manager .equipment-panel-meta>span{padding:2px 7px;border:1px solid var(--rarity);background:color-mix(in srgb,var(--rarity) 24%,#15100d);color:#fff4d2;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;text-shadow:0 1px #000}
.shared-equipment-manager .equipment-panel-meta>b{color:#2b1b0d;font-size:10px;text-transform:uppercase}
@keyframes equipmentRarityPulse{0%,100%{box-shadow:0 0 0 1px var(--rarity),0 0 5px color-mix(in srgb,var(--rarity) 58%,transparent),inset 0 0 5px color-mix(in srgb,var(--rarity) 22%,transparent);filter:brightness(1) drop-shadow(0 0 2px var(--rarity))}50%{box-shadow:0 0 0 2px var(--rarity),0 0 16px color-mix(in srgb,var(--rarity) 95%,transparent),0 0 28px color-mix(in srgb,var(--rarity) 52%,transparent),inset 0 0 11px color-mix(in srgb,var(--rarity) 46%,transparent);filter:brightness(1.12) drop-shadow(0 0 9px var(--rarity))}}
.tw-modal .shared-equipment-manager .hero-manager-slot.equipped,
.tw-modal .shared-equipment-manager .hero-manager-piece.preview,
.tw-modal .shared-equipment-manager .hero-manager-piece.equipped,
.tw-modal .shared-equipment-manager .equipment-preview-art{border-color:var(--rarity)!important;animation:equipmentRarityPulse 1.55s ease-in-out infinite!important}
.tw-modal .shared-equipment-manager .hero-manager-piece.preview{z-index:2}
@media(prefers-reduced-motion:reduce){.tw-modal .shared-equipment-manager .hero-manager-slot.equipped,.tw-modal .shared-equipment-manager .hero-manager-piece.preview,.tw-modal .shared-equipment-manager .hero-manager-piece.equipped,.tw-modal .shared-equipment-manager .equipment-preview-art{animation:none!important;box-shadow:0 0 0 2px var(--rarity),0 0 12px color-mix(in srgb,var(--rarity) 75%,transparent)!important}}

/* Habilidades del soberano: recorrido secuencial y compra desde una ficha explícita. */
#screen[data-screen="habilidades-jugador"] .player-skill-summary{margin-bottom:10px;border-color:#b98a42!important;background:radial-gradient(circle at 50% 0,#4d2d20,#160e0a 72%)!important;color:#f3d58c!important;box-shadow:inset 0 0 20px #0009,0 2px 7px #0007}
#screen[data-screen="habilidades-jugador"] .player-skill-summary small{color:#c7ab7c!important}
.player-skill-inspector{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;align-items:center;margin:0 0 12px;padding:13px;border:1px solid #b88a43;background:linear-gradient(135deg,#2a1711,#43281b 62%,#20130e);box-shadow:inset 0 0 0 2px #0d0806,0 3px 10px #0008;color:#f1dfb9}
.player-skill-inspector-icon{position:relative;display:grid;place-items:center;width:72px;aspect-ratio:1;border:2px solid #d6a443;border-radius:50%;background:radial-gradient(circle,#684329 0 48%,#160e0b 52%);font-size:35px;filter:drop-shadow(0 2px 3px #000)}
.player-skill-inspector-icon small{position:absolute;right:-4px;bottom:-3px;padding:2px 5px;border:1px solid #e4bd68;background:#120c09;color:#ffd36d;font:900 10px/1 Arial}
.player-skill-kicker{color:#d7a84a;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.player-skill-inspector h2{margin:3px 0;color:#ffe19a;font:900 21px/1.05 Georgia,serif;text-transform:uppercase;text-shadow:0 2px #000}
.player-skill-inspector p{margin:4px 0;color:#e2ceb0;font-size:12px}
.player-skill-effect{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;padding-top:7px;border-top:1px solid #87613d;color:#cab491;font-size:11px}
.player-skill-effect b{margin-left:4px;color:#ffca43;font-size:13px}
.player-skill-requirement{color:#f2a58d!important;font-weight:800}
.player-skill-invest{min-width:138px}
#screen[data-screen="habilidades-jugador"] .player-skill-tree{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#screen[data-screen="habilidades-jugador"] .player-skill-branch{padding:9px 8px 12px!important;overflow:hidden;border:1px solid #8e693b!important;background:linear-gradient(155deg,#4a2e20,#20140f)!important;box-shadow:inset 0 0 18px #0008!important}
#screen[data-screen="habilidades-jugador"] .player-skill-branch h3{margin:0 0 6px!important;color:#f2ca6d!important;text-align:center;text-shadow:0 2px #000}
.player-skill-path{position:relative;display:grid;grid-template-columns:1fr 48px 1fr;grid-auto-rows:62px;align-items:center;min-height:310px}
.player-skill-path:before{content:"";position:absolute;top:28px;bottom:28px;left:50%;width:3px;transform:translateX(-50%);background:linear-gradient(#deb85f,#7f5d35 48%,#39271c);box-shadow:0 0 0 1px #0b0705,0 0 8px #d59d3c66}
#screen[data-screen="habilidades-jugador"] .player-skill-node{position:relative;z-index:1;grid-column:2!important;display:grid!important;grid-template:1fr auto/1fr!important;place-items:center;width:52px!important;height:52px!important;min-height:0!important;padding:3px!important;border:2px solid #786142!important;border-radius:50%!important;background:radial-gradient(circle,#493829 0 49%,#17110d 53%)!important;color:#ddcaa5!important;box-shadow:0 0 0 3px #160e0b,0 3px 8px #000!important;cursor:pointer;transition:.15s transform,.15s filter,.15s box-shadow}
#screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(odd){transform:translateX(-22px)}
#screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(even){transform:translateX(22px)}
#screen[data-screen="habilidades-jugador"] .player-skill-node:hover{filter:brightness(1.25)}
#screen[data-screen="habilidades-jugador"] .player-skill-node i{font-size:24px!important;line-height:1!important;filter:none!important}
#screen[data-screen="habilidades-jugador"] .player-skill-node b{position:absolute;top:50%;width:112px;transform:translateY(-50%);overflow:hidden;color:#e6cf9b!important;font-size:10px!important;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px #000}
#screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(odd) b{left:64px;text-align:left}
#screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(even) b{right:64px;text-align:right}
#screen[data-screen="habilidades-jugador"] .player-skill-node em{position:absolute;right:-6px;bottom:-5px;padding:2px 4px;border:1px solid #856d48;background:#17100b;color:#dac898!important;font:900 9px/1 Arial!important}
#screen[data-screen="habilidades-jugador"] .player-skill-node.learned{border-color:#dcac3f!important;background:radial-gradient(circle,#8a5b26,#321d12 55%)!important;box-shadow:0 0 0 3px #160e0b,0 0 11px #e7a52d99!important}
#screen[data-screen="habilidades-jugador"] .player-skill-node.selected{border-color:#fff0a1!important;box-shadow:0 0 0 3px #24150c,0 0 0 6px #d28e20,0 0 18px #ffd258!important}
#screen[data-screen="habilidades-jugador"] .player-skill-node.locked{filter:grayscale(.85) brightness(.58)}
#screen[data-screen="habilidades-jugador"] .player-skill-node.maxed em{background:#72511f;color:#fff1b7!important}
.player-skill-ratios{margin:12px 0;padding:10px;border:1px solid #8f6b3b;background:#1d130f;color:#ead8b7}
.player-skill-ratios h3{margin:0 0 8px;color:#f2c868;font-size:14px;text-transform:uppercase}
.player-skill-ratios ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}
.player-skill-ratios li{display:grid;grid-template-columns:1fr auto;gap:1px 6px;padding:6px;border:1px solid #62482f;background:#302017}
.player-skill-ratios li span{font-size:11px;font-weight:800}.player-skill-ratios li b{color:#ffca48}.player-skill-ratios li small{grid-column:1/-1;color:#c6ae88;font-size:9px}
.player-skill-reset{margin-bottom:10px}
@media(max-width:600px){
    .player-skill-inspector{grid-template-columns:62px minmax(0,1fr);gap:9px;padding:9px}.player-skill-inspector-icon{width:56px;font-size:27px}.player-skill-inspector h2{font-size:17px}.player-skill-inspector .player-skill-invest{grid-column:1/-1;width:100%}
    #screen[data-screen="habilidades-jugador"] .player-skill-tree{grid-template-columns:1fr!important}
    .player-skill-path{min-height:276px;grid-auto-rows:55px}.player-skill-path:before{top:24px;bottom:24px}
    #screen[data-screen="habilidades-jugador"] .player-skill-node{width:47px!important;height:47px!important}
    #screen[data-screen="habilidades-jugador"] .player-skill-node i{font-size:21px!important}
    #screen[data-screen="habilidades-jugador"] .player-skill-node b{width:118px;font-size:10px!important}
    #screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(odd) b{left:59px}#screen[data-screen="habilidades-jugador"] .player-skill-node:nth-child(even) b{right:59px}
    .player-skill-ratios ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}