/* Item Workshop v8 — x-world layout
   templates/default/reset_plus/workshop.css */

.xw-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 0 32px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    color: #ccc;
}

/* Title */
.xw-title-wrap { display:flex; align-items:center; gap:10px; margin:6px 0 10px; }
.xw-line { flex:1; height:1px; background:rgba(170,120,40,.40); }
.xw-title {
    margin:0; padding:0;
    font-family: Georgia,'Times New Roman',serif;
    font-style:italic; font-size:20px; font-weight:400;
    color:#c8a855; white-space:nowrap; letter-spacing:.02em; line-height:1;
}

/* Char selector */
.xw-selform { display:flex; align-items:center; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
.xw-selform select {
    background:rgba(8,6,3,.92); border:1px solid rgba(140,90,28,.44);
    color:#d8c080; font-size:12px; padding:3px 8px;
    border-radius:0; outline:none; height:26px; cursor:pointer;
}
.xw-jox { margin-left:auto; color:#c8a855; font-size:12px; font-weight:600; }

/* Item name bar */
.xw-item-bar {
    padding:8px 14px;
    background:linear-gradient(180deg,#3d1b0e 0%,#2a1008 100%);
    border:1px solid rgba(130,58,22,.60);
    color:#e0a060; font-size:14px; font-weight:600; margin:0 0 2px;
}

/* Inventory box */
.xw-inv-box {
    border:1px solid rgba(90,62,22,.55);
    background:rgba(10,8,5,.88);
    overflow:visible;
    margin:0 0 2px;
    padding-bottom:6px;
    min-width: 620px;
}
.xw-inv-hdr {
    padding:6px 14px;
    background:rgba(28,18,8,.85);
    border-bottom:1px solid rgba(90,62,22,.45);
    color:#c8a855; font-size:12px; font-weight:600;
    text-align:center; letter-spacing:.05em; text-transform:uppercase;
}

/* Equipment area — 380x344px absolute container */
.xw-equip {
    position:relative;
    width:600px; height:442px;
    margin:0 auto;
    background:
        radial-gradient(ellipse 120px 180px at 50% 52%,
            rgba(60,40,15,.18) 0%, transparent 70%);
}
/* Character body silhouette zones (subtle dark slots) */
.xw-equip::before {
    content:'';
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:130px; height:260px;
    border:1px solid rgba(100,70,20,.12);
    border-radius:4px;
    pointer-events:none;
}
.xw-eq {
    position:absolute;
    display:flex; align-items:center; justify-content:center;
    background:rgba(16,13,8,.72);
    border:1px solid rgba(75,52,18,.55);
    box-sizing:border-box; overflow:hidden;
}
.xw-eq img {
    max-width:100%; max-height:100%;
    object-fit:contain; image-rendering:pixelated; display:block;
}
.xw-eq.has-item.clickable { cursor:pointer; }
.xw-eq.has-item.clickable:hover {
    border-color:rgba(210,155,50,.72);
    background:rgba(30,24,10,.90); z-index:5;
}
.xw-eq.is-sel {
    border-color:rgba(230,175,50,.92)!important;
    background:rgba(45,35,10,.95)!important;
    box-shadow:inset 0 0 8px rgba(220,165,40,.20); z-index:4;
}
.xw-eq.is-exc { border-color:rgba(70,145,35,.42); }
.xw-eq.is-exc.is-sel { border-color:rgba(90,185,50,.88)!important; }
.xw-eq.is-empty {
    background:rgba(10,8,4,.55);
    border:1px solid rgba(52,36,12,.38);
}

/* Bag area */
.xw-bag {
    position:relative;
    width:auto;
    margin:4px auto 6px;
}
.xw-bi {
    position:absolute;
    display:flex; align-items:center; justify-content:center;
    background:rgba(16,13,8,.70);
    border:1px solid rgba(75,52,18,.50);
    box-sizing:border-box; overflow:hidden; z-index:3;
}
.xw-bi img {
    max-width:100%; max-height:100%;
    object-fit:contain; image-rendering:pixelated; display:block;
}
.xw-bi.clickable { cursor:pointer; }
.xw-bi.clickable:hover {
    border-color:rgba(210,155,50,.72);
    background:rgba(28,22,8,.90); z-index:6;
}
.xw-bi.is-sel {
    border-color:rgba(230,175,50,.92)!important;
    background:rgba(42,32,8,.95)!important; z-index:5;
}
.xw-bi.is-exc { border-color:rgba(68,142,32,.40); }
.xw-bs {
    position:absolute;
    width:26px; height:26px;
    background:rgba(10,8,4,.48);
    border:1px solid rgba(45,32,10,.32);
    box-sizing:border-box; z-index:1;
}

/* Upgrade box */
.xw-upg-box {
    border:1px solid rgba(90,62,22,.55);
    background:rgba(10,8,5,.88);
    margin:2px 0 0;
}
.xw-upg-hdr {
    padding:6px 14px;
    background:rgba(28,18,8,.85);
    border-bottom:1px solid rgba(90,62,22,.45);
    color:#c8a855; font-size:12px; font-weight:600;
    text-align:center; letter-spacing:.05em; text-transform:uppercase;
}
.xw-upg-body { padding:10px 14px; }

/* Level row */
.xw-lvl-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 4px;
    border-bottom:1px solid rgba(72,50,14,.32);
    margin-bottom:6px;
}
.xw-lvl-lbl { font-size:14px; color:#c8b478; font-weight:600; min-width:46px; }
.xw-lvl-val {
    font-size:15px; font-weight:700; color:#e8d088;
    min-width:46px; text-align:center;
    padding:3px 10px;
    background:rgba(18,14,6,.72);
    border:1px solid rgba(95,65,20,.45);
}
.xw-cap { font-size:12px; color:#7a6a50; font-style:italic; }
.xw-cost { font-size:12px; color:#b09050; }

/* + button */
.xw-btn-plus {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; padding:0;
    background:linear-gradient(180deg,#b83820 0%,#741808 100%);
    border:1px solid rgba(210,70,32,.55);
    color:#fff; font-size:20px; font-weight:700; line-height:1;
    cursor:pointer; border-radius:0;
}
.xw-btn-plus:hover:not([disabled]) { background:linear-gradient(180deg,#d04028 0%,#8a2010 100%); }
.xw-btn-plus[disabled] { opacity:.35; cursor:not-allowed; }

/* Excellent section */
.xw-exc-title {
    font-size:13px; color:#c8b070; font-weight:600;
    padding:6px 0 5px;
    border-bottom:1px solid rgba(72,50,14,.35);
    margin-bottom:2px;
}
.xw-exc-max { font-size:11px; color:#907855; font-weight:400; }
.xw-exc-blocked {
    margin:8px 0; padding:9px 12px;
    background:rgba(55,25,8,.45);
    border:1px solid rgba(175,85,25,.30);
    color:#e09055; font-size:13px; font-style:italic;
}

/* Option rows */
.xw-opt-row {
    display:flex; align-items:center; gap:8px;
    padding:5px 4px;
    border-bottom:1px solid rgba(52,36,10,.26);
}
.xw-opt-row:last-of-type { border-bottom:none; }
.xw-opt-row.xw-opt-on { background:rgba(36,55,16,.20); }

.xw-opt-sq-w { flex-shrink:0; }
.xw-opt-sq {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:0; box-sizing:border-box;
}
.xw-opt-sq.is-on {
    background:linear-gradient(180deg,#367018 0%,#1e4008 100%);
    border:1px solid rgba(75,165,35,.55);
    color:#70e035; font-size:13px; font-weight:800;
}
.xw-opt-sq.is-off {
    background:linear-gradient(180deg,#b03618 0%,#681806 100%);
    border:1px solid rgba(195,65,28,.55);
    cursor:pointer; padding:0;
}
.xw-opt-sq.is-off:hover:not([disabled]) { background:linear-gradient(180deg,#c84020 0%,#80200c 100%); }
.xw-opt-sq.is-off[disabled] { opacity:.35; cursor:not-allowed; }
.xw-opt-sq.is-locked {
    background:rgba(35,28,12,.65);
    border:1px solid rgba(55,40,14,.38);
    cursor:not-allowed; opacity:.45;
}
.xw-opt-name { flex:1; font-size:13px; color:#b8c4cc; line-height:1.3; }
.xw-opt-row.xw-opt-on .xw-opt-name { color:#c8ddb0; }
.xw-opt-added { font-size:11px; color:#68c030; font-weight:600; white-space:nowrap; }
.xw-opt-cost  { font-size:11px; color:#a08848; white-space:nowrap; }
.xw-price-row { padding:8px 4px 2px; font-size:12px; color:#6a6050; }

@media(max-width:780px){
    .xw-shell { max-width:100%; padding:0 4px 20px; }
    .xw-equip { width:100%; }
    .xw-bag   { width:100%; }
}

/* =====================================================================
   ITEM TOOLTIP — x-world / MuOnline game accurate (v10.1)
   ===================================================================== */

/* Wrapper — transparent, no padding, just positions the inner box */
.xw-tip {
    display: none;
    position: fixed;
    z-index: 9999;
    padding: 0;
    background: transparent;
    border: none;
    pointer-events: none;
    max-width: 340px;
    white-space: normal;
    word-break: normal;
}

/* Inner panel — dark background + gold border like MuOnline */
.xw-tt {
    background: #0a0804;
    background: linear-gradient(180deg, #161009 0%, #0c0906 50%, #080704 100%);
    border: 1px solid #9a7220;
    box-shadow:
        0 0 0 1px #241a06,
        0 0 0 2px #0a0804,
        0 8px 28px rgba(0,0,0,.95);
    min-width: 230px;
    padding-bottom: 8px;
    font-family: 'Tahoma', 'Arial Narrow', Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
    color: #c8b870;
    user-select: none;
}

/* ---- Item name row ---- */
.xw-tt-name {
    display: block;
    padding: 6px 12px 5px;
    font-size: 12px;
    font-weight: bold;
    color: #f0e470;          /* normal item = gold */
    border-bottom: 1px solid rgba(140,100,20,.40);
    line-height: 1.35;
    letter-spacing: .01em;
}
.xw-tt-name.is-exc   { color: #60c8ff; } /* Excellent = cyan */
.xw-tt-name.is-anc   { color: #c890ff; } /* Ancient   = purple */
.xw-tt-name.is-plain { color: #e8d870; } /* Normal    = gold */

/* ---- Thin separator line ---- */
.xw-tt-sep {
    height: 1px;
    margin: 3px 10px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(185,140,30,.55) 20%,
        rgba(185,140,30,.55) 80%,
        transparent 100%
    );
}

/* ---- Standard label: value row ---- */
.xw-tt-stat {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 12px;
    line-height: 1.55;
}
.xw-tt-stat .lbl { color: #907a48; white-space: nowrap; }
.xw-tt-stat .val { color: #f0e870; font-weight: 600; }

/* Durability value — green like game */
.xw-tt-dur .val { color: #88d858; }

/* ---- "Can be equipped by CLASS" — RED like x-world ---- */
.xw-tt-class {
    display: block;
    padding: 3px 12px;
    color: #e83030;          /* red — matches x-world exactly */
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
}

/* ---- Option add bonus (yellow bold — "Damage decrement increase +7") ---- */
.xw-tt-optadd {
    display: block;
    padding: 3px 12px;
    color: #f0d428;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
}

/* ---- Excellent options (cyan, with + prefix) ---- */
.xw-tt-exc-opt {
    display: block;
    padding: 2px 12px 2px 22px;
    color: #58c8f8;
    font-size: 11px;
    line-height: 1.55;
    position: relative;
}
.xw-tt-exc-opt::before {
    content: '+';
    position: absolute;
    left: 12px;
    color: #40b0e8;
    font-weight: bold;
}


/* ---- Pink option (Guardian) — pink/magenta like game ---- */
.xw-tt-pink {
    display: block;
    padding: 2px 12px;   /* No left indent since no '+' prefix */
    color: #f878c0;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.55;
}
.xw-tt-pink::before {
    content: '';  /* No '+' prefix for Pink/Guardian options */
}

/* ---- Harmony option (Jewel of Harmony) — yellow like game ---- */
.xw-tt-harmony {
    display: block;
    padding: 2px 12px 2px 22px;
    color: #f0d428;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.55;
    position: relative;
}
.xw-tt-harmony::before {
    content: '+';
    position: absolute;
    left: 12px;
    color: #d8bc18;
    font-weight: bold;
}
/* ---- Luck lines (green, with +) ---- */
.xw-tt-luck {
    display: block;
    padding: 2px 12px 2px 22px;
    color: #58d870;
    font-size: 11px;
    line-height: 1.55;
    position: relative;
}
.xw-tt-luck::before {
    content: '+';
    position: absolute;
    left: 12px;
    color: #40c058;
    font-weight: bold;
}

/* ---- Skill line (light blue) ---- */
.xw-tt-skill {
    display: block;
    padding: 2px 12px 2px 22px;
    color: #88a8f8;
    font-size: 11px;
    line-height: 1.55;
    position: relative;
}
.xw-tt-skill::before {
    content: '+';
    position: absolute;
    left: 12px;
    color: #6888e8;
    font-weight: bold;
}

/* ---- Serial number (grey, small) ---- */
.xw-tt-serial {
    display: block;
    padding: 4px 12px 0;
    color: #706050;
    font-family: monospace;
    font-size: 10px;
}

/* ---- Hex debug (hidden by default) ---- */
.xw-tt-hex {
    display: none !important;  /* hide raw hex from tooltip */
}


/* Widen the inventory panel to accommodate 8×52px bag */
.xw-inv-box {
    max-width: 100%;
}
.xw-inv-box .xw-bag {
    display: block;
}

/* Remove gap between character equip area and bag */


/* Tooltip: hide raw hex line */
.xw-tt-hex { display: none !important; }


/* =======================================================
   BAG SIZING: inventory +25% (33px), warehouse +50% (39px)
   Both centered
   ======================================================= */

/* Inventory bag — 8 cols × 33px = 264px */
.xw-bag--inv {
    width: 264px;
    margin: 4px auto 6px;
}
.xw-bag--inv .xw-bs {
    width: 33px !important;
    height: 33px !important;
}

/* Warehouse bag — 8 cols × 39px = 312px */
.xw-bag--wh {
    width: 312px;
    margin: 4px auto 6px;
}
.xw-bag--wh .xw-bs {
    width: 39px !important;
    height: 39px !important;
}

/* Center the whole inv-box content */
.xw-inv-box {
    text-align: center;
}
.xw-bag {
    display: inline-block;
    text-align: left;
}

/* Remove gap between equip silhouette and bag */


/* Hide raw hex from tooltip */
.xw-tt-hex { display: none !important; }

.xw-equip { margin-bottom: 20px !important; padding-bottom: 0 !important; }