/* MAIN LAYOUT */

.soccer-layout{
display:flex;
gap:30px;
align-items:flex-start;
justify-content:center;
margin:40px auto;
max-width:1000px;
width:100%;
padding:0 20px;
}

/* MENU */

.soccer-menu{
width:150px;
display:flex;
flex-direction:column;
gap:10px;
}

/* BUTTONS */

.soccer-btn{
background:#D4AF37;
color:#000 !important;
font-weight:700;
text-align:center;
padding:8px 10px;
border-radius:5px;
text-decoration:none;
font-size:14px;
border:1px solid #b9972e;
transition:.15s ease;
}

.soccer-btn:hover{
background:#c39a2f;
}

/* HERO IMAGE */

.soccer-hero{
display:flex;
justify-content:center;
}

.soccer-hero img{
max-width:650px;
width:100%;
border-radius:8px;
}

/* =========================
MOBILE / TABLET RESPONSIVE
========================= */

@media (max-width:900px){

.soccer-layout{
flex-direction:column;
align-items:center;
text-align:center;
}

.soccer-menu{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
width:auto;
}

.soccer-btn{
width:140px;
}

.soccer-hero img{
max-width:90%;
}

}

/* PHONE */

@media (max-width:500px){

.soccer-btn{
width:120px;
font-size:13px;
padding:7px;
}

}

.avatar-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
gap:12px;
max-width:500px;
}

.avatar-option{
cursor:pointer;
text-align:center;
}

.avatar-option input{
display:none;
}

.avatar-option img{
width:70px;
height:70px;
border-radius:50%;
border:3px solid transparent;
}

.avatar-option input:checked + img{
border-color:#D4AF37;
}

.checkin-card{
cursor:pointer;
transition:.15s;
}

.checkin-card:hover{
transform:scale(1.05);
}

.checked-in{
background:#d4edda;
}

.entry-content .soccer-checkin-card .soccer-checkin-name{
font-weight:900 !important;
color:#000 !important;
font-size:15px !important;
margin-top:8px;
line-height:1.2;
}

.absent-label{
color:#c00;
font-weight:700;
}

/* =========================
CHECK-IN CARD GRID
========================= */

.soccer-checkin-grid{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:20px;

}

/* =========================
CHECK-IN CARD
========================= */

.soccer-checkin-card{

text-align:center;
background:white;
padding:15px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);

}

/* avatar */

.soccer-checkin-card img{

width:90px;
height:90px;
border-radius:50%;
border:4px solid #d4af37;
object-fit:cover;

}

/* button */

.soccer-checkin-btn{

margin-top:10px;
padding:6px 14px;
background:#d4af37;
color:white;
border-radius:6px;
font-size:13px;
cursor:pointer;

}

/* player name */
.soccer-checkin-card .soccer-checkin-name{

font-weight:900 !important;
color:#000 !important;
font-size:15px;
margin-top:8px;

}

/* ====================================
CHECK-IN BOARD LAYOUT
==================================== */

.soccer-checkin-layout{
display:grid;
grid-template-columns:160px 1fr 1fr;
gap:30px;
align-items:start;
max-width:1200px;
margin:40px auto;
padding:0 20px;
}

/* menu column */

.soccer-checkin-layout .soccer-menu{
display:flex;
flex-direction:column;
gap:10px;
}

/* player grids */

.soccer-player-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

/* cards */

.player-card{

text-align:center;
background:#fff;

padding:8px 6px;

border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.06);

cursor:pointer;
transition:.15s;

width:110px;          /* fixes stretching */

margin:auto;

}

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

/* avatar */

.player-card img{

width:80px;
height:80px;

border-radius:50%;
border:4px solid #D4AF37;

display:block;
margin:2px auto;

}

/* name */

.player-card .player-name{
font-weight:900;
color:#000;
font-size:15px;
margin-top:6px;
}

/* checked in highlight */

.checked-in{
background:#e8f7e8;
}

/* CHECKIN BOARD */

.soccer-checkin-layout{

display:grid;
grid-template-columns:160px 1fr 1fr;
gap:30px;
align-items:start;
max-width:1200px;
margin:40px auto;

}

/* player columns */

.soccer-player-column h2{

font-size:42px;
margin-bottom:16px;

}

/* player grids */

.soccer-player-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;

}

/* player card */

.player-card{

text-align:center;
background:#fff;
padding:10px 8px;
border-radius:10px;
box-shadow:0 4px 8px rgba(0,0,0,0.06);
cursor:pointer;
transition:.15s;

}

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

/* avatar */

.player-card img{

width:86px;
height:86px;
border-radius:50%;
border:4px solid #D4AF37;
object-fit:cover;
display:block;
margin:4px auto;

}

/* name */

.player-name{

font-weight:900;
color:#000;
font-size:15px;
margin-top:6px;

}

/* checked in */

.checked-in{
background:#e8f7e8;
}

/* absent */

.absent-label{
color:#c00;
font-weight:700;
}

/* align columns with menu */

.soccer-checkin-layout{
align-items:start;
}

/* column headings */

.soccer-player-column h2{

margin-top:0;
margin-bottom:20px;
font-size:48px;
font-weight:700;
color:#555;

}

/* player names */

.player-first{

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

margin-bottom:2px;

}

.player-last{

font-weight:500;
font-size:11px;
color:#666;

margin-top:2px;

}

.player-card:hover{

box-shadow:0 0 12px rgba(212,175,55,.6);

}

/* column divider */

.soccer-player-column:first-of-type{

border-right:2px solid rgba(212,175,55,.35);
padding-right:30px;
margin-right:20px;

}

/* spacing for right column */

.soccer-player-column:last-of-type{

padding-left:20px;

}

/* season header */

.soccer-season-badge{

text-align:center;
font-size:18px;
font-weight:700;
color:#444;

margin:0 0 8px 0;   /* much tighter */

letter-spacing:.2px;

}

.soccer-player-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;

align-items:start;   /* prevents card stretching */

}

/* header row */

.soccer-board-header{

display:flex;
justify-content:center;
align-items:center;
gap:30px;

margin-bottom:8px;

}

/* season badge */

.soccer-season-badge{

font-size:18px;
font-weight:700;
color:#444;

}

/* live counters */

.soccer-live-counts{

font-size:15px;
font-weight:600;
color:#666;

}