/* =============================================
   Snooker Ranking — Public Stylesheet
   Inspired by Austrian Snooker League aesthetic
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600&display=swap');

/* ── Custom Properties ────────────────────────── */
.snr-wrap {
    --snr-green-dark:   #0d3b1e;
    --snr-green:        #145a2c;
    --snr-green-mid:    #1a7a38;
    --snr-green-light:  #21a045;
    --snr-accent:       #39d353;
    --snr-gold:         #48d1ff;
    --snr-text:         #ffffff;
    --snr-text-dim:     rgba(255,255,255,0.65);
    --snr-text-muted:   rgba(255,255,255,0.35);
    --snr-row-odd:      rgba(0,0,0,0.25);
    --snr-row-even:     rgba(0,0,0,0.10);
    --snr-row-first:    rgba(72,209,255,0.12);
    --snr-border:       rgba(255,255,255,0.08);
    --snr-radius:       6px;
    --snr-font-display: 'Barlow Condensed', sans-serif;
    --snr-font-body:    'Barlow', sans-serif;

    font-family:        var(--snr-font-body);
    color:              var(--snr-text);
    background:         var(--snr-green-dark);
    border-radius:      12px;
    overflow:           hidden;
    max-width:          760px;
    margin:             0 auto;
    box-shadow:         0 8px 40px rgba(0,0,0,0.5),
                        inset 0 1px 0 rgba(255,255,255,0.05);
    position:           relative;
}

/* Subtle felt texture overlay */
.snr-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.04) 2px,
            rgba(0,0,0,0.04) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* ── Header ───────────────────────────────────── */
.snr-header {
    background:     linear-gradient(135deg, #0a2d17 0%, var(--snr-green) 60%, #1a6b32 100%);
    padding:        20px 28px 20px 24px;
    display:        flex;
    align-items:    center;
    gap:            18px;
    border-bottom:  3px solid var(--snr-green-light);
    position:       relative;
    z-index:        1;
}

.snr-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--snr-accent), transparent);
    opacity: 0.6;
}

.snr-logo-area {
    flex-shrink: 0;
}

.snr-title-area {
    flex: 1;
}

.snr-title {
    font-family:    var(--snr-font-display);
    font-size:      clamp(1.5rem, 4vw, 2.2rem);
    font-weight:    800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--snr-text);
    margin:         0 0 4px 0;
    padding:        0;
    line-height:    1;
    border:         none;
    background:     none;

    /* Highlight first letter of each word in green */
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.snr-subtitle {
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.snr-tag {
    font-family:    var(--snr-font-display);
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--snr-text-dim);
    background:     rgba(255,255,255,0.08);
    border:         1px solid rgba(255,255,255,0.14);
    border-radius:  4px;
    padding:        2px 8px;
}

/* ── Player List ──────────────────────────────── */
.snr-list {
    position: relative;
    z-index:  1;
}

.snr-empty {
    text-align:  center;
    padding:     40px 24px;
    color:       var(--snr-text-dim);
    font-style:  italic;
    position:    relative;
    z-index:     1;
}

/* ── Single Row ───────────────────────────────── */
.snr-row {
    display:         flex;
    align-items:     stretch;  /* let all cells grow to the portrait's height */
    gap:             0;
    padding:         0;
    border-bottom:   1px solid var(--snr-border);
    transition:      background 0.2s ease, transform 0.15s ease;
    position:        relative;
    /* overflow: hidden removed — would clip the uncropped portrait */
    cursor:          default;
}

.snr-row:nth-child(odd) {
    background: var(--snr-row-odd);
}

.snr-row:nth-child(even) {
    background: var(--snr-row-even);
}

.snr-row--first {
    background: var(--snr-row-first) !important;
}

.snr-row:hover {
    background: rgba(57, 211, 83, 0.1) !important;
    transform:  translateX(3px);
}

/* Accent bar on hover */
.snr-row::before {
    content:    '';
    position:   absolute;
    left:       0; top: 0; bottom: 0;
    width:      3px;
    background: var(--snr-accent);
    transform:  scaleY(0);
    transition: transform 0.2s ease;
    transform-origin: center;
}

.snr-row:hover::before {
    transform: scaleY(1);
}

.snr-row--first::before {
    background: var(--snr-gold);
    transform:  scaleY(1);
}

/* ── Rank ─────────────────────────────────────── */
.snr-rank {
    flex:            0 0 52px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         12px 0;
    align-self:      stretch;
}

.snr-rank__num {
    font-family:    var(--snr-font-display);
    font-size:      1.6rem;
    font-weight:    800;
    color:          var(--snr-text-dim);
    line-height:    1;
    min-width:      28px;
    text-align:     center;
}

.snr-rank__num--gold {
    color: var(--snr-gold);
    text-shadow: 0 0 12px rgba(72, 209, 255, 0.5);
}

/* ── Media: Club logo (bg) + Portrait (fg) ───── */
/*
 * Layout strategy:
 * - .snr-media is a fixed-width column; its HEIGHT is set by the portrait image.
 * - The club layer is position:absolute and fills the cell — object-fit:contain
 *   ensures the full logo is always visible, never cropped.
 * - The portrait is position:relative (in normal flow) so it dictates the cell
 *   height, and uses width:100% + height:auto so it is never cropped either.
 */
.snr-media {
    flex:         0 0 96px;
    width:        96px;
    position:     relative;          /* anchor for absolute club layer */
    border-right: 1px solid var(--snr-border);
    background:   rgba(0,0,0,0.2);
    /* NO overflow:hidden — we must not clip the portrait */
}

/* Club logo — absolute, fills the cell, fully visible */
.snr-media__club {
    position: absolute;
    inset:    0;
    z-index:  1;
    display:  flex;
    align-items:     center;
    justify-content: center;
    padding:  6px;
}

.snr-media__club-logo {
    width:      100%;
    height:     100%;
    object-fit: contain;   /* never crop — show the full logo */
    display:    block;
    opacity:    0.4;
    filter:     brightness(1.1);
}

/* Portrait — in normal flow, drives the cell height */
.snr-media__portrait {
    position: relative;
    z-index:  2;
    width:    100%;
}

.snr-media__portrait-img {
    display:   block;
    width:     100%;
    height:    auto;       /* natural aspect ratio — never cropped */
    filter:    brightness(0.95) contrast(1.05);
    transition: filter 0.2s ease;
}

.snr-row:hover .snr-media__portrait-img {
    filter: brightness(1.05) contrast(1.05);
}

.snr-media__portrait-placeholder {
    width:           100%;
    min-height:      80px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.snr-media__portrait-placeholder svg {
    width:   40px;
    height:  40px;
    opacity: 0.3;
}

/* ── Player Name ──────────────────────────────── */
.snr-name {
    flex:            1;
    padding:         14px 16px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             1px;
    min-width:       0;
}

.snr-name__first {
    font-family:    var(--snr-font-display);
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--snr-text-dim);
    line-height:    1;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.snr-name__last {
    font-family:    var(--snr-font-display);
    font-size:      clamp(1.25rem, 3vw, 1.65rem);
    font-weight:    800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color:          var(--snr-text);
    line-height:    1;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.snr-row--first .snr-name__last {
    color: var(--snr-gold);
}

/* ── Points ───────────────────────────────────── */
.snr-points {
    flex:            0 0 auto;
    padding:         14px 24px 14px 16px;
    text-align:      right;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    justify-content: center;
    gap:             2px;
}

.snr-points__num {
    font-family:    var(--snr-font-display);
    font-size:      clamp(1.25rem, 3vw, 1.65rem);
    font-weight:    800;
    letter-spacing: 0.02em;
    color:          var(--snr-text);
    line-height:    1;
    white-space:    nowrap;
}

.snr-row--first .snr-points__num {
    color:       var(--snr-gold);
    text-shadow: 0 0 16px rgba(72, 209, 255, 0.4);
}

.snr-points__label {
    font-family:    var(--snr-font-display);
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--snr-text-muted);
    line-height:    1;
}

/* ── Footer decoration ────────────────────────── */
.snr-footer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         16px 24px;
    background:      linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
    position:        relative;
    z-index:         1;
}

.snr-footer__ball {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    box-shadow:    inset -2px -2px 4px rgba(0,0,0,0.4),
                   inset 1px 1px 3px rgba(255,255,255,0.2);
}

.snr-footer__ball:nth-child(1) { background: radial-gradient(circle at 35% 35%, #ff6060, #b00000); }
.snr-footer__ball:nth-child(2) { background: radial-gradient(circle at 35% 35%, #555, #111); }
.snr-footer__ball:nth-child(3) { background: radial-gradient(circle at 35% 35%, #66d466, #1a7a1a); }

/* ── Responsive ───────────────────────────────── */
@media ( max-width: 520px ) {
    .snr-header {
        padding: 16px 16px;
    }

    .snr-rank {
        flex: 0 0 38px;
    }

    .snr-rank__num {
        font-size: 1.2rem;
    }

    .snr-media {
        flex: 0 0 68px;
    }

    .snr-name {
        padding: 10px 10px;
    }

    .snr-name__last {
        font-size: 1.1rem;
    }

    .snr-points {
        padding: 10px 14px 10px 8px;
    }

    .snr-points__num {
        font-size: 1.1rem;
    }
}

/* ── Animation: staggered row entrance ───────── */
@keyframes snr-slide-in {
    from {
        opacity:   0;
        transform: translateX(-16px);
    }
    to {
        opacity:   1;
        transform: translateX(0);
    }
}

.snr-row {
    animation: snr-slide-in 0.35s ease both;
}

.snr-row:nth-child(1)  { animation-delay: 0.04s; }
.snr-row:nth-child(2)  { animation-delay: 0.08s; }
.snr-row:nth-child(3)  { animation-delay: 0.12s; }
.snr-row:nth-child(4)  { animation-delay: 0.16s; }
.snr-row:nth-child(5)  { animation-delay: 0.20s; }
.snr-row:nth-child(6)  { animation-delay: 0.24s; }
.snr-row:nth-child(7)  { animation-delay: 0.28s; }
.snr-row:nth-child(8)  { animation-delay: 0.32s; }
.snr-row:nth-child(9)  { animation-delay: 0.36s; }
.snr-row:nth-child(10) { animation-delay: 0.40s; }

/* ── Category Header Logo ─────────────────────── */
.snr-header-logo {
    max-height:  52px;
    max-width:   120px;
    object-fit:  contain;
    display:     block;
    filter:      drop-shadow(0 1px 4px rgba(0,0,0,0.5)) brightness(1.05);
}

/* ── Tabs: [snooker_ranking_tabs] ────────────── */
.snr-tabs-wrap {
    max-width: 760px;
    margin:    0 auto;
}

.snr-tabs-nav {
    display:          flex;
    flex-wrap:        wrap;
    gap:              4px;
    padding:          0 0 0 0;
    margin-bottom:    -1px; /* overlap the widget border */
    position:         relative;
    z-index:          2;
}

.snr-tab-btn {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 18px;
    background:     #0d3b1e;
    color:          rgba(255,255,255,0.6);
    border:         1px solid rgba(255,255,255,0.1);
    border-bottom:  none;
    border-radius:  8px 8px 0 0;
    cursor:         pointer;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      0.95rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:     background 0.18s ease, color 0.18s ease;
    position:       relative;
}

.snr-tab-btn:hover {
    background: #145a2c;
    color:      rgba(255,255,255,0.85);
}

.snr-tab-btn--active {
    background: #145a2c;
    color:      #ffffff;
    border-color: rgba(255,255,255,0.15);
    /* active tab "connects" to the panel below */
}

.snr-tab-btn--active::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0; right: 0;
    height:     3px;
    background: #39d353;
}

.snr-tab-btn__logo {
    height:     22px;
    width:      auto;
    object-fit: contain;
    display:    block;
    flex-shrink: 0;
    filter:     brightness(1.1);
}

.snr-tab-btn__label {
    white-space: nowrap;
}

.snr-tab-panel {
    /* hidden panels */
}

.snr-tab-panel[hidden] {
    display: none;
}

.snr-tab-panel--active {
    display: block;
}

/* First snr-wrap inside a tab panel gets top-left radius squared off
   so it lines up flush with the active tab */
.snr-tab-panel .snr-wrap {
    border-top-left-radius: 0;
}