/* ===== GREENFALL — inventory screen, belt, loot feed ===== */
:root{--r-common:#9fb3ad;--r-uncommon:#4dff9a;--r-rare:#5aa8ff;--r-epic:#c27aff;--r-exotic:#ffb347}

/* ---- loot feed (replaces overlapping floating text) ---- */
#feed{position:absolute;right:18px;bottom:236px;display:flex;flex-direction:column;gap:4px;width:250px;pointer-events:none}
.feedrow{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;background:linear-gradient(270deg,rgba(6,20,18,.92),rgba(6,20,18,.55));border-right:3px solid var(--c,#9fb3ad);font-size:13px;font-weight:700;animation:fin .25s ease-out;transition:opacity .4s,transform .4s}
.feedrow.r-uncommon{--c:var(--r-uncommon)}.feedrow.r-rare{--c:var(--r-rare)}.feedrow.r-epic{--c:var(--r-epic)}.feedrow.r-exotic{--c:var(--r-exotic)}.feedrow.r-common{--c:var(--r-common)}
.feedrow .fi{font-size:18px;width:24px;text-align:center}.feedrow .ft{flex:1;color:#fff;text-shadow:0 1px 2px #000}.feedrow em{font-style:normal;color:var(--dim);font-size:11px}
.feedrow.bump{animation:bump .22s ease-out}.feedrow.out{opacity:0;transform:translateX(24px)}
@keyframes fin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}@keyframes bump{0%{transform:scale(1.06);background:rgba(55,242,160,.25)}100%{transform:none}}

/* ---- compact resource strip + food bar ---- */
#res{flex-direction:row;gap:5px;right:18px;top:226px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}
#res .rchip{min-width:0;padding:2px 8px;gap:5px}
.bar.food{height:10px;margin-bottom:5px}.bar.food i{background:linear-gradient(#ffb347,#b8620a)}.bar.food span{font-size:9px;top:-2px;letter-spacing:.1em}

/* ---- belt (hotbar) ---- */
#hotbar{gap:6px;align-items:flex-end}
.hb{position:relative;width:64px;height:64px;border-radius:10px;background:linear-gradient(160deg,rgba(14,36,34,.88),rgba(5,14,14,.9));border:1px solid #1d4a3f;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:.12s}
.hb:hover{border-color:#37f2a0}.hb.has.r-uncommon{border-color:#2a8a5a}.hb.has.r-rare{border-color:#2a64a8}.hb.has.r-epic{border-color:#7a44b0}.hb.has.r-exotic{border-color:#b87a2a}
.hb.sel{border-color:#37f2a0;box-shadow:0 0 18px rgba(55,242,160,.5);transform:translateY(-6px) scale(1.06)}
.hb .k{position:absolute;left:5px;top:2px;font-size:10px;color:#5d8878;font-weight:800}
.hb .ico{font-size:30px}.hb .ico3{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}
.hb .cnt{position:absolute;right:5px;bottom:3px;font-size:12px;color:#fff;text-shadow:0 1px 2px #000}
.hb .mag{position:absolute;right:5px;bottom:2px;font-style:normal;font-size:12px;font-weight:800;color:#ffd27a;text-shadow:0 1px 2px #000}.hb .mag small{font-size:9px;color:#9fb3ad;font-weight:600}
.hb .dur,.isl .dur{position:absolute;left:6px;right:6px;bottom:3px;height:3px;background:#0a1a18;border-radius:2px;overflow:hidden}
.hb .dur b,.isl .dur b{display:block;height:100%;background:#4dff9a}.hb .dur b.low,.isl .dur b.low{background:#ff4a5a}
.hb .tg{position:absolute;left:4px;bottom:4px;font-size:9px;text-decoration:none;font-weight:900;padding:0 4px;border-radius:3px;background:#2a2a20;color:#7a7a60}.hb .tg.l{left:24px}
.hb .tg.on{background:#ffe27a;color:#222;box-shadow:0 0 8px #ffe27a}.hb .tg.l.on{background:#ff4a4a;color:#fff;box-shadow:0 0 8px #ff4a4a}

/* ---- inventory screen ---- */
.inv3{display:grid;grid-template-columns:330px 1fr 340px;gap:18px}
.inv-person,.inv-mid,.inv-right{min-width:0}
.rig-stage.person{height:400px}
.eqcol{position:absolute;top:10px;bottom:10px;display:flex;flex-direction:column;justify-content:space-around;z-index:3}.eqcol.l{left:8px}.eqcol.r{right:8px}
.isl{position:relative;width:62px;height:62px;border:1px solid #1d4a3f;border-radius:9px;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.1s;box-sizing:border-box}
.isl:hover{border-color:#37f2a0;background:rgba(55,242,160,.08)}.isl.sel{border-color:#ffd24d;box-shadow:0 0 14px rgba(255,210,77,.4)}.isl.held{outline:2px solid #37f2a0;outline-offset:-2px}.isl.drop{border-color:#fff;background:rgba(55,242,160,.25);transform:scale(1.06)}
.isl.has.r-uncommon{border-color:#2a8a5a;background:linear-gradient(160deg,rgba(40,120,80,.25),rgba(0,0,0,.35))}.isl.has.r-rare{border-color:#2a64a8;background:linear-gradient(160deg,rgba(40,90,170,.28),rgba(0,0,0,.35))}
.isl.has.r-epic{border-color:#7a44b0;background:linear-gradient(160deg,rgba(120,60,190,.3),rgba(0,0,0,.35))}.isl.has.r-exotic{border-color:#b87a2a;background:linear-gradient(160deg,rgba(200,130,40,.32),rgba(0,0,0,.35));box-shadow:0 0 12px rgba(255,179,71,.25)}
.isl.eq{width:66px;height:66px;border-style:dashed}.isl.eq.has{border-style:solid}
.isl .lbl{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.14em;color:#5d8878;pointer-events:none}.isl.has .lbl{display:none}
.isl .ico{font-size:30px;pointer-events:none}.isl .ico3{width:54px;height:54px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #000)}
.isl .cnt,.dragghost .cnt{position:absolute;right:4px;bottom:3px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.isl .mag{position:absolute;right:4px;top:2px;font-style:normal;font-size:10px;font-weight:800;color:#ffd27a;pointer-events:none}.isl .att{position:absolute;left:4px;top:3px;font-size:9px;text-decoration:none;color:#0a1a18;background:#5dffa0;border-radius:3px;padding:0 4px;font-weight:900;pointer-events:none}
.isl .k{position:absolute;left:4px;bottom:2px;font-size:9px;color:#5d8878;font-weight:800;pointer-events:none}
.islgrid{display:grid;grid-template-columns:repeat(6,62px);gap:6px;justify-content:start}.islgrid.belt{margin-top:2px}.islgrid.st{grid-template-columns:repeat(5,62px)}
.pn-sec .cap{margin-left:auto;font-size:10px;color:#5d8878;letter-spacing:.08em}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.ps{border:1px solid #1d4a3f;border-radius:8px;padding:5px 6px;background:rgba(0,0,0,.3);text-align:center}.ps small{display:block;font-size:9px;letter-spacing:.12em;color:#6fa593}.ps b{font-size:16px;color:#ffe27a}
.bars{display:flex;flex-direction:column;gap:5px;margin-top:8px}.mb{position:relative;height:16px;border-radius:4px;background:#0a1c1a;border:1px solid #1d4a3f;overflow:hidden}.mb i{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(#ff4a60,#a1001a)}.mb.food i{background:linear-gradient(#ffb347,#b8620a)}.mb span{position:absolute;left:8px;top:0;font-size:10px;line-height:16px;font-weight:800;letter-spacing:.1em;text-shadow:0 1px 2px #000}
.itabs{display:flex;gap:6px;margin-bottom:10px}.itab{flex:1;text-align:center;padding:7px 4px;border:1px solid #1d4a3f;border-radius:8px;font-size:11px;letter-spacing:.14em;cursor:pointer;color:#9fd8c4;background:rgba(0,0,0,.25)}.itab:hover{border-color:#37f2a0}.itab.sel{background:rgba(55,242,160,.15);border-color:#37f2a0;color:#fff}
.iright{max-height:460px;overflow:auto;padding-right:4px}.iright::-webkit-scrollbar{width:6px}.iright::-webkit-scrollbar-thumb{background:#1f6f58;border-radius:3px}
.empty{text-align:center;color:#7fa597;padding:40px 12px;line-height:1.7}.empty .big{font-size:54px;opacity:.5}.empty small{color:#5d8878}
.ihead{display:flex;gap:12px;align-items:center}.ibig{width:70px;height:70px;border-radius:12px;border:1px solid #2a8a6f;background:radial-gradient(circle at 30% 25%,#1d4a3f,#06181a);display:flex;align-items:center;justify-content:center;flex-shrink:0}.ibig .ico{font-size:40px}.ibig .ico3{width:64px;height:64px;object-fit:contain}
.iname{font-size:17px;font-weight:800;letter-spacing:.04em}.iname em{font-style:normal;font-size:11px;color:#ffd27a}.rtag{font-size:9px;letter-spacing:.14em;border:1px solid;border-radius:9px;padding:1px 7px}.itype{font-size:10px;color:#6fa593;letter-spacing:.12em;margin-left:6px}
.idesc{margin:10px 0;font-size:12px;color:#bfeadb;line-height:1.55}.stats{margin:8px 0}.dim{color:#5d8878;font-size:11px}
.atts{display:flex;flex-direction:column;gap:6px}.attrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border:1px solid #143a32;border-radius:8px;background:rgba(0,0,0,.25)}.attrow .sl{width:62px;font-size:10px;letter-spacing:.12em;color:#6fa593}
button.sm{padding:3px 8px;font-size:10px;letter-spacing:.04em}
.recipe{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #1d4a3f;border-radius:9px;margin-bottom:6px;background:rgba(0,0,0,.28)}.recipe.dis{opacity:.55}.recipe .ico2{width:46px;height:46px;border-radius:9px;background:#07201b;border:1px solid #2a6f58;display:flex;align-items:center;justify-content:center;flex-shrink:0}.recipe .ico2 .ico{font-size:26px}.recipe .ico2 .ico3{width:40px;height:40px;object-fit:contain}.recipe .rb{flex:1;font-size:12px}
.dragghost{position:fixed;width:60px;height:60px;pointer-events:none;z-index:200;opacity:.92;filter:drop-shadow(0 8px 10px rgba(0,0,0,.7));display:flex;align-items:center;justify-content:center;border:1px solid #37f2a0;border-radius:9px;background:rgba(10,40,34,.85)}.dragghost .ico{font-size:30px}.dragghost .ico3{width:52px;height:52px;object-fit:contain}
.ctxmenu{position:fixed;z-index:210;min-width:150px;background:rgba(5,16,16,.97);border:1px solid #2fbf8a;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.8);overflow:hidden}.ctxmenu div{padding:8px 14px;font-size:12px;cursor:pointer;color:#dffff3}.ctxmenu div:hover{background:rgba(55,242,160,.18)}
button.red{background:linear-gradient(#a8142a,#5d0a17);border-color:#ff5a72}
@media (max-width:1250px){.inv3{grid-template-columns:300px 1fr}.inv-right{grid-column:1/-1}}