/* NORMAL PAGE SETTINGS */

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

/* HOMEPAGE BACKGROUND */

.homepage{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:white;
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
url("background.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
height:100vh;
}

/* TOP BAR */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:rgba(0,0,0,0.6);
border-bottom:1px solid rgba(255,255,255,0.2);
}

.topbar h1{
font-size:32px;
letter-spacing:2px;
font-weight:800;
margin:0;
color:white;
}

/* NAV LINKS */

nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:600;
}

nav a:hover{
color:#4da6ff;
}

/* HERO SECTION */

.hero{
height:85vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}

.hero h2{
font-size:56px;
margin-bottom:10px;
}

.hero p{
font-size:22px;
margin-bottom:30px;
}

.button{
background:#2f8cff;
padding:14px 28px;
border-radius:8px;
font-size:18px;
font-weight:700;
text-decoration:none;
color:white;
display:inline-block;
}

.button:hover{
background:#1f6fd1;
}

/* BIG BOARD CONTROLS */

.controls{
display:flex;
gap:10px;
padding:20px;
justify-content:center;
}

.controls input,
.controls select{
padding:8px;
font-size:14px;
}

/* LEGEND */

.legend{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:0 20px 16px 20px;
flex-wrap:wrap;
}

.legend .tier{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
font-size:14px;
font-weight:800;
letter-spacing:.2px;
box-shadow:0 2px 6px rgba(0,0,0,0.10);
border:1px solid rgba(255,255,255,0.35);
}

/* BIG BOARD LAYOUT */

.board{
display:flex;
flex-direction:column;
gap:12px;
padding:20px;
max-width:1500px;
margin:auto;
}

/* PLAYER ROW */

.row{
display:flex;
align-items:center;
background:#2e5aa6;
background-image:
linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.05) 58%,
rgba(255,255,255,0.22) 74%,
rgba(255,255,255,0.06) 88%,
rgba(255,255,255,0) 100%
);
color:white;
border-radius:10px;
padding:14px 16px;
cursor:pointer;
transition:.15s;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.row:hover{
background:#254b8a;
background-image:
linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.08) 58%,
rgba(255,255,255,0.30) 74%,
rgba(255,255,255,0.08) 88%,
rgba(255,255,255,0) 100%
);
transform:translateY(-1px) scale(1.01);
}

/* RANK */

.rankBox{
font-size:42px;
font-weight:800;
width:60px;
text-align:center;
color:white;
flex-shrink:0;
}

/* LOGO PANEL */

.logoBox{
width:84px;
height:84px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(18,45,95,0.45);
border-radius:12px;
margin-right:16px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
flex-shrink:0;
}

.schoolLogo{
width:54px;
height:54px;
object-fit:contain;
}

/* PLAYER INFO */

.playerInfo{
flex:1;
min-width:0;
padding-left:2px;
}

.playerName{
font-size:32px;
font-weight:800;
line-height:1.05;
letter-spacing:.2px;
}

.playerMeta{
font-size:18px;
opacity:.96;
margin-top:6px;
color:#eef4ff;
font-weight:600;
}

/* CLASS + MEASURABLES BOX */

.measurements{
font-size:20px;
font-weight:800;
color:#eef5ff;
padding:8px 14px;
border:2px solid rgba(255,255,255,0.6);
border-radius:2px;
background:rgba(0,0,0,0.15);
margin-left:0;
margin-right:34px;
white-space:nowrap;
text-align:center;
flex-shrink:0;
}

/* TIER TAG */

.tierTag{
padding:10px 14px;
border-radius:8px;
font-weight:800;
font-size:12px;
letter-spacing:.2px;
flex-shrink:0;
margin-right:10px;
min-width:92px;
text-align:center;
}

/* TIER COLORS */

.blue{
background:#3b82f6;
}

.round1{
background:#f59e0b;
}

.round2{
background:#ffd166;
color:black;
}

.sleeper{
background:#6b7280;
}

/* PLAYER PAGE */

#player{
max-width:1200px;
margin:50px auto;
padding:0;
background:none;
color:white;
}

/* immersive page background */
body:has(#player){
background:
radial-gradient(circle at 20% 20%, rgba(70,140,255,0.18), transparent 28%),
radial-gradient(circle at 80% 25%, rgba(70,140,255,0.16), transparent 24%),
radial-gradient(circle at 50% 85%, rgba(70,140,255,0.14), transparent 28%),
linear-gradient(rgba(6,15,35,0.82), rgba(6,15,35,0.92)),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 56px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 56px
),
linear-gradient(135deg,#18386f 0%,#1f4b95 45%,#102c59 100%);
background-attachment:scroll;
}

/* main report shell */
.playerReport{
background:
linear-gradient(180deg, rgba(32,68,138,0.26), rgba(16,38,86,0.42)),
rgba(14,29,64,0.56);
border:1px solid rgba(140,220,255,0.20);
border-radius:24px;
overflow:hidden;
box-shadow:
0 30px 80px rgba(0,0,0,0.40),
0 0 80px rgba(60,140,255,0.15);
backdrop-filter:blur(8px);
position:relative;
}

/* static ambient glow */
.playerReport::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background:
radial-gradient(circle at 68% 22%, rgba(120,190,255,0.10), transparent 24%),
radial-gradient(circle at 30% 75%, rgba(120,170,255,0.06), transparent 28%);
opacity:.6;
}

/* subtle static tech grid */
.playerReport::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.025) 0px,
rgba(255,255,255,0.025) 1px,
transparent 1px,
transparent 42px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.02) 0px,
rgba(255,255,255,0.02) 1px,
transparent 1px,
transparent 42px
);
background-position:0 0, 0 0;
opacity:.22;
z-index:0;
}

/* keep content above animated layers */
.playerHero,
.playerBody{
position:relative;
z-index:1;
}

/* hero section */
.playerHero{
display:grid;
grid-template-columns: 1.4fr 0.9fr;
gap:30px;
padding:34px;
position:relative;
background:
radial-gradient(circle at 70% 20%, rgba(110,180,255,0.18), transparent 28%),
linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
border-bottom:1px solid rgba(255,255,255,0.08);
}

.playerHero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
background:
linear-gradient(
90deg,
transparent,
rgba(140,200,255,0.65),
rgba(255,255,255,0.85),
rgba(140,200,255,0.65),
transparent
);
}

.playerHeroLeft{
display:flex;
align-items:center;
gap:28px;
min-width:0;
}

.playerImageWrap{
width:220px;
height:240px;
border-radius:20px;
overflow:hidden;
background:rgba(20,48,95,0.55);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.08),
0 12px 30px rgba(0,0,0,0.22);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

/* school-by-school glow defaults */
.playerImageWrap::before{
content:"";
position:absolute;
inset:-18px;
filter:blur(18px);
pointer-events:none;
z-index:0;
opacity:.95;
background:
radial-gradient(circle at 50% 50%, rgba(80,150,255,0.26), transparent 52%);
}

/* exact school glow colors */
.theme-ohio-state .playerImageWrap::before{
background:
radial-gradient(circle at 35% 65%, rgba(187,0,0,0.28), transparent 38%),
radial-gradient(circle at 72% 25%, rgba(170,170,170,0.18), transparent 28%),
radial-gradient(circle at 50% 50%, rgba(120,160,255,0.16), transparent 52%);
}

.theme-notre-dame .playerImageWrap::before{
background:
radial-gradient(circle at 35% 65%, rgba(201,151,0,0.26), transparent 38%),
radial-gradient(circle at 70% 28%, rgba(12,35,74,0.24), transparent 34%);
}

.theme-miami .playerImageWrap::before{
background:
radial-gradient(circle at 34% 66%, rgba(245,115,0,0.25), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(0,95,57,0.24), transparent 34%);
}

.theme-indiana .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(153,0,0,0.28), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(240,240,240,0.12), transparent 30%);
}

.theme-texas-tech .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(204,0,0,0.28), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(0,0,0,0.20), transparent 30%);
}

.theme-lsu .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(70,29,124,0.28), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(253,208,35,0.22), transparent 32%);
}

.theme-florida .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(250,70,22,0.26), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(0,33,165,0.24), transparent 34%);
}

.theme-penn-state .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(4,30,66,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,255,255,0.14), transparent 28%);
}

.theme-utah .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(204,0,0,0.28), transparent 38%),
radial-gradient(circle at 72% 26%, rgba(255,255,255,0.14), transparent 28%);
}

.theme-asu .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(140,29,64,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,198,39,0.24), transparent 32%);
}

.theme-tennessee .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(255,130,0,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,255,255,0.16), transparent 28%);
}

.theme-usc .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(153,27,30,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,198,39,0.24), transparent 32%);
}

.theme-toledo .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(0,47,108,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,199,44,0.24), transparent 32%);
}

.theme-sdsu .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(168,0,0,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(0,0,0,0.18), transparent 28%);
}

.theme-georgia .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(186,12,47,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(0,0,0,0.20), transparent 28%);
}

.theme-clemson .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(245,102,0,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(82,45,128,0.24), transparent 32%);
}

.theme-auburn .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(12,35,64,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(232,119,34,0.24), transparent 32%);
}

.theme-oregon .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(21,71,52,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(252,209,22,0.24), transparent 32%);
}

.theme-arizona .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(171,5,32,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(12,35,64,0.24), transparent 32%);
}

.theme-ucf .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(186,150,54,0.26), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(0,0,0,0.22), transparent 32%);
}

.theme-texas-am .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(80,0,20,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,255,255,0.14), transparent 28%);
}

.theme-alabama .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(158,27,50,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(255,255,255,0.14), transparent 28%);
}

.theme-oklahoma .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(132,22,23,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(245,245,245,0.12), transparent 28%);
}

.theme-vanderbilt .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(134,110,62,0.26), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(0,0,0,0.22), transparent 32%);
}

.theme-washington .playerImageWrap::before{
background:
radial-gradient(circle at 36% 66%, rgba(51,0,111,0.28), transparent 40%),
radial-gradient(circle at 72% 26%, rgba(184,134,11,0.24), transparent 32%);
}

.theme-default .playerImageWrap::before{
background:
radial-gradient(circle at 50% 50%, rgba(80,150,255,0.26), transparent 52%);
}

.playerHeadshot{
width:115%;
height:115%;
object-fit:contain;
transform:translateY(6px);
display:block;
position:relative;
z-index:1;
}

.playerHeroText{
min-width:0;
}

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

.playerSchoolLogo{
width:42px;
height:42px;
object-fit:contain;
background:rgba(255,255,255,0.06);
padding:8px;
border-radius:12px;
}

.playerSchoolName{
font-size:18px;
font-weight:700;
color:#dce8ff;
letter-spacing:.2px;
}

.playerTitle{
margin:0;
font-size:56px;
font-weight:900;
line-height:1.02;
letter-spacing:.2px;
text-shadow:0 2px 10px rgba(0,0,0,0.18);
}

.playerSubtitle{
margin-top:10px;
font-size:24px;
font-weight:700;
color:#eaf2ff;
}

.playerTierBadge{
display:inline-block;
margin-top:18px;
padding:10px 16px;
border-radius:999px;
font-size:14px;
font-weight:800;
letter-spacing:.5px;
text-transform:uppercase;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* right-side measurables */
.playerHeroRight{
display:flex;
align-items:center;
justify-content:flex-end;
}

.measurablesPanel{
width:100%;
max-width:340px;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.measureItem{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.10);
border-radius:16px;
padding:16px 18px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
transition:.15s;
}

.measureItem:hover{
transform:translateY(-2px);
box-shadow:
0 6px 18px rgba(0,0,0,0.25),
0 0 20px rgba(120,180,255,0.25);
}

.measureLabel{
display:block;
font-size:13px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
color:#9fc3ff;
margin-bottom:8px;
}

.measureValue{
display:block;
font-size:26px;
font-weight:900;
color:white;
}

/* report body */
.playerBody{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
padding:30px 34px 34px 34px;
}

.reportCard{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:24px 24px 20px 24px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.comparisonCard{
grid-column:1 / -1;
}

.reportCard h3{
margin:0 0 14px 0;
font-size:30px;
font-weight:900;
color:white;
}

.reportCard p{
margin:0;
font-size:21px;
line-height:1.6;
color:#eef5ff;
}

/* bullet list */
.traitList{
margin:8px 0 0 0;
padding-left:24px;
}

.traitList li{
margin-bottom:10px;
font-size:20px;
line-height:1.6;
color:#eef5ff;
}

/* PLAYER PAGE IMAGE FALLBACK */
#player img{
border-radius:10px;
margin-bottom:20px;
}

/* MOCK DRAFT PAGE */

.mockpage{
margin:0;
min-height:100vh;
color:white;
background:
radial-gradient(circle at 50% 50%, rgba(60,130,255,0.16), transparent 34%),
radial-gradient(circle at 18% 28%, rgba(120,190,255,0.22), transparent 18%),
radial-gradient(circle at 82% 28%, rgba(120,190,255,0.22), transparent 18%),
radial-gradient(circle at 18% 88%, rgba(70,180,255,0.20), transparent 16%),
radial-gradient(circle at 82% 88%, rgba(70,180,255,0.20), transparent 16%),
linear-gradient(rgba(6,14,30,0.72), rgba(6,14,30,0.84)),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.035) 0px,
rgba(255,255,255,0.035) 1px,
transparent 1px,
transparent 56px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.035) 0px,
rgba(255,255,255,0.035) 1px,
transparent 1px,
transparent 56px
),
linear-gradient(135deg,#18386f 0%,#1f4b95 40%,#112f5f 100%);
position:relative;
overflow:hidden;
}

.mockpage::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:
linear-gradient(135deg, rgba(120,200,255,0.22), transparent 16%),
linear-gradient(225deg, rgba(120,200,255,0.22), transparent 16%),
linear-gradient(45deg, rgba(80,180,255,0.18), transparent 14%),
linear-gradient(315deg, rgba(80,180,255,0.18), transparent 14%);
mix-blend-mode:screen;
opacity:.75;
}

.mockpage::after{
content:"";
position:fixed;
left:0;
right:0;
bottom:0;
height:180px;
pointer-events:none;
background:
radial-gradient(circle at 18% 100%, rgba(100,220,255,0.70), transparent 16%),
radial-gradient(circle at 82% 100%, rgba(100,220,255,0.70), transparent 16%),
linear-gradient(
180deg,
transparent 0%,
rgba(110,210,255,0.12) 62%,
rgba(150,235,255,0.35) 82%,
rgba(255,255,255,0.55) 92%,
transparent 100%
);
opacity:.9;
}

.mock-hero{
min-height:calc(100vh - 93px);
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
position:relative;
z-index:1;
}

.mock-card{
width:100%;
max-width:920px;
background:
linear-gradient(180deg, rgba(35,78,164,0.28), rgba(18,42,95,0.40)),
rgba(14,29,64,0.50);
border:1px solid rgba(130,220,255,0.40);
border-radius:22px;
padding:52px 44px;
text-align:center;
box-shadow:
0 30px 70px rgba(0,0,0,0.38),
0 0 120px rgba(70,160,255,0.18),
inset 0 0 0 1px rgba(255,255,255,0.05);
backdrop-filter:blur(8px);
position:relative;
overflow:hidden;
}

.mock-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(110deg,transparent,rgba(255,255,255,0.18),transparent);
animation:cardSweep 6s infinite;
}

.mock-card::after{
content:"";
position:absolute;
inset:0;
border-radius:22px;
pointer-events:none;
box-shadow:
inset 0 0 0 1px rgba(120,220,255,0.30),
inset 0 -3px 0 rgba(170,245,255,0.75),
0 0 30px rgba(80,170,255,0.18);
}

.mock-badge{
display:inline-block;
padding:10px 18px;
margin-bottom:22px;
border-radius:999px;
background:rgba(255,255,255,0.10);
border:1px solid rgba(255,255,255,0.24);
font-size:14px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
position:relative;
z-index:2;
}

.mock-card h2{
margin:0 0 18px 0;
font-size:64px;
font-weight:900;
letter-spacing:.2px;
line-height:1.02;
position:relative;
z-index:2;
text-shadow:0 2px 10px rgba(0,0,0,0.18);
}

.mock-card p{
margin:0 auto 32px auto;
max-width:700px;
font-size:24px;
line-height:1.55;
color:#edf5ff;
font-weight:500;
position:relative;
z-index:2;
}

.mock-actions{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
flex-wrap:wrap;
position:relative;
z-index:2;
}

.mock-link{
color:white;
text-decoration:none;
font-weight:800;
padding:14px 22px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.22);
background:rgba(255,255,255,0.06);
transition:.15s;
}

.mock-link:hover{
background:rgba(255,255,255,0.14);
}

@keyframes cardSweep{
0%{left:-120%;}
100%{left:120%;}
}

@keyframes playerGridShift{
0%{background-position:0 0, 0 0;}
100%{background-position:42px 42px, 42px 42px;}
}

/* MOBILE LANDING PAGE BACKGROUND FIX */

@media (max-width: 768px){

.homepage{
background-attachment:scroll;
background-position:center top;
background-size:contain;
min-height:100vh;
height:auto;
background-color:#0b1d3a;
}

.hero{
height:auto;
min-height:85vh;
padding:40px 20px;
}

.topbar{
padding:16px 20px;
}

.topbar h1{
font-size:22px;
}

.hero h2{
font-size:38px;
}

.hero p{
font-size:18px;
}

}