/* 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;
}

/* 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;

}

/* 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;

}

/* 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-player-grid{

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

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

}

/* header row */

.soccer-board-header{

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

margin-bottom:8px;

}

/* live counters */

.soccer-live-counts{

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

}

/* --------------------------------------------------
PLAYER CARD
-------------------------------------------------- */
.player-card{
width:110px;
padding:10px 8px 8px 8px;
border-radius:10px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
text-align:center;
transition:all .15s ease;
padding:3px 3px 3px 3px;
margin-bottom:2px;
}

.player-card:hover{
transform:translateY(-2px);
}

/* PLAYER AVATAR */

.player-card img{
width:112px;
height:112px;
border-radius:50%;
border:3px solid #c9a227;   /* thinner gold ring */
display:block;
margin:2px auto 0 auto;
object-fit:cover;
}

/* first name */

.player-first{
font-weight:900;
font-size:16px;fv
margin-bottom:1px;
margin-top:1px;
line-height:1.0;
color:#000000
}

/* last name */

.player-last{
font-size:12px;
color:#585858;
margin-top:2px;
line-height:1.0;
}

/* SEASON HEADER */

.soccer-season-badge{
display:flex;
justify-content:center;
align-items:center;
gap:28px;
font-size:16px;
font-weight:600;
color:#444;
margin:6px 0 8px 0;
}

.soccer-season-badge span{
font-weight:600;
color:#444;
}

/* HEADER ROW */

.soccer-header{

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

font-size:16px;
font-weight:600;
color:#444;

margin-bottom:10px;

}

.soccer-header div{
color:inherit;
line-height:1;
}

/* HEADER BAR */

.soccer-header{

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

gap:28px;

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

color:#444;

margin:6px 0 8px 0;

}

/* ensure identical color */

.soccer-season,
.soccer-counter{

color:#444;
line-height:1;

}

/* FORCE HEADER COLOR MATCH */

.soccer-header,
.soccer-header *{
color:#111111 !important;
font-weight:700;
}

.soccer-header{
letter-spacing:.3px;
}

/* ==================================================
GENERIC PAGE LAYOUT
================================================== */

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

.soccer-page-content{
min-width:0;
}

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

.soccer-header{
display:flex;
justify-content:center;
align-items:left;
gap:28px;
font-size:16px;
font-weight:600;
color:#444;
margin:6px 0 8px 0;
}

.soccer-season,
.soccer-counter,
.soccer-header *{
color:#444 !important;
line-height:1;
}

/* ==================================================
ROSTER
================================================== */

.soccer-roster-table{
width:100%;
border-collapse:collapse;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.soccer-roster-table th,
.soccer-roster-table td{
padding:10px 12px;
border-bottom:1px solid #eee;
text-align:left;
}

.soccer-roster-table th{
background:#f7f7f7;
}

/* ==================================================
PROFILE
================================================== */

.soccer-profile-card{
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.soccer-profile-head{
display:grid;
grid-template-columns:120px 1fr;
gap:20px;
align-items:start;
margin-bottom:20px;
}

.soccer-profile-avatar{
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
border:3px solid #c9a227;
}

.soccer-profile-block{
margin-top:18px;
}

.soccer-skill-list{
margin:0;
padding-left:18px;
}

.soccer-coach-hero img{
max-width:520px;
width:100%;
border-radius:10px;
display:block;
margin-bottom:18px;
}