/* Riverwalk Dynasty — League Hub styles */

  :root{
    --bg:#F4F6FB;
    --surface:#FFFFFF;
    --surface-2:#EEF1F9;
    --line:#E1E6F2;
    --navy:#0E1730;
    --navy-2:#182357;
    --ink:#141A2E;
    --ink-dim:#5B6478;
    --accent:#3452E0;
    --accent-soft:#E9EDFF;
    --gold:#C9A227;

    --balkan:#2A5DA8;      --balkan-ink:#F1ECE2;
    --wish:#DE9A96;        --wish-ink:#3A1614;
    --mick:#E3B94D;        --mick-ink:#332404;
    --valhalla:#E0A868;    --valhalla-ink:#3A2408;
    --wilksbooth:#8FBF8A;  --wilksbooth-ink:#152D12;
    --winter:#A9CBD6;      --winter-ink:#122A31;
    --imps:#2E7D6B;        --imps-ink:#EAF6F2;
    --milf:#8C63BF;        --milf-ink:#F4EEFB;
    --thor:#C0392B;        --thor-ink:#FBEAE7;
    --keystone:#8FB9D6;    --keystone-ink:#0E2536;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  ::selection{background:var(--accent-soft); color:var(--navy);}
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
  button{font-family:inherit;}

  /* ---------- ambient page mesh (shows through the light space between cards) ---------- */
  .page-mesh{ position:fixed; inset:0; overflow:hidden; pointer-events:none; }
  .pblob{ position:absolute; filter:blur(95px); }
  .pblob.p1{
    width:640px; height:420px; background:var(--navy); opacity:.18;
    border-radius:45% 55% 60% 40% / 55% 45% 55% 45%; top:8%; left:-220px;
    animation:wave1 36s ease-in-out infinite alternate;
  }
  .pblob.p2{
    width:560px; height:380px; background:var(--accent); opacity:.14;
    border-radius:60% 40% 45% 55% / 45% 60% 40% 55%; bottom:4%; right:-200px;
    animation:wave2 42s ease-in-out infinite alternate;
  }
  .pblob.p3{
    width:500px; height:340px; background:var(--navy-2); opacity:.15;
    border-radius:50% 50% 40% 60% / 60% 40% 55% 45%; top:50%; left:38%;
    animation:wave3 48s ease-in-out infinite alternate;
  }
  @keyframes wave1{ 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(150px,35px) rotate(6deg);} 100%{transform:translate(50px,-25px) rotate(-3deg);} }
  @keyframes wave2{ 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(-130px,-30px) rotate(-6deg);} 100%{transform:translate(-40px,25px) rotate(4deg);} }
  @keyframes wave3{ 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(80px,-45px) rotate(5deg);} 100%{transform:translate(-30px,20px) rotate(-5deg);} }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; background:var(--navy); padding:1.5rem 0 2rem; }
  .hero-mesh{ position:absolute; inset:0; overflow:hidden; z-index:0; }
  .hero-mesh .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen; }
  .blob.b1{ width:420px; height:420px; background:var(--accent); top:-160px; left:-90px; animation:drift1 24s ease-in-out infinite alternate; }
  .blob.b2{ width:360px; height:360px; background:var(--gold); top:-120px; right:-70px; animation:drift2 28s ease-in-out infinite alternate; }
  .blob.b3{ width:320px; height:320px; background:#5B7CFF; bottom:-180px; left:38%; animation:drift3 32s ease-in-out infinite alternate; }
  @keyframes drift1{ from{transform:translate(0,0);} to{transform:translate(70px,40px);} }
  @keyframes drift2{ from{transform:translate(0,0);} to{transform:translate(-55px,55px);} }
  @keyframes drift3{ from{transform:translate(0,0);} to{transform:translate(45px,-35px);} }
  .hero-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 1.5rem; }
  .hero-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
  .wordmark-badge{
    position:relative; isolation:isolate; display:inline-flex; align-items:center;
    padding:.65rem 1.6rem; border-radius:999px; background:var(--navy-2);
    border:none; cursor:pointer; transition:transform .15s ease;
  }
  .wordmark-badge:hover{ transform:translateY(-1px); }
  .wordmark-badge:active{ transform:translateY(0) scale(.97); }
  .wordmark-badge::before{
    content:""; position:absolute; inset:-7px; border-radius:999px; z-index:-1;
    background:conic-gradient(from 0deg, #FF7A18, #FFC93D, #FF3D57, #FF7A18);
    animation:fireSpin 4s linear infinite, fireFlicker .55s ease-in-out infinite alternate;
  }
  @keyframes fireSpin{ to{ transform:rotate(360deg); } }
  @keyframes fireFlicker{ from{ opacity:.55; filter:blur(11px); } to{ opacity:.9; filter:blur(18px); } }
  .wordmark{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.85rem; color:#fff; letter-spacing:-0.01em; }
  .btn-login{
    background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff;
    padding:.55rem 1.15rem; border-radius:8px; font-weight:600; font-size:.88rem; cursor:pointer;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn-login:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-1px); }
  .btn-login:active{ transform:translateY(0) scale(.97); }
  .hero-copy{ margin:0 auto; max-width:640px; text-align:center; }
  .hero-hook{
    font-family:'Space Grotesk', sans-serif; color:#fff; font-weight:700;
    font-size:clamp(1.4rem, 3vw, 2.05rem); margin:0 0 .5rem; letter-spacing:-0.01em; line-height:1.12;
  }
  .hero-sub{ color:rgba(255,255,255,.72); font-size:.92rem; margin:0 auto; line-height:1.5; max-width:48ch; }

  /* team-color stripe */
  .stripe{
    height:4px;
    background:linear-gradient(90deg, var(--balkan), var(--wish), var(--mick), var(--valhalla), var(--wilksbooth),
      var(--winter), var(--imps), var(--milf), var(--thor), var(--keystone), var(--balkan));
    background-size:200% 100%; animation:stripeShift 16s linear infinite;
  }
  @keyframes stripeShift{ from{background-position:0 0;} to{background-position:200% 0;} }

  /* ---------- hero stats (overlap the seam) ---------- */
  .hero-stats-wrap{ max-width:1180px; margin:-2rem auto 0; padding:0 1.5rem; position:relative; z-index:2; }
  .hero-stats{ display:flex; gap:.9rem; flex-wrap:wrap; }
  .stat-tile{
    background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
    border-radius:10px; padding:.85rem 1.1rem; min-width:150px; flex:1 1 150px;
    box-shadow:0 10px 26px rgba(14,23,48,.14); position:relative; text-align:left;
  }
  .stat-tile .num{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.6rem; color:var(--navy); line-height:1; }
  .stat-tile .lbl{ color:var(--ink-dim); font-size:.78rem; margin-top:.3rem; }
  .stat-tile.interactive{ cursor:pointer; animation:pulseGlow 3.2s ease-in-out infinite; }
  @keyframes pulseGlow{
    0%,100%{ box-shadow:0 10px 26px rgba(14,23,48,.14), 0 0 0 0 rgba(52,82,224,0); }
    50%{ box-shadow:0 10px 26px rgba(14,23,48,.14), 0 0 0 6px rgba(52,82,224,.10); }
  }
  .stat-tile .chev{ display:inline-block; transition:transform .2s ease; color:var(--accent); }
  .stat-tile[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .teams-popover{
    position:absolute; top:calc(100% + 8px); left:0; background:var(--surface); border:1px solid var(--line);
    border-radius:10px; box-shadow:0 16px 34px rgba(14,23,48,.2); padding:.6rem; display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr)); gap:.3rem; min-width:260px; z-index:5;
    opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  }
  .teams-popover.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .teams-popover .t-chip{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; padding:.28rem .4rem; border-radius:6px; color:var(--ink); font-weight:600; }
  .teams-popover .t-chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; }

  /* ---------- page head / nav ---------- */
  .page-head{ max-width:1180px; margin:0 auto; padding:1.4rem 1.5rem 0; }
  nav.section-tabs{ position:relative; display:flex; gap:1.6rem; border-bottom:1px solid var(--line); }
  nav.section-tabs button{
    background:none; border:none; color:var(--ink-dim); font-size:1rem; font-weight:600;
    padding:.85rem .1rem 1rem; cursor:pointer; transition:color .15s ease;
  }
  nav.section-tabs button:hover{color:var(--ink);}
  nav.section-tabs button.active{ color:var(--ink); }
  .tab-indicator{ position:absolute; bottom:-1px; height:3px; background:var(--accent); border-radius:2px; transition:left .25s ease, width .25s ease; }

  main{ max-width:1180px; margin:0 auto; padding:1.6rem 1.5rem 5rem; position:relative; z-index:1; }
  .view{display:none; animation:rise .3s ease;}
  .view.active{display:block;}
  @keyframes rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- badges ---------- */
  .badge{
    width:32px; height:32px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:.72rem; color:#fff;
    box-shadow:0 2px 6px rgba(14,23,48,.18);
  }
  .th-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.4rem; }

  /* ---------- year strip ---------- */
  .year-strip{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
  .year-strip button{
    font-family:'IBM Plex Mono', monospace; background:var(--surface); border:1px solid var(--line);
    color:var(--ink-dim); padding:.45rem .9rem; border-radius:8px; cursor:pointer; font-size:.9rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .year-strip button:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(14,23,48,.08); }
  .year-strip button:active{ transform:translateY(0) scale(.96); }
  .year-strip button.active{ color:#fff; background:var(--navy); border-color:var(--navy); font-weight:600; }
  .year-strip button[data-empty="1"]{opacity:.55;}

  .section-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
  .section-heading h2{ font-family:'Space Grotesk', sans-serif; font-size:1.4rem; margin:0; color:var(--navy); }
  .section-heading p{ color:var(--ink-dim); font-size:.9rem; margin:0; }
  .heading-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

  .btn-outline{
    background:var(--surface); border:1.5px solid var(--line); color:var(--ink);
    padding:.5rem 1rem; border-radius:9px; font-weight:600; font-size:.86rem; cursor:pointer;
    display:inline-flex; align-items:center; gap:.45rem; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .btn-outline:hover{ border-color:var(--accent); box-shadow:0 4px 12px rgba(14,23,48,.08); transform:translateY(-1px); }
  .btn-outline:active{ transform:translateY(0) scale(.97); }
  .btn-outline .ic{ display:inline-block; animation:footballRoll 2.6s ease-in-out infinite; }
  @keyframes footballRoll{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-18deg); } 75%{ transform:rotate(18deg); } }

  /* ---------- pick tracker grid ---------- */
  .tracker-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 1px 3px rgba(14,23,48,.05); }
  table.tracker{ border-collapse:collapse; width:100%; min-width:1080px; }
  table.tracker th, table.tracker td{ padding:.6rem .65rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
  table.tracker thead th{
    position:sticky; top:0; background:var(--surface-2); font-size:.78rem; font-weight:700;
    color:var(--ink-dim); z-index:2; border-bottom:1px solid var(--line); cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  table.tracker thead th:hover{ color:var(--ink); }
  table.tracker thead th:first-child{left:0; z-index:3; cursor:default;}
  table.tracker thead th:first-child:hover{ color:var(--ink-dim); }
  table.tracker td:first-child, table.tracker th:first-child{
    position:sticky; left:0; background:var(--surface-2);
    font-family:'IBM Plex Mono', monospace; font-size:.85rem; color:var(--ink); white-space:nowrap;
  }
  table.tracker tbody tr:last-child td{border-bottom:none;}
  table.tracker td.col-hl, table.tracker th.col-hl{ background:var(--accent-soft); }
  table.tracker td.col-dim, table.tracker th.col-dim{ opacity:.32; }
  .tracker-hint{ font-size:.78rem; color:var(--ink-dim); margin:.5rem 0 0; }

  .pip-stack{display:flex; flex-direction:column; gap:.3rem;}
  .pip{ display:inline-block; padding:.22rem .55rem; border-radius:999px; font-size:.76rem; font-weight:600; white-space:nowrap; transition:transform .15s ease; }
  .pip.own{opacity:.82;}
  .pip.acquired{box-shadow: inset 0 0 0 1.5px rgba(14,23,48,.35);}
  .empty-cell{color:var(--line); font-size:.8rem;}
  .legend{ margin-top:1rem; font-size:.82rem; color:var(--ink-dim); }
  .legend .pip{margin-right:.3rem;}

  /* ---------- rosters ---------- */
  .roster-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.1rem; }
  .roster-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:0 1px 3px rgba(14,23,48,.05); transition:transform .18s ease, box-shadow .18s ease;
  }
  .roster-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(14,23,48,.12); }
  .roster-card .bar{height:5px;}
  .roster-card .head{ padding:1rem 1.1rem .9rem; border-bottom:1px solid var(--line); display:flex; gap:.7rem; align-items:center; }
  .roster-card .head-text h3{ margin:0 0 .1rem; font-size:1rem; font-weight:700; }
  .roster-card .head-text .owner{ color:var(--ink-dim); font-size:.8rem; }
  .roster-card table{ width:100%; border-collapse:collapse; font-size:.85rem; }
  .roster-card td{ padding:.45rem 1.1rem; border-bottom:1px solid var(--line); }
  .roster-card tr:last-child td{border-bottom:none;}
  .slot{ color:var(--ink-dim); font-family:'IBM Plex Mono', monospace; font-size:.72rem; width:3.4rem; }
  .player{font-weight:600;}
  .nfl{color:var(--ink-dim); font-size:.78rem;}
  .roster-card details{border-top:1px solid var(--line);}
  .roster-card summary{ padding:.6rem 1.1rem; cursor:pointer; font-size:.82rem; color:var(--ink-dim); list-style:none; }
  .roster-card summary::-webkit-details-marker{display:none;}
  .roster-card summary:before{content:"+ "; color:var(--accent); font-weight:700;}
  .roster-card details[open] summary:before{content:"\2013 ";}
  .roster-card details table{border-top:1px solid var(--line);}
  .sync-note{color:var(--ink-dim); font-size:.85rem;}

  /* ---------- trade log ---------- */
  .trade-year-block{margin-bottom:1.8rem;}
  .trade-year-block h3{ font-family:'IBM Plex Mono', monospace; font-weight:500; color:var(--navy); font-size:1rem; margin:0 0 .6rem; }
  .timeline{ position:relative; padding-left:1.5rem; }
  .timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); }
  .trade-row{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; font-size:.92rem; }
  .trade-row::before{ content:""; position:absolute; left:-1.5rem; top:1.05rem; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .trade-row:last-child{border-bottom:none;}
  .trade-round{ font-family:'IBM Plex Mono', monospace; color:var(--ink-dim); font-size:.78rem; width:4.5rem; }
  .arrow{color:var(--ink-dim);}
  .empty-note{ color:var(--ink-dim); font-size:.9rem; padding:1.2rem 0; }
  .admin-note{ margin-top:2rem; padding:1rem 1.1rem; border:1px dashed var(--line); border-radius:10px; color:var(--ink-dim); font-size:.85rem; }

  footer{ max-width:1180px; margin:0 auto; padding:0 1.5rem 3rem; color:var(--ink-dim); font-size:.8rem; }

  /* ---------- modals (shared) ---------- */
  .modal-overlay{ position:fixed; inset:0; background:rgba(14,23,48,.55); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50; }
  .modal-overlay[hidden]{display:none;}
  .modal{ background:var(--surface); border-radius:16px; padding:1.9rem; width:100%; max-width:400px; position:relative; box-shadow:0 24px 60px rgba(14,23,48,.35); animation:pop .2s ease; }
  @keyframes pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
  .modal h3{ font-family:'Space Grotesk', sans-serif; margin:0 0 .4rem; font-size:1.2rem; color:var(--navy); }
  .modal-sub{ color:var(--ink-dim); font-size:.88rem; margin:0 0 1.2rem; line-height:1.45; }
  .modal-close{ position:absolute; top:.9rem; right:.9rem; background:none; border:none; font-size:1.4rem; color:var(--ink-dim); cursor:pointer; line-height:1; }
  .field-label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-dim); margin:0 0 .35rem; }
  .field-input{
    width:100%; padding:.65rem .8rem; border:1.5px solid var(--line); border-radius:9px;
    font-family:'Inter', sans-serif; font-size:.92rem; color:var(--ink); margin-bottom:1rem; background:#fff;
  }
  .field-input:focus{ outline:none; border-color:var(--accent); }
  .code-input{ letter-spacing:.5em; font-family:'IBM Plex Mono', monospace; font-size:1.15rem; text-align:center; }
  .btn-primary{
    width:100%; padding:.75rem; background:var(--accent); color:#fff; border:none; border-radius:9px;
    font-weight:600; font-size:.94rem; cursor:pointer; transition:background .15s ease, transform .15s ease;
  }
  .btn-primary:hover{ background:var(--navy-2); }
  .btn-primary:active{ transform:scale(.98); }
  .btn-text{ width:100%; margin-top:.6rem; background:none; border:none; color:var(--accent); font-size:.85rem; cursor:pointer; font-weight:600; padding:.4rem; }
  .demo-note{ background:var(--accent-soft); color:var(--navy); font-size:.8rem; padding:.65rem .75rem; border-radius:9px; margin:-0.4rem 0 1rem; line-height:1.4; }

  /* ---------- toast ---------- */
  .toast{
    position:fixed; bottom:1.4rem; right:1.4rem; background:var(--navy); color:#fff;
    padding:.8rem 1.1rem; border-radius:10px; font-size:.85rem; box-shadow:0 10px 24px rgba(14,23,48,.3);
    transform:translateY(12px); opacity:0; transition:transform .25s ease, opacity .25s ease; z-index:60; max-width:300px;
  }
  .toast.show{ transform:translateY(0); opacity:1; }