﻿.league-wrap{
      max-width:min(1120px,94vw);
      margin:24px auto 46px;
    }

    .league-hero{
      background:
        radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 1.2px) 0 0/20px 20px,
        linear-gradient(180deg,rgba(15,63,159,.98),rgba(22,79,184,.98));
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.16);
    }

    .league-hero .container{
      padding:38px 0 34px;
      text-align:center;
    }

    .league-title{
      margin:0 auto 10px;
      color:#fff;
      font-size:clamp(34px,5vw,58px);
      line-height:.98;
      letter-spacing:0;
    }

    .league-subtitle{
      max-width:720px;
      margin:0 auto;
      color:rgba(255,255,255,.88);
      font-size:clamp(16px,2vw,20px);
      font-weight:750;
      line-height:1.45;
    }

    .header .main-nav > a,
    .header .language-trigger,
    .header .user-pill{
      align-items:center !important;
      justify-content:center !important;
      line-height:1 !important;
    }

    .header .user-pill .u-name,
    .header .user-pill .u-rank{
      display:inline-flex !important;
      align-items:center !important;
      line-height:1 !important;
    }

    .header .user-pill{
      gap:8px !important;
    }

    .header .user-pill .u-ico{
      display:inline-flex !important;
      align-items:center !important;
      line-height:1 !important;
    }

    .league-grid{
      display:grid;
      grid-template-columns:minmax(260px,330px) minmax(0,1fr);
      gap:16px;
      align-items:start;
    }

    .league-card{
      border:1px solid #dfe8f8;
      border-radius:18px;
      background:#fff;
      box-shadow:0 14px 30px rgba(15,31,59,.08);
    }

    .league-card-pad{
      padding:18px;
    }

    .league-panel-title{
      margin:0 0 4px;
      color:#0f1f3b;
      font-size:18px;
      font-weight:1000;
      letter-spacing:0;
    }

    .league-muted{
      margin:0;
      color:#64748b;
      font-size:13px;
      font-weight:750;
      line-height:1.45;
    }

    .league-tier{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:16px;
    }

    .league-tier-icon{
      display:grid;
      place-items:center;
      width:54px;
      height:54px;
      border-radius:16px;
      background:linear-gradient(135deg,#f8fbff,#eaf2ff);
      border:1px solid #d9e6fb;
      color:#1f4fb8;
      font-size:26px;
      box-shadow:0 8px 18px rgba(31,79,184,.12);
    }

    .league-tier-icon.is-bronze{
      border-color:#f0b47a;
      background:linear-gradient(135deg,#fff7ed,#fed7aa);
      color:#9a3412;
    }

    .league-tier-icon.is-silver{
      border-color:#cbd5e1;
      background:linear-gradient(135deg,#ffffff,#e2e8f0);
      color:#475569;
    }

    .league-tier-icon.is-gold{
      border-color:#fde68a;
      background:linear-gradient(135deg,#fffbe6,#facc15);
      color:#854d0e;
    }

    .league-tier-icon.is-emerald{
      border-color:#86efac;
      background:linear-gradient(135deg,#ecfdf5,#34d399);
      color:#065f46;
    }

    .league-tier-icon.is-amethyst{
      border-color:#d8b4fe;
      background:linear-gradient(135deg,#faf5ff,#a855f7);
      color:#581c87;
    }

    .league-tier-img{
      display:block;
      width:44px;
      height:44px;
      object-fit:contain;
    }

    .league-stats{
      display:grid;
      gap:10px;
      margin-top:14px;
    }

    .league-stat{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:12px;
      border:1px solid #e4ebf8;
      border-radius:14px;
      background:#f8fbff;
    }

    .league-stat span{
      color:#64748b;
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .league-stat strong{
      color:#0f1f3b;
      font-size:16px;
      font-weight:1000;
      text-align:right;
    }

    .league-note{
      margin-top:14px;
      padding:12px;
      border:1px solid #dce8ff;
      border-radius:14px;
      background:#fff;
      color:#44546d;
      font-size:13px;
      font-weight:750;
      line-height:1.45;
    }

    .league-actions{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:14px;
    }

    .league-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      min-height:40px;
      width:100%;
      padding:9px 14px;
      border:1px solid #d7e3f7;
      border-radius:12px;
      background:#fff;
      color:#1f4fb8;
      font-size:14px;
      font-weight:1000;
      line-height:1.15;
      text-decoration:none;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(2,6,23,.04);
    }

    .league-btn.primary{
      border-color:#1f4fb8;
      background:#1f4fb8;
      color:#fff;
    }

    .league-btn:hover{
      background:#eef4ff;
      text-decoration:none;
    }

    .league-btn.primary:hover{
      background:#17439f;
    }

    .league-tabs{
      display:inline-flex;
      border:1px solid #dce6f7;
      border-radius:14px;
      overflow:hidden;
      background:#f8fbff;
    }

    .league-tab{
      min-height:42px;
      padding:10px 16px;
      border:0;
      border-right:1px solid #dce6f7;
      background:transparent;
      color:#334155;
      font-weight:1000;
      cursor:pointer;
    }

    .league-tab:last-child{
      border-right:0;
    }

    .league-tab.is-active{
      background:#1f4fb8;
      color:#fff;
    }

    .league-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:14px;
    }

    .league-head .league-muted:empty{
      display:none;
    }

    .league-table-wrap{
      overflow:auto;
      border:1px solid #e1e9f7;
      border-radius:16px;
      background:#fff;
    }

    .league-table{
      width:100%;
      border-collapse:collapse;
      min-width:640px;
    }

    .league-table th,
    .league-table td{
      padding:12px 14px;
      border-bottom:1px solid #edf2fb;
      text-align:left;
      vertical-align:middle;
    }

    .league-table th{
      color:#64748b;
      background:#f8fbff;
      font-size:12px;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .league-table tr:last-child td{
      border-bottom:0;
    }

    .league-table tr.is-me td{
      background:#eef5ff;
      font-weight:950;
    }

    .league-rank{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:34px;
      height:28px;
      padding:0 8px;
      border:1px solid #dbe7f8;
      border-radius:10px;
      background:#fff;
      color:#0f1f3b;
      font-weight:1000;
    }

    .league-table tr.is-me .league-rank{
      border-color:#1f4fb8;
      background:#1f4fb8;
      color:#fff;
    }

    .league-player{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      color:#0f1f3b;
      font-weight:950;
    }

    .league-player-name{
      display:inline-block;
      min-width:0;
      color:#0f1f3b;
    }

    .league-player-name.color-green{color:#16a34a}
    .league-player-name.color-blue{color:#1f4fb8}
    .league-player-name.color-purple{color:#7c3aed}
    .league-player-name.color-gold{color:#b7791f}

    .league-player-name.anim-pulse{
      animation:leagueNamePulse 1.6s ease-in-out infinite;
    }

    .league-player-name.anim-shimmer{
      color:transparent;
      background:linear-gradient(90deg,#1f4fb8,#7c3aed,#16a34a,#1f4fb8);
      background-size:220% 100%;
      -webkit-background-clip:text;
      background-clip:text;
      animation:leagueNameShimmer 2.2s linear infinite;
    }

    @keyframes leagueNamePulse{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.045)}
    }

    @keyframes leagueNameShimmer{
      from{background-position:0 50%}
      to{background-position:220% 50%}
    }

    .league-player.is-open{
      color:#94a3b8;
      font-style:italic;
      font-weight:900;
    }

    .league-flag-slot{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:30px;
      height:20px;
      flex:0 0 30px;
    }

    .league-country-flag{
      display:block;
      width:30px;
      height:20px;
      object-fit:cover;
      border:1px solid rgba(15,31,59,.18);
      border-radius:4px;
      box-shadow:0 1px 2px rgba(15,31,59,.12);
      background:#fff;
    }

    .league-country-pop{
      position:absolute;
      z-index:10020;
      max-width:220px;
      padding:8px 10px;
      border:1px solid #cfe0fb;
      border-radius:12px;
      background:#fff;
      color:#0f1f3b;
      font-size:13px;
      font-weight:1000;
      box-shadow:0 14px 32px rgba(15,31,59,.18);
      pointer-events:none;
    }

    .league-modal{
      position:fixed;
      inset:0;
      z-index:10050;
      display:grid;
      place-items:center;
      padding:22px;
      background:rgba(15,23,42,.52);
    }

    .league-modal[hidden]{
      display:none;
    }

    .league-modal-card{
      position:relative;
      width:min(720px,94vw);
      max-height:min(82vh,760px);
      overflow:auto;
      border:1px solid #dbe7f8;
      border-radius:22px;
      background:#fff;
      box-shadow:0 28px 70px rgba(15,23,42,.28);
      padding:26px;
    }

    .league-modal-close{
      position:absolute;
      top:14px;
      right:14px;
      display:grid;
      place-items:center;
      width:36px;
      height:36px;
      border:1px solid #dbe7f8;
      border-radius:12px;
      background:#fff;
      color:#0f1f3b;
      font-size:22px;
      font-weight:1000;
      line-height:1;
      cursor:pointer;
    }

    .league-modal-title{
      margin:0 44px 8px 0;
      color:#0f1f3b;
      font-size:28px;
      line-height:1.1;
      letter-spacing:0;
    }

    .league-modal-lead{
      margin:0 44px 18px 0;
      color:#475569;
      font-size:15px;
      font-weight:750;
      line-height:1.55;
    }

    .league-rules-list{
      display:grid;
      gap:12px;
      margin:0;
      padding:0;
      list-style:none;
    }

    .league-rules-list li{
      position:relative;
      padding:13px 14px 13px 42px;
      border:1px solid #e1e9f7;
      border-radius:16px;
      background:#f8fbff;
      color:#334155;
      font-size:14px;
      font-weight:750;
      line-height:1.5;
    }

    .league-rules-list li::before{
      content:"";
      position:absolute;
      top:16px;
      left:16px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:#1f4fb8;
      box-shadow:0 0 0 5px rgba(31,79,184,.12);
    }

    .league-rules-list a{
      color:#1f4fb8;
      font-weight:1000;
      text-decoration:none;
    }

    .league-rules-footnote{
      margin:14px 0 0;
      color:#64748b;
      font-size:12px;
      font-weight:750;
      line-height:1.45;
    }
    .league-badge-line{
      display:flex;
      align-items:center;
      gap:5px;
      flex-wrap:wrap;
      margin-top:5px;
    }

    .league-badge-img{
      width:18px;
      height:18px;
      object-fit:contain;
      border:1px solid #dbe7f8;
      border-radius:6px;
      background:#fff;
      box-shadow:0 2px 5px rgba(15,31,59,.06);
    }

    .league-private-badges{
      display:inline-flex;
      align-items:center;
      gap:5px;
      min-height:22px;
      padding:3px 8px;
      border:1px solid #dbe7f8;
      border-radius:999px;
      background:#f8fbff;
      color:#64748b;
      font-size:11px;
      font-weight:1000;
    }

    .league-total-badges{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:22px;
      padding:3px 8px;
      border:1px solid #dbe7f8;
      border-radius:999px;
      background:#fff;
      color:#1f4fb8;
      font-size:11px;
      font-weight:1000;
    }

    .status-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:28px;
      padding:5px 9px;
      border-radius:999px;
      font-size:12px;
      font-weight:1000;
      white-space:nowrap;
    }

    .status-promotion,
    .status-champion{
      color:#047857;
      background:#dcfce7;
      border:1px solid #bbf7d0;
    }

    .status-demotion{
      color:#b91c1c;
      background:#fee2e2;
      border:1px solid #fecaca;
    }

    .status-stay{
      color:#475569;
      background:#f1f5f9;
      border:1px solid #e2e8f0;
    }

    .status-open{
      color:#64748b;
      background:#f8fafc;
      border:1px dashed #cbd5e1;
    }

    .league-empty{
      display:grid;
      place-items:center;
      min-height:240px;
      padding:30px;
      text-align:center;
      color:#64748b;
    }

    .league-hidden{
      display:none !important;
    }

    .league-loading-row td{
      color:#94a3b8;
      font-weight:900;
    }

    @media (max-width:820px){
      .league-grid{
        grid-template-columns:1fr;
      }

      .league-head{
        flex-direction:column;
      }

      .league-tabs{
        width:100%;
      }

      .league-tab{
        flex:1;
      }

    }

    @media (max-width:640px){
      .league-wrap{
        max-width:calc(100vw - 24px);
        margin:16px auto 34px;
      }

      .league-card-pad{
        padding:14px;
      }

      .league-table-wrap{
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
      }

      .league-table{
        min-width:0;
        width:100%;
        border-collapse:separate;
        border-spacing:0 10px;
      }

      .league-table thead{
        display:none;
      }

      .league-table tbody,
      .league-table tr,
      .league-table td{
        display:block;
        width:100%;
      }

      .league-table tr{
        display:grid;
        grid-template-columns:54px minmax(0,1fr);
        grid-template-areas:
          "rank player"
          "rank points"
          "rank status";
        gap:5px 12px;
        padding:12px;
        border:1px solid #e1e9f7;
        border-radius:16px;
        background:#fff;
        box-shadow:0 8px 18px rgba(15,31,59,.05);
      }

      .league-table tr.is-me td{
        background:transparent;
      }

      .league-table td{
        padding:0;
        border-bottom:0;
      }

      .league-table td:nth-child(1){
        grid-area:rank;
        display:flex;
        align-items:center;
        justify-content:center;
      }

      .league-table td:nth-child(2){
        grid-area:player;
        min-width:0;
        align-self:end;
      }

      .league-table td:nth-child(3){
        grid-area:points;
        color:#0f1f3b;
        font-size:14px;
        font-weight:1000;
      }

      .league-table td:nth-child(3)::before{
        content:"Points: ";
        color:#64748b;
        font-size:12px;
        font-weight:900;
      }

      #badgeView .league-table td:nth-child(3)::before{
        content:"Score: ";
      }

      .league-table td:nth-child(4){
        grid-area:status;
      }

      .league-table .league-rank{
        min-width:42px;
        height:34px;
        border-radius:12px;
        font-size:16px;
      }

      .league-player{
        width:100%;
      }

      .league-player > span:last-child{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }

      .league-empty-row,
      .league-empty-row td,
      .league-loading-row,
      .league-loading-row td{
        display:block !important;
        width:100% !important;
      }

      .league-empty-row,
      .league-loading-row{
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
      }

      .league-empty{
        min-height:170px;
        padding:22px 16px;
        border:1px solid #e1e9f7;
        border-radius:16px;
        background:#fff;
        overflow-wrap:anywhere;
      }
    }

