/* fx.css: Owner of the Week (strip, page) + Trade theater. Theme-aware through the shared tokens (--card, --ink,
   --line, --muted, --brand); the cards and the theater stage carry their own team colours. Needs cards.css. */

/* ---------- Owner of the Week strip (Standings, Scores, Card sets) ---------- */
@property --otw-g{syntax:'<color>';initial-value:#1d8a5c;inherits:true}
@property --otw-a{syntax:'<number>';initial-value:0;inherits:true}
.otw-strip{position:relative;display:flex;align-items:center;gap:12px;margin:10px 0 12px;padding:10px 12px;border-radius:16px;color:#fff;overflow:hidden;
  border:2px solid var(--otw-g);isolation:isolate;
  background:linear-gradient(120deg,var(--c1),color-mix(in srgb,var(--c1) 55%,#000));
  animation:otwPulse 5s ease-in-out infinite;
  box-shadow:0 2px 14px rgba(16,32,64,.18),0 0 calc(2px + 14px * var(--otw-a)) rgba(60,220,140,calc(.15 + .4 * var(--otw-a)))}
.otw-strip:hover{text-decoration:none;filter:brightness(1.05)}
.otw-st-tile{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;overflow:hidden;display:grid;place-items:center;color:var(--c1);font-weight:900;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--otw-g)}
.otw-st-tile img{width:100%;height:100%;object-fit:cover}
.otw-st-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.otw-st-k{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#a8f5cc}
.otw-st-tx b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otw-st-s{font-size:12.5px;opacity:.88}
.otw-st-go{font-size:24px;opacity:.8}
.otw-st-foil{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;opacity:calc(.15 + .45 * var(--otw-a));
  background:radial-gradient(120% 140% at 15% 50%,rgba(110,255,180,.8),rgba(40,190,120,.25) 50%,transparent 80%)}
@keyframes otwPulse{0%,100%{--otw-g:#17714b;--otw-a:0}50%{--otw-g:#4be39a;--otw-a:1}}

/* ---------- Owner of the Week page ---------- */
.otw-head h1{margin-bottom:6px}
.otw-weeks{margin-bottom:4px}
.otw-stage{perspective:1100px;padding:10px 0 4px}
.otw-hint{text-align:center;margin:6px 0 10px}
.otw-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 8px}
.otw-rule{max-width:520px;margin:8px auto 0;text-align:center}
.otw-hist{overflow:hidden}
.otw-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.otw-row:last-child{border-bottom:0}
.otw-row:hover{text-decoration:none;background:color-mix(in srgb,var(--brand) 7%,transparent)}
.otw-row.on{background:color-mix(in srgb,#1f9e6e 12%,transparent)}
.otw-wk{flex:none;width:44px;font-weight:800;font-size:12.5px;color:var(--muted)}
.otw-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.otw-pts{font-variant-numeric:tabular-nums}

/* ---------- Trade theater ---------- */
.tt{position:relative;margin:12px 0 16px;scroll-margin-top:72px;border-radius:18px;overflow:hidden;color:#eef2fb;
  background:radial-gradient(60% 55% at 50% 30%,color-mix(in srgb,var(--brand,#5a7dac) 45%,transparent),transparent 70%),
    radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.6),transparent),linear-gradient(180deg,#0d1426,#060a14);
  box-shadow:0 6px 24px rgba(5,10,25,.35)}
.tt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px)}
.tt-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0}
.tt-kick{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#ffd977}
.tt-kick svg{width:16px;height:16px}
.tt-replay{font:inherit;font-size:12.5px;font-weight:700;color:#eef2fb;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 10px;cursor:pointer}
.tt-stage{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;max-width:440px;margin:0 auto;padding:12px 14px 6px}
.tt-c{min-width:0}
.tt-c .ocx{cursor:default}
.tt-c .ocx-ph{padding:1.1em 1.1em 1.3em}
.tt-c .ocx-fin{background:rgba(0,0,0,.28)}
.tt-c .ocx-team{font-size:2.3em}
.tt-ini{display:grid;place-items:center;height:100%;aspect-ratio:1;border-radius:2.2em;background:#fff;color:var(--c1);font-weight:900;font-size:4em;box-shadow:0 0 0 .35em var(--c2)}
.tt-from-l{transform:rotate(-3deg)}.tt-from-r{transform:rotate(3deg)}
.tt-boom{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%) rotate(-10deg);pointer-events:none}
.tt-boom span{display:block;padding:.18em .55em;border-radius:10px;font:900 26px/1 system-ui,sans-serif;letter-spacing:.04em;color:#2a1600;
  background:linear-gradient(135deg,#ffcf4a,#fff1b0 45%,#f0a81f);border:3px solid #fff;box-shadow:0 0 0 3px #2a1600,0 8px 24px rgba(0,0,0,.5)}
.tt-boom i{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(rgba(255,230,140,.85) 0 7deg,transparent 7deg 18deg);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.tt-after{position:relative;padding:8px 14px 14px;display:flex;flex-direction:column;gap:10px}
.tt-gets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tt-g{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-left:4px solid var(--c1);border-radius:12px;padding:8px 10px;font-size:13px}
.tt-g b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#c9d3ea;margin-bottom:2px}
.tt-g ul{margin:0;padding-left:16px}.tt-g li{margin:2px 0}
.tt-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tt-ct{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--c1);border-radius:12px;padding:8px 10px}
.tt-ctn{display:block;font-size:12px;font-weight:800;color:#c9d3ea;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-cr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-variant-numeric:tabular-nums;font-size:12.5px;margin-top:3px}
.tt-cr.tt-now b{font-size:20px}
.tt-cs{color:#9aa8c6;width:34px;flex:none}
.tt-cr b.up{color:#4ee3a0}.tt-cr b.down{color:#ff7a7a}
.tt-cb{flex-basis:100%;padding-left:42px;color:#9aa8c6;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-pc{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px}
.tt-pod{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#ffd977}
.tt-pod svg{width:15px;height:15px}
.tt-pc h3{margin:4px 0 6px;font-size:18px;line-height:1.2;color:#fff}
.tt-pc p{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:#dfe6f5}
.tt-src{font-size:11px;color:#8d9abb}
/* the slam */
.tt.play .tt-from-l{animation:ttL .9s cubic-bezier(.25,.8,.3,1.15) var(--d,0s) both}
.tt.play .tt-from-r{animation:ttR .9s cubic-bezier(.25,.8,.3,1.15) var(--d,0s) both}
.tt.play .tt-from-t{animation:ttT .9s cubic-bezier(.25,.8,.3,1.15) var(--d,0s) both}
.tt.play .tt-stage{animation:ttShake .4s .5s both}
.tt.play .tt-boom{animation:ttBoom .9s .48s both}
.tt.play .tt-boom i{animation:ttRays 1s .48s both}
.tt.play .tt-after{animation:ttUp .55s 1.15s both}
@keyframes ttL{0%{transform:translateX(-135%) rotate(-20deg);opacity:0}55%{transform:translateX(16%) rotate(4deg);opacity:1}70%{transform:translateX(-4%) rotate(-5deg)}100%{transform:rotate(-3deg)}}
@keyframes ttR{0%{transform:translateX(135%) rotate(20deg);opacity:0}55%{transform:translateX(-16%) rotate(-4deg);opacity:1}70%{transform:translateX(4%) rotate(5deg)}100%{transform:rotate(3deg)}}
@keyframes ttT{0%{transform:translateY(-120%) scale(.8);opacity:0}55%{transform:translateY(8%);opacity:1}100%{transform:none}}
@keyframes ttShake{0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}
@keyframes ttBoom{0%{transform:translate(-50%,-50%) rotate(-10deg) scale(0);opacity:0}45%{transform:translate(-50%,-50%) rotate(-14deg) scale(1.45);opacity:1}100%{transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
@keyframes ttRays{0%{opacity:0;transform:scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.6) rotate(40deg)}}
@keyframes ttUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tt.play .tt-c,.tt.play .tt-stage,.tt.play .tt-boom,.tt.play .tt-boom i,.tt.play .tt-after{animation:none}
  .otw-strip{animation:none;--otw-g:#2fb878;--otw-a:.5}}
/* skins: the stage spotlight follows the theme accent */
html[data-skin=t3] .tt{background:radial-gradient(60% 55% at 50% 30%,rgba(200,30,40,.45),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.6),transparent),linear-gradient(180deg,#160808,#070303)}
html[data-skin=night] .tt{background:radial-gradient(60% 55% at 50% 30%,rgba(31,107,255,.45),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.6),transparent),linear-gradient(180deg,#080c16,#030407)}
html[data-skin=dp] .tt{background:radial-gradient(60% 55% at 50% 30%,rgba(79,179,173,.45),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.6),transparent),linear-gradient(180deg,#071311,#030807)}
html[data-theme=dark] .otw-strip{box-shadow:0 2px 14px rgba(0,0,0,.4)}

/* trades list: latest completed deal banner */
.tt-latest{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:14px;color:#eef2fb;background:linear-gradient(135deg,#111a30,#070b16);box-shadow:var(--shadow)}
.tt-latest:hover{text-decoration:none;filter:brightness(1.08)}
.tt-latest .tt-lg{display:flex}
.tt-latest .tt-lg span{width:34px;height:34px;border-radius:10px;background:#fff;overflow:hidden;display:grid;place-items:center;font-weight:900;font-size:12px;color:#123;box-shadow:0 0 0 2px var(--c1,#fff)}
.tt-latest .tt-lg span+span{margin-left:-8px}
.tt-latest .tt-lg img{width:100%;height:100%;object-fit:cover}
.tt-latest .tt-lt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tt-latest .tt-lt small{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#ffd977}
.tt-latest .tt-lt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Primetime recap strip (League home, stacked under Owner of the Week) ---------- */
.ban-stack{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.ban-stack .otw-strip{margin:0}
@property --rcp-g{syntax:'<color>';initial-value:#c8202e;inherits:true}
.rcp-strip{--c1:#141c34;border-color:var(--rcp-g);animation:rcpPulse 5s ease-in-out infinite;
  background:linear-gradient(120deg,#1a2444,#0a0f1e 70%);
  box-shadow:0 2px 14px rgba(16,32,64,.18),0 0 calc(2px + 14px * var(--otw-a)) rgba(230,50,60,calc(.15 + .35 * var(--otw-a)))}
.rcp-tile{background:linear-gradient(135deg,#d62835,#7a0f18);color:#fff;font-size:24px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rcp-g)}
.rcp-k{color:#ffb3b8;display:flex;align-items:center;gap:6px}
.rcp-live{width:8px;height:8px;border-radius:50%;background:#ff3b47;box-shadow:0 0 0 3px rgba(255,59,71,.25)}
.rcp-strip b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px}
.rcp-foil{background:radial-gradient(120% 140% at 15% 50%,rgba(255,120,130,.7),rgba(200,40,60,.2) 50%,transparent 80%)}
@keyframes rcpPulse{0%,100%{--rcp-g:#8e1520;--otw-a:0}50%{--rcp-g:#ff4a57;--otw-a:1}}
@media (prefers-reduced-motion:reduce){.rcp-strip{animation:none;--rcp-g:#d62835;--otw-a:.5}}
html[data-theme=dark] .rcp-strip{box-shadow:0 2px 14px rgba(0,0,0,.4)}