.panel-window.inventory-window{inset:50% 16px auto auto;transform:translateY(-50%);width:min(780px,56vw);min-width:600px;max-height:calc(100dvh - 116px);border:2px solid #bda16a;border-radius:18px 6px;overflow:visible;background:radial-gradient(ellipse at 25% 35%,#203540 0,transparent 55%),linear-gradient(130deg,#111c22,#0c1216 70%);box-shadow:0 0 0 3px #11191c,0 0 0 4px #796444,0 18px 65px #000a,inset 0 0 25px #0008;color:#eee4cc}
.inventory-window::before,.inventory-window::after{content:'❖';position:absolute;z-index:1;font-size:25px;color:#d1b475;text-shadow:0 2px 2px #000;pointer-events:none}.inventory-window::before{top:-13px;left:12px}.inventory-window::after{bottom:-13px;right:12px}
.inventory-window>header{position:relative;justify-content:center;min-height:49px;padding:8px 52px;border-bottom:1px solid #a88b55;background:linear-gradient(90deg,transparent,#b49c5522,transparent);border-radius:16px 5px 0 0}.inventory-window>header h2{font:26px Georgia,serif;text-shadow:0 2px 2px #000;letter-spacing:.5px}.inventory-window>header h2::before,.inventory-window>header h2::after{content:'◇';color:#bda16a;margin:0 18px;font-size:20px}.inventory-window>header button{position:absolute;right:8px;top:7px;border-color:#bda16a;width:34px;height:34px;color:#ebc979}
.panel-window.inventory-window #panelContent{padding:16px!important;max-height:calc(100dvh - 182px)!important;border-radius:0 0 16px 5px;overscroll-behavior:contain;scrollbar-color:#907c52 #10191d;scrollbar-width:thin}
.inventory-body{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(280px,1.05fr);gap:14px}.inventory-paperdoll{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:5px;position:relative;min-height:440px;background:radial-gradient(ellipse at 50% 55%,#547a8a25,transparent 64%)}
.paper-slots{display:flex;flex-direction:column;gap:7px;z-index:1}.paper-slots.right{justify-content:space-between;padding-bottom:0}.paper-slot{position:relative;width:48px;height:49px;flex:none;display:grid;place-items:center;padding:2px;background:linear-gradient(145deg,#17232a,#080c0e);border:1px solid #b69c62;border-radius:5px;box-shadow:inset 0 0 0 2px #0007,0 2px 4px #0006;color:#d9c38d}.paper-slot.vacant{border-color:#8774489c}.paper-slot>i{font:24px Georgia,serif;font-style:normal;color:#b19b6770}.paper-slot>small{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:8px/1.1 Arial!important;white-space:nowrap;color:#c7b68e;pointer-events:none;text-shadow:0 1px 3px #000}.paper-slot>em{position:absolute;right:2px;bottom:11px;color:#f6d98b;font:11px Arial;text-shadow:0 1px 2px #000}.paper-slot .item-art{width:39px!important;height:39px!important;min-width:0!important;margin:0!important}.paper-slot.filled:hover{border-color:#f8d57d;box-shadow:0 0 9px #d9ba544a}
.paper-character{display:flex;flex-direction:column;min-width:0;position:relative}.inventory-portrait{flex:1;min-height:330px;position:relative;width:100%;overflow:hidden}.inventory-portrait canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.portrait-status{position:absolute;inset:45% 0 auto;text-align:center;font-size:12px;color:#b4c7cb}.paper-identity{text-align:center;padding:10px 0 12px;border-top:1px solid #b1985633;background:radial-gradient(ellipse at 50% 0,#6d9dbb15,transparent 70%)}.paper-identity strong{display:block;font:19px Georgia,serif;color:#f5ecdb;overflow-wrap:anywhere}.paper-identity span{display:block;color:#90bad2;font-size:12px;margin-top:6px}.paper-identity small{display:block;color:#768d99;font:10px Arial!important;margin-top:7px}
.inventory-bag{display:flex;flex-direction:column;min-width:0}.inventory-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.inventory-tabs button,.inventory-window .inventory-tools button{font:11px Georgia,serif;padding:8px 2px;min-width:0;border:1px solid #78694877;background:linear-gradient(#202e34,#10171c);color:#b5c6ce;border-radius:5px}.inventory-tabs button[aria-pressed=true],.inventory-window .inventory-tools button[aria-pressed=true]{border-color:#c9ab6b;color:#f4deb0;box-shadow:inset 0 0 0 1px #ad945733;background:linear-gradient(#374044,#1c282e)}
.inventory-window .inventory-tools{gap:5px;margin:8px 0}.inventory-window .inventory-tools input{padding:7px 9px;font-size:11px;height:30px}.inventory-window .inventory-tools button{padding:6px 9px;white-space:nowrap}.inventory-bag-scroll{flex:1;min-height:0;max-height:382px;overflow:auto;border:1px solid #a38a514f;border-radius:5px;padding:5px;background:#05090b80;scrollbar-width:thin;scrollbar-color:#857450 #101619}
.panel-window.inventory-window .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.panel-window.inventory-window .inventory-slot{min-height:0;height:auto;aspect-ratio:1;padding:3px;justify-content:center;border-radius:4px;background:radial-gradient(ellipse at 50% 80%,#30434a55,transparent),linear-gradient(140deg,#1b2429,#080d10);border-color:#ac945775;box-shadow:inset 0 0 0 1px #000b}.panel-window.inventory-window #panelContent .inventory-slot .item-art{width:100%!important;height:100%!important;min-width:0;max-height:56px;max-width:56px;object-fit:contain}.panel-window.inventory-window #panelContent .inventory-slot label{display:none}.panel-window.inventory-window .inventory-slot.empty{min-height:0;opacity:.5;border-color:#9e9b8240}.panel-window.inventory-window .inventory-slot b{top:auto;bottom:2px;right:3px;font:12px Arial}.panel-window.inventory-window .inventory-slot em{top:2px;left:3px;font:11px Arial}.panel-window.inventory-window .inventory-slot.equipped{border-color:#bcab79}.item-equipped{position:absolute;bottom:2px;left:3px;font:9px Arial;color:#c8d9b0}.panel-window.inventory-window .inventory-slot:hover{border-color:#f5d282;background-color:#6a604332}.inventory-hint,.inventory-empty-message{font:10px/1.5 Arial;color:#96a8ae;margin:7px 0 0}.inventory-empty-message{font-size:12px;padding:10px}
.inventory-summary{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px;margin-top:14px}.inventory-summary>div{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #a18c5544;border-radius:5px;background:#080f13a6;font-size:12px}.inventory-summary i{color:#edca76;font-size:22px;font-style:normal}.inventory-summary small{margin-left:auto;color:#9eabac}.inventory-summary strong{font-size:13px!important;color:#e3c88a}.inventory-summary meter{width:70px;height:12px;margin-left:auto;accent-color:#6daf79}.inventory-summary meter::-webkit-meter-bar{background:#080e10;border:1px solid #817654}.inventory-summary meter::-webkit-meter-optimum-value{background:linear-gradient(#8dc58b,#3c8556)}
.inventory-details{margin-top:12px;border:1px solid #9b84514d;border-radius:5px;padding:9px 12px;color:#adbdc0}.inventory-details summary{font:12px Georgia,serif;cursor:pointer;list-style:none}.inventory-details summary span{float:right;color:#ceb476}.inventory-details .inventory-tools{flex-wrap:wrap}.inventory-details .inventory-tools strong{font-size:11px}.inventory-window button:focus-visible{outline:2px solid #ffe1a0;outline-offset:2px}
@media(min-height:900px){.inventory-paperdoll{min-height:530px}.paper-slot{height:58px}.inventory-bag-scroll{max-height:470px}.inventory-portrait{min-height:400px}}
@media(max-width:1100px){.panel-window.inventory-window{width:620px;min-width:0;right:10px}.inventory-body{gap:10px;grid-template-columns:minmax(240px,.95fr) minmax(270px,1.05fr)}}
@media(max-width:650px){.panel-window.inventory-window{right:6px;left:6px;width:auto;max-height:calc(100dvh - 28px)}.panel-window.inventory-window #panelContent{max-height:calc(100dvh - 95px)!important;padding:10px!important}.inventory-body{grid-template-columns:1fr}.inventory-paperdoll{width:100%;max-width:360px;justify-self:center;min-height:400px;grid-template-columns:48px minmax(0,1fr) 48px}.paper-slot{height:43px}.paper-identity{padding-bottom:2px}.inventory-portrait{min-height:310px}.inventory-bag-scroll{max-height:270px}.inventory-summary{gap:6px;grid-template-columns:1fr 1.2fr}.inventory-summary>div{gap:6px;padding:8px}.inventory-summary meter{width:45px}}

.inventory-window .item-art:has(img),.inventory-window .item-art:has(svg){background-image:none!important}
.inventory-window>header h2{position:relative;min-width:210px;text-align:center;padding:5px 18px;margin:-14px 0 -4px;background:linear-gradient(#263238,#10181c);border:1px solid #c4a467;border-radius:3px 3px 16px 16px;box-shadow:0 0 0 3px #0b1215,0 0 0 4px #806c47}
.inventory-window>header h2::before,.inventory-window>header h2::after{margin:0 9px;font-size:15px}
.inventory-trash{width:100%;margin-top:9px;padding:10px;border:1px dashed #bc8173;border-radius:5px;background:#341c19;color:#f1c8bc;font:12px Arial;cursor:pointer}.inventory-trash:hover,.inventory-trash:focus-visible{background:#562923;border-color:#f8b29a}.item-actions .item-discard{color:#ffc5b5;border-color:#b66b60;background:#48221e}.discard-confirmation{padding:16px;border:1px solid #9f6858;border-radius:6px;background:#251b18}.discard-confirmation>strong{color:#f6d6a1;font-size:18px}.discard-confirmation p{line-height:1.6;color:#dfc7bf}.discard-error{color:#ffb4a4;font-size:13px}

/* One compact 6 x 5 bag; size to the viewport instead of adding scrollbars. */
.panel-window.inventory-window{--bag-body-height:min(380px,calc(100dvh - 174px));--bag-slot:min(44px,calc((var(--bag-body-height) - 116px)/5));width:min(660px,calc(100vw - 24px));min-width:0;max-height:calc(100dvh - 32px);right:12px}
.inventory-window>header{min-height:40px;padding:6px 44px}
.inventory-window>header h2{font-size:22px;min-width:180px}
.inventory-window>header button{width:30px;height:30px;top:5px}
.panel-window.inventory-window #panelContent{padding:12px!important;max-height:none!important;overflow:visible}
.inventory-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;height:var(--bag-body-height)}
.inventory-paperdoll{min-height:0;height:100%;grid-template-columns:40px minmax(0,1fr) 40px;gap:3px;width:auto;max-width:none;justify-self:stretch}
.paper-slots{gap:4px;justify-content:space-between}
.paper-slot{width:40px;height:min(43px,calc((var(--bag-body-height) - 28px)/8))}
.paper-slot .item-art{width:100%!important;height:100%!important;max-width:33px;max-height:33px}
.paper-slot>small{font-size:7px!important}.paper-slot>i{font-size:20px}
.inventory-portrait{min-height:0}.paper-identity{padding:5px 0;flex:none}.paper-identity strong{font-size:15px}.paper-identity span{font-size:10px;margin-top:3px}.paper-identity small{margin-top:3px;font-size:9px!important}
.inventory-bag{position:relative;min-height:0}
.inventory-tabs button,.inventory-window .inventory-tools button{font-size:10px;padding:5px 2px}
.inventory-window .inventory-tools{display:flex;margin:5px 0;gap:4px;flex:none}
.inventory-window .inventory-tools input{min-width:0;flex:1;height:26px;padding:4px 6px;font-size:10px}
.inventory-window .inventory-tools button{padding:4px 6px}
.inventory-bag-scroll{position:relative;flex:none;align-self:center;padding:4px;max-height:none;overflow:visible;width:calc(var(--bag-slot)*6 + 30px);max-width:100%}
.panel-window.inventory-window .inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:4px;width:100%}
.panel-window.inventory-window .inventory-slot{display:flex;align-items:center;min-width:0;min-height:0;aspect-ratio:1;height:auto;padding:2px;overflow:hidden}
.panel-window.inventory-window #panelContent .inventory-slot .item-art{max-width:38px;max-height:38px;display:grid;place-items:center;margin:0!important}
.panel-window.inventory-window .inventory-slot b{font-size:10px;right:1px;bottom:1px;padding:0 1px}.panel-window.inventory-window .inventory-slot em{font-size:9px}
.inventory-empty-message{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;margin:0;padding:4px;text-align:center;font-size:10px}
.inventory-trash{padding:6px;margin-top:auto;font-size:10px;min-height:26px}
.inventory-hint{font-size:9px;line-height:1.2;margin:4px 0 0}
.inventory-summary{gap:12px;margin-top:8px}.inventory-summary>div{padding:6px;gap:5px;font-size:10px}.inventory-summary i{font-size:15px}.inventory-summary strong{font-size:11px!important}.inventory-summary meter{width:44px}
.inventory-details{position:relative;margin-top:6px;padding:6px 8px}.inventory-details summary{font-size:10px}
.inventory-details[open]{position:absolute;left:12px;right:12px;bottom:10px;z-index:5;background:#101b22;max-height:calc(100% - 60px);overflow:auto;box-shadow:0 0 14px #0009}
.inventory-overflow{font:10px Arial;position:relative;margin-top:3px}.inventory-overflow summary{cursor:pointer;color:#edca76}.inventory-overflow>div{position:absolute;right:0;bottom:18px;z-index:6;max-height:220px;overflow:auto;width:100%;background:#101b22;border:1px solid #bda16a;padding:5px}.inventory-overflow button{display:block;width:100%;font-size:11px;padding:6px;text-align:left}
@media(max-width:650px){
 .panel-window.inventory-window{left:auto;right:8px;width:calc(100vw - 16px);--bag-body-height:min(340px,calc(100dvh - 152px))}
 .panel-window.inventory-window #panelContent{padding:8px!important;max-height:none!important}
 .inventory-body{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:6px}
 .inventory-paperdoll{grid-template-columns:26px minmax(0,1fr) 26px;gap:1px}
 .paper-slot{width:26px}.paper-slot>small{font-size:6px!important;white-space:normal}.paper-slot>i{font-size:16px}.paper-slot .item-art{max-width:24px;max-height:28px}
 .paper-identity strong{font-size:11px}.paper-identity span{font-size:8px}.paper-identity small{font-size:7px!important}
 .inventory-tabs button{font-size:9px;overflow-wrap:anywhere}.inventory-tabs{gap:2px}
 .inventory-summary{grid-template-columns:1fr 1fr;gap:5px}.inventory-summary meter{display:none}
}
@media(max-height:500px){
 .panel-window.inventory-window{--bag-body-height:calc(100dvh - 150px);--bag-slot:min(38px,calc((var(--bag-body-height) - 88px)/5))}
 .inventory-window>header{min-height:34px;padding:3px 40px}.inventory-window>header h2{font-size:18px}
 .inventory-window .inventory-tabs button{padding:3px 1px}.inventory-window .inventory-tools{margin:3px 0}.inventory-window .inventory-tools input{height:22px}
 .inventory-hint{display:none}.inventory-trash{min-height:22px;padding:3px}.inventory-summary{margin-top:5px}.inventory-details{margin-top:4px}
 .paper-identity small{display:none}.paper-identity span{font-size:8px}.paper-identity{padding:2px 0}
}
