*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05070f; --bg2:#0b1028; --ink:#eef2ff; --ink-dim:#8aa0c8;
  --accent:#d4a84b; --accent2:#f4d06f; --navy:#013369; --red:#d50a0a;
  --card:rgba(255,255,255,0.04); --border:rgba(255,255,255,0.08);
}
html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;min-height:100%;overflow-x:hidden}
body{position:relative}

/* animated background */
.bg-gradient{position:fixed;inset:0;background:
  radial-gradient(1200px 800px at 10% -10%, rgba(213,10,10,0.25), transparent 60%),
  radial-gradient(1000px 700px at 90% 10%, rgba(1,51,105,0.55), transparent 60%),
  radial-gradient(900px 600px at 50% 120%, rgba(212,168,75,0.18), transparent 60%),
  linear-gradient(180deg,#05070f 0%,#080c1f 100%);
  z-index:-2;animation:bgShift 18s ease-in-out infinite alternate}
@keyframes bgShift{0%{filter:hue-rotate(0) saturate(1)}100%{filter:hue-rotate(15deg) saturate(1.15)}}
.bg-stars{position:fixed;inset:0;z-index:-1;background-image:
  radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent 50%),
  radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.45), transparent 50%),
  radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.35), transparent 50%),
  radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.5), transparent 50%),
  radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.4), transparent 50%);
  background-size:1200px 800px;animation:drift 60s linear infinite;opacity:.6}
@keyframes drift{from{background-position:0 0}to{background-position:1200px 800px}}

/* hero */
.hero{max-width:1400px;margin:0 auto;padding:24px 20px 8px;text-align:center;position:relative}
.hero-banner{display:inline-block;position:relative}
.hero-banner img{max-width:min(440px,70vw);width:100%;height:auto;filter:drop-shadow(0 16px 40px rgba(212,168,75,0.35));animation:floatIn 900ms cubic-bezier(.2,.7,.2,1) both}
@keyframes floatIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
.hero-meta{display:flex;justify-content:center;align-items:center;gap:14px;margin:10px 0 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;background:rgba(213,10,10,0.18);border:1px solid rgba(213,10,10,0.4);padding:4px 10px;border-radius:999px}
.live-dot span{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(213,10,10,.7);animation:live 1.4s infinite}
.live-dot.countdown{background:rgba(30,30,60,.5);border-color:rgba(212,168,75,.4);font-size:12px;letter-spacing:.04em}
.live-dot.countdown span{background:var(--accent2);animation:none;box-shadow:none}
.wall-clock{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:#fff;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.04);border:1px solid var(--border);padding:4px 12px;border-radius:999px;font-size:13px}
.wall-clock .sec{color:var(--accent2)}

.sound-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--ink-dim);padding:5px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sound-btn:hover,.sound-btn:focus-visible{color:#fff;border-color:var(--accent);outline:none}
.sound-btn .sound-on,.sound-btn .sound-off{font-size:15px;line-height:1}
.sound-btn[aria-pressed="true"]{color:#fff;border-color:var(--accent);background:rgba(212,168,75,.15)}
.sound-btn[aria-pressed="true"] .sound-off,.sound-btn[aria-pressed="false"] .sound-on{display:none}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(213,10,10,.7)}70%{box-shadow:0 0 0 10px rgba(213,10,10,0)}100%{box-shadow:0 0 0 0 rgba(213,10,10,0)}}

/* on the clock */
.onclock-wrap{max-width:1400px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr;gap:16px}
.onclock-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(1,51,105,0.75),rgba(10,14,40,0.8));border:1px solid rgba(212,168,75,0.4);border-radius:20px;padding:26px 28px;box-shadow:0 30px 80px rgba(0,0,0,0.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.onclock-card::before{content:"";position:absolute;inset:-2px;background:linear-gradient(120deg,transparent 30%,rgba(212,168,75,.35) 50%,transparent 70%);background-size:200% 100%;animation:sheen 3.5s linear infinite;pointer-events:none;border-radius:22px}
@keyframes sheen{from{background-position:200% 0}to{background-position:-200% 0}}
.onclock-label{font-size:12px;letter-spacing:.25em;color:var(--accent2);text-transform:uppercase;font-weight:700;margin-bottom:12px}
.onclock-body{display:flex;align-items:center;gap:24px}
.onclock-logo{width:96px;height:96px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);border-radius:16px;border:1px solid var(--border);animation:logoIn 700ms ease}
.onclock-logo img{max-width:80px;max-height:80px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
@keyframes logoIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.onclock-text{flex:1;min-width:0}
.onclock-team{font-size:clamp(28px,5vw,54px);font-weight:800;letter-spacing:.02em;line-height:1;text-transform:uppercase;background:linear-gradient(90deg,#fff,#f4d06f);-webkit-background-clip:text;background-clip:text;color:transparent}
.onclock-sub{margin-top:8px;color:var(--ink-dim);font-size:14px;letter-spacing:.15em;text-transform:uppercase;display:flex;gap:10px;flex-wrap:wrap}
.onclock-sub b{color:#fff;font-weight:700}
.onclock-sub .dot{opacity:.4}
.onclock-timer{position:relative;width:92px;height:92px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.onclock-timer.show{opacity:1}
.check-svg{width:92px;height:92px;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.4,.5,1)}
.onclock-timer.show .check-svg{transform:scale(1);filter:drop-shadow(0 0 20px rgba(46,204,113,.8))}
.check-svg .ring{fill:rgba(46,204,113,.18);stroke:#2ecc71;stroke-width:3}
.check-svg .tick{fill:none;stroke:#2ecc71;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .45s .25s ease-out}
.onclock-timer.show .check-svg .tick{stroke-dashoffset:0}

/* card body swipe */
.onclock-body{transition:none}
.onclock-body.swipe-out{animation:swipeOutR .45s cubic-bezier(.5,0,.75,0) forwards}
.onclock-body.swipe-in{animation:swipeInL .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes swipeOutR{to{transform:translateX(110%);opacity:0}}
@keyframes swipeInL{from{transform:translateX(-110%);opacity:0}to{transform:none;opacity:1}}

/* next up */
.nextup{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:16px;overflow-x:auto}
.nextup-label{color:var(--accent2);font-size:11px;letter-spacing:.25em;font-weight:700;flex-shrink:0}
.nextup-list{display:flex;gap:10px;align-items:center}
.nextup-item{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);padding:6px 12px;border-radius:999px;white-space:nowrap;font-size:13px;animation:slideIn .5s ease}
.nextup-item img{width:22px;height:22px;object-fit:contain}
.nextup-item .pk{color:var(--ink-dim);font-size:11px;margin-left:4px}
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* tabs */
.tabs{max-width:1400px;margin:32px auto 16px;padding:0 20px;display:flex;gap:8px;border-bottom:1px solid var(--border)}
.tab{background:none;border:none;color:var(--ink-dim);padding:12px 18px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab:hover{color:#fff}
.tab.active{color:#fff;border-bottom-color:var(--accent)}

main{max-width:1400px;margin:0 auto;padding:0 20px 40px}
.view{display:none;animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* round tabs */
.round-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}
.round-tab{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--ink-dim);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:12px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;transition:all .2s}
.round-tab:hover{color:#fff;border-color:var(--accent)}
.round-tab.active{background:var(--accent);color:#111;border-color:var(--accent)}

/* --- DRAFT BOARD --- */
.board{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(1,51,105,0.35),rgba(5,7,15,0.6))}
.board-head{background:linear-gradient(90deg,var(--navy),rgba(1,51,105,0.6));padding:14px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.board-head h2{font-size:18px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#fff}
.board-head .count{color:var(--ink-dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.picks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0}
.pick-card{position:relative;background:rgba(255,255,255,0.015);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;display:flex;align-items:stretch;min-height:86px;overflow:hidden;transition:background .25s;animation:cardIn .35s ease both}
.pick-card:hover{background:rgba(255,255,255,0.05)}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pick-slot{width:66px;flex-shrink:0;background:linear-gradient(180deg,#0a1530,#05070f);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px;gap:2px}
.pick-overall{font-size:26px;font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pick-round{font-size:9px;color:var(--accent2);font-weight:700;letter-spacing:.15em}
.pick-logo{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:8px;align-self:center}
.pick-logo img{max-width:52px;max-height:52px}
.pick-headshot{position:relative;padding:0;overflow:visible}
.pick-headshot>img:first-child{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.pick-team-badge{position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);padding:2px;object-fit:contain}
.pick-info{flex:1;min-width:0;padding:12px 14px 12px 4px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.pick-team{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.pick-player{font-size:13px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-player b{color:#fff;font-weight:700}
.pick-meta{font-size:11px;color:var(--ink-dim);letter-spacing:.05em}
.pick-card.selected .pick-slot{background:linear-gradient(180deg,#0d2a1a,#05070f);box-shadow:inset 3px 0 0 #2ecc71}
.pick-card.selected{background:rgba(46,204,113,0.04)}
.pick-card.onclock{background:linear-gradient(90deg,rgba(212,168,75,0.18),rgba(255,255,255,0.02));animation:onClockPulse 2.2s ease-in-out infinite,cardIn .4s ease both}
.pick-card.onclock .pick-slot{background:linear-gradient(180deg,#4a3410,#05070f);box-shadow:inset 3px 0 0 var(--accent)}
.pick-card.onclock .pick-overall{color:var(--accent2)}
@keyframes onClockPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(212,168,75,0.4)}50%{box-shadow:inset 0 0 40px 0 rgba(212,168,75,0.18)}}
.pick-card.unannounced{background:rgba(52,152,219,0.06)}
.pick-card.unannounced .pick-slot{box-shadow:inset 3px 0 0 #3498db}
.pick-card.unannounced .pick-player{color:#5dade2;font-style:italic}
.badge{display:inline-block;font-size:9px;letter-spacing:.15em;padding:2px 7px;border-radius:999px;font-weight:700;text-transform:uppercase;margin-left:6px;vertical-align:middle}
.badge.in{background:rgba(52,152,219,0.2);color:#5dade2;border:1px solid rgba(52,152,219,0.4)}
.badge.clock{background:rgba(212,168,75,0.25);color:var(--accent2);border:1px solid var(--accent)}

/* recent table */
.recent-wrap h2{font-size:22px;margin-bottom:16px;letter-spacing:.05em}
.recent-table{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.recent-row{display:grid;grid-template-columns:70px 1fr 60px 1fr 70px;gap:12px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--border);font-size:14px;animation:slideIn .4s ease}
.recent-row:last-child{border:0}
.recent-row.head{background:var(--navy);color:#fff;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.recent-row.top{background:linear-gradient(90deg,rgba(212,168,75,0.18),transparent);font-weight:600}
.recent-row img{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:8px}
.recent-row .player b{color:#fff}
.recent-row .player{color:var(--ink-dim)}

/* filter bar */
.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.filter-input,.filter-select{background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;padding:9px 12px;border-radius:10px;font:inherit;font-size:13px;outline:none;-webkit-appearance:none}
.filter-input{flex:1;min-width:220px}
.filter-input:focus,.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,168,75,.15)}
.filter-input::placeholder{color:var(--ink-dim)}
.filter-count{color:var(--ink-dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.filter-select{cursor:pointer;padding-right:28px}

/* prospects view */

/* The outer #prospectsView container must be block, not a grid, so JS-rendered
   inner .prospects-wrap grids fill the full width of the view. */
#prospectsView{display:block}

.prospects-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:16px;
  width:100%;
}

@media (max-width: 640px) {
  .prospects-wrap {
    grid-template-columns: 1fr;
    gap:12px;
  }
  /* Stack prospects filter bar: search full-width, selects side-by-side */
  #view-prospects .filter-bar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #view-prospects .filter-bar .filter-input {
    grid-column:1 / -1;
    min-width:0;
  }
  #view-prospects .filter-bar .filter-count {
    grid-column:1 / -1;
    text-align:center;
  }
  #view-prospects .filter-bar .filter-select {
    font-size:12px;
    padding:8px 6px;
  }
}

.prospect-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:cardIn .4s ease both;
  transition:border-color .2s,transform .2s,background .2s;
  position:relative;
}
.prospect-card:hover{border-color:rgba(212,168,75,.4);transform:translateY(-1px);background:rgba(255,255,255,.055)}
.prospect-card.drafted{opacity:.72;background:rgba(46,204,113,.04);border-color:rgba(46,204,113,.22)}
.prospect-card.drafted .prospect-name .n{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);text-decoration-thickness:1px}
.prospect-card .drafted-badge{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#5ee0a0,#38a169);color:#0b2015;box-shadow:0 1px 6px rgba(46,204,113,.3);display:flex;align-items:center;gap:5px}
.prospect-card .drafted-badge img{width:14px;height:14px;object-fit:contain;filter:drop-shadow(0 0 2px rgba(0,0,0,.4))}

/* Position filter chips — quick per-position filter above prospect grid */
.pos-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pos-chip{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--ink-dim);padding:6px 11px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:all .15s}
.pos-chip:hover{color:#fff;border-color:var(--accent)}
.pos-chip.active{background:var(--accent);color:#111;border-color:var(--accent)}
.pos-chip .c{font-weight:500;opacity:.75;margin-left:4px;font-size:11px}

/* Hide-drafted toggle */
.filter-toggle{display:flex;align-items:center;gap:7px;color:var(--ink-dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer;user-select:none;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);transition:all .15s}
.filter-toggle:hover{color:#fff;border-color:var(--accent)}
.filter-toggle input{accent-color:var(--accent);cursor:pointer}
.filter-toggle.on{color:var(--accent2);border-color:rgba(212,168,75,.45);background:rgba(212,168,75,.08)}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 8px 0;
  width: 100%;
  flex-wrap:wrap;
}
.prospect-head{display:flex;gap:12px;align-items:center}
.prospect-photo{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1a2344,#0a0d1a);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);position:relative}
.prospect-photo img{width:100%;height:100%;object-fit:cover}
.prospect-photo .initials{font-weight:800;color:var(--accent2);font-size:16px;letter-spacing:.05em;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* Rank delta chip */
.rank-delta{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:4px;margin-left:5px;vertical-align:middle}
.rank-delta.up{background:rgba(46,204,113,.18);color:#5ee0a0}
.rank-delta.dn{background:rgba(231,76,60,.18);color:#ff9c9c}
.prospect-name{flex:1;min-width:0}
.prospect-name .n{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prospect-name .meta{color:var(--ink-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prospect-rank{flex-shrink:0;background:linear-gradient(135deg,var(--accent),#d49a2a);color:#111;font-weight:800;padding:6px 10px;border-radius:8px;font-size:12px;letter-spacing:.05em}
.prospect-rank.none{background:rgba(255,255,255,.04);color:var(--ink-dim);border:1px solid var(--border);font-weight:600}
.prospect-physicals{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim)}
.prospect-physicals b{color:#fff;font-weight:700}
.prospect-analysis{font-size:13px;color:var(--ink);line-height:1.5;max-height:4.5em;overflow:hidden;position:relative;transition:max-height .3s}
.prospect-analysis.expanded{max-height:none}
.prospect-analysis::after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;height:1.5em;background:linear-gradient(180deg,transparent,var(--card));pointer-events:none}
.prospect-analysis.expanded::after{display:none}
.prospect-sources{display:flex;gap:4px;flex-wrap:wrap}
.prospect-sources .src{font-size:9px;letter-spacing:.12em;padding:2px 6px;border-radius:4px;text-transform:uppercase;font-weight:700}
.prospect-sources .src.nfl{background:rgba(1,51,105,.5);color:#8ab4ff;border:1px solid rgba(1,51,105,.8)}
.prospect-sources .src.pff{background:rgba(212,168,75,.2);color:var(--accent2);border:1px solid rgba(212,168,75,.4)}
.prospect-sources .src.sr{background:rgba(46,204,113,.2);color:#5ee0a0;border:1px solid rgba(46,204,113,.4)}
.prospect-sources .src.ngs{background:rgba(155,89,182,.2);color:#d69ae0;border:1px solid rgba(155,89,182,.4)}
.prospect-sources .src.sis{background:rgba(255,152,0,.2);color:#ffb74d;border:1px solid rgba(255,152,0,.4)}
.ngs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:6px}
.ngs-grid>div{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.ngs-grid>div span{display:block;font-size:10px;color:var(--ink-dim);letter-spacing:.05em;text-transform:uppercase}
.ngs-grid>div b{font-size:14px;color:#fff;font-weight:700}
.prospect-more{border-top:1px solid var(--border);margin-top:4px;padding-top:10px;display:none}
.prospect-card.expanded .prospect-more{display:block}
.prospect-more section{margin-bottom:12px}
.prospect-more h4{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px;font-weight:700}
.prospect-more .html-body{font-size:13px;color:var(--ink);line-height:1.55}
.prospect-more .html-body ul{padding-left:18px;color:var(--ink-dim)}
.prospect-more .html-body li{margin:3px 0}
.prospect-more .html-body b,.prospect-more .html-body strong{color:#fff}
.prospect-more blockquote{font-style:italic;color:var(--ink-dim);border-left:3px solid var(--accent);padding-left:12px;margin:6px 0}
.prospect-expand-btn{background:none;border:1px solid var(--border);color:var(--ink-dim);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;align-self:flex-start;touch-action:manipulation}
.prospect-expand-btn:hover{color:#fff;border-color:var(--accent)}

/* Prospect full-profile modal */
.prospect-modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.prospect-modal-overlay.open{display:flex}
.prospect-modal{background:var(--card);border:1px solid rgba(212,168,75,.35);border-radius:18px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;position:relative;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:modalIn .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:none}}
.prospect-modal-close{position:sticky;top:0;float:right;margin:-8px -8px 8px 8px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--ink-dim);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;z-index:1;flex-shrink:0}
.prospect-modal-close:hover{background:rgba(255,255,255,.12);color:#fff}
.prospect-modal-header{display:flex;gap:14px;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.prospect-modal-photo{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#1a2344,#0a0d1a);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px solid rgba(212,168,75,.3)}
.prospect-modal-photo img{width:100%;height:100%;object-fit:cover}
.prospect-modal-photo .initials{font-weight:800;color:var(--accent2);font-size:20px;letter-spacing:.05em}
.prospect-modal-info{flex:1;min-width:0}
.prospect-modal-info .n{font-size:20px;font-weight:800;color:#fff}
.prospect-modal-info .meta{color:var(--ink-dim);font-size:13px;margin-top:2px}
.prospect-modal-info .physicals{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin-top:6px}
.prospect-modal-info .physicals b{color:#fff}
.prospect-modal-body section{margin-bottom:16px}
.prospect-modal-body h4{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent2);margin-bottom:7px;font-weight:700}
.prospect-modal-body .html-body{font-size:13px;color:var(--ink);line-height:1.55}
.prospect-modal-body .html-body ul{padding-left:18px;color:var(--ink-dim)}
.prospect-modal-body .html-body li{margin:3px 0}
.prospect-modal-body .html-body b,.prospect-modal-body .html-body strong{color:#fff}
.prospect-modal-body blockquote{font-style:italic;color:var(--ink-dim);border-left:3px solid var(--accent);padding-left:12px;margin:6px 0}
.prospect-modal-grades{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.grade-chip{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:8px 12px;text-align:center;min-width:80px}
.grade-chip .gv{font-size:18px;font-weight:800;color:#fff}
.grade-chip .gl{font-size:9px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.grade-legend{font-size:11px;color:var(--ink-dim);line-height:1.6;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;margin-bottom:12px}
.grade-legend b{color:var(--accent2)}
@media(max-width:600px){.prospect-modal{border-radius:14px;padding:16px}.prospect-modal-info .n{font-size:16px}}

/* prospect group headings */
.group-section{margin-bottom:26px}
.group-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.group-head h3{font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#fff}
.group-head .cnt{color:var(--ink-dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.group-head .avg{color:var(--accent2);font-size:12px;letter-spacing:.08em;margin-left:auto}

/* Apple-Music / iOS Cover-Flow horizontal card rail */
.card-rail-wrap{position:relative;overflow:visible}
.card-rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 14px;
  margin:0 -4px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.card-rail::-webkit-scrollbar{height:8px}
.card-rail::-webkit-scrollbar-track{background:transparent}
.card-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.card-rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.card-rail > *{flex:0 0 auto;scroll-snap-align:center}
.card-rail .prospect-card{width:300px;min-width:300px;max-width:300px}
.card-rail .comp-item{width:280px;min-width:280px}
.card-rail .story-row{width:340px;min-width:340px;grid-template-columns:40px 1fr auto}
.card-rail .intel-card{width:320px;min-width:320px;background:rgba(255,152,0,.04);border:1px solid rgba(255,152,0,.18);border-radius:12px;padding:12px 14px;box-sizing:border-box}

/* True Cover-Flow: JS sets the inline transform on each card per-scroll.
   The flat centered card stands tall; neighbors tilt away in 3D. */
.card-rail.coverflow{
  perspective:1400px;
  perspective-origin:50% 55%;
  padding:32px 50% 40px; /* enormous side padding lets first & last center */
  gap:22px;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
}
.card-rail.coverflow > *{
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:box-shadow .2s, border-color .2s, filter .2s;
  will-change:transform;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.7);
  scroll-snap-align:center;
}
.card-rail.coverflow .prospect-card{box-shadow:0 24px 60px -28px rgba(0,0,0,.85)}
.card-rail.coverflow > .is-center{
  z-index:10;
  box-shadow:0 34px 80px -20px rgba(212,168,75,.45), 0 14px 36px -14px rgba(0,0,0,.9);
  border-color:rgba(212,168,75,.6) !important;
}
.card-rail.coverflow > :not(.is-center){
  filter:saturate(.85) brightness(.9);
}

/* Fade hints at the edges to signal "scroll me" */
.card-rail-wrap::before,
.card-rail-wrap::after{
  content:"";position:absolute;top:0;bottom:14px;width:40px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s;
}
.card-rail-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.card-rail-wrap::after {right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.card-rail-wrap.has-overflow::after{opacity:1}
.card-rail-wrap.scrolled::before{opacity:1}

/* Scroll-arrow buttons */
.rail-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(10,13,26,.85);border:1px solid var(--border);color:#fff;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;transition:background .15s,border-color .15s,transform .15s;
  backdrop-filter:blur(6px);
}
.rail-arrow:hover{background:var(--accent);color:#111;border-color:var(--accent);transform:translateY(-50%) scale(1.05)}
.rail-arrow.left{left:4px}
.rail-arrow.right{right:4px}
.card-rail-wrap.has-overflow .rail-arrow{display:flex}
@media (hover:none){.rail-arrow{display:none !important}}
@media (max-width:640px){.rail-arrow{display:none !important}.card-rail-wrap::before,.card-rail-wrap::after{width:22px}
  .card-rail .prospect-card{width:260px;min-width:260px;max-width:260px}
  .card-rail .comp-item{width:240px;min-width:240px}
  .card-rail .story-row{width:280px;min-width:280px}
  .card-rail .intel-card{width:270px;min-width:270px}
  .card-rail.coverflow{padding:24px 50% 30px;gap:14px}
}

/* analytics — tiered grid. Cards come in 3 widths: default (1 col), .wide
   (span 2), .xwide (span all). Rows stretch to the tallest card (no masonry
   gaps, no runaway width). `grid-auto-flow:dense` packs smaller items into
   column-holes left by wide/xwide neighbors. */
#view-analytics.active{display:block}
.analytics-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%, 380px),1fr));
  grid-auto-flow:dense;
  gap:16px;
  padding:4px 0 28px;
  align-items:stretch;       /* same-row cards match heights → no black gap */
}
.analytics-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;animation:cardIn .4s ease both;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.analytics-card.wide {grid-column:span 2}
.analytics-card.xwide{grid-column:1/-1}
.analytics-card h3{font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--accent2);margin-bottom:4px}
.analytics-card .subtitle{color:var(--ink-dim);font-size:12px;margin-bottom:14px}
.analytics-card .empty-note{color:var(--ink-dim);font-size:12px;padding:10px 0;font-style:italic;border-top:1px dashed var(--border);margin-top:8px}
/* analytics tables — horizontally scrollable on narrow screens, with fade hint */
.analytics-card .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;margin:0 -4px;padding:0 4px}
.analytics-card .table-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:18px;background:linear-gradient(90deg,transparent,rgba(10,13,26,.75));pointer-events:none;opacity:0;transition:opacity .2s}
@media (max-width:760px){.analytics-card .table-scroll::after{opacity:1}}

/* Scout/Fan/GM audience badges */
.audience-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:middle}
.audience-badge.scouts{background:rgba(155,89,182,.18);color:#d69ae0;border:1px solid rgba(155,89,182,.35)}
.audience-badge.fans  {background:rgba(52,152,219,.18);color:#7cbeff;border:1px solid rgba(52,152,219,.35)}
.audience-badge.gms   {background:rgba(212,168,75,.18);color:var(--accent2);border:1px solid rgba(212,168,75,.35)}

/* NFL comparison card */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.comp-item{display:flex;gap:10px;align-items:center;padding:10px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:10px}
.comp-item .photo{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1a2344,#0a0d1a);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--accent2);font-weight:800;font-size:12px}
.comp-item .photo img{width:100%;height:100%;object-fit:cover}
.comp-item .body{min-width:0;flex:1}
.comp-item .nm{font-weight:700;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-item .sub{color:var(--ink-dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-item .nfl{color:var(--accent2);font-size:12px;margin-top:3px;font-weight:600}

/* Steal narrative card */
.story-list{display:flex;flex-direction:column;gap:10px}
.story-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:10px;transition:background .15s}
.story-row:hover{background:rgba(255,255,255,.05)}
.story-row .rank{font-size:20px;font-weight:900;color:var(--accent2);text-align:center;font-variant-numeric:tabular-nums}
.story-row .body{min-width:0}
.story-row .nm{font-weight:800;color:#fff;font-size:14px}
.story-row .meta{color:var(--ink-dim);font-size:11px;margin-top:2px}
.story-row .gv{text-align:right;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.story-row .gv small{display:block;font-size:10px;color:var(--ink-dim);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.analytics-table{width:100%;border-collapse:collapse;font-size:13px}
.analytics-table th,.analytics-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
.analytics-table th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;white-space:nowrap}
.analytics-table td{color:var(--ink)}
.analytics-table td b{color:#fff;font-weight:700}
.analytics-table tbody tr:hover{background:rgba(255,255,255,.03)}
.analytics-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent2);font-weight:700;white-space:nowrap}
.analytics-table td.rank{color:var(--accent2);font-weight:800;width:30px}
.analytics-table .bar{height:6px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden;margin-top:3px;min-width:80px}
.analytics-table .bar>div{height:100%;background:linear-gradient(90deg,var(--accent),#f4d06f);border-radius:999px}
.chip{display:inline-block;font-size:10px;padding:2px 6px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-left:4px}
.chip.up{background:rgba(46,204,113,.2);color:#5ee0a0}
.chip.dn{background:rgba(231,76,60,.2);color:#ff9c9c}
.chip.neu{background:rgba(255,255,255,.05);color:var(--ink-dim)}
.chip.sel{background:rgba(212,168,75,.18);color:var(--accent2)}
.kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:14px}
.kpi .box{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.kpi .box .n{font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.kpi .box .l{font-size:10px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase}

/* by-team view */
.teams-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:0;overflow:hidden;animation:cardIn .4s ease both}
.team-card header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(90deg,var(--navy),transparent);border-bottom:1px solid var(--border)}
.team-card header img{width:36px;height:36px;object-fit:contain}
.team-card header .tname{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.team-card header .tsub{color:var(--ink-dim);font-size:11px;letter-spacing:.1em;margin-left:auto;text-transform:uppercase}
.team-picks{display:flex;flex-direction:column}
.team-pick{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px 14px;border-top:1px solid var(--border);font-size:13px;align-items:center}
.team-pick:first-child{border-top:none}
.team-pick .slot{color:var(--accent2);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:12px}
.team-pick .slot b{color:#fff;font-weight:800;font-size:15px;display:block}
.team-pick .who{min-width:0;overflow:hidden}
.team-pick .who .n{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-pick .who .meta{color:var(--ink-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-pick.selected{background:rgba(46,204,113,.05)}
.team-pick.onclock{background:linear-gradient(90deg,rgba(212,168,75,.15),transparent)}
.team-pick.unannounced{background:rgba(52,152,219,.06)}
.team-pick.unannounced .who .n{color:#5dade2;font-style:italic}
.team-pick.upcoming .who .n{color:var(--ink-dim);font-weight:500}
.team-trade-note{font-size:11px;color:var(--accent2);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* trades */
.trades-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.trade-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;animation:cardIn .4s ease both}
.trade-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:var(--ink-dim);letter-spacing:.15em;text-transform:uppercase}
.trade-head .tnum{color:var(--accent2);font-weight:700}
.trade-teams{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.trade-team{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;text-transform:uppercase}
.trade-team img{width:26px;height:26px;object-fit:contain}
.trade-arrow{color:var(--accent);font-size:18px}
.trade-section{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px;color:var(--ink-dim)}
.trade-section b{color:#fff;font-weight:600}
.trade-asset{margin:2px 0}

footer{text-align:center;padding:32px 20px 28px;letter-spacing:.05em;display:flex;flex-direction:column;gap:6px;align-items:center}
footer .made-by{color:#fff;font-size:14px;font-weight:600}
footer .made-by b{color:var(--accent2);font-weight:800;letter-spacing:.03em}
footer .heart{display:inline-block;color:#ff4b6e;margin:0 3px;animation:heartBeat 1.4s ease-in-out infinite;text-shadow:0 0 12px rgba(255,75,110,.6)}
@keyframes heartBeat{0%,100%{transform:scale(1)}20%{transform:scale(1.3)}40%{transform:scale(1)}60%{transform:scale(1.2)}}
footer .elves{color:var(--ink-dim);font-size:12px;font-style:italic;letter-spacing:.08em}

.pagination{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px 0;flex-wrap:wrap}
.page-btn{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--ink-dim);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s}
.page-btn:hover{color:#fff;border-color:var(--accent)}
.page-btn.active{background:var(--accent);color:#111;border-color:var(--accent)}
.page-ellipsis{color:var(--ink-dim);padding:0 4px}

@media (max-width:860px){
  .hero{padding:16px 14px 6px}
  .onclock-wrap{padding:0 14px}
  .onclock-card{padding:18px 18px}
  .onclock-body{flex-wrap:wrap;gap:14px}
  .onclock-logo{width:72px;height:72px}
  .onclock-logo img{max-width:58px;max-height:58px}
  .onclock-timer{display:none}
  .tabs{margin:20px auto 10px;padding:0 12px;overflow-x:auto;white-space:nowrap}
  .tab{padding:10px 12px;font-size:12px}
  main{padding:0 12px 32px}
  .picks-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
  .pick-card{padding:10px;gap:10px}
  .pick-logo{width:44px;height:44px}
  .pick-logo img{max-width:34px;max-height:34px}
  /* analytics: collapse to single column — wide/xwide no-op because grid is 1 col */
  .analytics-wrap{grid-template-columns:1fr}
  .analytics-card.wide,.analytics-card.xwide{grid-column:1/-1}
  .analytics-table{font-size:12px}
  .analytics-table th,.analytics-table td{padding:6px 8px}
  .kpi{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px}
  .kpi .box .n{font-size:18px}
  /* prospects: filter bar row on mid-width */
  #view-prospects .filter-bar{flex-wrap:wrap}
  #view-prospects .filter-bar .filter-input{flex:1 1 100%}
  #view-prospects .filter-bar .filter-select{flex:1 1 auto;min-width:0}
}
@media (max-width:560px){
  .picks-grid{grid-template-columns:1fr}
  .recent-row{grid-template-columns:60px 1fr 50px;font-size:12px;padding:10px 12px}
  .recent-row .col-college,.recent-row .col-club{display:none}
  .trades-wrap{grid-template-columns:1fr}
  .nextup{flex-direction:column;align-items:flex-start;gap:10px}
  .nextup-list{flex-wrap:wrap}
  .onclock-team{font-size:26px}
  .onclock-sub{font-size:11px}
  /* analytics on very small screens */
  .analytics-card{padding:14px}
  .analytics-table{font-size:11px}
  .analytics-table th,.analytics-table td{padding:5px 6px}
  .kpi{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:6px}
  .kpi .box{padding:8px 10px}
  .kpi .box .n{font-size:16px}
  /* prospects filter: stack fully */
  #view-prospects .filter-bar{grid-template-columns:1fr}
  #view-prospects .filter-bar .filter-select{min-width:0}
  /* modal full-screen on mobile */
  .prospect-modal-overlay{padding:0;align-items:flex-end}
  .prospect-modal{border-radius:18px 18px 0 0;max-height:92vh;width:100%;max-width:100%}
}
@supports (-webkit-touch-callout:none){
  body{-webkit-text-size-adjust:100%}
  /* iOS Safari 100vh trap: use dynamic viewport units where available */
  html,body{min-height:-webkit-fill-available}
}

/* respect reduced-motion preference on all devices */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .confetti,.check-svg,.pulse-ring{display:none!important}
}

/* update flash */
.flash{animation:flash 1s ease}
@keyframes flash{0%{background-color:rgba(212,168,75,.25)}100%{background-color:transparent}}

/* --- event animations --- */
/* announced: big celebratory swirl */
.pick-card.justAnnounced{
  animation:justAnnounced 2.2s cubic-bezier(.2,.8,.2,1) both;
  border-color:rgba(46,204,113,0.8)!important;
  box-shadow:0 0 0 0 rgba(46,204,113,0.6);
}
@keyframes justAnnounced{
  0%{transform:scale(.94) rotate(-1deg);background:rgba(46,204,113,.35)}
  25%{transform:scale(1.06) rotate(.5deg);box-shadow:0 0 30px 8px rgba(46,204,113,.55)}
  55%{transform:scale(1.02);box-shadow:0 0 24px 4px rgba(46,204,113,.3)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(46,204,113,0)}
}
.pick-card.justAnnounced::before{
  content:"";position:absolute;inset:-2px;border-radius:16px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(46,204,113,.5),rgba(212,168,75,.5),rgba(52,152,219,.5),rgba(46,204,113,.5));
  filter:blur(12px);opacity:.7;animation:spinFade 2.2s ease both;z-index:-1;
}
@keyframes spinFade{0%{transform:rotate(0);opacity:.9}100%{transform:rotate(360deg);opacity:0}}
.pick-card.justAnnounced .pick-player b{animation:nameIn .7s .2s ease both}
@keyframes nameIn{from{opacity:0;transform:translateY(6px);letter-spacing:.2em}to{opacity:1;transform:none;letter-spacing:normal}}
.pick-card.justUnannounced{animation:justIn 1.4s ease both}
@keyframes justIn{
  0%{background:rgba(52,152,219,.45);transform:scale(1.04)}
  60%{background:rgba(52,152,219,.15)}
  100%{background:var(--card);transform:none}
}

/* on-clock card swap */
.onclock-card.swap{animation:swap 900ms cubic-bezier(.2,.7,.2,1) both}
@keyframes swap{
  0%{transform:translateY(-8px) scale(.98);opacity:.3}
  60%{transform:translateY(2px) scale(1.01);opacity:1}
  100%{transform:none;opacity:1}
}
#onClockLogo{transition:transform .4s ease}
.onclock-card.swap #onClockLogo{animation:logoIn 700ms ease}
.onclock-card.swap .onclock-team{animation:teamIn 800ms ease both}
@keyframes teamIn{from{opacity:0;transform:translateX(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* full-viewport confetti on announce */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2000}
.confetti span{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;opacity:.95;will-change:transform,opacity;animation:fall linear forwards}
@keyframes fall{
  0%{transform:translate3d(0,-40px,0) rotate(0);opacity:0}
  8%{opacity:1}
  100%{transform:translate3d(var(--drift,0px),110vh,0) rotate(var(--spin,720deg));opacity:0}
}

/* trades: slide + glow for new cards */
.trade-card.justNew{
  animation:tradeIn 1.2s cubic-bezier(.2,.8,.2,1) both;
  border-color:rgba(244,208,111,0.6)!important;
  box-shadow:0 0 24px rgba(244,208,111,.28);
}
@keyframes tradeIn{
  0%{opacity:0;transform:translateX(-20px) scale(.96);background:rgba(244,208,111,.2)}
  40%{opacity:1;transform:translateX(0) scale(1.01)}
  100%{transform:none;background:var(--card)}
}

/* toast stack */
.toasts{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(520px,92vw)}
.toast{
  pointer-events:auto;background:linear-gradient(135deg,rgba(10,20,45,.95),rgba(1,51,105,.92));
  border:1px solid rgba(212,168,75,.5);border-radius:14px;padding:12px 14px;color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;gap:12px;align-items:center;
  animation:toastIn .5s cubic-bezier(.2,.8,.2,1) both,toastOut .5s 5s ease both;
  min-width:260px;
}
.toast.pick{border-color:rgba(46,204,113,.6)}
/* trade detection toast: visible for 8s (JS removes at 8s) */
.toast.trade{border-color:rgba(244,208,111,.7);animation:toastIn .5s cubic-bezier(.2,.8,.2,1) both,toastOut .5s 7.5s ease both}
/* wide trade-terms toast: visible for 15s (JS removes at 15s) */
.toast.wide{animation:toastIn .5s cubic-bezier(.2,.8,.2,1) both,toastOut .5s 14.5s ease both;max-width:min(520px,96vw)}
.toast.wide .toast-title{white-space:normal;font-size:13px;line-height:1.45}
.toast.correction{border-color:rgba(52,152,219,.7);background:linear-gradient(135deg,rgba(10,20,45,.95),rgba(17,61,113,.92))}
.toast.correction .toast-label{color:#5dade2}
.toast-logo{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:10px}
.toast-logo img{max-width:32px;max-height:32px}
.toast-logo.toast-photo{position:relative;background:rgba(255,255,255,.03);overflow:visible}
.toast-logo.toast-photo > img:first-child{width:40px;height:40px;border-radius:50%;object-fit:cover;max-width:40px;max-height:40px}
.toast-logo.toast-photo .toast-teamlogo{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--bg2);border:1px solid var(--border);border-radius:50%;padding:2px;object-fit:contain}
.toast-body{flex:1;min-width:0}
.toast-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);font-weight:700}
.toast-title{font-size:14px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-sub{font-size:12px;color:var(--ink-dim);margin-top:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.95)}}
@media (max-width:560px){.toasts{top:10px;right:10px;left:10px;max-width:none}.toast{min-width:0}}