/* SuperCoinsy - playerlist template v2 - LIGHT theme (Phase 2 Player feature) */

/* ===== SECTION WRAPPERS ===== */
.playerlist-section {
    background: #f7f9fc;
    padding: 16px 0;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #e3e8ef;
    box-sizing: border-box;
}

.playerlist-section * {
    box-sizing: border-box;
}

.playerlist-header {
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e3e8ef;
    flex-wrap: wrap;
    gap: 12px;
}

.playerlist-title {
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.playerlist-title small {
    color: #6b7280;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
}

.playerlist-sort {
    color: #6b7280;
    font-size: 12px;
    display: flex;
    gap: 6px;
}

.playerlist-sort select {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e3e8ef;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.playerlist-sort select:focus {
    outline: none;
    border-color: #f5a623;
}

/* ===== GRID ===== */
.playerlist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ===== CARD ===== */
.player-card {
    display: grid;
    grid-template-columns: 60px minmax(160px, 1fr) 222px 120px 148px;
    gap: 12px;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 20px;
    transition: all 0.15s;
    border: 1px solid #e3e8ef;
    overflow: hidden;
    min-width: 0;
}

.player-card:hover {
    border-color: #f5a623;
    box-shadow: 0 4px 16px rgba(245,166,35,0.15);
    transform: translateY(-1px);
}

/* ===== RATING BLOCK ===== */
.player-rating-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.player-rating-big {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f5a623, #c87b0a);
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(245,166,35,0.35);
}

.player-pos-badge {
    background: #f3f4f6;
    color: #c87b0a;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    border: 1px solid #e3e8ef;
}

/* ===== INFO ===== */
.player-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.player-name {
    color: #1f2937;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    white-space: nowrap;
}

.player-name:hover {
    color: #f5a623;
    text-decoration: none;
}

.player-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.player-meta-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.player-flag-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.player-flag-img,
.player-flag-name img {
    width: 20px;
    height: auto;
    border-radius: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}

.player-flag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.player-club {
    color: #1f2937;
    font-weight: 500;
    font-size: 12px;
}

.player-meta-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    flex-wrap: wrap;
}

/* ===== RARITY BADGES ===== */
.rarity-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: 1px solid rgba(0,0,0,0.1);
    color: #ffffff;
}

.rarity-toty       { background: linear-gradient(135deg, #001f5c 0%, #003c8f 50%, #f5a623 100%); color: #ffffff; }
.rarity-toty-icon  { background: linear-gradient(135deg, #001f5c, #ffd700); color: #ffffff; }
.rarity-tots         { background: linear-gradient(135deg, #facc15 0%, #65a30d 100%); color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rarity-tots-moments { background: linear-gradient(135deg, #fde047, #16a34a); color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rarity-icon       { background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rarity-hero       { background: linear-gradient(135deg, #b91c1c 0%, #fbbf24 100%); color: #ffffff; }
.rarity-birthday   { background: linear-gradient(135deg, #ff4d8d 0%, #c01060 100%); color: #ffffff; }
.rarity-rttf       { background: linear-gradient(135deg, #1a3b8c 0%, #4d8ee8 100%); color: #ffffff; }
.rarity-future     { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); color: #ffffff; }
.rarity-star       { background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%); color: #ffffff; }
.rarity-festival   { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); color: #ffffff; }
.rarity-champions  { background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%); color: #ffffff; }
.rarity-centurions { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); color: #ffffff; }
.rarity-thunder    { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rarity-titans     { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); color: #ffffff; }
.rarity-showdown   { background: linear-gradient(135deg, #ea580c 0%, #9a3412 100%); color: #ffffff; }
.rarity-trailblazers { background: linear-gradient(135deg, #059669 0%, #064e3b 100%); color: #ffffff; }
.rarity-inform     { background: linear-gradient(135deg, #000000 0%, #525252 100%); color: #ffffff; }
.rarity-headliners { background: linear-gradient(135deg, #1e293b 0%, #475569 100%); color: #ffffff; }
.rarity-wildcards  { background: linear-gradient(135deg, #93c5fd 0%, #1e3a8a 100%); color: #ffffff; }
.rarity-warp       { background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); color: #ffffff; }
.rarity-joga       { background: linear-gradient(135deg, #16a34a 0%, #fde047 100%); color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rarity-tour       { background: linear-gradient(135deg, #0891b2 0%, #1e40af 100%); color: #ffffff; }
.rarity-unbreak    { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); color: #ffffff; }
.rarity-fantasy    { background: linear-gradient(135deg, #f59e0b 0%, #8b5cf6 50%, #06b6d4 100%); color: #ffffff; }
.rarity-cornerstone { background: linear-gradient(135deg, #71717a 0%, #27272a 100%); color: #ffffff; }
.rarity-foundation { background: linear-gradient(135deg, #a16207 0%, #422006 100%); color: #ffffff; }
.rarity-knockout   { background: linear-gradient(135deg, #581c87 0%, #fbbf24 100%); color: #ffffff; }
.rarity-reload     { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); color: #ffffff; }
.rarity-eoae       { background: linear-gradient(135deg, #92400e 0%, #451a03 100%); color: #ffffff; }
.rarity-flashback  { background: linear-gradient(135deg, #ec4899 0%, #06b6d4 100%); color: #ffffff; }
.rarity-scream     { background: linear-gradient(135deg, #f97316 0%, #1c1917 100%); color: #ffffff; }
.rarity-moments    { background: linear-gradient(135deg, #38bdf8 0%, #0c4a6e 100%); color: #ffffff; }
.rarity-champion-icon { background: linear-gradient(135deg, #fbbf24 0%, #dc2626 100%); color: #ffffff; }
.rarity-fcpro      { background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%); color: #ffffff; }
.rarity-potm       { background: linear-gradient(135deg, #fbbf24 0%, #7c2d12 100%); color: #ffffff; }
.rarity-totw       { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); color: #ffffff; }
.rarity-otw        { background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%); color: #ffffff; }
.rarity-normal     { background: linear-gradient(135deg, #92400e 0%, #78350f 100%); color: #ffffff; }
.rarity-rare       { background: linear-gradient(135deg, #ca8a04 0%, #713f12 100%); color: #ffffff; }
.rarity-default    { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); color: #ffffff; }

/* ===== STATS ===== */
.player-stats {
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 5px;
    width: 222px;
    flex-shrink: 0;
    justify-self: center;
    justify-content: center;
}

.player-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.player-stat-num {
    width: 32px;
    text-align: center;
    padding: 4px 0;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.stat-90  { background: #16a34a; }
.stat-80  { background: #22c55e; }
.stat-70  { background: #eab308; color: #1f2937; }
.stat-low { background: #dc2626; }

.player-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.player-stats-empty {
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    padding: 6px 0;
}

/* ===== PRICE BLOCK ===== */
.player-price-block {
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.player-price-block .plat-badge {
    margin-top: 8px;
}

.player-price-pln {
    font-size: 19px;
    font-weight: 900;
    color: #1f2937;
    white-space: nowrap;
}

.player-price-scp {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    background: #fef9ef;
    border: 1px solid #f5d98a;
    border-radius: 6px;
    padding: 2px 8px;
    align-self: flex-end;
}

/* ===== BUTTON ===== */
.player-btn {
    background: linear-gradient(135deg, #f5a623, #d18d12);
    color: #ffffff;
    border: none;
    padding: 12px 12px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 12.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 0;
    width: 100%;
    letter-spacing: 0.3px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.player-btn:hover {
    background: linear-gradient(135deg, #ffb938, #f5a623);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(245,166,35,0.3);
}

.player-btn.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.player-btn.disabled:hover {
    background: #e5e7eb;
    color: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* ===== EMPTY STATE ===== */
.playerlist-empty {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e3e8ef;
}

/* ===== CATEGORY DESCRIPTION ===== */
.playerlist-category-desc {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 10px;
    border: 2px solid #e3e8ef;
    margin: 16px 0 20px 0;
    color: #1f2937;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* ===== WIDTH ALIGNMENT ===== */
.playerlist-wrapper .playerlist-category-desc,
.playerlist-wrapper .playerlist-section,
.playerlist-wrapper + section.reviews,
.playerlist-wrapper + .section.reviews {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.playerlist-wrapper + section.reviews,
.playerlist-wrapper + .section.reviews,
.playerlist-unified-width > section.reviews,
.playerlist-unified-width > .section.reviews {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    box-sizing: border-box;
    width: 100%;
}

/* ===== RESPONSIVE - tablet ===== */
@media (max-width: 1100px) {
    .player-card {
        grid-template-columns: 70px 1fr 1fr;
        grid-template-areas:
            "rating info  info"
            "stats  stats stats"
            "price  price button";
        gap: 12px;
    }
    .player-rating-block { grid-area: rating; }
    .player-info         { grid-area: info; }
    .player-stats        { grid-area: stats; }
    .player-price-block  { grid-area: price; text-align: left; align-self: center; }
    .player-btn          { grid-area: button; justify-self: end; min-width: 160px; }
}

/* ===== RESPONSIVE - mobile ===== */
@media (max-width: 600px) {
    .player-card {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "rating info"
            "stats  stats"
            "price  button";
        gap: 10px;
        padding: 12px;
    }
    .player-rating-big {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    .player-name      { font-size: 15px; }
    .player-price-pln { font-size: 17px; }
    .player-btn       { min-width: 130px; padding: 10px 14px; font-size: 12px; }
    .playerlist-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .player-stat-num   { font-size: 11px; }
    .player-stat-label { font-size: 8px; }
}

/* ===== SCP ICON ===== */
.player-price-scp i.scp {
    margin: 0 0 0 2px;
}
.player-price-scp i.scp:after {
    width: 16px;
    height: 16px;
    margin: -2px 2px;
}

/* ===== UNIFIED WIDTH ===== */
.playerlist-unified-width {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.playerlist-unified-width.playerlist-category-desc,
.playerlist-unified-width.player-search-block,
.playerlist-unified-width.playerlist-section,
section.reviews.playerlist-unified-width,
.section.reviews.playerlist-unified-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

article.playerlist-wrapper,
.playerlist-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.playerlist-wrapper > .playerlist-category-desc,
.playerlist-wrapper > .player-search-block,
.playerlist-wrapper > .playerlist-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ===== FILTER BAR + PLATFORM BADGE ===== */
.pf-bar { display: flex; align-items: center; gap: 10px; background: #1a2230; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px 0; flex-wrap: wrap; }
.pf-select-wrap { position: relative; flex: 0 0 auto; min-width: 160px; }
.pf-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #252f42; border: 1px solid #334155; border-radius: 7px; padding: 9px 14px; cursor: pointer; color: #c8d6e8; font-size: 13.5px; font-family: Arial, Helvetica, sans-serif; user-select: none; transition: border-color 0.15s; white-space: nowrap; }
.pf-select:hover { border-color: #f5a623; color: #fff; }
.pf-select.pf-active { border-color: #f5a623; color: #f5a623; }
.pf-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; color: inherit; }
.pf-chevron.pf-open { transform: rotate(180deg); }
.pf-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 9999; max-height: 300px; overflow-y: auto; padding: 4px 0; }
.pf-dropdown.pf-open { display: block; }
.pf-option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: #c8d6e8; font-family: Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; transition: background 0.1s; user-select: none; }
.pf-option:hover { background: #2d3e55; color: #fff; }
.pf-option input.pf-checkbox { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; min-width: 15px; border: 1.5px solid #4a5e78; border-radius: 3px; background: #1a2535; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; }
.pf-option input.pf-checkbox:checked { background: #f5a623; border-color: #f5a623; }
.pf-option input.pf-checkbox:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #1a2230; border-top: none; border-left: none; transform: rotate(45deg); }
.pf-option.pf-option-reset { color: #7a8fa8; font-size: 12px; border-bottom: 1px solid #2a3a50; padding-bottom: 10px; margin-bottom: 2px; }
.pf-option.pf-option-reset:hover { color: #f5a623; background: none; }
.pf-cb-reset { font-size: 11px; }
.pf-current-event-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f5a623; padding: 8px 14px 4px; opacity: 0.8; }
.pf-option-event { background: rgba(245, 166, 35, 0.1) !important; border-left: 3px solid #f5a623; color: #f5d98a !important; padding-left: 11px !important; }
.pf-option-event:hover { background: rgba(245, 166, 35, 0.18) !important; }
.pf-option-event input.pf-checkbox:checked { background: #f5a623; border-color: #f5a623; }
.pf-event-divider { height: 1px; background: #2a3a50; margin: 6px 0; }
.pf-search-wrap { position: relative; flex: 1 1 200px; min-width: 180px; }
.pf-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #7a8fa8; pointer-events: none; z-index: 1; }
.pf-search-input { width: 100% !important; background: #252f42 !important; border: 1px solid #334155 !important; border-radius: 7px !important; padding: 9px 36px 9px 40px !important; color: #e8eef7 !important; font-size: 13.5px !important; font-family: Arial, Helvetica, sans-serif !important; box-sizing: border-box !important; outline: none !important; transition: border-color 0.15s !important; height: auto !important; max-width: 100% !important; }
.pf-search-input::placeholder { color: #7a8fa8 !important; }
.pf-search-input:focus { border-color: #f5a623 !important; color: #fff !important; background: #2d3a50 !important; }
.pf-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #7a8fa8; cursor: pointer; font-size: 13px; padding: 2px 4px; display: none; line-height: 1; z-index: 1; }
.pf-clear-btn:hover { color: #f5a623; }
.pf-ver-search-wrap { padding: 8px 10px 6px; border-bottom: 1px solid #2a3a50; position: sticky; top: 0; background: #1e293b; z-index: 2; }
.pf-ver-search { width: 100% !important; background: #152030 !important; border: 1px solid #334155 !important; border-radius: 5px !important; padding: 6px 10px !important; color: #e8eef7 !important; font-size: 12.5px !important; font-family: Arial, Helvetica, sans-serif !important; box-sizing: border-box !important; outline: none !important; height: auto !important; max-width: 100% !important; }
.pf-ver-search::placeholder { color: #5a7090 !important; }
.pf-ver-search:focus { border-color: #f5a623 !important; }
.pf-count { font-size: 12.5px; color: #7a8fa8; margin: -10px 0 14px 4px; font-family: Arial, Helvetica, sans-serif; min-height: 18px; }
.player-card.pf-hidden { display: none !important; }
.plat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 3px 8px; line-height: 1.4; letter-spacing: 0.03em; }
.plat-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.plat-badge-pc { background: rgba(249, 115, 22, 0.15); color: #c2410c; border: 1px solid rgba(249, 115, 22, 0.35); }
.plat-badge-con { background: rgba(167, 139, 250, 0.15); color: #6d28d9; border: 1px solid rgba(167, 139, 250, 0.35); }