/* Player details — dialog is 100 × 77 cqw; panels are images from assets/detail/. */
.pd-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:#000b;padding:5vh 3vw 3vh}
.pd-dialog{position:relative;width:min(100%,1180px,calc((100dvh - 9vh) * 100 / 77));aspect-ratio:100/77;container-type:inline-size;border:.35cqw solid #7fd0ff;border-radius:2.2cqw;background:linear-gradient(160deg,#0f4a91,#0a2c5e 55%,#08214a);box-shadow:0 0 0 .3cqw #0b2d63,0 1.5cqw 4cqw #000c,inset 0 .3cqw 1cqw #9fdcff55;font-family:Arial,sans-serif;color:#fff}
.pd-dialog button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.pd-dialog button:disabled{cursor:not-allowed;opacity:.55}
.pd-dialog img{pointer-events:none}

.pd-title{position:absolute;left:50%;top:-4.2cqw;transform:translateX(-50%);z-index:3;padding:.5cqw 4cqw .8cqw;border:.35cqw solid #ffe2a6;border-radius:2.2cqw;background:linear-gradient(#ffc163,#f08a14 55%,#c9620a);box-shadow:0 .4cqw 0 #8a3f05,0 .8cqw 1.6cqw #0008;font:italic 900 3.4cqw/1 'Barlow Condensed',Arial;-webkit-text-stroke:.25cqw #8a3f05;paint-order:stroke fill;text-shadow:0 .3cqw 0 #8a3f05}
.pd-close{position:absolute;right:-2.2cqw;top:-2.6cqw;width:6cqw;aspect-ratio:200/196;z-index:4}
.pd-close img{width:100%;height:100%}
.pd-close:hover img{filter:brightness(1.12)}

.pd-strip{position:absolute;left:3cqw;top:2cqw;width:94cqw;height:12cqw;background:url('assets/detail/avatar-strip.webp') center/100% 100% no-repeat}
.pd-avatar{position:absolute;top:28%;width:8.7%;height:55%;border-radius:1cqw;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.pd-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.pd-avatar:not(.active){filter:saturate(.75) brightness(.85)}
.pd-avatar.active{box-shadow:0 0 0 .3cqw #ffd166,0 0 1.2cqw #ffd166}
.pd-avatar:hover{filter:none}
.pd-strip-arrow{position:absolute;top:30%;width:2.4cqw;height:40%;border-radius:.6cqw!important;background:#0b2d63cc!important;font:900 2.4cqw/1 Arial!important;color:#ffd166!important}
.pd-strip-arrow.left{left:-2.8cqw}.pd-strip-arrow.right{right:-2.8cqw}

.pd-info{position:absolute;left:3cqw;top:15.5cqw;width:57cqw;height:25cqw;background:url('assets/detail/info-panel.webp') center/100% 100% no-repeat}
.pd-namebar{position:absolute;left:5%;top:24%;width:90%;height:15%;display:flex;align-items:center;gap:1.4%;padding:0 2.2%}
.pd-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7dff7d;font:800 1.9cqw Arial;text-shadow:0 .15cqw .2cqw #000}
.pd-name small{color:#bfe3ff;font-size:.8em}
.pd-grade{width:3cqw;height:3cqw;border-radius:50%;display:grid;place-items:center;border:.25cqw solid #e9f3ff;background:radial-gradient(circle at 35% 30%,#2e3f58,#0c1522);font:900 1.5cqw Arial;color:#7dff7d;box-shadow:0 .2cqw .5cqw #0008}
.rarity-a .pd-grade{color:#60a9fd}.rarity-s .pd-grade{color:#d6a4ff}.rarity-x .pd-grade{color:#ff9e36}.rarity-c .pd-grade,.rarity-d .pd-grade{color:#dfe6ee}
.pd-btn{width:12%;height:78%;background:url('assets/detail/orange-btn.webp') center/100% 100% no-repeat!important;font:700 1.4cqw Arial!important;text-shadow:0 .1cqw .2cqw #7a3100}
.pd-btn:not(:disabled):hover{filter:brightness(1.1)}
.pd-fields{position:absolute;left:10.8%;top:44%;width:78.2%;height:45.5%;display:grid;grid-template-columns:1fr 1fr;column-gap:7.5%;row-gap:15%}
.pd-field{display:flex;align-items:center;gap:4%;padding:0 5%;min-width:0}
.pd-field span{color:#9fd3ff;font:700 1.3cqw Arial}
.pd-field b{margin-left:auto;color:#ffe066;font:800 1.5cqw Arial;white-space:nowrap}
.pd-field em{color:#ff6b6b;font:800 1.2cqw Arial;font-style:normal}
.pd-field .price-arrow{font-size:1.1cqw}
.pd-field .price-arrow.positive{color:#5ee08a}.pd-field .price-arrow.negative{color:#ff6b6b}

.pd-message{position:absolute;left:3cqw;top:41.5cqw;width:57cqw;height:9cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 1.8cqw;border-style:solid;border-width:.9cqw;border-image:url('assets/detail/message-panel.webp') 70 fill / 2cqw stretch;box-sizing:border-box}
.pd-skills{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:center;gap:.5cqw .6cqw}
.pd-message-title{color:#9fd3ff;font:800 1.3cqw Arial;letter-spacing:.1cqw}
.pd-skill{display:flex;align-items:center;gap:.4cqw;padding:.3cqw .8cqw .3cqw .3cqw;border-radius:2cqw;background:#08214acc;border:.15cqw solid #5fa8ee;font:700 1.02cqw Arial;white-space:nowrap}
.pd-skill i{font-style:normal;width:1.9cqw;height:1.9cqw;display:grid;place-items:center;border-radius:50%;background:#0f4a91;font-size:1.3cqw}

.pd-graph{position:absolute;left:3cqw;top:51.5cqw;width:36cqw;height:23.5cqw;background:url('assets/detail/graph-panel.webp') center/100% 100% no-repeat}
.pd-graph-title{position:absolute;left:5%;right:5%;top:1%;height:10%;display:flex;align-items:center;justify-content:space-between;font:800 1.3cqw Arial;text-shadow:0 .1cqw .2cqw #0a3a7a}
.pd-graph-title span{color:#ffe066;font:700 1.05cqw Arial}
.pd-graph-area{position:absolute;left:5.7%;right:5.5%;top:16%;bottom:12.5%}
.pd-chart{width:100%;height:100%;overflow:visible}
.pd-chart polyline{fill:none;stroke:#ff4d4d;stroke-width:3;vector-effect:non-scaling-stroke}
.pd-chart circle{fill:#ff4d4d;stroke:#fff;stroke-width:1.2}
.pd-chart text{fill:#e9f3ff;font:700 17px Arial}
.pd-chart .pd-y{fill:#ffe066}

.pd-stat{position:absolute;left:40cqw;top:51.5cqw;width:20cqw;height:23.5cqw;background:url('assets/detail/stat-panel.webp') center/100% 100% no-repeat}
.pd-stat-title{position:absolute;left:0;right:0;top:1.5%;height:8%;display:flex;align-items:center;justify-content:center;font:800 1.3cqw Arial;text-shadow:0 .1cqw .2cqw #0a3a7a}
.pd-stat-row{position:absolute;left:11%;width:78%;height:10%;display:flex;align-items:center;gap:4%;padding:0 3%}
.pd-stat-row span{width:22%;font:800 1.05cqw Arial}
.pd-stat-row i{flex:1;height:38%;border-radius:.3cqw;background:#0b1f3d99;overflow:hidden}
.pd-stat-row u{display:block;height:100%;background:linear-gradient(#ffe066,#f4a10b);text-decoration:none}
.pd-stat-row b{width:22%;text-align:right;font:800 1.05cqw Arial}

.pd-stars{position:absolute;left:62cqw;top:15.5cqw;width:30cqw;height:5.2cqw;left:calc(61.5cqw + (35.5cqw - 30cqw) / 2);background:url('assets/detail/stars.webp') left center/30cqw 100% no-repeat}
.pd-stars i{position:absolute;inset:0 auto 0 0;background:url('assets/detail/stars.webp') left center/30cqw 100% no-repeat;filter:sepia(1) saturate(5) hue-rotate(-8deg) brightness(1.15)}
.pd-equip{position:absolute;left:61.5cqw;top:21.5cqw;width:35.5cqw;height:53.5cqw;background:url('assets/detail/equip-panel.webp') center/100% 100% no-repeat}
.pd-slot{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:1cqw}
.pd-slot img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 .2cqw .3cqw #000a)}
.pd-slot span{color:#bfe3ffaa;font:700 .95cqw Arial;text-align:center}
.pd-slot small{position:absolute;right:4%;bottom:3%;color:#ffe066;font:800 1.1cqw Arial;text-shadow:0 .1cqw .2cqw #000}
.pd-slot:hover{box-shadow:0 0 1cqw #7fd0ff}

/* Equip mode — left side becomes the categorised inventory; clicking an item wears it, clicking a worn slot returns it. */
.pd-equip-left{position:absolute;left:3cqw;top:15.5cqw;width:57cqw;height:59.5cqw;box-sizing:border-box;padding:1.4cqw 2cqw;border-style:solid;border-width:.9cqw;border-image:url('assets/detail/message-panel.webp') 70 fill / 2cqw stretch;display:flex;flex-direction:column;gap:1.1cqw}
.pd-equip-head{display:flex;align-items:center;gap:1cqw;height:3.6cqw}
.pd-details-btn{height:3.4cqw;aspect-ratio:1484/546;margin-left:auto}
.pd-details-btn img{width:100%;height:100%;display:block}
.pd-details-btn:hover img,.pd-cat:not(.active):hover img{filter:brightness(1.12)}
.pd-cats{display:flex;gap:.5cqw;height:2.9cqw}
.pd-cat{height:100%}
.pd-cat img{height:100%;width:auto;display:block}
.pd-cat.active img{filter:sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.05) drop-shadow(0 0 .4cqw #ffd27a)}
.pd-cat.pd-cat-orange img{filter:grayscale(1) brightness(1.05)}
.pd-cat.pd-cat-orange.active img{filter:drop-shadow(0 0 .4cqw #ffd27a)}
.pd-inv{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1cqw 1.3cqw;padding:1.2cqw;border-radius:1cqw;background:#061a3acc;box-shadow:inset 0 0 1cqw #0008}
.pd-inv-box{aspect-ratio:1012/964;background:url('assets/detail/item-box.webp') center/100% 100% no-repeat!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:1cqw!important}
.pd-inv-item img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 .2cqw .3cqw #000a)}
.pd-inv-item small{position:absolute;right:6%;bottom:4%;color:#ffe066;font:800 1.1cqw Arial;text-shadow:0 .1cqw .2cqw #000}
.pd-inv-item:hover{box-shadow:0 0 0 .25cqw #ffd166,0 0 1cqw #ffd166}
.pd-r-common{box-shadow:inset 0 0 0 .2cqw #e8edf5aa}.pd-r-uncommon{box-shadow:inset 0 0 0 .2cqw #6ee7a0}.pd-r-rare{box-shadow:inset 0 0 0 .2cqw #69b7ff}.pd-r-epic{box-shadow:inset 0 0 0 .2cqw #c78cff}.pd-r-legendary{box-shadow:inset 0 0 0 .2cqw #ffc94d}
.pd-inv-empty{margin:-.4cqw 0 0;text-align:center;color:#bfe3ff;font:700 1.2cqw Arial}
.pd-inv-foot{margin-top:auto;display:flex;align-items:center;gap:.8cqw;color:#dbe9ff;font:700 1.2cqw Arial}
.pd-inv-arrow{width:2.6cqw;height:2.6cqw;border-radius:.6cqw!important;background:#0b2d63!important;border:.15cqw solid #7fd0ff!important;font:900 1.8cqw/1 Arial!important;color:#ffd166!important}
.pd-center-link{margin-left:auto;color:#ff9f3a!important;font:800 1.3cqw Arial!important;text-shadow:0 .1cqw .2cqw #000}
.pd-center-link:hover{color:#ffc36b!important;text-decoration:underline}
.pd-power{position:absolute;left:7%;bottom:6.5%;width:52%;display:flex;flex-direction:column;gap:.5cqw}
.pd-power .pd-field{height:2.5cqw;border-radius:.8cqw;background:#061a3ae6;border:.15cqw solid #7fb8ff88;padding:0 5%}
.pd-equip-mode .pd-slot:hover{box-shadow:0 0 0 .25cqw #ff8a8a,0 0 1cqw #ff6b6b}
.pd-soon{color:#ffd166;font:800 1.5cqw Arial;letter-spacing:.1cqw}
/* İsim ve derece rozeti oyuncunun kalitesinin renginde (oyundaki rarity-text renkleri). */
.pd-dialog.rarity-d .pd-name,.pd-dialog.rarity-d .pd-grade{color:#a8b1c0}
.pd-dialog.rarity-c .pd-name,.pd-dialog.rarity-c .pd-grade{color:#cbd3dd}
.pd-dialog.rarity-b .pd-name,.pd-dialog.rarity-b .pd-grade{color:#49cd89}
.pd-dialog.rarity-a .pd-name,.pd-dialog.rarity-a .pd-grade{color:#60a9fd}
.pd-dialog.rarity-s .pd-name,.pd-dialog.rarity-s .pd-grade{color:#bc8cf4}
.pd-dialog.rarity-x .pd-name,.pd-dialog.rarity-x .pd-grade{color:#ff9e36}
.pd-dialog .pd-name small{color:#bfe3ff}

/* Ekipmandan gelen hücum / savunma (yeşil +) */
.pd-field em.pd-gear-gain{color:#5be06b;margin-left:.4cqw}
.eq-gear-gain{margin-left:4px;font-style:normal;font-weight:900;color:#5be06b}

/* Ekipman giydirme ekranı: parçanın verdiği hücum (sarı) / savunma (mavi) */
.pd-gain{position:absolute;left:0;right:0;bottom:-.1cqw;display:flex;justify-content:center;gap:.3cqw;font:900 1.15cqw/1 Arial;font-style:normal;pointer-events:none}
.pd-gain b,.pd-gain u{text-decoration:none;padding:.18cqw .35cqw;border-radius:.4cqw;background:#000c;border:1px solid #ffffff33}
.pd-gain b{color:#ffd166}.pd-gain u{color:#7cc8ff}