/* ============================================================
   LA PREMIER BUNDESLIGA SERIE A — fantasy league site styles
   Design language: European-crest sports broadcast meets NFL
   fantasy stat sheet. Deep navy grounds, gold accents, condensed
   display type for headlines, clean grotesque for data/body.
   ============================================================ */

:root{
  --navy-950:#050b1a;
  --navy-900:#0a1730;
  --navy-800:#0f2044;
  --navy-700:#16305e;
  --navy-600:#1e3d75;
  --line:#28407a;

  --gold:#d4af37;
  --gold-light:#f0d878;
  --gold-dark:#8a6a1f;
  --gold-ink:#2a2005;

  --white:#f6f7fb;
  --mute:#a9b4cf;

  --silver:#c8cdd6;
  --bronze:#cd7f32;

  --win:#3aa06a;
  --loss:#c0455a;

  --font-display:'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;

  --radius:3px;
  --shadow-lo: 0 1px 0 rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(2,6,18,.45);
}

/* Brand theme is fixed regardless of system light/dark preference —
   the league's identity IS the dark navy/gold broadcast look.
   These blocks exist to satisfy theme-awareness but intentionally
   mirror the same palette so the crest colors never shift. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="light"]){
    --navy-950:#050b1a; --navy-900:#0a1730; --navy-800:#0f2044;
  }
}
:root[data-theme="dark"]{
  --navy-950:#050b1a; --navy-900:#0a1730; --navy-800:#0f2044;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 .4em;
  color:var(--white);
}
:focus-visible{
  outline:3px solid var(--gold-light);
  outline-offset:2px;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}
.hidden{ display:none !important; }

/* ---------- crest / logo placeholder ---------- */
.crest{
  --crest-size: 56px;
  /* Badge shape. The default is the pointed shield.
     Add the class crest-circle to any badge to make it round instead. */
  --crest-clip: polygon(50% 0%, 100% 18%, 100% 70%, 50% 100%, 0% 70%, 0% 18%);
  display:inline-block;
  width:var(--crest-size);
  height:var(--crest-size);
  position:relative;
  flex:none;
}
.crest img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  clip-path: var(--crest-clip);
  border-radius: var(--crest-round, 0);
  background:var(--navy-700);
}
.crest .crest-fallback{
  position:absolute; inset:0;
  clip-path: var(--crest-clip);
  border-radius: var(--crest-round, 0);
  background:linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border:1px solid var(--gold-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  color:var(--gold-light);
  font-size:calc(var(--crest-size) * .34);
  letter-spacing:.02em;
}
.crest.crest-lg{ --crest-size:120px; }
.crest.crest-lg .crest-fallback{ font-size:38px; }

/* Round badge. Use for logos that are already circular. */
.crest.crest-circle{
  --crest-clip: none;
  --crest-round: 50%;
}
.crest.crest-circle .crest-fallback{
  border-radius:50%;
}

/* WANT EVERY BADGE ROUND? Delete the slash-star on the next line and the
   star-slash after it, and every crest on the site turns into a circle.
.crest{ --crest-clip: none !important; --crest-round: 50% !important; }
.crest .crest-fallback{ border-radius:50% !important; }
*/

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-bottom:2px solid var(--gold-dark);
}
.header-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 20px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-text{ min-width:0; }
.brand-name{
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 2.4vw, 1.5rem);
  line-height:1.05;
  color:var(--white);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-name .accent{ color:var(--gold); }
.brand-sub{
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--mute);
  margin-top:2px;
}
.nav-toggle{
  margin-left:auto;
  background:none; border:1px solid var(--line); color:var(--white);
  width:40px; height:40px; border-radius:var(--radius);
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }
.site-nav{
  display:flex; align-items:center; gap:2px;
  margin-left:8px; flex-wrap:wrap;
}
.site-nav a{
  display:block;
  padding:10px 14px;
  font-family:var(--font-display);
  font-size:.92rem;
  letter-spacing:.02em;
  color:var(--mute);
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--white); }
.site-nav a.active{
  color:var(--white);
  border-bottom-color:var(--gold);
}

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    flex-basis:100%;
    display:none;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--line);
    margin-top:10px;
    padding-top:6px;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:12px 4px; border-bottom:1px solid var(--navy-800); }
  .header-row{ flex-wrap:wrap; }
}

/* ---------- news ticker ---------- */
.ticker{
  background:var(--gold);
  color:var(--navy-950);
  overflow:hidden;
  position:relative;
  border-bottom:1px solid var(--gold-dark);
}
.ticker-label{
  position:absolute; left:0; top:0; bottom:0; z-index:2;
  display:flex; align-items:center;
  padding:0 14px;
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.08em;
  background:var(--navy-950);
  color:var(--gold-light);
}
.ticker-label::after{
  content:"";
  position:absolute; right:-14px; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg, var(--navy-950), transparent);
}
.ticker-track-outer{
  padding-left:120px;
  white-space:nowrap;
}
.ticker-track{
  display:inline-flex;
  animation: ticker-scroll 34s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center;
  padding:8px 0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
}
.ticker-item::after{
  content:"\2726";
  margin:0 26px;
  font-size:.7em;
  opacity:.55;
}
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
  .ticker-track-outer{ overflow-x:auto; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:56px 0 44px;
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.hero-text h1{
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.02;
}
.hero-text h1 .accent{ color:var(--gold); }
.hero-kicker{
  font-family:var(--font-display);
  color:var(--gold-light);
  font-size:.95rem;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.hero-text p{
  color:var(--mute);
  max-width:56ch;
  margin:14px 0 0;
}
.hero-stats{
  display:flex; gap:22px; margin-top:22px; flex-wrap:wrap;
}
.hero-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--white);
}
.hero-stat span{
  font-size:.78rem;
  color:var(--mute);
}

/* ---------- section shell ---------- */
.section{ padding:52px 0; }
.section + .section{ border-top:1px solid var(--navy-800); }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.section-head h2{
  font-size:1.7rem;
  position:relative;
  padding-left:16px;
  border-left:5px solid var(--gold);
}
.section-note{ color:var(--mute); font-size:.9rem; }

/* ---------- news cards ---------- */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:18px;
}
.news-card{
  background:var(--navy-800);
  border:1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  padding:20px 20px 26px;
  display:flex; flex-direction:column; gap:8px;
}
.news-date{
  font-family:var(--font-display);
  color:var(--gold-light);
  font-size:.78rem;
  letter-spacing:.06em;
}
.news-card h3{ font-size:1.15rem; }
.news-card p{ color:var(--mute); margin:0; font-size:.94rem; }
.news-edit-row{
  display:flex; gap:10px; margin-top:10px;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  letter-spacing:.03em;
  font-size:.85rem;
  padding:10px 18px;
  border-radius:var(--radius);
  border:1px solid var(--gold-dark);
  background:transparent;
  color:var(--gold-light);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{ background:var(--gold-dark); color:var(--white); }
.btn:active{ transform:translateY(1px); }
.btn-solid{
  background:var(--gold);
  color:var(--navy-950);
  border-color:var(--gold);
}
.btn-solid:hover{ background:var(--gold-light); color:var(--navy-950); }
.btn-ghost{
  border-color:var(--line);
  color:var(--mute);
}
.btn-ghost:hover{ background:var(--navy-700); color:var(--white); }
.btn-small{ padding:6px 12px; font-size:.74rem; }
.btn-danger{ border-color:var(--loss); color:var(--loss); }
.btn-danger:hover{ background:var(--loss); color:var(--white); }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--mute);
}
.field input, .field textarea{
  background:var(--navy-900);
  border:1px solid var(--line);
  color:var(--white);
  padding:10px 12px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--gold); }

.editor-panel{
  background:var(--navy-800);
  border:1px dashed var(--gold-dark);
  padding:20px;
  margin-bottom:20px;
  border-radius:var(--radius);
}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--navy-800);
  border:1px solid var(--gold);
  color:var(--white);
  padding:12px 20px;
  border-radius:var(--radius);
  font-size:.9rem;
  z-index:100;
  box-shadow:var(--shadow-md);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.hide{ opacity:0; transform:translate(-50%, 8px); pointer-events:none; }
.toast.err{ border-color:var(--loss); }

/* ---------- standings ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); }
table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  min-width:640px;
}
thead th{
  background:var(--navy-800);
  color:var(--gold-light);
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.04em;
  text-align:left;
  padding:12px 14px;
  border-bottom:2px solid var(--gold-dark);
  font-size:.8rem;
  white-space:nowrap;
}
tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--navy-800);
  white-space:nowrap;
}
tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
tbody tr:hover{ background:rgba(212,175,55,.06); }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

.standings-table .rk-cell{ display:flex; align-items:center; gap:10px; }
.medal{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.82rem;
  color:var(--navy-950);
  flex:none;
}
.medal.g{ background:linear-gradient(160deg,#f4d778,var(--gold)); box-shadow:0 0 0 2px var(--gold-dark); }
.medal.s{ background:linear-gradient(160deg,#eef1f4,var(--silver)); box-shadow:0 0 0 2px #9aa1ac; }
.medal.b{ background:linear-gradient(160deg,#e3a45f,var(--bronze)); box-shadow:0 0 0 2px #8a5522; }
.medal.n{ background:var(--navy-700); color:var(--mute); box-shadow:0 0 0 2px var(--line); }

tr.rank-1{ background:linear-gradient(90deg, rgba(212,175,55,.16), transparent); }
tr.rank-2{ background:linear-gradient(90deg, rgba(200,205,214,.12), transparent); }
tr.rank-3{ background:linear-gradient(90deg, rgba(205,127,50,.12), transparent); }

.team-link{ display:flex; align-items:center; gap:10px; }
.team-link .crest{ --crest-size:30px; }
.team-link span.name{ color:var(--white); font-weight:600; }
.team-link:hover span.name{ color:var(--gold-light); }

.streak-w{ color:var(--win); font-weight:700; }
.streak-l{ color:var(--loss); font-weight:700; }

/* ---------- team page ---------- */
.team-hero{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:40px 0;
  border-bottom:1px solid var(--line);
}
.team-hero h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
.team-meta{ color:var(--mute); font-size:.95rem; margin-top:6px; }
.team-badges{
  display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;
}
.pill{
  font-family:var(--font-display);
  font-size:.78rem; letter-spacing:.04em;
  padding:6px 12px;
  border:1px solid var(--line);
  color:var(--mute);
  border-radius:20px;
}
.pill b{ color:var(--white); }
.pill.gold-pill{ border-color:var(--gold-dark); color:var(--gold-light); }

.roster-block{ margin-bottom:34px; }
.roster-block h3{
  font-size:1.1rem;
  color:var(--gold-light);
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  margin-bottom:0;
}
.slot-badge{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--navy-950);
  background:var(--gold);
  padding:2px 8px;
  border-radius:3px;
  min-width:38px;
  text-align:center;
}
.player-cell{ display:flex; align-items:center; gap:10px; }
.player-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--navy-700);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; color:var(--mute);
  flex:none; overflow:hidden;
}
.player-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.player-name{ font-weight:600; color:var(--white); }
.player-status{
  font-size:.68rem;
  color:var(--navy-950);
  background:var(--gold-light);
  padding:1px 5px;
  border-radius:3px;
  margin-left:6px;
  font-family:var(--font-display);
}
.nfl-tag{ color:var(--mute); font-size:.78rem; }

/* ---------- inline-editable fields (roster manager) ---------- */
.stat-input, .status-input{
  background:var(--navy-900);
  border:1px solid var(--line);
  color:var(--white);
  border-radius:var(--radius);
  font-family:var(--font-body);
  transition:border-color .15s ease, background-color .5s ease;
}
.stat-input{
  width:64px;
  padding:7px 8px;
  font-size:.85rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.status-input{
  width:78px;
  padding:7px 8px;
  font-size:.8rem;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.status-input::placeholder{ text-transform:none; letter-spacing:0; color:var(--mute); }
.stat-input:focus, .status-input:focus{ border-color:var(--gold); outline:none; }
.status-input:not(:placeholder-shown){ border-color:var(--gold-dark); color:var(--gold-light); }
.field-saved{ background-color:rgba(212,175,55,.28) !important; }
.text-input{
  background:var(--navy-900);
  border:1px solid var(--line);
  color:var(--white);
  border-radius:var(--radius);
  font-family:var(--font-body);
  transition:border-color .15s ease, background-color .5s ease;
  width:56px;
  padding:7px 8px;
  font-size:.82rem;
  text-align:center;
}
.text-input:focus{ border-color:var(--gold); outline:none; }

/* ---------- free agents ---------- */
.fa-toolbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-bottom:18px;
}
.fa-search{
  flex:1; min-width:200px;
  background:var(--navy-800);
  border:1px solid var(--line);
  color:var(--white);
  padding:10px 14px;
  border-radius:var(--radius);
  font-size:.95rem;
}
.fa-search:focus{ border-color:var(--gold); outline:none; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-family:var(--font-display);
  font-size:.78rem;
  padding:7px 13px;
  border:1px solid var(--line);
  color:var(--mute);
  border-radius:20px;
  cursor:pointer;
  background:transparent;
}
.chip:hover{ color:var(--white); border-color:var(--gold-dark); }
.chip.active{ background:var(--gold); color:var(--navy-950); border-color:var(--gold); }
.sort-select{
  background:var(--navy-800);
  border:1px solid var(--line);
  color:var(--white);
  padding:9px 12px;
  border-radius:var(--radius);
  font-size:.85rem;
}
.avail-pill{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.03em;
  color:#0d2b19;
  background:#7fd9a8;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.star-btn{
  background:none; border:none; cursor:pointer;
  color:var(--line);
  font-size:1.05rem;
  line-height:1;
  padding:4px;
}
.star-btn.on{ color:var(--gold); }
.fa-count{ color:var(--mute); font-size:.85rem; margin-bottom:10px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--navy-800);
  padding:30px 0 60px;
  color:var(--mute);
  font-size:.85rem;
}
.site-footer .wrap{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-social{
  display:flex; gap:10px; align-items:center;
}
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--mute);
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.social-link svg{ width:17px; height:17px; }
.social-link:hover{
  color:var(--gold-light);
  border-color:var(--gold-dark);
  background:rgba(212,175,55,.12);
}

@media (max-width:600px){
  .hero{ padding:38px 0 30px; }
  .section{ padding:38px 0; }
  table{ font-size:.86rem; }
  .hide-mobile{ display:none; }
}

/* ---------- news cards as links ---------- */
a.news-card{
  transition:transform .12s ease, border-color .12s ease;
}
a.news-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold-dark);
}
a.news-card:hover h3{ color:var(--gold-light); }
.news-more{
  margin-top:auto;
  padding-top:12px;
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.03em;
  color:var(--gold);
}

/* ---------- article ---------- */
.back-link{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.85rem;
  color:var(--mute);
  margin-bottom:18px;
}
.back-link:hover{ color:var(--gold-light); }
.article{
  max-width:68ch;
}
.article h1{
  font-size:clamp(1.7rem, 3.6vw, 2.5rem);
  line-height:1.08;
  margin-bottom:.35em;
}
.article-lede{
  font-size:1.1rem;
  color:var(--gold-light);
  border-left:3px solid var(--gold-dark);
  padding-left:14px;
  margin:0 0 26px;
}
.article p{
  color:#dbe2f2;
  margin:0 0 1.15em;
}
.article-figure{
  margin:0 0 26px;
  border:1px solid var(--line);
  background:var(--navy-800);
}
.article-figure img{ width:100%; }
.article-figure video{
  display:block;
  width:100%;
  height:min(60vh, 520px);
  background:#000;
  object-fit:contain;
}
.article-figure figcaption{
  padding:10px 14px;
  font-size:.82rem;
  color:var(--mute);
}

/* ---------- news writer (private tool) ---------- */
.writer-note{
  background:var(--navy-800);
  border-left:4px solid var(--gold);
  padding:14px 18px;
  margin-bottom:24px;
  font-size:.9rem;
  color:var(--mute);
}
.writer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:16px;
}
.writer-row{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid var(--line);
  background:var(--navy-800);
  padding:14px 16px;
  margin-bottom:10px;
}
.writer-row-main{ flex:1; min-width:220px; }
.writer-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.writer-row-actions .btn[disabled]{ opacity:.35; cursor:not-allowed; }
#wOutput{
  width:100%;
  min-height:220px;
  background:var(--navy-950);
  border:1px solid var(--line);
  color:#cfe0ff;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8rem;
  padding:14px;
  border-radius:var(--radius);
}

/* ---------- manager bio ---------- */
.team-bio{
  max-width:62ch;
  color:#c6d0e6;
  margin:12px 0 0;
  font-size:.96rem;
}

/* ---------- commissioner ---------- */
.commish-hero .crest-lg{ cursor:pointer; }
.commish-crest{
  transition:transform .18s ease, filter .18s ease;
  filter:drop-shadow(0 0 0 rgba(212,175,55,0));
}
.commish-crest:hover{
  transform:scale(1.04);
  filter:drop-shadow(0 0 14px rgba(212,175,55,.55));
}
.commish-trigger{ margin-top:16px; }

.commish-overlay{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.commish-backdrop{
  position:absolute; inset:0;
  background:rgba(3,7,18,.88);
  backdrop-filter:blur(4px);
  animation:fade-in .25s ease;
}
.commish-panel{
  position:relative;
  width:min(760px, 100%);
  max-height:92vh;
  overflow-y:auto;
  background:
    radial-gradient(700px 300px at 50% -10%, rgba(212,175,55,.2), transparent 65%),
    linear-gradient(180deg, var(--navy-800), var(--navy-950));
  border:1px solid var(--gold-dark);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:pane-in .4s cubic-bezier(.16,1,.3,1);
}
.commish-shine{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.commish-inner{
  padding:46px 40px 40px;
  text-align:center;
}
.commish-close{
  position:absolute; top:10px; right:14px;
  background:none; border:none; cursor:pointer;
  color:var(--mute); font-size:1.9rem; line-height:1;
}
.commish-close:hover{ color:var(--gold-light); }
.commish-kicker{
  font-family:var(--font-display);
  font-size:.74rem; letter-spacing:.22em;
  color:var(--gold-light);
  text-transform:uppercase;
}
.commish-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.4rem, 11vw, 5.6rem);
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:.12em 0 .3em;
  background:linear-gradient(180deg, #fbf0c4 10%, var(--gold) 55%, var(--gold-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.commish-title .the{
  display:block;
  font-size:.34em;
  letter-spacing:.42em;
  color:var(--mute);
  background:none;
  -webkit-text-fill-color:var(--mute);
  margin-bottom:.15em;
}
.commish-portrait{
  --crest-size:130px;
  margin:6px auto 16px;
  display:block;
}
.commish-portrait .crest-fallback{
  border:2px solid var(--gold);
  font-size:42px;
}
.commish-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--white);
}
.commish-role{
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-top:4px;
}
.commish-bio{
  color:#cfd8ec;
  max-width:54ch;
  margin:20px auto 0;
  font-size:.98rem;
}
.commish-decrees{
  list-style:none;
  padding:0;
  margin:24px auto 28px;
  max-width:52ch;
  text-align:left;
}
.commish-decrees li{
  position:relative;
  padding:10px 0 10px 30px;
  border-top:1px solid var(--navy-700);
  color:var(--mute);
  font-size:.92rem;
}
.commish-decrees li::before{
  content:"\2726";
  position:absolute; left:6px; top:10px;
  color:var(--gold);
}
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pane-in{
  from{ opacity:0; transform:translateY(24px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .commish-backdrop, .commish-panel{ animation:none; }
  .commish-crest{ transition:none; }
}
@media (max-width:600px){
  .commish-inner{ padding:38px 22px 30px; }
}
body.pane-open{ overflow:hidden; }

/* ---------- anthem control ---------- */
.sound-toggle{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy-800);
  border:1px solid var(--gold-dark);
  color:var(--gold-light);
  font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.04em;
  padding:10px 16px;
  border-radius:24px;
  cursor:pointer;
  box-shadow:var(--shadow-md);
}
.sound-toggle:hover{ background:var(--navy-700); color:var(--white); }
.sound-toggle .sound-icon{ font-size:1rem; }
.sound-toggle.playing{
  background:var(--gold);
  color:var(--navy-950);
  border-color:var(--gold);
}

/* ---------- roster manager: location pills ---------- */
.loc-pill{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.03em;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
  border:1px solid var(--line);
  color:var(--mute);
}
.loc-pill.loc-fa{ color:#0d2b19; background:#7fd9a8; border-color:transparent; }
.loc-pill.loc-start{ color:var(--navy-950); background:var(--gold); border-color:transparent; }
.loc-pill.loc-bench{ color:var(--mute); background:var(--navy-700); border-color:var(--line); }
.loc-pill.loc-ir{ color:var(--gold-light); background:transparent; border-color:var(--gold-dark); }