/*
 * equipment.css — REDESIGNED 2026-09-11 from a reference MMO "character
 * equip" screenshot: a character portrait + equip slots on the LEFT
 * (weapon/helm/baju/celana + compact 6-slot ATK/Resonance material grids),
 * a category-tabbed item grid in the MIDDLE, and a rich detail panel on
 * the RIGHT carrying the actual equip/unlock/upgrade/assign actions.
 * Classes `eq2-*`. Mirrors inventory.css's rail/grid/detail proportions
 * and its rarity "whole card" glow technique (own [data-tier] rules below,
 * independent from inv2-* — every CSS file loads on every page in this
 * SPA so nothing may share a class name across files). DEEPCORE amber/
 * cream palette, sizes tuned to match the app's already-enlarged text/
 * icon pass (never smaller than the equivalent inv2-* value).
 */

.eq2-wrap {
    position: relative; z-index: 2; flex: 1; min-height: 0;
    display: flex; align-items: stretch; gap: 14px; padding: 14px 18px;
}

/* ── Left: character portrait + equip slots ──────────────────────────── */
.eq2-left {
    flex: 0 0 240px; display: flex; flex-direction: column; gap: 14px; min-height: 0;
    background: rgba(255,248,236,.5);
    border: 1px solid rgba(58,36,16,.16); border-radius: 14px;
    padding: 16px 14px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.eq2-left::-webkit-scrollbar { display: none; }

.eq2-charcard { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.eq2-avatar {
    width: 82px; height: 82px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 3px solid #e08838; box-shadow: 0 0 0 3px rgba(200,100,26,.18), 0 6px 16px rgba(58,36,16,.25);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg,#fff4e0,#f0dcb8);
}
.eq2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.eq2-avatar-fallback { font-size: 32px; font-weight: 900; color: #c8641a; }
.eq2-charname { font-size: 14.5px; font-weight: 800; color: #2c1a08; margin-top: 6px; text-align: center; }
.eq2-charlvl { font-size: 11px; letter-spacing: 1.5px; color: #8a6a48; font-weight: 700; }

.eq2-gearslots { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.eq2-gearslot-row { display: flex; gap: 8px; }

.eq2-eqslot {
    position: relative; cursor: pointer; text-align: center; flex: 1;
    background: linear-gradient(180deg,#fffdf8,#f8efdf);
    border: 1.5px solid var(--fc, rgba(58,36,16,.2)); border-radius: 12px;
    padding: 10px 6px 8px;
    transition: border-color .16s, transform .12s, box-shadow .16s;
}
.eq2-eqslot:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(58,36,16,.16); }
.eq2-eqslot.filled { border-color: color-mix(in srgb, var(--fc,#c8641a) 65%, #fff); background: linear-gradient(158deg,#fffdf8, color-mix(in srgb, var(--fc,#8a6a48) 16%, #fffdf8)); }
.eq2-eqslot.big { padding: 16px 8px 12px; }
.eq2-eqslot-ic { width: 36px; height: 36px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: .88; }
.eq2-eqslot.big .eq2-eqslot-ic { width: 50px; height: 50px; font-size: 36px; }
.eq2-eqslot-ic img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.eq2-eqslot-glyph { opacity: .32; }
.eq2-eqslot-lbl { font-size: 9.5px; letter-spacing: 1px; font-weight: 800; color: #8a6a48; }

.eq2-statbar { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; padding-top: 6px; border-top: 1px solid rgba(58,36,16,.14); }
.eq2-statbar > div { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8a6a48; letter-spacing: .5px; }
.eq2-statbar strong { font-family: var(--font-mono); font-size: 14px; color: #a3291d; }

.eq2-matslots { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.eq2-matslots-lbl { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: #8a6a48; margin-top: 4px; }
.eq2-mgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.eq2-mslot {
    aspect-ratio: 1/1; border-radius: 7px; cursor: pointer;
    border: 1.5px solid var(--fc, rgba(58,36,16,.2));
    background: rgba(58,36,16,.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: rgba(58,36,16,.4);
    transition: border-color .14s, transform .12s;
}
.eq2-mslot:hover { transform: translateY(-1px); }
.eq2-mslot.filled { border-color: color-mix(in srgb, var(--fc,#c8641a) 70%, #fff); background: color-mix(in srgb, var(--fc,#8a6a48) 16%, #fffdf8); }
.eq2-mslot img { width: 68%; height: 68%; object-fit: contain; image-rendering: pixelated; }

/* ── Middle: category tabs + item grid ────────────────────────────────── */
.eq2-mid { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.eq2-cattabs { flex-shrink: 0; display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.eq2-cattab {
    cursor: pointer; padding: 10px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .5px;
    color: #8a6a48; background: rgba(58,36,16,.07); border: 1.5px solid transparent;
    transition: background .15s, color .15s, box-shadow .15s;
}
.eq2-cattab:hover { background: rgba(200,100,26,.12); }
.eq2-cattab.active { color: #fff8ec; background: linear-gradient(180deg,#f0883e,#c8641a); box-shadow: 0 3px 10px rgba(200,100,26,.32); }

.eq2-mid-hint { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; min-height: 14px; }
.eq2-hint-line { font-size: 12.5px; color: #8a6a48; line-height: 1.4; }
.eq2-setbonus-chip {
    display: flex; align-items: center; gap: 6px;
    background: rgba(124,63,209,.1); border: 1px solid rgba(124,63,209,.3);
    border-radius: 999px; padding: 5px 13px; font-size: 11.5px; color: #7c3fd1; font-weight: 700;
}
.eq2-setbonus-chip b { font-family: var(--font-mono); }

.eq2-grid {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Fixed grid-auto-rows (not aspect-ratio on the card) — see
       inventory.css's identical note: a stretched aspect-ratio grid item
       can render taller than its own row in Chromium and creep into the
       next row. Sidestepped the same way here. */
    align-content: start; align-items: start;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    grid-auto-rows: 128px;
    gap: 14px; padding: 4px 2px 8px;
}
.eq2-grid::-webkit-scrollbar { display: none; }

.eq2-card {
    position: relative; height: 128px; cursor: pointer;
    border: 2.5px solid var(--fc, #8a6a48); border-radius: 15px;
    background: linear-gradient(158deg, #fffdf8, color-mix(in srgb, var(--fc, #8a6a48) 13%, #fffdf8));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -11px 17px rgba(58,36,16,.05);
    overflow: hidden;
    transition: transform .2s cubic-bezier(.2,1,.32,1), box-shadow .2s ease, border-color .2s ease, opacity .15s;
}
.eq2-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 11px 22px rgba(58,36,16,.2); }
.eq2-card.sel { border-color: color-mix(in srgb, var(--fc, #c8641a) 92%, #fff); animation: eq2-sel 2.6s ease-in-out infinite; }
.eq2-card.locked { opacity: .48; filter: grayscale(.35); }
@keyframes eq2-sel {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 4px color-mix(in srgb, var(--fc, #c8641a) 20%, transparent), 0 9px 20px rgba(58,36,16,.2); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 7px color-mix(in srgb, var(--fc, #c8641a) 34%, transparent), 0 11px 24px rgba(58,36,16,.26); }
}

.eq2-card-art { position: absolute; inset: 15% 14% 18% 14%; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }
.eq2-card-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.eq2-card-g { position: absolute; top: 0; left: 0; z-index: 3; font-size: 9px; font-weight: 900; color: #fff8ec; letter-spacing: .3px; padding: 2px 7px 3px 5px; border-radius: 0 0 9px 0; box-shadow: 1px 1px 3px rgba(0,0,0,.22); }
.eq2-card-slottag {
    position: absolute; top: 5px; right: 5px; z-index: 3;
    font-size: 9px; font-weight: 900; color: #6b4520;
    background: rgba(255,253,248,.88); border-radius: 5px; padding: 1px 5px;
}
.eq2-card-status { position: absolute; bottom: 5px; left: 6px; z-index: 3; font-size: 12.5px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.eq2-status-on { color: #2b8a3e; }
.eq2-card-qty {
    position: absolute; right: 5px; bottom: 5px; z-index: 3;
    font-size: 11px; font-weight: 900; font-family: var(--font-mono); color: #2c1a08;
    background: rgba(255,253,248,.94); border: 1px solid rgba(58,36,16,.2);
    border-radius: 7px; padding: 1px 5px; min-width: 17px; text-align: center;
    box-shadow: 0 1px 3px rgba(58,36,16,.15);
}

/* Progressive "whole card" glow for rare grades (A/S/SS) — same visual
   language as inventory.css's RARE_TIER, independent classes. */
.eq2-card[data-tier] { background: linear-gradient(158deg, #fffdf8, color-mix(in srgb, var(--fc) 22%, #fffdf8)); }
.eq2-card[data-tier="hi"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 15px color-mix(in srgb, var(--fc) 26%, transparent), 0 0 11px color-mix(in srgb, var(--fc) 33%, transparent); }
.eq2-card-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.eq2-card-shine::before {
    content: ""; position: absolute; top: -60%; left: -70%; width: 42%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform: rotate(18deg); opacity: 0;
}
.eq2-card[data-tier] .eq2-card-shine::before { opacity: 1; animation: eq2-sweep 4s ease-in-out infinite; }
@keyframes eq2-sweep { 0%, 60% { left: -70%; } 100% { left: 135%; } }

/* ── Right: detail panel ──────────────────────────────────────────────── */
.eq2-right {
    flex: 0 0 328px; display: flex; flex-direction: column; min-height: 0;
    background: rgba(255,248,236,.5);
    border: 1px solid rgba(58,36,16,.16); border-radius: 14px;
    padding: 14px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.eq2-right::-webkit-scrollbar { display: none; }

.eq2-detail-empty { margin: auto; text-align: center; color: rgba(138,106,72,.75); padding: 30px 12px; }
.eq2-detail-empty-ic { font-size: 40px; margin-bottom: 12px; }
.eq2-detail-empty p { font-size: 13px; line-height: 1.55; }

.eq2-detail-card {
    display: flex; flex-direction: column;
    background: #fffdf8; border: 1.5px solid rgba(58,36,16,.14); border-radius: 13px; overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.eq2-detail-card[data-tier="hi"] { border-color: color-mix(in srgb, var(--fc) 55%, #fff); box-shadow: 0 0 22px color-mix(in srgb, var(--fc) 30%, transparent); }

.eq2-detail-banner {
    position: relative; padding: 22px 14px 16px; overflow: hidden;
    background: linear-gradient(165deg, color-mix(in srgb, var(--fc,#c8641a) 42%, #f0f4ff), color-mix(in srgb, var(--fc,#c8641a) 11%, #fdfefe) 80%);
    display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.eq2-detail-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.eq2-detail-shine::before {
    content: ""; position: absolute; top: -40%; left: -60%; width: 38%; height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: rotate(16deg); animation: eq2-sweep 3.4s ease-in-out infinite;
}
.eq2-detail-art { position: relative; z-index: 2; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; font-size: 72px; line-height: 1; filter: drop-shadow(0 9px 18px color-mix(in srgb, var(--fc,#8a6a48) 42%, rgba(58,36,16,.3))); }
.eq2-detail-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.eq2-detail-grade { position: relative; z-index: 2; font-size: 9.5px; font-weight: 900; color: #fff8ec; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.eq2-detail-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 9px; }
.eq2-detail-type { font-size: 10.5px; letter-spacing: 1.5px; font-weight: 800; color: #8a6a48; }
.eq2-detail-name { font-size: 15.5px; font-weight: 800; color: #2c1a08; }
.eq2-detail-set { font-size: 11px; letter-spacing: 1px; font-weight: 700; color: #7c3fd1; }
.eq2-detail-desc { font-size: 12.5px; line-height: 1.6; color: #5a3f22; margin: 0; }

.eq2-detail-stats { display: flex; flex-direction: column; gap: 2px; }
.eq2-detail-stats > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12px; color: #8a6a48; padding: 6px 0; border-bottom: 1px solid rgba(58,36,16,.1); }
.eq2-detail-stats > div > span:first-child { flex-shrink: 0; padding-top: 1px; }
.eq2-detail-stats b { text-align: right; }
.eq2-detail-stats b { font-family: var(--font-mono); font-weight: 800; color: #a3291d; }
.eq2-detail-stats b.ok { color: #2b8a3e; }

.eq2-detail-locked { text-align: center; font-size: 12px; letter-spacing: 1px; color: #8a6a48; padding: 12px 0; }
.eq2-detail-cta { width: 100%; text-align: center; border-radius: 10px; font-size: 12.5px; padding: 11px; letter-spacing: .8px; }

.eq2-detail-upgrade { display: flex; flex-direction: column; gap: 8px; padding-top: 7px; margin-top: 2px; border-top: 1px dashed rgba(58,36,16,.16); }
.eq2-level-row { display: flex; flex-direction: column; gap: 5px; }
.eq2-level-lbl { display: flex; justify-content: space-between; font-size: 11px; color: #8a6a48; letter-spacing: 1px; }
.eq2-level-lbl span:last-child { color: #c8641a; font-weight: 700; }
.eq2-locked-lbl { text-align: center; font-size: 11.5px; letter-spacing: 1.5px; color: #8a6a48; }
.eq2-recipe-lbl { font-size: 10.5px; letter-spacing: 1.5px; color: #8a6a48; }
.eq2-recipe-list { display: flex; flex-direction: column; gap: 5px; }
.eq2-recipe-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.eq2-recipe-name { flex: 1; min-width: 0; }
.eq2-recipe-qty { font-weight: 800; font-family: var(--font-mono); }

.eq2-slotpick-lbl { font-size: 10.5px; letter-spacing: 1.5px; color: #8a6a48; margin-top: 2px; }
.eq2-slotpick-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.eq2-slotpick-btn { padding: 9px 0; font-size: 11px; text-align: center; }

/* ── Responsive (kept as @container; never fires — #app is a fixed-
   minimum elastic stage, see shared.css) ──────────────────────────────── */
@container (max-width: 1100px) {
    .eq2-right {
        position: fixed; inset: 0; z-index: 400; flex: none;
        display: none; align-items: center; justify-content: center;
        background: rgba(20,10,4,.55); border: none; border-radius: 0; padding: 20px;
    }
    .eq2-right.open { display: flex; }
    .eq2-detail-card { width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto; }
}
@container (max-width: 760px) {
    .eq2-wrap { flex-direction: column; padding: 10px 12px; gap: 10px; }
    .eq2-left { flex: 0 0 auto; }
    .eq2-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}