/* ═══════════════════════════════════════════════
   VARIABLES — colores extraídos del screenshot
═══════════════════════════════════════════════ */
:root {
    /* Fondo de paneles (beige arena cálido) */
    --bg:        #cabf9f;
    --bg-light:  #ddd3a8;
    --bg-mid:    #cabf9f;
    --bg-dark:   #b8aa78;

    /* Cabeceras / barras oscuras (marrón oliva) */
    --hdr:       #524a3c;
    --hdr-light: #9a8858;
    --hdr-dark:  #5a4c28;

    /* Texto dorado (en cabeceras) */
    --gold:      #e6af4d;
    --gold2:     #e6af4d;

    /* Texto normal oscuro */
    --tx:        #1e180a;
    --txl:       #4a3c1c;

    /* Filas de stats (alternadas) */
    --row-a:     #b4ac8f;
    --row-b:     #cabf9f;

    /* Tabs */
    --tab-bar:   #bfb47a;
    --tab-sel:   #7a7248;
    --tab-unsel: #cbc290;

    /* Slots de forge */
    --slot-bg:   #bdb99a;
    --slot-bd:   #908862;

    /* Botones naranjas */
    --orange:    #e87018;
    --orange-h:  #f08830;
    --orange-bd: #b85010;

    /* Bolsa / inventario */
    --bag-hdr:   #8a7c50;
    --bag-hdr2:  #6a5c38;
    --bag-slot:  #c4ba86;
    --bag-bd:    #9e9660;
    --bag-sel:   #f0d040;

    /* Borde general de paneles */
    --bd:        #a09060;
    --bd-dark:   #706040;

    /* Estado */
    --ok:    #3a7c10;
    --fail:  #8a2020;
    --crit:  #c00000;
    --exo:   #6820a8;
    --over:  #a07000;
}

/* ═══════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

body {
    background: #333333;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: clamp(10px, 0.72vw + 8px, 14px);
    color: var(--tx);
    min-height: 100vh;
    padding: 6px 10px;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
}

/* ═══════════════════════════════════════════════
   SELECTOR DE OBJETO (arriba)
═══════════════════════════════════════════════ */
.sel-wrap {
    max-width: 900px;
    margin: 0 auto 4px;
    padding-right: 36px;
}

.dofus-select {
    width: 100%;
    padding: 6px 30px 6px 8px;
    background: #fff;
    border: 1px solid var(--bd-dark);
    border-radius: 3px;
    color: var(--tx);
    font-family: inherit;
    font-size: .88em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M5 7L0 0h10z' fill='%235a4820'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ═══════════════════════════════════════════════
   LAYOUT PRINCIPAL (dos columnas)
═══════════════════════════════════════════════ */
.dofus-app  {
    width: 830px;
    max-width: calc(100vw - 20px);
    margin: 0 auto;
    position: relative;
}

.app-tools {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
}

.app-settings-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #6d654f;
    background: linear-gradient(180deg, #ece4bf 0%, #d8cea8 100%);
    color: #514938;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.app-settings-btn[aria-expanded="true"] {
    background: linear-gradient(180deg, #d8cea8 0%, #ece4bf 100%);
}

.settings-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(24, 20, 12, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 80;
}

.settings-modal-backdrop[hidden] {
    display: none !important;
}

.settings-modal {
    width: min(360px, calc(100vw - 32px));
    background: var(--bg);
    border: 3px solid #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

.settings-modal-header {
    background: var(--hdr);
    padding: 8px 12px;
    border-bottom: 1px solid var(--hdr-dark);
}

.settings-modal-title {
    color: var(--gold);
    font-size: .98em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.settings-section {
    padding: 12px;
    background: var(--bg);
}

.settings-section-title {
    color: #4e4431;
    font-size: .88em;
    font-weight: bold;
    margin-bottom: 10px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #494434;
}

.settings-range-label {
    display: block;
    color: #4e4431;
    font-size: .78em;
    margin-bottom: 6px;
}

.audio-volume-range {
    width: 100%;
    accent-color: #5f594b;
    cursor: pointer;
}

.settings-modal-actions {
    padding: 10px 12px 12px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.settings-version {
    margin-right: auto;
    font-size: .72em;
    color: #9a8858;
    letter-spacing: .03em;
}

.settings-close-btn {
    min-width: 88px;
    padding: 6px 12px;
    border: 1px solid #6d654f;
    background: linear-gradient(180deg, #ece4bf 0%, #d8cea8 100%);
    color: #514938;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.settings-secondary-btn {
    background: linear-gradient(180deg, #d8d1b3 0%, #c3ba97 100%);
}

.acquire-copy {
    color: #4f4635;
    line-height: 1.4;
}

.acquire-actions {
    gap: 8px;
}

.dofus-layout {
    display: flex;
    gap: 38px;
    align-items: flex-start;
    margin-bottom: 4px;
}

.col-left  { flex: 0 0 380px; display: flex; flex-direction: column; align-self: stretch; }
.col-right { flex: 1; min-width: 0; }

@media (max-width: 720px) {
    .dofus-layout { flex-direction: column; }
    .col-left  { flex: none; width: 100%; }
    .col-right { width: 100%; }
    .bag-panel { width: 100%; box-sizing: border-box; }
    .bag-grid-area { width: 100%; }
    .bag-grid {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ═══════════════════════════════════════════════
   TOOLTIP DEL OBJETO (panel izquierdo superior)
═══════════════════════════════════════════════ */
.dtooltip {
    flex: 1;                /* ocupa todo el espacio vertical disponible */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 3px solid #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
    margin-bottom: 20px;
}

/* Cabecera oscura: nombre + nivel */
.dtt-header {
    background: var(--hdr);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid var(--hdr-dark);
}

.dtt-name {
    color: var(--gold);
    font-size: .97em;
    font-weight: bold;
}

.dtt-level {
    color: #fff;
    font-size: .88em;
    font-weight: bold;
    white-space: nowrap;
}

/* Barra de tabs — cabecera de la columna derecha */
.dtt-subbar {
    background: #dad6b9;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.dtt-tabs {
    display: flex;
    gap: 3px;
}

.dtt-tab {
    padding: 3px 12px;
    font-size: .78em;
    border: 1px solid #464034;
    border-bottom: none;                   /* se fusiona con el contenido */
    background: #464034;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: inherit;
    transition: background .12s, color .12s;
    position: relative;
    top: 2px;                              /* sube 2px para cubrir el borde inferior */
}


.dtt-tab.active {
    background: #b4ac8f;               /* mismo fondo que el contenido → fusión visual */
    color: #504932;
    border-color: #b4ac8f;
    font-weight: bold;
    z-index: 1;
}

/* Barra de relleno ultra delgada */
.dtt-fill-track {
    height: 5px;
    background: rgba(0,0,0,.15);
    border-bottom: 1px solid rgba(0,0,0,.12);
}
.dtt-fill-bar {
    height: 100%;
    transition: width .4s, background .3s;
}

/* Cuerpo: imagen izquierda + stats derecha */
.dtt-body {
    display: flex;
    align-items: stretch;
    flex: 1;           /* ocupa el espacio restante tras header y subbar */
    overflow: hidden;
}

/* Columna de imagen — ocupa todo el alto del cuerpo */
.dtt-img-col {
    width: 110px;
    flex-shrink: 0;
    background: var(--bg-mid);
    border-right: 1px solid rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 4px;
}

.dtt-img {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.dtt-img-foot {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.dtt-foot-ico {
    font-size: .95em;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.dtt-foot-ico:hover { opacity: 1; }

/* Columna derecha: contiene tabs + stats */
.dtt-right-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Columna de stats — altura fija = 6 filas, scroll si hay más */
.dtt-stats-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--bg-mid);
}

.dtt-stats-col {
    flex: 1;
    height: 220px;       /* 6 × ~29px por fila */
    min-height: 174px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dtt-stats-col::-webkit-scrollbar { width: 0; height: 0; display: none; }

.dtt-stats-list { display: flex; flex-direction: column; }

.dtt-scrollbar {
    width: 14px;
    margin: 0px 0px 10px 0;
    background: #bdbb9d;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.dtt-scroll-btn {
    width: 100%;
    height: 18px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    cursor: pointer;
    color: #6d654f;
    transition: background .1s;
    z-index: 1;
    user-select: none;
}

.dtt-scroll-btn:hover { background: rgba(255,255,255,.18); }

.dtt-scroll-track {
    position: relative;
    width: 100%;
    flex: 1;
    padding: 3px;
    z-index: 1;
}

.dtt-scroll-track::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    border-radius: 3px;
    background: #bdbb9d;
}

.dtt-scroll-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    min-height: 28px;
    border-radius: 3px;
    background: #524a3d;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.16);
    cursor: grab;
}

.dtt-scroll-thumb:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════
   FILAS DE STATS (estilo tooltip Dofus 1.29)
═══════════════════════════════════════════════ */
.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background .1s;
    padding-right: 2px;
}

.stat-row:nth-child(odd)  { background: var(--row-a); }
.stat-row:nth-child(even) { background: var(--row-b); }

.stat-row.exo-row  { /* sin fondo especial */ }

/* Texto: "+25 Fuerza" — verde como en Dofus */
.stat-text {
    font-size: .90em;
    color: #247301;
    flex: 1;
    min-width: 0;
    padding-right: 10px;
    font-weight: normal;
    -webkit-text-stroke: 0.15px currentColor;
    text-shadow: 0.20px 0 currentColor;
}

/* Tab condiciones: stats en gris azulado */
.stat-text.cond-text {
    color: #3a5080;
}

/* over: mismo peso visual, sin negrita */
.stat-text.over-val { font-weight: normal; }

/* exo: texto azul */
.exo-row .stat-text { color: #2060c8; }

/* Icono circular a la derecha */
.stat-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72em;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
}

/* over-tag eliminado — over solo se indica con negrita */

/* Icono PNG de stat a la derecha de la fila */
img.stat-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* ═══════════════════════════════════════════════
   FORGE PANEL (debajo del tooltip)
═══════════════════════════════════════════════ */
.forge-panel {
    background: #fff;
    border: 3px solid #fff;
    border-radius: 16px 16px 0px 0px;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0,0,0,.35);
}

/* Fila de slots */
.forge-slots-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px 4px;
    background: var(--bg);
    border-radius: 16px;
}

.forge-slot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 170px;
    flex: 0 0 170px;
}

/* Slot cuadrado (objeto o runa) */
.forge-slot {
    width: 64px;
    height: 64px;
    background: #bfb99a;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: filter .10s;

    /* mismo estilo hundido que los slots del bag */
    border-top: 2px solid #9b957a;
	border-left: 2px solid #9e9a7e;
	border-bottom: 2px solid #c6c3a7;
	border-right: 2px solid #c6c3a7;
	/* box-shadow: inset 2px 2px 4px rgba(0,0,0,.22), inset -1px -1px 2px rgba(255,255,255,.30); */
}

.forge-slot.drag-hover {
    outline: 2px solid #f4e19b;
    outline-offset: -2px;
}

.forge-slot-ico {
    font-size: 1.9em;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.forge-rune-count {
    position: absolute;
    top: 2px;
    left: 3px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .62em;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 2px;
    min-width: 16px;
    text-align: center;
}

.forge-slot-lbl {
    font-size: .90em;
    font-weight: bold;
    color: #494434;
    text-align: center;
    width: 100%;
    max-width: none;
    white-space: nowrap;
}

/* Signo + grande */
.forge-plus {
    width: 54px;
    height: 54px;
    align-self: center;
    margin-bottom: 22px;
    padding: 0;
    flex-shrink: 0;
    background: url("./imgs/ui/forge-plus.png") center / contain no-repeat;
}

/* Línea compacta de probabilidad debajo de los slots */
.forge-info-line {
    padding: 3px 12px;
    font-size: .76em;
    color: var(--txl);
    background: rgba(0,0,0,.06);
    border-top: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
    line-height: 1.4;
    min-height: 22px;
}

/* Fila runa de firma */
.forge-sig-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    background: #524a3c;
    border-top: 3px solid #fff;
    border-radius: 16px 16px 0 0;
}

.forge-sig-slot {
    width: 22px;
    height: 22px;
    background: #b8b090;
    border: 1px solid var(--slot-bd);
    border-radius: 2px;
    flex-shrink: 0;
}

.forge-sig-txt {
    font-size: .80em;
    color: #fff;
    flex: 1;
}

/* Badges */
.badge-sink {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .68em;
    font-weight: bold;
    background: rgba(104,32,168,.18);
    color: var(--exo);
}
.badge-over {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .68em;
    font-weight: bold;
    background: rgba(200,152,10,.22);
    color: #8a6000;
}

/* BOTONES NARANJA */
.forge-btns {
    display: flex;
    gap: 12px;
    background: none;
    padding: 0;
}

.forge-btn {
    flex: 1;
    padding: 4px 8px;
    background: #fe6c0f;
    border-top: none;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    border-radius: 0px 0px 16px 16px;
    color: #fff;
    font-size: .90em;
    cursor: pointer;
    letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    transition: filter .12s;
    font-family: inherit;
    box-shadow: 0 4px 8px rgba(0,0,0,.35);
}


.forge-btn:disabled {
    cursor: not-allowed;
}

/* Sin variante de color para exo — siempre naranja */

/* ═══════════════════════════════════════════════
   BARRA DE SESIÓN
═══════════════════════════════════════════════ */
.session-row {
    background: var(--bg-mid);
    border: 1px solid var(--bd);
    border-radius: 5px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-reset {
    padding: 4px 10px;
    background: linear-gradient(180deg, var(--bg-light), var(--bg-mid));
    border: 1px solid var(--bd-dark);
    border-radius: 3px;
    color: var(--tx);
    font-size: .78em;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background .12s;
}
.session-reset:hover:not(:disabled) { background: var(--bg); }
.session-reset:disabled { opacity: .45; cursor: not-allowed; }

.session-stats {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: space-around;
}

.ss-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ss-num {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--tx);
    line-height: 1.2;
}
.ss-ok   { color: var(--ok); }
.ss-fail { color: var(--fail); }
.ss-crit { color: var(--crit); }
.ss-over { color: #a07000; }
.ss-rate { color: var(--hdr); }

.ss-lbl {
    font-size: .59em;
    color: var(--txl);
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════
   BOLSA / INVENTARIO (columna derecha)
═══════════════════════════════════════════════ */
.bag-panel {
    background: #d4ceac;
    border: 3px solid #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 470px;
    box-sizing: border-box;
    box-shadow: 2px 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Barra de título */
.bag-title-bar {
    background: var(--hdr);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid var(--hdr-dark);
}

.bag-title {
    color: #fff;
    font-size: .83em;
    font-weight: bold;
}

.bag-close {
    background: linear-gradient(180deg, #f8853a, #e97a26);
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Toolbar de iconos de categoría */
.bag-toolbar {
    background: #d4ceac;
    display: flex;
    gap: 3px;
    padding: 3px 6px;
}

.bag-icon-btn {
    width: 34px;
    height: 30px;
    background: #fe6c0f;
    border: 2px solid #7e5e3c;
    border-radius: 6px;
    cursor: pointer;
    font-size: .90em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    font-family: inherit;
    padding: 0;
}

.bag-icon-btn img.bag-cat-img {
    width: 36px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}

.bag-icon-btn.active {
    background: #5a4820;
    border-color: #5a4820;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

/* Dropdown tipo */
.bag-filter-row {
    padding: 6px 12px 0px 12px;
    background: #d5cfad;
}

.bag-category-copy {
    min-height: 24px;
    display: flex;
    align-items: center;
    color: #5d5441;
    font-size: .8em;
}

.bag-type-sel {
    width: 100%;
    padding: 4px 24px 4px 6px;
    background: #fff;
    border: 1px solid var(--bd-dark);
    border-radius: 3px;
    color: var(--tx);
    font-size: .80em;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M5 7L0 0h10z' fill='%235a4820'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

/* Área del grid */
.bag-grid-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #d4ceac;
    border-bottom: 1px solid var(--bd);
    position: relative;
}

/* Grid de slots — 6 columnas, ocupa todo el ancho disponible */
.bag-grid {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    aspect-ratio: unset;
    row-gap: 4px;
    column-gap: 4px;
    padding: 0 10px;
    align-content: start;
    width: 100%;
    max-height: 350px;
    overflow-y: auto;
    background: #d4ceac;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 12px;
    box-sizing: border-box;
}

.bag-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Scrollbar lateral */
.bag-scrollbar {
    width: 14px;
    margin: 10px 0 0 0;
    background: #bdbb9d;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.bag-scroll-btn {
    width: 100%;
    height: 18px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    cursor: pointer;
    color: #6d654f;
    transition: background .1s;
    z-index: 1;
    user-select: none;
}
.bag-scroll-btn:hover { background: rgba(255,255,255,.18); }

.bag-scroll-track {
    position: relative;
    width: 100%;
    flex: 1;
    padding: 3px;
    z-index: 1;
}

.bag-scroll-track::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    border-radius: 3px;
    background: #bdbb9d;
}

.bag-scroll-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    min-height: 28px;
    border-radius: 3px;
    background: #524a3d;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.16);
    cursor: grab;
}

.bag-scroll-thumb:active {
    cursor: grabbing;
}

/* Footer de la bolsa */
.bag-footer {
    background: #d4ceac;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-top: 1px solid var(--bd-dark);
}

.bag-weight-bar {
    flex: 1;
    height: 12px;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--bd-dark);
    border-radius: 6px;
    overflow: hidden;
}

.bag-weight-fill {
    height: 100%;
    background: linear-gradient(90deg, #e87018, #f09030);
    border-radius: 6px;
}

.bag-kamas {
    font-size: .77em;
    font-weight: bold;
    color: var(--tx);
    white-space: nowrap;
}

.bag-kamas-icon { font-size: .85em; }

/* ═══════════════════════════════════════════════
   SLOTS DE INVENTARIO (runas)
═══════════════════════════════════════════════ */
.rcard {
	background: #c0b799;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: filter .10s;
	position: relative;
	user-select: none;
	min-height: 0;
	overflow: hidden;
	border-top: 2px solid #9b957a;
	border-left: 2px solid #9e9a7e;
	border-bottom: 2px solid #c6c3a7;
	border-right: 2px solid #c6c3a7;
	/* box-shadow: inset 2px 2px 4px rgba(0,0,0,.22), inset -1px -1px 2px rgba(255,255,255,.30); */
}

.rcard.sel {
    outline: 2px solid #f4e19b;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px #6b5a2d;
}

.rcard.is-dragging {
    opacity: .55;
}



/* exocard / podercard eliminados — todos los slots tienen el mismo color default */

/* Celda vacía — mismo aspecto que una runa, sin contenido ni cursor */
.rcard-empty {
    cursor: default;
    pointer-events: none;
}

/* Emoji dentro del slot — tamaño contenido */
.rem {
    font-size: 1.1em;
    line-height: 1;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Nombre pequeño */
.rnm {
    font-size: .56em;
    color: var(--tx);
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 1px;
}

/* Peso */
.rpa {
    font-size: .52em;
    color: var(--txl);
}

/* ═══════════════════════════════════════════════
   IMÁGENES PNG EN SLOTS
   Se usan cuando el campo "img" de data.js tiene una URL
═══════════════════════════════════════════════ */

/* Imagen PNG dentro de un slot de inventario (runa) */
img.slot-img {
    display: block;
    width:  100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Imagen PNG grande en la columna de imagen del tooltip */
img.item-img-big {
    width:  80px;
    height: 80px;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}

/* Imagen PNG en el slot del forge (objeto/runa) */
img.forge-slot-img {
    width:  calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}

/* Tooltip al hacer hover */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,15,5,.92);
    color: #ffe060;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: .70em;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    border: 1px solid rgba(160,130,60,.4);
}
[data-tip]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════
   LOG
═══════════════════════════════════════════════ */
.log-panel {
    background: var(--bg);
    border: 3px solid #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    height: 170px;
    min-height: 170px;
    max-height: 170px;
    margin-top: 18px;
}

.log-header {
    background: var(--hdr);
    color: #fff;
    padding: 5px 10px;
    font-size: .72em;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    flex-shrink: 0;
}

.log-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0,0,0,.06);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
}

/* Spacer que empuja las entradas al fondo cuando hay pocas */
.log-scroll::before {
    content: '';
    flex: 1;
}

.le {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 2px 4px;
    border-radius: 2px;
    margin-bottom: 1px;
    font-size: .90em;
    line-height: 1.35;
}
.li      { font-size: .85em; flex-shrink: 0; }
.le-time { flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 2.8em; }

.ls  { color: #2b8a00; }
.lf  { background: rgba(122,24,24,.12);  color: #8a2020; }
.lc  { background: rgba(176,0,0,.18);    color: #b00000; font-weight: bold; }
.lx  { background: rgba(104,32,168,.16); color: #6820a8; font-weight: bold; }
.lo  { background: rgba(200,152,10,.18); color: #7a5000; font-weight: bold; }
.lof { background: rgba(150,80,0,.12);   color: #6a3800; }
.loc { background: rgba(150,50,0,.2);    color: #882000; font-weight: bold; }
.ln  { background: rgba(0,0,0,.04);      color: var(--txl); }

.log-scroll::-webkit-scrollbar       { width: 5px; }
.log-scroll::-webkit-scrollbar-track { background: var(--bg-mid); }
.log-scroll::-webkit-scrollbar-thumb { background: var(--bag-hdr); border-radius: 3px; }