:root{--ink:#172033;--muted:#687386;--line:#dce3eb;--paper:#fff;--canvas:#f4f6f9;--navy:#41556b;--offense:#2563eb;--defense:#c2413b;--field:#356f42;--field-dark:#2d6339}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--canvas);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.container{display:grid;grid-template-columns:clamp(180px,15vw,240px) 1fr;gap:5px;min-height:100vh;padding:5px}
.left-section{background:#eaeaea;border-radius:12px;border-right:1px solid #d0d0d0;box-sizing:border-box;color:#111;display:flex;flex-direction:column;padding:12px;position:relative}
.left-section>img{display:block;margin:0 auto 8px;max-height:120px;object-fit:contain}
.nav-title{color:#555;font-size:.9rem;margin:12px 4px 6px;text-align:center;text-transform:uppercase}
.nav-list{list-style:none;margin:0;padding:0}.nav-list li a{border-radius:10px;color:#111;display:block;font-size:.75rem;padding:3px 10px;text-decoration:none;transition:background .2s ease}.nav-list li a:hover,.nav-list li a:focus{background:rgba(0,0,0,.06);outline:none}.nav-list li a.active{background:rgba(46,160,67,.08);border-left:4px solid #2ea043}.nav-group+.nav-group{border-top:1px solid rgba(255,255,255,.18);margin-top:10px;padding-top:10px}
.has-flyout{position:relative}.flyout{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);color:#111;display:none;left:100%;margin-left:10px;max-height:70vh;overflow:auto;padding:10px;position:absolute;top:0;width:300px;z-index:1000}.has-flyout:hover .flyout,.has-flyout:focus-within .flyout{display:block}.flyout-list{display:grid;gap:4px 12px;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0}.flyout-heading{color:#666;font-size:12px;font-weight:700;grid-column:1/-1;margin:8px 0 4px;pointer-events:none;text-transform:uppercase}.flyout-list a{padding:8px 10px}
.right-section{background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.08);min-width:0;overflow:hidden}
.page-header{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin:0 20px;padding:18px 0 13px}.page-header h1{font-size:22px;margin:0}.page-header p{color:var(--muted);font-size:.74rem;margin:4px 0 0}.selection-note{align-items:flex-end;display:flex;flex-direction:column;gap:2px}.selection-note span{color:var(--muted);font-size:.59rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.selection-note strong{font-size:.78rem}
.controls{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:flex-start;padding:10px clamp(20px,3vw,42px)}.era-tabs{background:#edf1f5;border-radius:8px;display:flex;gap:3px;max-width:100%;overflow-x:auto;padding:3px}.era-tab{background:transparent;border:0;border-radius:6px;color:#556273;cursor:pointer;display:block;font-size:.72rem;font-weight:700;padding:6px 13px;text-decoration:none;white-space:nowrap}.era-tab:hover{background:#e2e8f0}.era-tab.active{background:var(--navy);color:#fff}
.lineup-section{padding:12px clamp(14px,2.2vw,34px) 18px}.formation-key{display:flex;gap:16px;justify-content:flex-end;margin:0 3px 7px}.formation-key span{align-items:center;color:var(--muted);display:flex;font-size:.65rem;font-weight:700;gap:5px}.formation-key i{border-radius:50%;display:block;height:8px;width:8px}.defense-key{background:var(--defense)}.offense-key{background:var(--offense)}
.field-scroll{border-radius:12px;box-shadow:0 5px 18px rgba(20,33,61,.16);overflow:auto}.football-field{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 9.8%,rgba(255,255,255,.25) 10%,rgba(255,255,255,.25) 10.25%,rgba(0,0,0,.025) 10.45%,rgba(0,0,0,.025) 20%),linear-gradient(90deg,var(--field-dark),var(--field) 18%,var(--field) 82%,var(--field-dark));border:4px solid #f6f0dc;height:680px;min-width:930px;position:relative}.football-field:before,.football-field:after{border-left:2px dashed rgba(255,255,255,.55);border-right:2px dashed rgba(255,255,255,.55);content:"";inset:0 auto 0 28%;position:absolute;width:7%}.football-field:after{left:auto;right:28%}
.end-zone{align-items:center;background:rgba(16,45,28,.28);display:flex;height:5.8%;justify-content:center;left:0;position:absolute;width:100%}.end-zone span{color:rgba(255,255,255,.42);font-size:1.1rem;font-weight:900;letter-spacing:.35em}.end-zone.north{top:0}.end-zone.south{bottom:0}.line-of-scrimmage{border-top:3px solid rgba(250,210,72,.82);left:0;position:absolute;top:50%;width:100%}.line-of-scrimmage span{background:#f1c84b;border-radius:0 0 5px 5px;color:#3d3517;font-size:.55rem;font-weight:900;left:50%;letter-spacing:.12em;padding:3px 7px;position:absolute;transform:translateX(-50%)}
.field-number{color:rgba(255,255,255,.22);font-size:1.25rem;font-weight:900;position:absolute;transform:translateY(-50%)}.field-number.left{left:4%}.field-number.right{right:4%}.field-number.n20{top:20%}.field-number.n30{top:30%}.field-number.n40{top:40%}.field-number.n50{top:50%}
.player-card{align-items:center;background:rgba(255,255,255,.96);border:2px solid var(--accent);border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.22);display:flex;flex-direction:column;left:var(--x);min-height:52px;padding:5px 7px 4px;position:absolute;text-align:center;top:var(--y);transform:translate(-50%,-50%);width:120px;z-index:2}.player-card.hall-of-famer{box-shadow:0 0 0 2px #e4bb46,0 4px 10px rgba(0,0,0,.28)}.player-card.lineman{padding-left:5px;padding-right:5px;width:110px}.player-card.defense{--accent:var(--defense)}.player-card.offense{--accent:var(--offense)}.player-card .position{background:var(--accent);border-radius:999px;color:#fff;font-size:.52rem;font-weight:900;left:50%;letter-spacing:.05em;padding:2px 6px;position:absolute;top:-9px;transform:translateX(-50%)}.hof-mark{background:#e4bb46;border-radius:0 5px 0 5px;color:#463607;font-size:.42rem;font-style:normal;font-weight:900;letter-spacing:.04em;padding:2px 3px;position:absolute;right:0;top:0}.player-card strong{font-size:.75rem;line-height:1.1;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card strong a{color:var(--ink);text-decoration:none}.player-card strong a:hover{text-decoration:underline}.player-card.lineman strong{font-size:.7rem}.player-card.lineman small{font-size:.52rem}.player-card small{color:var(--muted);font-size:.54rem;line-height:1.2;margin-top:3px;white-space:nowrap}.player-card b{color:var(--accent);font-size:.52rem;letter-spacing:.02em;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-note{color:var(--muted);font-size:.66rem;margin:9px 2px 0;text-align:right}
@media(max-width:900px){.container{display:block;padding:0}.left-section{border-radius:0}.left-section>img{height:72px}.nav-group:not(:last-child){display:none}.right-section{border-radius:0}.page-header{align-items:flex-start;flex-direction:column;gap:9px}.selection-note{align-items:flex-start}.controls{align-items:flex-start;flex-direction:column;gap:9px}.football-field{height:680px}.template-note{text-align:left}}