/* =========================================================
   eFootball 2026 Player Tier List
   PES Thailand Club
   ========================================================= */


/* =========================
   GLOBAL
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f4f4f4;
  font-family:Arial, Helvetica, sans-serif;
  color:#222;
}


/* =========================
   MAIN CONTAINER
========================= */

.ranking-container{
  width:96%;
  max-width:1200px;
  margin:30px auto;
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}


/* =========================
   HEADER
========================= */

.ranking-header{
  background:#111;
  color:#fff;

  padding:25px 30px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:20px;
}

.eyebrow{
  color:#e50914;

  font-size:12px;
  font-weight:800;
  letter-spacing:2px;

  margin:0 0 5px;
}

.ranking-header h1{
  margin:0;
  font-size:28px;
}

.subtitle{
  color:#aaa;
  margin:7px 0 0;
}

.update-box{
  font-size:12px;
  color:#aaa;
  text-align:right;
}

.update-box strong{
  display:block;
  color:#fff;
  margin-top:5px;
}


/* =========================
   FILTER
========================= */

.filters{
  display:flex;
  gap:10px;

  padding:18px;

  background:#f5f5f5;
  border-bottom:1px solid #ddd;
}

.filters input,
.filters select{
  height:42px;

  padding:0 12px;

  border:1px solid #ddd;
  border-radius:5px;

  background:#fff;
  color:#222;

  font-family:inherit;
  font-size:13px;

  outline:none;
}

.filters input{
  flex:1;
  min-width:0;
}

.filters select{
  width:130px;
  flex-shrink:0;
}

.filters input:focus,
.filters select:focus{
  border-color:#e50914;
}


/* =========================
   TABLE WRAPPER
========================= */

.table-wrapper{
  width:100%;

  /* Desktop จะไม่มี scrollbar
     เพราะตารางถูกบังคับให้อยู่ใน 100% */
  overflow-x:hidden;
}


/* =========================
   TABLE
========================= */

table{
  width:100%;

  /* สำคัญ */
  min-width:0;
  max-width:100%;

  table-layout:fixed;

  border-collapse:collapse;
  background:#fff;
}


/* =========================
   TABLE HEADER
========================= */

thead{
  background:#e50914;
  color:#fff;
}

th{
  padding:13px 4px;

  font-size:12px;
  font-weight:700;

  text-align:center;
  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;
}


/* =========================
   TABLE DATA
========================= */

td{
  padding:13px 5px;

  border-bottom:1px solid #eee;

  text-align:center;
  vertical-align:middle;

  font-size:13px;

  overflow:hidden;
}

tbody tr{
  background:#fff;
  transition:background .2s ease;
}

tbody tr:hover{
  background:#fafafa;
}


/* =========================================================
   COLUMN WIDTH
   รวม 100%
   ========================================================= */


/* RANK */

th:nth-child(1),
td:nth-child(1){
  width:5%;
}


/* CARD IMAGE */

th:nth-child(2),
td:nth-child(2){
  width:9%;
}


/* PLAYER */

th:nth-child(3),
td:nth-child(3){
  width:19%;
}


/* TIER */

th:nth-child(4),
td:nth-child(4){
  width:8%;
}


/* POSITION */

th:nth-child(5),
td:nth-child(5){
  width:11%;
}


/* PLAYSTYLE */

th:nth-child(6),
td:nth-child(6){
  width:17%;
}


/* SPECIAL SKILLS */

th:nth-child(7),
td:nth-child(7){
  width:17%;
}


/* BOOSTER */

th:nth-child(8),
td:nth-child(8){
  width:8%;
}


/* RATING */

th:nth-child(9),
td:nth-child(9){
  width:6%;
}


/* =========================
   RANK
========================= */

.rank-number{
  display:inline-block;

  font-size:22px;
  font-weight:900;

  color:#111;
}


/* =========================
   PLAYER CARD
========================= */

.player-card{
  width:75px;
  max-width:100%;
  height:auto;

  display:block;

  margin:0 auto;

  cursor:pointer;

  transition:
    transform .2s ease,
    filter .2s ease;

  filter:drop-shadow(
    0 4px 4px rgba(0,0,0,.20)
  );
}

.player-card:hover{
  transform:scale(1.08);

  filter:drop-shadow(
    0 6px 8px rgba(0,0,0,.25)
  );
}


/* =========================
   PLAYER INFORMATION
========================= */

.player-column{
  text-align:left;

  /* ห้ามใช้ min-width 200px */
  min-width:0;

  padding-left:8px;
}

.player-name{
  display:block;

  margin-bottom:7px;

  color:#111;

  font-size:14px;
  font-weight:700;

  white-space:normal;
  line-height:1.3;
}


/* =========================
   CARD TYPE
========================= */

.card-type{
  display:inline-block;

  padding:4px 7px;

  border-radius:3px;

  color:#fff;

  font-size:10px;
  font-weight:700;

  line-height:1;
}

.epic{
  background:#7b1fa2;
}

.bigtime{
  background:#c62828;
}


/* =========================
   TIER
========================= */

.tier{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:52px;
  height:38px;

  border-radius:6px;

  color:#fff;

  font-size:18px;
  font-weight:900;

  line-height:1;
}


/* S+ */

.tier-sp{
  background:#d50000;
}


/* S */

.tier-s{
  background:#ff6d00;
}


/* A+ */

.tier-ap{
  background:#d59b00;
}


/* A */

.tier-a{
  background:#198754;
}


/* B+ */

.tier-bp{
  background:#1976d2;
}


/* =========================
   POSITIONS
========================= */

.positions{
  display:flex;

  justify-content:center;
  align-items:center;

  gap:4px;

  flex-wrap:wrap;

  width:100%;
}


/* POSITION BADGE */

.position-badge{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:29px;
  height:23px;

  padding:0 5px;

  border-radius:4px;

  font-size:10px;
  font-weight:800;

  line-height:1;

  text-shadow:0 1px 1px rgba(0,0,0,.25);
}


/* =========================
   FORWARD
   CF / SS / RWF / LWF
========================= */

.position-cf,
.position-ss,
.position-rwf,
.position-lwf{
  background:#e50914;
  color:#fff;
}


/* =========================
   MIDFIELDER
   AMF / CMF / DMF / LMF / RMF
========================= */

.position-amf,
.position-cmf,
.position-dmf,
.position-lmf,
.position-rmf{
  background:#168447;
  color:#fff;
}


/* =========================
   DEFENDER
   CB / RB / LB
========================= */

.position-cb,
.position-rb,
.position-lb{
  background:#1976d2;
  color:#fff;
}


/* =========================
   GOALKEEPER
========================= */

.position-gk{
  background:#ffd600;
  color:#111;
  text-shadow:none;
}


/* =========================
   PLAYER STYLES
========================= */

.player-styles{
  display:flex;

  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  gap:6px;

  /* สำคัญ */
  width:100%;
  min-width:0;

  margin:0;
  padding-left:4px;
}

.player-style{
  display:flex;

  align-items:center;

  gap:6px;

  min-height:24px;

  font-size:12px;
  font-weight:500;

  color:#222;

  white-space:nowrap;

  max-width:100%;
}


/* STYLE ICON */

.style-icon{
  width:22px !important;
  height:22px !important;

  min-width:22px;
  max-width:22px;

  min-height:22px;
  max-height:22px;

  display:block;

  object-fit:contain;

  flex:0 0 22px;
}


/* =========================
   SPECIAL SKILLS
========================= */

.special-skills{
  display:flex;

  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  gap:5px;

  /* สำคัญ */
  width:100%;
  min-width:0;

  margin:0;
  padding-left:4px;
}

.special-skill{
  display:flex;

  align-items:center;

  gap:5px;

  min-height:22px;

  font-size:11px;
  font-weight:600;

  white-space:nowrap;

  max-width:100%;
}

.skill-icon{
  width:20px !important;
  height:20px !important;

  min-width:20px;
  max-width:20px;

  min-height:20px;
  max-height:20px;

  object-fit:contain;

  display:block;

  flex:0 0 20px;
}

.no-skill{
  color:#aaa;
  font-size:13px;
}


/* =========================
   PLAYER BOOSTERS
========================= */

.player-boosters{
  width:100%;
  height:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:6px;

  margin:0 auto;
  padding:0;

  text-align:center;
}


/* Booster แต่ละอัน */
.player-booster{
  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:2px;

  width:30px;

  margin:0;
  padding:0;

  text-align:center;
}


/* รูป Booster */
.booster-icon{
  display:block;

  width:25px !important;
  height:25px !important;

  min-width:25px;
  max-width:25px;

  min-height:25px;
  max-height:25px;

  margin:0 auto;

  object-fit:contain;

  flex:none;
}


/* ค่า +6 / +8 */
.player-booster span{
  display:block;

  width:100%;

  margin:0;

  font-size:12px;
  line-height:14px;

  text-align:center;

  color:#111;
}


/* บังคับช่อง BOOSTER ให้อยู่กลาง */
th:nth-child(8),
td:nth-child(8){
  width:8%;

  padding-left:0;
  padding-right:0;

  text-align:center;
  vertical-align:middle;
}


/* =========================
   RATING
========================= */

.rating{
  display:inline-flex;

  justify-content:center;
  align-items:center;

  width:48px;
  height:48px;

  border-radius:50%;

  background:#111;
  color:#fff;

  border:3px solid #e50914;

  font-size:17px;
  font-weight:900;

  line-height:1;
}


/* =========================
   NO RESULTS
========================= */

.no-results{
  display:none;

  padding:40px;

  text-align:center;

  color:#777;

  font-size:14px;
}


/* =========================
   FOOTER
========================= */

.ranking-footer{
  padding:15px 20px;

  background:#f5f5f5;

  border-top:1px solid #eee;

  color:#777;

  font-size:12px;
}

.ranking-footer p{
  margin:3px 0;
}

.ranking-footer strong{
  color:#555;
}


/* =========================
   PLAYER CARD MODAL
========================= */

.card-modal{
  position:fixed;

  inset:0;

  z-index:99999;

  display:none;

  align-items:center;
  justify-content:center;

  padding:30px;

  background:rgba(0,0,0,.90);
}

.card-modal.active{
  display:flex;
}

.card-modal img{
  width:auto;
  height:auto;

  max-width:90%;
  max-height:85vh;

  object-fit:contain;

  filter:drop-shadow(
    0 10px 30px rgba(0,0,0,.5)
  );
}


/* =========================
   MODAL CLOSE
========================= */

.close-modal{
  position:absolute;

  top:20px;
  right:30px;

  border:0;

  background:none;
  color:#fff;

  font-size:45px;
  font-weight:300;

  line-height:1;

  cursor:pointer;
}


/* =========================================================
   RESPONSIVE PLAYER CARD
   Mobile + iPad <= 1024px

   Desktop > 1024px = ไม่เปลี่ยน
========================================================= */

@media (max-width:1024px){

  /* =========================
     CONTAINER
  ========================= */

  .ranking-container{
    width:100%;
    max-width:none;
    margin:0;
    box-shadow:none;
  }


  /* =========================
     HEADER
  ========================= */

  .ranking-header{
    padding:20px;
    gap:12px;
  }

  .ranking-header h1{
    font-size:24px;
    line-height:1.1;
  }

  .subtitle{
    font-size:14px;
  }


  /* =========================
     FILTER
  ========================= */

  .filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px;
  }

  .filters input{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
  }

  .filters select{
    width:100%;
    min-width:0;
  }


  /* =========================
     TABLE -> CARD CONTAINER
  ========================= */

  .table-wrapper{
    width:100%;
    padding:12px;

    overflow:visible;
    background:#f4f4f4;
  }

  table{
    display:block;

    width:100%;
    min-width:0;
    max-width:none;

    table-layout:auto;
    background:transparent;
  }

  thead{
    display:none;
  }

  tbody{
    display:grid;

    /* iPad = 2 Cards */
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:12px;

    width:100%;
  }


  /* =========================================================
     PLAYER CARD
  ========================================================= */

  tbody tr{
    display:grid;

    grid-template-columns:
      86px
      minmax(0,1fr)
      54px;

    grid-template-areas:
      "rank  player   tier"
      "image player   rating"
      "image position rating"
      "style style    style"
      "skill skill    skill"
      "boost boost    boost";

    column-gap:12px;
    row-gap:8px;

    width:100%;

    padding:14px;

    margin:0;

    background:#fff;

    border:1px solid #e5e5e5;
    border-radius:10px;

    box-shadow:
      0 2px 8px rgba(0,0,0,.06);
  }

  tbody tr:hover{
    background:#fff;
  }


  /* =========================
     RESET TD
  ========================= */

  tbody td{
    display:block;

    width:auto !important;
    min-width:0 !important;

    padding:0 !important;

    border:0;

    overflow:visible;

    text-align:left;
  }


  /* =========================
     RANK
  ========================= */

  tbody td:nth-child(1){
    grid-area:rank;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .rank-number{
    font-size:22px;
  }


  /* =========================
     CARD IMAGE
  ========================= */

  tbody td:nth-child(2){
    grid-area:image;

    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  .player-card{
    width:78px;
    max-width:78px;

    margin:0;
  }


  /* =========================
     PLAYER
  ========================= */

  tbody td:nth-child(3){
    grid-area:player;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:flex-start;
  }

  .player-column{
    width:100%;

    min-width:0;

    padding:0;
  }

  .player-name{
    margin:0 0 6px;

    font-size:14px;
    font-weight:800;

    line-height:1.2;

    white-space:normal;
  }

  .card-type{
    font-size:9px;

    padding:4px 6px;
  }


  /* =========================
     TIER
  ========================= */

  tbody td:nth-child(4){
    grid-area:tier;

    display:flex;

    align-items:flex-start;
    justify-content:flex-end;
  }

  .tier{
    width:48px;
    height:36px;

    font-size:16px;
  }


  /* =========================
     POSITION
  ========================= */

  tbody td:nth-child(5){
    grid-area:position;

    display:flex;

    align-items:center;
    justify-content:flex-start;
  }

  .positions{
    justify-content:flex-start;

    gap:4px;
  }


  /* =========================
     PLAYSTYLE
  ========================= */

  tbody td:nth-child(6){
    grid-area:style;

    padding-top:10px !important;

    border-top:1px solid #eee;
  }

  tbody td:nth-child(6)::before{
    content:"PLAYSTYLE";

    display:block;

    margin-bottom:7px;

    color:#777;

    font-size:10px;
    font-weight:800;

    letter-spacing:.5px;
  }

  .player-styles{
    width:100%;

    padding:0;

    gap:5px;
  }

  .player-style{
    font-size:12px;

    white-space:normal;
  }


  /* =========================
     SPECIAL SKILLS
  ========================= */

  tbody td:nth-child(7){
    grid-area:skill;

    padding-top:10px !important;

    border-top:1px solid #eee;
  }

  tbody td:nth-child(7)::before{
    content:"SPECIAL SKILLS";

    display:block;

    margin-bottom:7px;

    color:#777;

    font-size:10px;
    font-weight:800;

    letter-spacing:.5px;
  }

  .special-skills{
    width:100%;

    padding:0;

    gap:5px;
  }

  .special-skill{
    font-size:11px;

    white-space:normal;
  }

  .no-skill{
    font-size:11px;
  }


  /* =========================
     BOOSTER
  ========================= */

  tbody td:nth-child(8){
    grid-area:boost;

    padding-top:10px !important;

    border-top:1px solid #eee;
  }

  tbody td:nth-child(8)::before{
    content:"BOOSTER";

    display:block;

    margin-bottom:7px;

    color:#777;

    font-size:10px;
    font-weight:800;

    letter-spacing:.5px;
  }

  .player-boosters{
    width:100%;
    height:auto;

    justify-content:flex-start;

    gap:7px;

    margin:0;
  }

  .player-booster{
    width:30px;
  }


  /* =========================
     RATING
  ========================= */

  tbody td:nth-child(9){
    grid-area:rating;

    display:flex;

    align-items:center;
    justify-content:flex-end;
  }

  .rating{
    width:46px;
    height:46px;

    font-size:16px;
  }


  /* =========================
     FOOTER
  ========================= */

  .ranking-footer{
    margin:0;

    text-align:center;
  }

}


/* =========================================================
   MOBILE <= 600px
   เปลี่ยนจาก iPad 2 Card -> 1 Card
========================================================= */

@media (max-width:600px){

  /* =========================
     HEADER
  ========================= */

  .ranking-header{
    padding:17px 14px;

    align-items:flex-start;
  }

  .eyebrow{
    font-size:9px;
  }

  .ranking-header h1{
    font-size:20px;
  }

  .subtitle{
    font-size:13px;
  }

  .update-box{
    min-width:55px;

    font-size:9px;
  }

  .update-box strong{
    font-size:10px;
  }


  /* =========================
     FILTER
  ========================= */

  .filters{
    padding:10px;
  }

  .filters input,
  .filters select{
    height:38px;

    font-size:11px;
  }


  /* =========================
     ONE PLAYER / ROW
  ========================= */

  .table-wrapper{
    padding:8px;
  }

  tbody{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }


  /* =========================
     PLAYER CARD
  ========================= */

  tbody tr{
    grid-template-columns:
      78px
      minmax(0,1fr)
      50px;

    grid-template-areas:
      "rank  player   tier"
      "image player   rating"
      "image position rating"
      "style style    style"
      "skill skill    skill"
      "boost boost    boost";

    column-gap:10px;

    padding:12px;
  }


  /* CARD */

  .player-card{
    width:72px;
    max-width:72px;
  }


  /* RANK */

  .rank-number{
    font-size:21px;
  }


  /* PLAYER */

  .player-name{
    font-size:14px;
  }


  /* TIER */

  .tier{
    width:45px;
    height:34px;

    font-size:15px;
  }


  /* RATING */

  .rating{
    width:44px;
    height:44px;

    font-size:15px;
  }


  /* POSITION */

  .position-badge{
    min-width:27px;
    height:21px;

    padding:0 4px;

    font-size:8px;
  }

}