/*
 * Crownspire Academy inventory artwork: user originals only.
 * Canonical layout: Gotische Fantasy-Inventaroberfläche mit Mondschloss.png.
 * Do not use alternative "Gothisches Inventar-UI mit Rosen.png" as a template.
 * No synthetic roses, ornaments or replacement images. This file binds the
 * supplied isolated buttons to the existing functional UI and reuses the
 * already-installed original panel.png/slot.png. Character remains real WebGL.
 * Pixel matching to the composite reference requires an in-game visual review.
 */
#inventoryDialog.inventory-original-png{
 --inv-art-root:'/assets/ui/inventory/';
 --inv-button-large:url('/assets/ui/inventory/01_grosser_ornament_button.png');
 --inv-button-medium:url('/assets/ui/inventory/02_mittlerer_rechteck_button.png');
 --inv-button-small:url('/assets/ui/inventory/03_kleiner_rechteck_button.png');
 --inv-button-square:url('/assets/ui/inventory/04_quadratischer_button.png');
 --inv-button-point:url('/assets/ui/inventory/05_spitz_button.png');
 --inv-button-rounded:url('/assets/ui/inventory/06_abgerundeter_button.png');
 --inv-button-pill:url('/assets/ui/inventory/07_kapsel_button.png');
 --inv-button-round:url('/assets/ui/inventory/08_runder_button.png');
 --inv-button-strip:url('/assets/ui/inventory/09_schmaler_leisten_button.png');
 color:#e1e4ec;
}
/* Panel frames are the real transparent PNGs already in the project. */
#inventoryDialog.inventory-original-png,
#inventoryDialog.inventory-original-png .inventory-character-stage,
#inventoryDialog.inventory-original-png .inventory-permanent-details{
 border:solid transparent;
 border-width:24px;
 border-image:url('/assets/ui/panel.png') 105 fill / 24px / 0 stretch;
 background-color:#080c13;
 box-shadow:none;
}
#inventoryDialog.inventory-original-png{
 position:relative;overflow:hidden;
 width:min(1280px,98vw)!important;
 height:min(92dvh,820px)!important;
 max-height:96dvh!important;
 padding:8px 11px 12px!important;
}
#inventoryDialog.inventory-original-png .rpg-layout{
 grid-template-columns:minmax(260px,.9fr) minmax(300px,1.2fr);
 gap:12px!important;
 min-height:0!important;
}
#inventoryDialog.inventory-original-png .rpg-layout[hidden]{display:none!important}
#inventoryDialog.inventory-original-png .rpg-layout>div{
 min-height:0!important;overflow:hidden!important;
}
#inventoryDialog.inventory-original-png .inventory-character-stage{
 position:relative;padding:17px 8px 8px;
 flex:1 1 auto;min-height:0!important;overflow:hidden;
 display:flex;flex-direction:column;
}
#inventoryDialog.inventory-original-png .inventory-stage-heading{
 position:absolute;top:3px;left:4px;right:4px;
 text-align:center;font:500 15px/1.2 Cinzel,Georgia,serif;
 letter-spacing:.11em;color:#d2d9e8;pointer-events:none;z-index:4;
}
#inventoryDialog.inventory-original-png .inventory-character-caption{
 position:absolute;left:19%;right:19%;bottom:38px;z-index:4;
 pointer-events:none;text-align:center;color:#e2e7f2;
 font:500 15px Cinzel,Georgia,serif;text-shadow:0 2px 9px #040610;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#inventoryDialog.inventory-original-png .inventory-character-stage > .rpg-preview{
 flex:1 1 auto;height:100%!important;min-height:130px!important;
 border:0!important;border-image:none!important;
 background:
  linear-gradient(180deg,#02040d94 0%,#03061055 46%,#030610b5 100%),
  url('/assets/crownspire-clean-plate.webp') center 43%/cover no-repeat!important;
}
/* Existing arcane-ring artwork (not an invented replacement PNG), behind live model. */
#inventoryDialog.inventory-original-png .inventory-character-stage > .rpg-preview::before{
 content:'';position:absolute;z-index:0;pointer-events:none;
 width:48%;aspect-ratio:2.5/1;left:26%;bottom:6%;
 background:url('/assets/ui/reference-ring.svg') center/contain no-repeat;
 opacity:.57;filter:drop-shadow(0 0 10px #8395ef80);
 transform:perspective(165px) rotateX(62deg);
}
/* The actual dynamic 3D character canvas must be in front of the scenery. */
#inventoryDialog.inventory-original-png .inventory-character-stage > .rpg-preview canvas{
 position:relative;z-index:2;
}
#inventoryDialog.inventory-original-png .inventory-character-stage > .preview-controls{
 position:relative;z-index:4;flex:0 0 auto;
}
#inventoryDialog.inventory-original-png .equipment-slots{
 position:absolute;inset:37px 4px 46px!important;
 z-index:3;pointer-events:none;
}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot{
 position:absolute;pointer-events:auto;
 border:solid transparent!important;border-width:9px!important;
 border-image:url('/assets/ui/slot.png') 55 fill / 9px / 0 stretch!important;
 background:transparent!important;
 display:grid;place-items:center;
}
/* All ten canonical slots receive explicit positions; legacy invisible slots do not consume space. */
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=head]{top:2%;left:calc(50% - 23px);right:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=body]{top:20%;left:3%;right:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=hands]{top:20%;right:3%;left:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=waist]{top:39%;left:3%;right:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=neck]{top:39%;right:3%;left:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=cloak]{top:58%;left:3%;right:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=main]{top:58%;right:3%;left:auto;bottom:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=feet]{bottom:1%;left:calc(50% - 23px);right:auto;top:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=ring1]{bottom:1%;left:18%;right:auto;top:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot[data-equipment-slot=ring2]{bottom:1%;right:18%;left:auto;top:auto;}
#inventoryDialog.inventory-original-png .equipment-slots .inventory-slot-placeholder{
 font:500 clamp(16px,2.2vw,24px)/1 Georgia,serif;
 color:#b0bad1;opacity:.85;text-shadow:0 0 6px #abb2d370;
}
#inventoryDialog.inventory-original-png .equipment-slots .rpg-slot img{
 display:block;object-fit:contain;width:100%;height:100%;
}
#inventoryDialog.inventory-original-png .rpg-grid{
 height:clamp(160px,31dvh,260px)!important;
 flex:0 1 auto;grid-template-columns:repeat(6,minmax(0,1fr));
 grid-auto-rows:clamp(48px,7dvh,66px);gap:4px!important;
 padding:2px!important;
}
#inventoryDialog.inventory-original-png .rpg-grid .rpg-slot{
 border:solid transparent!important;border-width:10px!important;
 border-image:url('/assets/ui/slot.png') 55 fill / 10px / 0 stretch!important;
 background:transparent!important;aspect-ratio:auto;
}
#inventoryDialog.inventory-original-png .rpg-grid .rpg-slot .stack-count{
 color:#eef1fb;text-shadow:0 1px 3px #02030a;
}
#inventoryDialog.inventory-original-png .inventory-permanent-details{
 flex:1 1 auto;min-height:82px;max-height:36%;
 overflow-y:auto;overscroll-behavior:contain;
 padding:6px 12px 11px;margin-top:7px;
 border-width:16px;border-image:url('/assets/ui/panel.png') 105 fill / 16px / 0 stretch;
}
#inventoryDialog.inventory-original-png .inventory-permanent-details .rpg-details{
 margin:0;min-height:0;border:0;padding:0;
}
#inventoryDialog.inventory-original-png .inventory-permanent-details .inventory-info-icon{
 display:block;float:left;width:56px;height:56px;object-fit:contain;
 margin:0 11px 3px 0;
}
#inventoryDialog.inventory-original-png .inventory-permanent-details :is(h3,p){
 margin:3px 0;color:#e1e7f2;
}
#inventoryDialog.inventory-original-png .inventory-permanent-details .inventory-info-heading{
 font:500 13px Cinzel,Georgia,serif;
 text-align:center;color:#cbd4e4;letter-spacing:.11em;margin:0 0 8px;
}
#inventoryDialog.inventory-original-png .inventory-info-hint{
 text-align:center;color:#9eabbf!important;
}
#inventoryDialog.inventory-original-png .rpg-coins{
 flex:0 0 auto;min-height:38px;margin:5px 0 0;padding:4px 0 0;
 display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,42px);
}
#inventoryDialog.inventory-original-png .rpg-coins .inventory-original-coin{
 display:inline-flex;align-items:center;gap:7px;
 color:#e2e8f1;font:600 16px Georgia,serif;
 white-space:nowrap;
}
#inventoryDialog.inventory-original-png .rpg-coins img{
 width:clamp(23px,3vw,30px);height:clamp(23px,3vw,30px);object-fit:contain;
}
/* Each shape uses its matching supplied PNG without 9-slice distortion. */
#inventoryDialog.inventory-original-png .inventory-png-button,
#inventoryDialog.inventory-original-png .inventory-bookmarks button,
#inventoryDialog.inventory-original-png .preview-controls button,
#inventoryDialog.inventory-original-png button.close,
#inventoryDialog.inventory-original-png .inventory-popup-close{
 position:relative;isolation:isolate;
 border:0!important;border-image:none!important;
 background:transparent!important;
 box-shadow:none!important;color:#f2edf9;
 text-shadow:0 1px 3px #07030e;
}
#inventoryDialog.inventory-original-png .inventory-png-button::before,
#inventoryDialog.inventory-original-png .inventory-bookmarks button::before,
#inventoryDialog.inventory-original-png .preview-controls button::before,
#inventoryDialog.inventory-original-png button.close::before,
#inventoryDialog.inventory-original-png .inventory-popup-close::before{
 content:'';pointer-events:none;
 position:absolute;inset:0;z-index:-1;
 background:var(--inv-button-medium) center/contain no-repeat;
 opacity:.76;filter:brightness(.72) saturate(.68);
 transition:opacity .14s ease,filter .14s ease;
}
#inventoryDialog.inventory-original-png .rpg-tabs .inventory-png-button::before{background-image:var(--inv-button-small)}
#inventoryDialog.inventory-original-png .rpg-tabs [data-inventory-button=sort]::before{background-image:var(--inv-button-rounded)}
#inventoryDialog.inventory-original-png .inventory-bookmarks button::before{background-image:var(--inv-button-square)}
#inventoryDialog.inventory-original-png .preview-controls button::before{background-image:var(--inv-button-pill)}
#inventoryDialog.inventory-original-png button.close::before,
#inventoryDialog.inventory-original-png .inventory-popup-close::before{background-image:var(--inv-button-round)}
#inventoryDialog.inventory-original-png .inventory-item-menu .rpg-actions button:first-child::before{background-image:var(--inv-button-point)}
#inventoryDialog.inventory-original-png .inventory-png-button[aria-pressed=true]::before,
#inventoryDialog.inventory-original-png .inventory-bookmarks button[aria-pressed=true]::before,
#inventoryDialog.inventory-original-png :is(.inventory-png-button,.inventory-bookmarks button,.preview-controls button):focus-visible::before{
 opacity:1;filter:none;
}
@media(hover:hover){
 #inventoryDialog.inventory-original-png :is(.inventory-png-button,.inventory-bookmarks button,.preview-controls button,button.close,.inventory-popup-close):hover::before{
  opacity:1;filter:none;
 }
}
#inventoryDialog.inventory-original-png :is(.inventory-png-button,.inventory-bookmarks button,.preview-controls button,button.close,.inventory-popup-close):active{transform:scale(.96)}
#inventoryDialog.inventory-original-png .inventory-png-button:disabled{opacity:.38;pointer-events:none}
#inventoryDialog.inventory-original-png .rpg-tabs{
 display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px;
}
#inventoryDialog.inventory-original-png .rpg-tabs .inventory-png-button{
 min-width:0!important;flex:1 0 28%;
 height:43px;min-height:43px!important;padding:5px 9px!important;
 line-height:1.1;font-size:12px!important;
}
#inventoryDialog.inventory-original-png .inventory-item-menu{
 border:solid transparent!important;border-width:19px!important;
 border-image:url('/assets/ui/panel.png') 105 fill / 19px / 0 stretch!important;
 background:#070b14f7!important;max-height:66%!important;
}
#inventoryDialog.inventory-original-png .inventory-item-menu .rpg-actions button{
 min-height:45px;padding:6px!important;
}
#inventoryDialog.inventory-original-png .inventory-bookmarks button{
 padding:4px!important;
}
@media(max-width:680px){
 #inventoryDialog.inventory-original-png{
  height:96dvh!important;max-height:98dvh!important;
  border-width:16px;border-image:url('/assets/ui/panel.png') 105 fill / 16px / 0 stretch;
  padding:3px!important;
 }
 #inventoryDialog.inventory-original-png .rpg-layout{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(142px,.85fr) minmax(195px,1.15fr);
  gap:5px!important;
 }
 #inventoryDialog.inventory-original-png .inventory-character-stage{
  padding:12px 4px 4px;border-width:13px;border-image:url('/assets/ui/panel.png') 105 fill / 13px / 0 stretch;
 }
 #inventoryDialog.inventory-original-png .inventory-stage-heading{font-size:11px;top:0}
 #inventoryDialog.inventory-original-png .inventory-character-caption{bottom:22px;font-size:11px}
 #inventoryDialog.inventory-original-png .equipment-slots{inset:15px 4px 26px!important}
 #inventoryDialog.inventory-original-png .equipment-slots .rpg-slot{
  width:clamp(29px,8.8vw,38px)!important;height:clamp(29px,8.8vw,38px)!important;
 }
 #inventoryDialog.inventory-original-png .preview-controls button{min-height:31px!important;font-size:11px!important;padding:2px!important}
 #inventoryDialog.inventory-original-png .rpg-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px!important}
 #inventoryDialog.inventory-original-png .rpg-tabs .inventory-png-button{
  width:100%;height:34px;min-height:34px!important;
  padding:2px!important;font-size:10px!important;
 }
 #inventoryDialog.inventory-original-png .rpg-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:47px;
  min-height:80px;height:clamp(100px,20dvh,160px)!important;
  gap:3px!important;
 }
 #inventoryDialog.inventory-original-png .inventory-permanent-details{
  min-height:62px;max-height:27%;margin-top:2px;padding:3px 6px;
  border-width:12px;border-image:url('/assets/ui/panel.png') 105 fill / 12px / 0 stretch;
 }
 #inventoryDialog.inventory-original-png .inventory-permanent-details .inventory-info-heading{font-size:10px;margin:0}
 #inventoryDialog.inventory-original-png .inventory-permanent-details .inventory-info-icon{width:34px;height:34px;margin:0 5px 0 0}
 #inventoryDialog.inventory-original-png .rpg-coins{min-height:30px;margin:0;padding:0;gap:9px}
 #inventoryDialog.inventory-original-png .rpg-coins .inventory-original-coin{font-size:12px}
 #inventoryDialog.inventory-original-png .rpg-coins img{width:21px;height:21px}
}
@media(max-width:680px) and (orientation:landscape) and (max-height:540px){
 #inventoryDialog.inventory-original-png .rpg-layout{
  grid-template-columns:minmax(170px,.8fr) minmax(230px,1.2fr);
  grid-template-rows:minmax(0,1fr);
 }
}
@media(prefers-reduced-motion:reduce){
 #inventoryDialog.inventory-original-png .inventory-png-button::before,
 #inventoryDialog.inventory-original-png .inventory-bookmarks button::before{transition:none}
}