:root{
  --bg:#f4f4f4;
  --bg-soft:#ececec;
  --panel:#ffffff;
  --panel-2:#f8f8f8;
  --line:#d6d6d6;
  --text:#1d1d1d;
  --muted:#5f5f5f;
  --black:#171717;
  --black-soft:#242424;
  --brown:#6f5444;
  --brown-2:#8a6a57;
  --green:#2f7b46;
  --green-2:#49a05f;
  --white:#ffffff;
  --shadow:0 12px 28px rgba(0,0,0,.10);
  --shadow-strong:0 24px 60px rgba(0,0,0,.20);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(180deg,#f9f9f9 0%, #efefef 100%)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
main{max-width:1280px;margin:0 auto;padding:26px}

.topbar{
  position:sticky;top:0;z-index:80;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,244,244,.95));
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.topbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brown),var(--green),#bbb,var(--black));
}
.dark-top{
  background:linear-gradient(180deg,rgba(34,34,34,.98),rgba(24,24,24,.95));
  color:#f4f4f4;border-bottom-color:rgba(255,255,255,.08);
}
.dark-top::before{background:linear-gradient(90deg,#66736a,var(--green),#d4d4d4,var(--brown))}
.logo-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.logo-wrap h1{margin:0;font-size:24px;letter-spacing:.2px}
.logo-wrap p{margin:5px 0 0;color:var(--muted);font-size:14px}
.dark-top .logo-wrap p{color:#d1d1d1}
.logo-badge{
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;flex:none;
  color:#fff;font-weight:800;font-size:19px;letter-spacing:.5px;
  background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),transparent 34%),
  linear-gradient(135deg,var(--brown-2),var(--brown),#433229);
  box-shadow:inset 0 1px 10px rgba(255,255,255,.16),0 10px 24px rgba(0,0,0,.24);
}
.logo-badge.green{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 34%),linear-gradient(135deg,var(--green-2),var(--green),#1b4e2b)}
nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
nav a{
  padding:11px 15px;border-radius:14px;font-weight:700;font-size:14px;
  background:rgba(0,0,0,.05);color:#222;transition:.25s ease;position:relative
}
.dark-top nav a{background:rgba(255,255,255,.08);color:#f1f1f1}

.mega-topbar{
  background:
    radial-gradient(circle at left top,rgba(255,255,255,.08),transparent 22%),
    linear-gradient(180deg,rgba(28,28,28,.98),rgba(16,16,16,.96));
  padding-top:18px;padding-bottom:18px;
}
.mega-topbar .logo-wrap{align-items:flex-start}
.school-ribbon{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.school-ribbon span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:800;letter-spacing:.7px;color:#ededed}
nav a:hover,nav a.active{transform:translateY(-2px);background:linear-gradient(135deg,var(--brown),var(--green));color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.14)}

.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:stretch}
.hero-card,.panel,.card,.timeline-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:34px;background:linear-gradient(145deg,#fff,#f3f3f3)}
.hero-card h2{font-size:42px;line-height:1.08;margin:12px 0 10px}
.hero-card p{font-size:18px;color:var(--muted)}
.hero-side{padding:22px}
.tag{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid #dadada;background:#f0f0f0;font-size:13px;font-weight:800;color:#303030}
.green-tag{background:#dff0e3;border-color:#9fceab;color:#225436}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:13px 18px;border-radius:15px;font-weight:800;background:#ececec;color:#181818;transition:.25s ease;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--brown),var(--green));color:#fff}
.panel{padding:24px;background:linear-gradient(145deg,#fff,#f6f6f6)}
.dark-panel{background:linear-gradient(145deg,#252525,#181818);color:#f2f2f2;border-color:#333}
.accent-green{border-left:8px solid var(--green)}
.accent-brown{border-left:8px solid var(--brown)}
.stats-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.stats-list li{padding:14px;border-radius:15px;background:#efefef}
.stats-list strong{font-size:22px;margin-right:8px}
.section-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.socials{display:grid;gap:10px}
.socials span{display:block;padding:12px 14px;background:#ececec;border-radius:14px}
.cards{display:grid;gap:16px}
.students-grid,.teachers-grid{grid-template-columns:repeat(3,1fr)}
.card{padding:20px;background:linear-gradient(145deg,#fff,#f5f5f5);transition:.3s}
.card:hover{transform:translateY(-4px);border-color:#bcbcbc}
.timeline{display:grid;gap:16px}
.timeline-item{padding:20px;border-left:8px solid var(--brown)}
.slim{display:block;text-align:center}

.footer{
  margin-top:32px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;padding:28px;
  background:linear-gradient(180deg,#232323,#121212);color:#ececec;border-top:4px solid var(--brown);
  position:relative;overflow:hidden
}
.footer::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at right top,rgba(255,255,255,.08),transparent 25%),linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent)
}
.dark-footer{border-top-color:var(--green)}
.footer > *{position:relative;z-index:1}
.footer h4{margin:0 0 10px;font-size:17px}
.footer a,.footer p{display:block;margin:8px 0;color:#d5d5d5}
.footer a:hover{color:#fff;text-decoration:underline}

/* Football page */
.football-body{background:linear-gradient(180deg,#efefef 0%,#d8d8d8 26%,#7d7d7d 100%)}
.football-page{padding-top:18px}
.pitch-intro{
  display:grid;grid-template-columns:1.25fr auto;gap:18px;margin-bottom:18px;align-items:center
}
.score-strip{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:18px;
  background:linear-gradient(145deg,#202020,#111);border-radius:26px;color:#fff;padding:18px 20px;box-shadow:var(--shadow-strong)
}
.score-team{display:flex;align-items:center;gap:14px}
.score-team.right{justify-content:flex-end;text-align:right}
.team-mark{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--brown),var(--green));box-shadow:0 10px 24px rgba(0,0,0,.25)}
.score-mid{text-align:center}
.score-mid strong{font-size:34px;display:block}
.score-mid span{font-size:12px;letter-spacing:2px;color:#cfcfcf}

.stadium-shell{
  position:relative;height:980px;border-radius:36px;overflow:hidden;
  background:linear-gradient(180deg,#5b5b5b 0%, #313131 18%, #1d1d1d 100%);
  box-shadow:0 32px 70px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.18)
}
.stadium-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.28), transparent 16%),
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.34));
}
.stadium-crowd{
  position:absolute;left:0;right:0;top:0;height:260px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.10), transparent 10%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,.10), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 4px, transparent 4px 18px),
    linear-gradient(180deg,#565656,#313131 70%, transparent 100%);
  opacity:.82;filter:blur(.2px)
}
.goal-view-text{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:10;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;font-weight:800;letter-spacing:.8px}
.stadium-hint{position:absolute;top:68px;left:50%;transform:translateX(-50%);z-index:10;padding:10px 16px;border-radius:999px;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);color:#f4f4f4;font-weight:700;font-size:12px;letter-spacing:.2px;border:1px solid rgba(255,255,255,.14)}

.pitch-3d{
  --tx:0px; --ty:0px; --zoom:1.02; --rx:71deg;
  position:absolute;left:50%;top:54px;width:980px;height:1650px;transform-origin:center top;
  transform:translateX(calc(-50% + var(--tx))) perspective(1450px) rotateX(var(--rx)) scale(var(--zoom)) translateY(var(--ty));
  transition:transform 1s cubic-bezier(.2,.7,.1,1), filter .5s ease;
  background:linear-gradient(180deg,#32864a 0%, #29743f 45%, #246538 100%);
  border:10px solid rgba(255,255,255,.94);border-radius:18px;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.26), 0 0 80px rgba(0,0,0,.42)
}
.pitch-3d::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 60px, rgba(0,0,0,.02) 60px 120px)}
.pitch-3d::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 16%, transparent 76%, rgba(0,0,0,.14))}
.pitch-3d.loaded{animation:stadiumOpen 2.2s cubic-bezier(.22,.7,.17,1)}
.pitch-3d.focused{filter:saturate(1.05) contrast(1.04)}

.pitch-mark{position:absolute;border:4px solid rgba(255,255,255,.94)}
.midline{left:0;right:0;top:50%;border-width:0 0 4px 0}
.center-circle{width:200px;height:200px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.penalty-top{width:360px;height:180px;left:50%;top:0;transform:translateX(-50%);border-top:none}
.penalty-bottom{width:360px;height:180px;left:50%;bottom:0;transform:translateX(-50%);border-bottom:none}
.goal{position:absolute;left:50%;width:240px;height:46px;transform:translateX(-50%);border:5px solid #fff;background:rgba(255,255,255,.08);box-shadow:0 0 20px rgba(255,255,255,.18)}
.top-goal{top:-2px;border-top:none}
.bottom-goal{bottom:-2px;border-bottom:none}
.penalty-arc-top,.penalty-arc-bottom{position:absolute;left:50%;width:180px;height:90px;border:4px solid rgba(255,255,255,.94);border-bottom:none;border-radius:180px 180px 0 0;transform:translateX(-50%)}
.penalty-arc-top{top:152px}
.penalty-arc-bottom{bottom:152px;transform:translateX(-50%) rotate(180deg)}

.player{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--scale,1));
  z-index:6;width:118px;height:238px;background:none;border:none;padding:0;cursor:pointer;
  transition:transform .35s ease, filter .35s ease, z-index .2s ease
}
.player::before{content:"";position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:104px;height:194px;border-radius:28px 28px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 24px 34px rgba(0,0,0,.24);opacity:.9}
.player:hover,.player.peek{transform:translate(-50%,-50%) scale(calc(var(--scale,1) + .08));z-index:12}
.player.active{transform:translate(-50%,-50%) scale(calc(var(--scale,1) + .12));z-index:20;filter:drop-shadow(0 0 16px rgba(255,255,255,.55))}
.player.peek{filter:drop-shadow(0 0 14px rgba(255,255,255,.3))}
.player-shadow{
  position:absolute;left:50%;bottom:14px;width:90px;height:28px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,0,0,.58) 0%, rgba(0,0,0,.26) 45%, transparent 72%);filter:blur(7px)
}
.player-cutout{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);width:100px;height:188px;object-fit:cover;object-position:center top;
  filter:contrast(1.03) saturate(1.04) drop-shadow(0 18px 24px rgba(0,0,0,.38));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
  clip-path:polygon(13% 0, 87% 0, 98% 11%, 94% 74%, 80% 100%, 20% 100%, 6% 74%, 2% 12%);
  border-radius:20px
}
.player-badge{
  position:absolute;left:50%;top:-4px;transform:translateX(-50%);min-width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--black),var(--brown));border:2px solid rgba(255,255,255,.75);box-shadow:0 10px 18px rgba(0,0,0,.25)
}
.player-name{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);white-space:nowrap;padding:8px 13px;border-radius:999px;
  background:rgba(0,0,0,.66);color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px;opacity:0;transition:.25s ease;border:1px solid rgba(255,255,255,.14)
}
.player:hover .player-name,.player.active .player-name,.player.peek .player-name{opacity:1}
.info-bubble{
  position:absolute;min-width:230px;max-width:290px;padding:16px 18px 14px;border-radius:20px;background:rgba(17,17,17,.88);color:#fff;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 38px rgba(0,0,0,.35);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transform:translate(-50%,-124%) scale(.92);transition:.35s ease;z-index:30
}
.info-bubble::after{content:"";position:absolute;left:50%;bottom:-10px;width:18px;height:18px;background:rgba(17,17,17,.83);transform:translateX(-50%) rotate(45deg)}
.info-bubble.show{opacity:1;transform:translate(-50%,-124%) scale(1)}
.info-bubble h3{margin:0 26px 6px 0;font-size:20px}
.info-bubble p{margin:0 0 5px;color:#d3f0db;font-weight:700}
.info-bubble small{font-size:12px;color:#e0e0e0;line-height:1.45}

.lineup-dashboard{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}
.player-panel{padding:0;overflow:hidden}
.player-panel-top{padding:24px;background:linear-gradient(135deg,#171717,#2c2c2c 58%,#3f4a40);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}
.player-panel-top .mini-logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--brown));font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,.24)}
.player-detail{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:20px;background:linear-gradient(145deg,#fff,#f5f5f5)}
.player-detail img{width:100%;height:240px;object-fit:cover;border-radius:20px;border:1px solid #ddd;box-shadow:0 12px 24px rgba(0,0,0,.12)}
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.meta-item{padding:12px;border-radius:16px;background:#efefef;border:1px solid #dddddd}
.meta-item span{display:block;font-size:12px;color:#666;margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.tactical-notes{display:grid;gap:16px}
.tactical-card{background:linear-gradient(145deg,#fff,#ededed)}
.credits-box{font-size:13px;color:#ddd;line-height:1.55}
.credits-box strong{color:#fff}

.football-topbar-extra{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.12)}

@keyframes stadiumOpen{
  0%{--rx:84deg;--zoom:1.34;--ty:150px}
  55%{--rx:75deg;--zoom:1.12;--ty:56px}
  100%{--rx:71deg;--zoom:1.02;--ty:0px}
}

@media (max-width:1100px){
  .hero,.section-grid,.students-grid,.teachers-grid,.footer,.lineup-dashboard{grid-template-columns:1fr}
  .topbar{position:relative;flex-direction:column;align-items:flex-start}
  nav{justify-content:flex-start}
  .stadium-shell{height:820px}
  .pitch-3d{width:820px;height:1400px}
  .player-panel-top{align-items:flex-start;flex-direction:column}
}
@media (max-width:860px){
  main{padding:16px}
  .hero-card h2{font-size:31px}
  .pitch-intro,.score-strip{grid-template-columns:1fr}
  .stadium-shell{height:680px}
  .pitch-3d{width:690px;height:1160px}
  .player-detail{grid-template-columns:1fr}
}
@media (max-width:700px){
  .pitch-3d{width:560px;height:960px}
  .player{width:88px;height:170px}
  .player::before{width:78px;height:138px}
  .player-cutout{width:76px;height:140px}
  .player-name{font-size:11px}
  .stadium-hint{width:92%;text-align:center;white-space:normal;border-radius:18px}
}

.bubble-close{position:absolute;right:10px;top:8px;width:28px;height:28px;border:none;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;pointer-events:auto}
.bubble-close:hover{background:rgba(255,255,255,.18)}