*{box-sizing:border-box}:root{--r:#e21b23;--d:#050505;--p:#0b0b0b;--w:#f2efe7;--g:#f1b51d}body{margin:0;background:#020202;color:var(--w);font-family:"Courier New",monospace;background-image:linear-gradient(rgba(226,27,35,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(226,27,35,.03) 1px,transparent 1px);background-size:6px 6px}.shell{max-width:1440px;margin:auto}header{min-height:108px;padding:18px 28px;border:2px solid var(--r);display:flex;align-items:center;gap:24px;background:#030303;position:sticky;top:0;z-index:10;box-shadow:0 5px 0 #260709}.helmet{width:92px;height:67px;background:var(--r);border:5px solid white;border-radius:55% 45% 40% 48%;box-shadow:6px 6px 0 #45090c}.brand{flex:1}.brand h1{font-family:Impact,sans-serif;letter-spacing:3px;font-size:46px;margin:0;text-shadow:4px 4px #3b090c}.brand small{color:var(--r);letter-spacing:6px;font-weight:bold;font-size:18px}nav{display:flex;gap:10px}.navdrop{position:relative}.navbtn{background:#070707;color:white;border:2px solid var(--r);padding:17px 22px;font:700 16px "Courier New";cursor:pointer;box-shadow:3px 3px #35080b}.navbtn:hover,.active{background:#861116}.dropdown{display:none;position:absolute;top:100%;left:0;min-width:210px;max-height:420px;overflow:auto;background:#050505;border:2px solid var(--r);padding:5px}.navdrop:hover .dropdown{display:block}.dropitem{display:block;width:100%;padding:10px;background:#080808;color:white;border:0;border-bottom:1px dotted #444;text-align:left;font:700 14px "Courier New";cursor:pointer}.dropitem:hover{background:#861116}main{padding:28px}.box{border:2px solid var(--r);background:#080808;box-shadow:5px 5px #2b080a}.hero{min-height:350px;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#391014,#080808 50%,#020202);border:2px solid var(--r);box-shadow:5px 5px #2b080a}.hero h2{font-family:Impact,sans-serif;font-size:92px;letter-spacing:6px;margin:0;text-shadow:6px 6px #650d11}.hero .ball{font-size:96px}.title{padding:13px 17px;border-bottom:2px solid var(--r);color:#ff343b;font-size:21px;font-weight:bold;letter-spacing:2px}.grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin-top:22px}table{width:100%;border-collapse:collapse}th{background:#4d090c;cursor:pointer}th,td{padding:12px;border-bottom:1px dotted #4b3a3b;text-align:left}tr:hover td{background:#17090a}.click{color:#ff343b;text-decoration:underline;cursor:pointer}.stat{padding:22px;border-bottom:1px solid #3b1719}.stat b{display:block;color:var(--r);font-size:36px}.profile{display:grid;grid-template-columns:190px 1fr;gap:25px;align-items:center}.avatar{width:180px;height:180px;border:3px solid var(--r);box-shadow:6px 6px #35090b;overflow:hidden;background:#111}.avatar img{width:100%;height:100%;object-fit:cover}.co{display:grid;grid-template-columns:1fr 1fr;height:100%;gap:2px;background:var(--r)}.name{font:64px Impact,sans-serif;letter-spacing:3px}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#441013;margin-top:14px}.metric{background:#090909;padding:18px;text-align:center}.metric b{display:block;color:var(--r);font-size:28px}.hofgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding:18px}.hof{text-align:center;border:2px solid #491518;padding:14px;min-height:190px}.jersey{width:96px;height:82px;margin:auto auto 10px;background:var(--r);clip-path:polygon(20% 0,36% 12%,64% 12%,80% 0,100% 25%,84% 43%,79% 100%,21% 100%,16% 43%,0 25%);display:grid;place-items:center;font-size:22px;font-weight:bold}.note{color:#aaa;font-size:13px}.crumb{color:#999;margin-bottom:14px}.footer{text-align:center;padding:25px;border-top:2px solid var(--r);margin-top:30px;letter-spacing:3px}@media(max-width:900px){header{position:static;flex-wrap:wrap}.brand h1{font-size:32px}main{padding:16px}.grid{grid-template-columns:1fr}.hero h2{font-size:55px}.profile{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}nav{flex-wrap:wrap}.dropdown{right:0;left:auto}}

/* ===== v0.4 Hall of Fame cards translated from approved mockup ===== */
.hof-wrap{
  padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
}
.hof-card{
  position:relative;
  min-height:330px;
  padding:14px 12px 16px;
  text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.015),rgba(255,255,255,0)),
    #080808;
  border:2px solid var(--r);
  box-shadow:inset 0 0 0 3px #160507,4px 4px 0 #2b080a;
}
.hof-card:before,.hof-card:after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  border-color:var(--r);
  border-style:solid;
}
.hof-card:before{left:5px;top:5px;border-width:2px 0 0 2px}
.hof-card:after{right:5px;bottom:5px;border-width:0 2px 2px 0}
.hof-pos{
  color:#f0c21c;
  font-weight:bold;
  letter-spacing:2px;
  margin-bottom:8px;
}
.pixel-jersey{
  --jc:#b71820;
  --js:#7a0e13;
  position:relative;
  width:150px;
  height:145px;
  margin:0 auto 12px;
  filter:drop-shadow(0 8px 0 #1e0809);
}
.pixel-jersey .body{
  position:absolute;
  left:31px;right:31px;top:18px;bottom:4px;
  background:var(--jc);
  box-shadow:
    inset 8px 0 0 rgba(255,255,255,.05),
    inset -8px 0 0 rgba(0,0,0,.14),
    inset 0 -10px 0 rgba(0,0,0,.10);
}
.pixel-jersey .sleeve{
  position:absolute;top:28px;width:46px;height:61px;background:var(--jc);
  box-shadow:inset 0 -8px 0 var(--js);
}
.pixel-jersey .sleeve.left{left:3px;clip-path:polygon(45% 0,100% 20%,79% 100%,0 76%,0 31%)}
.pixel-jersey .sleeve.right{right:3px;clip-path:polygon(55% 0,0 20%,21% 100%,100% 76%,100% 31%)}
.pixel-jersey .collar{
  position:absolute;left:55px;top:10px;width:40px;height:18px;
  border:7px solid #e8e4d9;border-top:0;border-radius:0 0 18px 18px;
  z-index:2;
}
.pixel-jersey .stripe{
  position:absolute;top:68px;width:36px;height:7px;background:#e8e4d9;z-index:2;
  box-shadow:0 9px 0 var(--js);
}
.pixel-jersey .stripe.left{left:7px;transform:rotate(8deg)}
.pixel-jersey .stripe.right{right:7px;transform:rotate(-8deg)}
.pixel-jersey .number{
  position:absolute;left:0;right:0;top:54px;z-index:3;
  color:#f4f0e6;font-family:Impact,"Arial Black",sans-serif;
  font-size:50px;line-height:1;text-shadow:4px 4px 0 #4a080b;
}
.hof-player{
  font-size:17px;font-weight:bold;color:#fff;letter-spacing:.5px;
  min-height:42px;display:flex;align-items:center;justify-content:center;
}
.hof-seasons{
  margin-top:8px;color:#f0c21c;font-weight:bold;font-size:18px;
}
.hof-years{
  display:inline-block;margin-top:10px;padding:5px 8px;
  border:1px dashed #69615a;color:#aaa;font-size:13px;
}
.hof-stars{min-height:28px;margin-top:10px;color:#f0b91e;font-size:22px;letter-spacing:4px}
.hof-legend{
  border-top:1px solid #4c1719;
  padding:12px 18px 15px;
  text-align:center;
  color:#aaa;font-size:13px;
}
@media(max-width:650px){
  .hof-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
  .hof-card{min-height:290px;padding:10px 6px}
  .pixel-jersey{transform:scale(.84);transform-origin:top center;margin-bottom:-6px}
  .hof-player{font-size:14px}
}


/* v0.5 header helmet */
.helmet{
  position:relative;
  width:102px;
  height:72px;
  flex:0 0 102px;
  background:linear-gradient(135deg,#ee2a30 0%,#bd0d14 70%);
  border:4px solid #f3f3f3;
  border-radius:58% 48% 38% 50%;
  box-shadow:6px 6px 0 #43090c;
}
.helmet:before{
  content:"";
  position:absolute;
  right:-27px;
  top:30px;
  width:41px;
  height:29px;
  border:4px solid #f3f3f3;
  border-left:0;
  border-radius:0 15px 15px 0;
  box-shadow:0 7px 0 -4px #f3f3f3;
}
.helmet:after{
  content:"";
  position:absolute;
  left:12px;
  bottom:8px;
  width:26px;
  height:14px;
  background:#090909;
  border-radius:50%;
  box-shadow:39px -25px 0 -8px #f3f3f3;
}
.profile.no-photo{
  display:block;
}
.profile.no-photo > div{
  width:100%;
}

/* v0.6 — helmet removed */
header .brand{margin-left:0}

/* v0.8 historical roster pages */
.roster-summary{padding:16px 18px;border-bottom:1px solid #431416;background:#0b0b0b}
.roster-pos{
  padding:10px 18px;background:#170607;color:#ff343b;font-weight:bold;
  letter-spacing:2px;border-top:1px solid #5b1518;border-bottom:1px solid #5b1518
}
.roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:8px 18px 16px}
.roster-player{padding:10px 4px;border-bottom:1px dotted #413638}
@media(max-width:700px){.roster-grid{grid-template-columns:1fr}}

/* ===== v1.0 NAVY + WHITE THEME ===== */
:root{--r:#173B67;--d:#030812;--p:#07111f;--w:#F7F9FC;--g:#FFFFFF}
body{background-color:#020712;color:#F7F9FC;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)}
header{border-color:#244F7D;background:#030914;box-shadow:0 5px 0 #01040a}
.brand h1{color:#fff;text-shadow:4px 4px #0b2747}.brand small{color:#9FC5E8}
.navbtn{border-color:#315F8F;background:#07111f;box-shadow:3px 3px #061a31}
.navbtn:hover,.navbtn.active,.active{background:#173B67}
.dropdown{border-color:#315F8F;background:#050c17}.dropitem{background:#07111f}.dropitem:hover{background:#173B67}
.box,.hero{border-color:#315F8F;background:#07111f;box-shadow:5px 5px #061426}
.hero{background:radial-gradient(circle,#173B67 0%,#0a1c31 32%,#030812 70%)}
.hero h2{color:#fff;text-shadow:6px 6px #0b2747}
.title{color:#D9EAF8;border-bottom-color:#315F8F}
th{background:#173B67;color:#fff}tr:hover td{background:#0c2139}.click{color:#8FC1EC}
.stat b,.metric b{color:#9FC5E8}.metrics{background:#244F7D}.metric{background:#07111f}
.roster-summary{background:#07111f;border-bottom-color:#244F7D}
.roster-pos{background:#0b1d33;color:#D9EAF8;border-top-color:#315F8F;border-bottom-color:#315F8F}
.footer{border-top-color:#315F8F}
.hof-card{border-color:#315F8F;background:#07111f;box-shadow:inset 0 0 0 3px #08192b,4px 4px 0 #061426}
.hof-card:before,.hof-card:after{border-color:#5D8FBE}
.hof-pos,.hof-seasons,.hof-stars{color:#D9EAF8}
.pixel-jersey{--jc:#173B67;--js:#0B2747}
.pixel-jersey .number{color:#fff;text-shadow:4px 4px #07182a}
.hof-legend{border-top-color:#244F7D}