/* Native client textures and compact inventory windows; never stretch sprite slots. */
#detail{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box}
#detail[open]{display:flex;flex-direction:column}
#detail .window-title{flex-shrink:0;padding:5px 4px;min-height:25px}
#detail-body{overflow-y:auto;min-height:0;padding:8px 3px;overscroll-behavior:contain}
#detail-footer{padding:6px 0 0;flex-shrink:0}#detail-footer button{min-height:27px;font-size:11px;width:100%}
#detail .profile-head{display:flex;align-items:center;gap:10px;margin:0 0 9px}#detail .profile-head .sprite{width:48px;height:48px;flex-shrink:0;object-fit:contain;image-rendering:pixelated}
#detail .profile-head h2{font-size:11px;margin:0 0 3px}#detail .profile-head strong{font-size:11px;color:#bfbfbf}#detail .profile-head p{font-size:11px;line-height:16px;margin:3px 0}
#detail .profile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 10px}#detail .profile-nav button{padding:5px 2px;min-height:29px}
#detail h3{font-size:11px;margin:10px 0 6px}#detail p{font-size:11px;line-height:16px}#detail .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}#detail .stats>div{padding:6px;font-size:11px;min-width:0}#detail .stats b{font-size:11px}#detail .stats small{font-size:11px}
/* Tibia inventory doll: amulet/helmet, weapon/armor/shield, ring/legs, boots; 34 px slots at 2x. */
#detail .profile-equipment{display:grid;grid-template-columns:repeat(3,84px);grid-template-areas:"amulet helmet ." "weapon armor shield" "ring legs ." ". boots .";justify-content:center;gap:4px 8px;margin:8px 0}
#detail .profile-equip-slot[data-slot=helmet]{grid-area:helmet}#detail .profile-equip-slot[data-slot=armor]{grid-area:armor}#detail .profile-equip-slot[data-slot=legs]{grid-area:legs}#detail .profile-equip-slot[data-slot=boots]{grid-area:boots}#detail .profile-equip-slot[data-slot=weapon]{grid-area:weapon}#detail .profile-equip-slot[data-slot=shield]{grid-area:shield}#detail .profile-equip-slot[data-slot=amulet]{grid-area:amulet}#detail .profile-equip-slot[data-slot=ring]{grid-area:ring}
#detail .profile-equip-slot .client-item-slot{width:68px;height:68px}
#detail .profile-equip-slot .client-item-slot .tiny{width:64px;height:64px;max-width:64px}
#detail .profile-equip-slot{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:0;height:auto;padding:0;gap:1px;border:0;border-image:none;background:none;box-shadow:none}
#detail .profile-equip-slot strong{font-size:11px;line-height:12px;color:#ddd}#detail .profile-equip-slot small{font-size:11px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}
.client-item-slot{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;background:none;border:2px solid transparent;border-image:url('/assets/ui/classic/item.png') 2 fill stretch;image-rendering:pixelated}
.client-item-slot .tiny,.arsenal-equipped .tiny{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;margin:0;max-width:32px}
.empty-slot{font-size:22px;color:#777}.profile-extra{margin:10px 0;border-top:1px solid #666;padding-top:7px}.profile-extra summary{font-size:11px;cursor:pointer;color:#daca9a}
#detail .profile-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}#detail .profile-actions button,#detail .qol-toolbar button{font-size:11px;padding:5px 7px;min-height:26px}
#detail .gene-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}#detail .gene-grid>div{font-size:11px;padding:5px 2px;min-width:0;text-align:center}#detail .gene-grid b{font-size:11px}
.profile-buff{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0}.profile-buff span{display:flex;flex-direction:column;font-size:11px}.profile-buff small{font-size:11px;color:#bbb}
#inventory-dialog,#summon-dialog{width:min(600px,calc(100vw - 20px));max-height:calc(100dvh - 24px);box-sizing:border-box}
#inventory-dialog[open],#summon-dialog[open]{display:flex;flex-direction:column}#inventory-body,#summon-body{overflow-y:auto;min-height:0;padding:8px 2px;overscroll-behavior:contain}
.arsenal-top,.arsenal-toolbar,.arsenal-bottom,.summon-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:6px 0 9px;font-size:11px}.arsenal-top{flex-wrap:nowrap}.arsenal-top>button{font-size:11px;min-height:32px}
.arsenal-monster{display:flex;align-items:center;gap:8px;text-align:left;flex:1;min-width:0;padding:6px!important}.arsenal-monster span{display:flex;flex-direction:column;flex:1;min-width:0}.arsenal-monster strong{font-size:11px}.arsenal-monster small{font-size:11px;white-space:nowrap}.arsenal-monster .tiny{width:32px;height:32px;flex-shrink:0}
.arsenal-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:8px 0}.arsenal-categories button{display:flex;justify-content:space-between;gap:4px;font-size:11px;padding:5px 7px;min-height:28px}.arsenal-categories small{color:#bbb;font-size:11px}
.arsenal-filters{display:grid;grid-template-columns:2fr 1fr;gap:7px;margin:8px 0}.arsenal-filters label{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0}.arsenal-filters input,.arsenal-filters select{width:100%;min-width:0;height:28px;font-size:11px;box-sizing:border-box;padding:3px}
.arsenal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:100px}
.arsenal-item{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-start;min-width:0;min-height:116px;padding:7px 3px;font-size:11px;box-sizing:border-box;background:url('/assets/ui/classic/dark_background.png') repeat;border-image:none;border:1px solid #777;box-shadow:inset 1px 1px #999,inset -1px -1px #222}
.arsenal-item strong{font-size:11px;line-height:14px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arsenal-item>small{font-size:11px;color:#bcbcbc;line-height:13px;max-height:26px;overflow:hidden;max-width:100%}.arsenal-item .rarity{font-size:11px;padding:0 3px}.client-item-slot b{position:absolute;bottom:0;right:1px;color:white;font-size:11px;text-shadow:none;background:#171717a8}
.arsenal-empty{grid-column:1/-1;align-self:center;text-align:center;font-size:11px!important;color:#aaa;padding:15px}.arsenal-equipped{display:flex;gap:10px;align-items:center;font-size:11px;margin-bottom:8px}.arsenal-equipped span{flex:1}
.arsenal-bottom{justify-content:space-between;border-top:1px solid #777;padding-top:8px}.arsenal-bottom button,.summon-toolbar button{font-size:11px;padding:5px 7px;min-height:27px}
.client-owned-grid,.summon-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.client-owned-grid button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;font-size:11px;padding:6px 3px}.client-owned-grid small{font-size:11px}.client-owned-grid .tiny{width:32px;height:32px}
.summon-tiers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.summon-tiers button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:5px 1px}.summon-tiers strong{font-size:11px;overflow:hidden;max-width:100%;text-overflow:ellipsis}.summon-tiers small{font-size:11px}.summon-tiers .tiny{width:26px;height:26px}
.summon-candidate{display:flex;flex-direction:column;align-items:center;border:1px solid #666;background:url('/assets/ui/classic/dark_background.png');gap:3px;padding:5px;font-size:11px;min-width:0}.summon-candidate strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.summon-candidate .tiny{width:32px;height:32px}.summon-undiscovered .tiny{filter:grayscale(1);opacity:.45}.summon-candidate label{font-size:11px;display:flex;gap:5px;align-items:center}.summon-candidate input{width:52px;font-size:11px;padding:2px}
.summon-config-tabs{display:flex;gap:4px;margin:8px 0}.summon-config-tabs button{flex:1;font-size:11px;min-width:0;padding:5px 2px}
.summon-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.summon-fields label{display:flex;flex-direction:column;gap:3px;font-size:11px}.summon-fields input,.summon-fields select{width:100%;box-sizing:border-box;font-size:11px;min-height:25px}.summon-fields input[type=checkbox]{width:auto;align-self:flex-start}
.summon-gene-fields{margin-top:10px}.summon-gene-fields>div{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:6px;align-items:center;margin:5px 0;font-size:11px}.summon-gene-fields label{display:flex;align-items:center;gap:3px}.summon-gene-fields input{width:48px;font-size:11px}
.summon-source-scroll{overflow-x:auto}.summon-source-scroll table{width:100%;font-size:11px}.summon-source-scroll td input{width:48px;font-size:11px;padding:3px}.summon-source-scroll td small{display:block;font-size:11px}.summon-toolbar input{width:55px;font-size:11px}
.summon-opening{text-align:center;padding:15px 0}.summon-opening canvas{width:240px;height:180px;max-width:100%;image-rendering:pixelated;background:url('/assets/ui/classic/dark_background.png');border:1px solid #777;box-shadow:inset 1px 1px #aaa}.summon-opening strong,.summon-opening small{display:block;margin:9px}.summon-opening progress{width:200px;height:8px;accent-color:#c3a867}
.summon-result{display:flex;gap:12px;align-items:center;padding:9px;background:url('/assets/ui/classic/dark_background.png');border:1px solid #baaa73;margin:8px 0;animation:summon-reveal .4s ease-out}.summon-result .sprite{width:48px;height:48px}.summon-result span{display:flex;flex-direction:column;gap:5px;font-size:11px}.summon-result small{font-size:11px}.summon-result button{font-size:11px;min-height:25px}
@keyframes summon-reveal{from{opacity:.2;filter:brightness(2)}to{opacity:1;filter:brightness(1)}}
@media(max-width:430px){.arsenal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.arsenal-top{gap:4px}.arsenal-monster>small{display:none}.summon-tiers{grid-template-columns:repeat(3,minmax(0,1fr))}.summon-tiers button{flex-direction:row;justify-content:center}.summon-tiers .tiny{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.summon-result{animation:none}}
#detail>.window-title{min-height:30px;padding:4px}#detail #close-detail{font-size:0;min-width:28px;width:28px;min-height:28px;flex:0 0 28px;border:0;background:none;padding:2px}#detail #close-detail::before{display:block;width:24px;height:24px;background:url('/assets/ui/classic/close-normal.png') center/24px no-repeat}
.client-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0;font-size:11px}.client-pager button{min-width:30px;min-height:28px;font-size:11px;padding:3px}
#inventory-body>label,#summon-body>label{display:flex;gap:7px;align-items:center;font-size:11px;margin:7px 0}#inventory-body>label input,#summon-body>label input{flex:1;min-width:0;font-size:11px;padding:4px}
#summon-body .modal-buttons button,#inventory-body .modal-buttons button{font-size:11px;min-height:30px;padding:5px 9px}#summon-body .hint,#inventory-body .hint{font-size:11px}
/* Bestiary Arena inventory: square slots tinted by rarity, count bottom-right; tap opens details. */
.arsenal-grid:has(.inventory-slot){grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}
.arsenal-item.inventory-slot{min-height:0;aspect-ratio:1;padding:0;gap:0;justify-content:center;border:2px solid var(--slot-edge);border-image:none;background:var(--slot-fill);box-shadow:inset 0 0 0 1px #0009}
.arsenal-item.inventory-slot .client-item-slot{width:100%;height:100%;border:0;border-image:none;background:none}
.arsenal-item.inventory-slot .client-item-slot .tiny{width:64px;height:64px;max-width:80%;max-height:80%}
.arsenal-item.inventory-slot .client-item-slot b{position:absolute;right:3px;bottom:1px;font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:none}
.rarity-slot-grey{--slot-fill:#3a3a3a;--slot-edge:#5a5a5a}
.rarity-slot-green{--slot-fill:#2d4a26;--slot-edge:#4f8a3d}
.rarity-slot-blue{--slot-fill:#24384f;--slot-edge:#4a78a8}
.rarity-slot-purple{--slot-fill:#3d2b4f;--slot-edge:#7a55a3}
.rarity-slot-yellow{--slot-fill:#4a4220;--slot-edge:#a8903a}
/* Creature card in the Bestiary Arena layout: genes as green bars, framed portrait, tier stars. */
#detail-title{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gene-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:6px 0 10px}
.gene-bars{display:flex;flex-direction:column;gap:7px;padding:10px 12px;background:#2a2a2a;border:2px solid #1b1b1b;box-shadow:inset 1px 1px #111,1px 1px #6a6a6a}
.gene-row{display:grid;grid-template-columns:1fr auto;row-gap:4px;font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#d6d6d6;text-shadow:none}
.gene-row b{font-weight:normal;color:#e8e8e8}
.gene-row i{grid-column:1/-1;height:5px;background:linear-gradient(90deg,#5cb85c var(--fill),#0b0b0b var(--fill));border:1px solid #000}
.gene-side{display:flex;flex-direction:column;align-items:center;gap:4px;font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#b9b9b9;text-shadow:none}
.gene-side strong{font:bold 22px 'Tibia Pixel',Verdana,sans-serif;color:#5aa6ff;text-shadow:none}
.gene-portrait{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;border:2px solid var(--slot-edge);background:var(--slot-fill);box-shadow:inset 0 0 0 1px #000a}
.gene-portrait .sprite{width:88px;height:88px;image-rendering:pixelated;object-fit:contain}
.gene-stars{position:absolute;top:1px;right:3px;font-size:11px;color:#f2c94c;text-shadow:none;letter-spacing:0}
@media (max-width:420px){.gene-card{grid-template-columns:1fr}.gene-side{flex-direction:row;justify-content:center;gap:10px}}
