.player-modal[hidden] { display: none; }
.roster-card { min-height: 0; aspect-ratio: 2 / 3; }
.player-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; }
.player-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1, 8, 14, .79); backdrop-filter: blur(7px); cursor: default; }
.player-modal-dialog { position: relative; z-index: 1; display: grid; grid-template-columns: 410px minmax(440px, 1fr); gap: 28px; width: min(1120px, 100%); max-height: min(880px, calc(100vh - 44px)); overflow: auto; padding: 32px; border: 1px solid #5d91a7; border-radius: 16px; background: radial-gradient(circle at 15% 10%, #25516c, #071421 58%); box-shadow: 0 28px 80px #000d; color: #eafaff; }
.player-modal-close { position: absolute; z-index: 2; top: 10px; right: 13px; width: 34px; height: 34px; border: 1px solid #6aaac5; border-radius: 50%; background: #081c2a; color: #d9f7ff; font-size: 25px; line-height: 1; cursor: pointer; }
.player-modal-close:hover { border-color: #ffe07a; color: #ffe07a; }
.modal-card-stage { min-height: 620px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #06111d, #123447 54%, #07101b); }
.modal-player-card { position: relative; width: 328px; aspect-ratio: 2 / 3; overflow: hidden; border: 4px solid #9e8245; border-radius: 18px 18px 46px 46px; background: linear-gradient(145deg, #5d4d2d, #131a28 46%, #746038); box-shadow: 0 16px 28px #000b, inset 0 0 0 2px #f2dc8955; }
.modal-player-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid #fbe9a777; border-radius: 9px 9px 28px 28px; background: repeating-linear-gradient(135deg, #fff1 0 5px, transparent 5px 11px); }
.modal-card-tier,.modal-card-rating,.modal-card-position,.modal-card-avatar,.modal-card-stars,.modal-player-card strong,.modal-card-condition { position: absolute; z-index: 1; }
.modal-card-tier { top: 22px; left: 22px; color: #ffe07a; font-size: 13px; letter-spacing: 1px; }
.modal-card-rating { top: 41px; right: 23px; color: #fff4be; font-size: 62px; font-style: italic; text-shadow: 0 3px 2px #000; }
.modal-card-position { top: 105px; left: 23px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #fff4bd99; border-radius: 50%; font-size: 16px; font-weight: 900; }
.modal-card-avatar { top: 125px; left: 50%; display: grid; width: 164px; height: 181px; place-items: center; transform: translateX(-50%); border-radius: 52% 52% 34% 34%; background: radial-gradient(circle at 50% 20%, #c8f9ff 0 13%, #4b9bda 14% 38%, #171e6c 39% 100%); box-shadow: 0 0 22px #64e5ff99; font-size: 47px; font-weight: 900; }
.modal-card-stars { top: 333px; left: 0; right: 0; color: #f8d76f; font-size: 21px; letter-spacing: 3px; text-align: center; }
.modal-player-card strong { right: 12px; bottom: 59px; left: 12px; overflow: hidden; font-size: 21px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.modal-card-condition { top: auto !important; right: 0; bottom: 28px !important; left: 0; color: #bbd7e4; font-size: 14px; text-align: center; }
.modal-player-insights > p:first-child { margin: 3px 0 7px; color: #7fc6de; font-size: 10px; letter-spacing: 1.5px; }
.modal-player-insights h2 { margin: 0; font-size: 25px; }.modal-player-insights > span { color: #a5c5d2; font-size: 12px; }
.modal-summary { display: flex; gap: 7px; margin-top: 16px; }.modal-summary span { flex: 1; padding: 9px 5px; border: 1px solid #ffffff1c; border-radius: 6px; color: #99b8c5; font-size: 9px; text-align: center; }.modal-summary b { display: block; margin-top: 4px; color: #ffd96d; font-size: 16px; }
.radar-wrap { display: grid; place-items: center; margin: 2px auto 0; }.player-radar { width: min(100%, 282px); overflow: visible; }.radar-grid { fill: none; stroke: #a7c7d244; stroke-width: 1.5; }.radar-axis { stroke: #b9d7e044; stroke-width: 1; }.radar-data { fill: #37cde65c; stroke: #65efff; stroke-width: 3; }.radar-dot { fill: #ffd76a; }.radar-label { fill: #cdebf3; font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.modal-stat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }.modal-stat-list div { padding: 7px 5px; border: 1px solid #ffffff17; border-radius: 5px; background: #04111c; text-align: center; }.modal-stat-list span { display: block; color: #8eafbc; font-size: 9px; }.modal-stat-list b { display: block; margin-top: 2px; color: #eafaff; font-size: 14px; }.modal-note { margin: 14px 0 0; color: #7695a3; font-size: 10px; line-height: 1.5; }
@media (max-width: 760px) { .player-modal { padding: 10px; }.player-modal-dialog { grid-template-columns: 1fr; gap: 15px; padding: 42px 17px 18px; }.modal-card-stage { min-height: 475px; }.modal-player-card { width: min(278px, 78vw); }.modal-card-avatar { top: 106px; width: 138px; height: 152px; }.modal-card-stars { top: 282px; }.modal-summary { gap: 4px; }.modal-stat-list { grid-template-columns: repeat(4, 1fr); } }