/* ============================================================
   Football Winners — game styles (home hero quick picker + Play page)
   Loaded only on pages that show a game block.
   ============================================================ */

.fw-hero, .fw-play {
  --fwg-blue: var(--color-accent, #010298);
  --fwg-red: var(--color-primary, #D80000);
  --fwg-bright: var(--color-highlight, #FF0001);
  --fwg-ink: var(--color-dark, #0A0C2B);
  --fwg-line: var(--color-line, #E2E4EE);
  --fwg-muted: #5A5F7A;
  --fwg-green: #0F7B3A;
  --fwg-wrap: 1240px;
}
.fw-wrap { max-width: var(--fwg-wrap); margin: 0 auto; padding: 0 1.5rem; }

/* ---------------------------------------------------------- shared bits */
.fw-badge {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px; line-height: 1;
}
.fw-bar { height: 8px; border-radius: 999px; background: var(--fwg-line); overflow: hidden; }
.fw-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FFD23F, var(--fwg-bright)); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.fw-pulse { animation: fwg-pulse 2s ease-in-out infinite; }
.fw-link { background: none; border: 0; padding: 0; color: var(--fwg-blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }
.fw-link:hover { color: var(--fwg-red); }

/* ---------------------------------------------------------- home hero */
.block.fw-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 45%), var(--fwg-blue);
  padding: 4.5rem max(1.5rem, calc((100% - var(--fwg-wrap)) / 2)) 6rem;
}
.fw-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 0;
  background: var(--fwg-bright); clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
}
.fw-hero-ring { position: absolute; left: -180px; top: -180px; width: 560px; height: 560px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.14); animation: fwg-spin 40s linear infinite; pointer-events: none; }
.fw-hero-ball {
  position: absolute; left: 44%; top: 2.2rem; width: 110px; height: 110px; pointer-events: none; animation: fwg-float 5s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23fff' stroke='%230A0C2B' stroke-width='3'/%3E%3Cpolygon points='50,32 66,44 60,63 40,63 34,44' fill='%230A0C2B'/%3E%3Cpath d='M50 32V6M66 44l24-8M60 63l16 23M40 63L24 86M34 44l-24-8' stroke='%230A0C2B' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fw-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.fw-hero-copy { animation: fwg-rise .8s cubic-bezier(.2,.8,.2,1) .05s both; }
.fw-hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.14); padding: .45rem 1rem; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.fw-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #5CF08A; animation: fwg-pulse-green 2s ease-in-out infinite; }
.fw-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1.03; letter-spacing: -.03em; margin: 1.3rem 0 1.2rem; }
.fw-hero .accent-word { font-style: normal; color: #fff; display: inline-block; background: var(--fwg-red); padding: 0 .2em; border-radius: .18em; transform: rotate(-3deg); animation: fwg-wiggle 3.6s ease-in-out infinite; }
.fw-hero-sub { font-size: 1.18rem; line-height: 1.55; max-width: 34rem; color: rgba(255,255,255,.9); margin: 0 0 1.8rem; }
.fw-hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.fw-hero-ctas .btn { padding: 1rem 1.8rem; font-size: 1.05rem; }
.fw-hero-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 2.4rem; }
.fw-hero-stats strong { display: block; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.fw-hero-stats span { font-size: .9rem; color: rgba(255,255,255,.78); }

/* Quick picker card (footballwins style) */
.fw-qp { position: relative; animation: fwg-rise .8s cubic-bezier(.2,.8,.2,1) .25s both; }
.fw-qp-card {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); border-radius: 22px;
  padding: 1.25rem 1.25rem 1.1rem; backdrop-filter: blur(4px); box-shadow: 0 30px 60px rgba(0,0,40,.35);
}
.fw-qp-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.fw-qp-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; }
.fw-qp-clock { background: var(--fwg-bright); color: #fff; font-weight: 800; font-size: .82rem; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fw-qp-week { font-size: .88rem; color: rgba(255,255,255,.75); margin: .25rem 0 .9rem; }
.fw-qp-rows { display: flex; flex-direction: column; gap: .5rem; }
.fw-qp-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: .5rem; }
.fw-qp-vs { text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,.72); }
.fw-qp-btn {
  display: flex; align-items: center; gap: .55rem; min-width: 0; min-height: 46px; padding: .55rem .7rem; text-align: left; cursor: pointer;
  background: #fff; color: var(--fwg-ink); border: 2px solid transparent; border-radius: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; transition: transform .15s, border-color .15s, background .15s;
}
.fw-qp-btn:hover:not(:disabled) { border-color: #FFB3B3; transform: translateY(-2px); }
.fw-qp-btn:disabled { opacity: .45; cursor: not-allowed; }
.fw-qp-btn.is-on { background: var(--fwg-bright); color: #fff; border-color: #fff; animation: fwg-pop .35s ease; }
.fw-qp-btn.is-on .fw-badge { background: rgba(255,255,255,.3) !important; }
.fw-qp-name { flex: 1; min-width: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-qp-check { display: none; font-weight: 800; }
.fw-qp-btn.is-on .fw-qp-check { display: inline; }
.fw-qp-progress { height: 8px; margin: 1rem 0 .45rem; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.fw-qp-progress > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FFD23F, #FF3230); transition: width .3s ease; }
.fw-qp-count { font-weight: 800; font-size: .9rem; color: rgba(255,255,255,.9); margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
.fw-qp-cta {
  display: block; text-align: center; text-decoration: none; padding: 1rem 1.2rem; border-radius: 999px;
  background: var(--fwg-bright); color: #fff; border: 2px solid #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.08rem;
  animation: fwg-pulse 2s ease-in-out infinite; transition: background .2s, transform .2s;
}
.fw-qp-cta:hover { background: #C80000; color: #fff; transform: translateY(-2px); }
.fw-qp-note { margin: .8rem 0 0; text-align: center; font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.6; }
.fw-qp-note a { color: #fff; font-weight: 700; }
.fw-qp-empty h2 { color: #fff; font-size: 1.6rem; margin: .8rem 0 .5rem; }
.fw-qp-empty p { color: rgba(255,255,255,.85); }
.fw-chip { display: inline-block; font-weight: 800; font-size: .8rem; padding: .3rem .75rem; border-radius: 999px; }
.fw-chip-blue { background: #fff; color: var(--fwg-blue); }

/* "Dave just entered Best Picks" — real recent entries */
.fw-toast {
  position: absolute; top: -1.3rem; left: 1.2rem; z-index: 2; display: flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--fwg-ink); border-radius: 999px; padding: .5rem .95rem; font-size: .85rem; font-weight: 800;
  box-shadow: 0 14px 30px rgba(0,0,40,.3); opacity: 0;
}
.fw-toast.fw-toast-in { animation: fwg-toast 6s ease-in-out both; }
.fw-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB954; }

/* ---------------------------------------------------------- Play page */
.block.fw-play { padding: 0 0 4rem; background: var(--color-background, #F4F5FA); }
.fw-play.has-submitbar { padding-bottom: 7rem; }
.fw-loading { padding: 4rem 1.5rem; text-align: center; color: var(--fwg-muted); }
.fw-play-head { color: #fff; position: relative; overflow: hidden; transition: background .4s; padding: 2.5rem 0 2.4rem; }
.fw-play-head.is-blue { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.14), transparent 45%), var(--fwg-blue); }
.fw-play-head.is-red { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.16), transparent 45%), var(--fwg-red); }
.fw-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.fw-tab { min-height: 46px; padding: 0 1.3rem; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: .95rem; background: rgba(255,255,255,.16); color: #fff; transition: transform .2s, background .2s; }
.fw-tab:hover { transform: translateY(-2px); }
.fw-tab.is-on { background: #fff; color: var(--fwg-ink); }
.fw-play-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.fw-play-head h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin: 0 0 .5rem; animation: fwg-rise .6s ease both; }
.fw-rules { margin: 0; max-width: 40rem; color: rgba(255,255,255,.92); font-size: 1.05rem; line-height: 1.55; }
.fw-closes { background: rgba(0,0,0,.2); border-radius: 18px; padding: .8rem 1.2rem; }
.fw-closes span { display: block; font-size: .82rem; font-weight: 700; opacity: .88; }
.fw-closes strong { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.fw-play-body { padding-top: 1.6rem; }
.fw-userbar { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; font-size: .95rem; color: var(--fwg-muted); margin-bottom: 1.2rem; }
.fw-userbar strong { color: var(--fwg-ink); }
.fw-flash { background: var(--fwg-green); color: #fff; border-radius: 18px; padding: 1rem 1.3rem; margin-bottom: 1.2rem; font-size: 1.02rem; animation: fwg-bounce .7s cubic-bezier(.2,1.6,.4,1) both; }
.fw-weeks-label { font-weight: 800; margin-bottom: .6rem; }
.fw-weeks { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.fw-week { min-height: 60px; padding: .55rem 1.1rem; border-radius: 16px; border: 2px solid var(--fwg-line); background: #fff; color: var(--fwg-ink); text-align: left; cursor: pointer; font-family: var(--font-body); transition: transform .2s, border-color .2s; }
.fw-week strong { display: block; font-size: .98rem; }
.fw-week span { font-size: .82rem; opacity: .8; }
.fw-week:hover { transform: translateY(-2px); border-color: var(--fwg-blue); }
.fw-week.is-on { background: var(--fwg-blue); border-color: var(--fwg-blue); color: #fff; }
.fw-week.is-closed:not(.is-on) { background: transparent; }

.fw-note { background: #fff; border: 1px solid var(--fwg-line); border-radius: 18px; padding: 1rem 1.3rem; margin-bottom: 1.2rem; }
.fw-note-blue { border-color: var(--fwg-blue); }
.fw-cheer { display: flex; align-items: center; gap: .8rem; background: var(--fwg-green); color: #fff; border-radius: 18px; padding: .9rem 1.3rem; margin-bottom: 1.2rem; font-weight: 800; font-size: 1.05rem; animation: fwg-bounce .7s cubic-bezier(.2,1.6,.4,1) both; }
.fw-cheer-tick { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--fwg-green); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.fw-entered { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--fwg-ink); color: #fff; border-radius: 20px; padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; animation: fwg-rise .5s ease both; }
.fw-entered-title { font-family: var(--font-heading); font-size: 1.25rem; }
.fw-entered p { margin: .3rem 0 0; color: rgba(255,255,255,.88); }
.fw-entered .btn-white { background: #fff; color: var(--fwg-ink); }
.fw-empty { background: #fff; border: 1px solid var(--fwg-line); border-radius: 22px; padding: 2.5rem; text-align: center; }

.fw-cols { display: flex; gap: 2rem; align-items: flex-start; }
.fw-main { flex: 999 1 560px; min-width: 0; }
.fw-side { flex: 0 0 330px; width: 330px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }
.fw-fixtures-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.fw-fixtures-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.fw-fixtures-head span { color: var(--fwg-muted); font-size: .95rem; }
.fw-fixtures { list-style: none; margin: 0; padding: .5rem; background: #fff; border: 1px solid var(--fwg-line); border-radius: 22px; }
.fw-fx { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .3rem .35rem; position: relative; }
.fw-fx + .fw-fx { border-top: 1px solid #F0F1F6; }
.fw-fx-num { font-size: .82rem; font-weight: 800; color: #8A8FA8; text-align: center; }
.fw-v { text-align: center; font-size: .78rem; font-weight: 800; color: #8A8FA8; text-transform: uppercase; }
.fw-team {
  display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 52px; padding: .45rem .75rem; cursor: pointer;
  background: #fff; color: var(--fwg-ink); border: 2px solid var(--fwg-line); border-radius: 14px; text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; transition: border-color .2s, transform .15s, opacity .3s;
}
.fw-team.is-away { flex-direction: row-reverse; text-align: right; }
.fw-team-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-team:hover:not(:disabled) { border-color: var(--fwg-blue); transform: translateY(-2px); }
.fw-team.is-on { background: var(--fwg-blue); border-color: var(--fwg-blue); color: #fff; animation: fwg-pop .35s ease; }
.fw-play-head.is-red ~ .fw-play-body .fw-team.is-on { background: var(--fwg-red); border-color: var(--fwg-red); }
.fw-team.is-on .fw-badge { background: rgba(255,255,255,.3) !important; }
.fw-team.is-locked { opacity: .45; }
.fw-team:disabled { cursor: default; }
.fw-team:disabled:not(.is-on) { opacity: .7; }
.fw-res-badge { position: absolute; right: .4rem; top: -.4rem; font-size: .72rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; background: #EEF0F6; color: var(--fwg-ink); }
.fw-fx.res-won .fw-res-badge { background: var(--fwg-green); color: #fff; }
.fw-fx.res-lost .fw-res-badge { background: #B30000; color: #fff; }
.fw-fx.res-won .fw-team.is-on { background: var(--fwg-green); border-color: var(--fwg-green); }
.fw-fx.res-lost .fw-team.is-on { background: #8A1C1C; border-color: #8A1C1C; }
.fw-fx.res-draw .fw-team.is-on { background: #6B7085; border-color: #6B7085; }

.fw-card { background: #fff; border: 1px solid var(--fwg-line); border-radius: 22px; padding: 1.3rem; }
.fw-card h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.fw-card p { margin: 0; color: var(--fwg-muted); font-size: .95rem; line-height: 1.55; }
.fw-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.fw-count { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--fwg-blue); font-variant-numeric: tabular-nums; }
.fw-play-head.is-red ~ .fw-play-body .fw-count { color: var(--fwg-red); }
.fw-card .fw-bar { margin: .7rem 0 .9rem; }
.fw-picklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fw-picklist li { display: flex; justify-content: space-between; gap: .5rem; font-size: .93rem; padding: .45rem .7rem; background: var(--color-background, #F4F5FA); border-radius: 10px; animation: fwg-slide .3s ease both; }
.fw-picklist li span { color: var(--fwg-muted); }
.fw-picklist .fw-picklist-empty { background: none; padding: 0; color: var(--fwg-muted); }
.fw-clear { margin-top: .6rem; font-size: .88rem; }
.fw-card-dark { background: var(--fwg-ink); border-color: var(--fwg-ink); }
.fw-card-dark h3 { color: #fff; }
.fw-card-dark p { color: rgba(255,255,255,.85); }
.fw-card-plain { background: transparent; }

/* Fixed submit bar */
.fw-submitbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #fff; border-top: 1px solid var(--fwg-line); box-shadow: 0 -10px 30px rgba(0,0,40,.1); padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom)); animation: fwg-up .4s ease both; }
.fw-submitbar .fw-wrap { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; }
.fw-submitbar-left { display: flex; align-items: center; gap: .8rem; font-weight: 700; }
.fw-submitbar .btn { min-height: 54px; padding: 0 2rem; font-size: 1.05rem; }
.fw-submitbar .btn.is-disabled { background: #C9CBD8; color: #3A3F5A; box-shadow: none; cursor: default; transform: none; }
.fw-glow { animation: fwg-glow 1.6s ease-in-out infinite; }

/* Modals */
.fw-modal-back { position: fixed; inset: 0; z-index: 300; background: rgba(10,12,43,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fwg-fade .25s ease both; }
.fw-modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; color: var(--fwg-ink); border-radius: 26px; padding: 1.8rem; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: fwg-pop-in .35s cubic-bezier(.2,.9,.3,1.2) both; }
.fw-modal h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.fw-modal p { color: #3A3F5A; }
.fw-modal form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.fw-modal label { display: flex; flex-direction: column; gap: .35rem; font-weight: 800; font-size: .95rem; }
.fw-modal label small { font-weight: 600; color: var(--fwg-muted); }
.fw-modal input { min-height: 52px; border-radius: 14px; border: 2px solid var(--fwg-line); padding: 0 1rem; font: inherit; font-weight: 600; font-size: 1rem; }
.fw-modal input:focus { outline: none; border-color: var(--fwg-blue); box-shadow: 0 0 0 4px rgba(1,2,152,.12); }
.fw-modal .btn { min-height: 54px; font-size: 1.05rem; }
.fw-modal-x { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #F0F1F6; font-size: 1.5rem; cursor: pointer; }
.fw-modal-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.fw-modal-actions .btn { flex: 1; }
.fw-auth-tabs { display: flex; gap: .3rem; background: #F0F1F6; padding: .3rem; border-radius: 999px; margin: 0 2.8rem 1.2rem 0; }
.fw-auth-tabs button { flex: 1; min-height: 42px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 800; cursor: pointer; color: var(--fwg-ink); }
.fw-auth-tabs button.is-on { background: #fff; box-shadow: 0 2px 8px rgba(0,0,40,.1); }
.fw-confirm-list { margin: 1rem 0; padding-left: 1.4rem; display: grid; gap: .25rem; }
.fw-confirm-list span { color: var(--fwg-muted); }
.fw-warn { background: #FFF1F1; border-radius: 14px; padding: .8rem 1rem; color: #8A1C1C !important; }
.fw-msg { background: #FFF1F1; color: #8A1C1C !important; border-radius: 12px; padding: .7rem .9rem; margin: 0; font-weight: 700; }
.fw-small { font-size: .85rem; color: var(--fwg-muted); }
.fw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------------------------------------------------------- phones */
@media (max-width: 960px) {
  .fw-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .fw-hero-ball { left: auto; right: 1rem; top: 1rem; width: 72px; height: 72px; }
  .fw-cols { flex-direction: column; }
  .fw-side { position: static; width: 100%; flex-basis: auto; }
}
@media (max-width: 600px) {
  .block.fw-hero { padding: 3rem 1.1rem 5rem; }
  .fw-qp-card { padding: 1rem .8rem; }
  .fw-qp-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: .35rem; }
  .fw-qp-btn .fw-badge { display: none; }
  .fw-qp-btn { font-size: .88rem; padding: .5rem .55rem; }
  .fw-toast { left: .5rem; font-size: .78rem; }
  .fw-fx { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .fw-fx-num { display: none; }
  .fw-team { font-size: .9rem; padding: .4rem .5rem; gap: .4rem; min-height: 50px; }
  .fw-team .fw-badge { display: none; }
  .fw-submitbar-left { font-size: .9rem; }
  .fw-submitbar .btn { flex: 1; }
  .fw-modal { padding: 1.4rem 1.1rem; border-radius: 22px; }
}

/* ---------------------------------------------------------- motion */
@keyframes fwg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,1,.55); } 60% { box-shadow: 0 0 0 14px rgba(255,0,1,0); } }
@keyframes fwg-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,0,0,.6), 0 10px 24px rgba(216,0,0,.3); } 50% { box-shadow: 0 0 0 12px rgba(216,0,0,0), 0 10px 24px rgba(216,0,0,.3); } }
@keyframes fwg-pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(92,240,138,.7); } 60% { box-shadow: 0 0 0 8px rgba(92,240,138,0); } }
@keyframes fwg-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fwg-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes fwg-pop-in { from { opacity: 0; transform: scale(.92) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fwg-bounce { 0% { opacity: 0; transform: scale(.7) translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes fwg-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes fwg-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fwg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fwg-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(10deg); } }
@keyframes fwg-spin { to { transform: rotate(360deg); } }
@keyframes fwg-wiggle { 0%, 82%, 100% { transform: rotate(-3deg); } 86% { transform: rotate(4deg) scale(1.08); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(2deg); } }
@keyframes fwg-toast { 0%, 6% { opacity: 0; transform: translateY(14px); } 12%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .fw-hero *, .fw-play *, .fw-hero, .fw-modal-back, .fw-modal { animation: none !important; transition: none !important; }
  .fw-toast { opacity: 1; }
}

/* ============================================================
   Phase 3: one set of picks, both games
   ============================================================ */
.fw-qp-both { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.88); margin: -.35rem 0 .85rem; }
.fw-mini { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; }
.fw-mini-blue { background: #3D3FD1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.fw-mini-red { background: var(--fwg-bright); }
.fw-mini-plus { font-weight: 800; }

.fw-play-head { background: linear-gradient(110deg, var(--fwg-blue) 0%, var(--fwg-blue) 55%, #4A0270 78%, var(--fwg-red) 100%); }
.fw-head-kicker { display: inline-block; font-weight: 800; font-size: .9rem; background: rgba(255,255,255,.16); padding: .3rem .8rem; border-radius: 999px; margin-bottom: .7rem; }
.fw-rules strong { color: #fff; }
.fw-game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.fw-game-card { position: relative; border-radius: 20px; padding: 1.1rem 1.3rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); animation: fwg-rise .6s ease both; }
.fw-game-card.is-pick10 { background: rgba(255,255,255,.12); }
.fw-game-card.is-bestpicks { background: rgba(255,0,1,.55); border-color: rgba(255,255,255,.3); animation-delay: .1s; }
.fw-game-card strong { display: block; font-family: var(--font-heading); font-size: 1.35rem; margin: .45rem 0 .25rem; }
.fw-game-card p { margin: 0; color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.5; }
.fw-gc-tag { display: inline-block; font-size: .75rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; background: #fff; color: var(--fwg-blue); }
.fw-game-card.is-bestpicks .fw-gc-tag { color: var(--fwg-red); }
.fw-gc-status { position: absolute; top: 1rem; right: 1rem; font-size: .8rem; font-weight: 800; background: var(--fwg-green); color: #fff; padding: .2rem .6rem; border-radius: 999px; }

.fw-card-games p { color: var(--fwg-ink); font-weight: 700; line-height: 1.9; }
.fw-card-games .fw-small { font-weight: 600; color: var(--fwg-muted); line-height: 1.4; }
.fw-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .5rem; vertical-align: -1px; }
.fw-dot-blue { background: var(--fwg-blue); }
.fw-dot-red { background: var(--fwg-red); }

.fw-entered { display: block; }
.fw-entered-title { display: block; margin-bottom: .7rem; }
.fw-eb-row { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 14px; background: rgba(255,255,255,.07); margin-top: .5rem; border-left: 5px solid #3D3FD1; }
.fw-eb-row.is-bestpicks { border-left-color: var(--fwg-bright); }
.fw-eb-row .fw-eb-game { font-weight: 800; min-width: 10.5rem; }
.fw-eb-row.is-missing { background: transparent; border: 1px dashed rgba(255,255,255,.35); border-left-width: 5px; }
.fw-eb-row .btn { margin-left: auto; min-height: 44px; padding: 0 1.2rem; font-size: .95rem; }

.fw-enter-label { font-weight: 800; margin: 1rem 0 .5rem; }
.fw-pick-games { display: grid; gap: .6rem; margin-bottom: 1rem; }
.fw-pick-game { display: flex !important; flex-direction: row !important; align-items: center; gap: .8rem !important; padding: .8rem 1rem; border-radius: 16px; border: 2px solid var(--fwg-line); cursor: pointer; transition: border-color .2s, background .2s; }
.fw-pick-game input { width: 22px; height: 22px; min-height: 0 !important; accent-color: var(--fwg-blue); flex-shrink: 0; }
.fw-pick-game.is-bestpicks input { accent-color: var(--fwg-red); }
.fw-pick-game span { display: flex; flex-direction: column; }
.fw-pick-game small { font-weight: 600; color: var(--fwg-muted); }
.fw-pick-game:has(input:checked) { border-color: var(--fwg-blue); background: #F2F2FF; }
.fw-pick-game.is-bestpicks:has(input:checked) { border-color: var(--fwg-red); background: #FFF3F3; }
.fw-pick-game.is-done { opacity: .6; cursor: default; }

/* ============================================================
   Tables page
   ============================================================ */
.block.fw-tables, .block.fw-leagues { padding: 0 0 4rem; background: var(--color-background, #F4F5FA); }
.fw-tables, .fw-leagues, .fw-tp { --fwg-blue: var(--color-accent, #010298); --fwg-red: var(--color-primary, #D80000); --fwg-bright: var(--color-highlight, #FF0001); --fwg-ink: var(--color-dark, #0A0C2B); --fwg-line: var(--color-line, #E2E4EE); --fwg-muted: #5A5F7A; --fwg-green: #0F7B3A; --fwg-wrap: 1240px; }
.fw-tb-head { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.16), transparent 45%), var(--fwg-red); color: #fff; padding: 3rem 0 2.6rem; }
.fw-tb-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.fw-tb-head h1 { color: #fff; margin: .8rem 0 .5rem; font-size: clamp(2.2rem, 4.6vw, 3.8rem); animation: fwg-rise .6s ease both; }
.fw-tb-head p { margin: 0; max-width: 38rem; color: rgba(255,255,255,.92); font-size: 1.05rem; }
.fw-tag { display: inline-block; background: rgba(255,255,255,.2); font-weight: 800; font-size: .82rem; padding: .3rem .8rem; border-radius: 999px; }
.fw-tb-stats { display: flex; gap: .8rem; flex-wrap: wrap; }
.fw-tb-stat { background: rgba(0,0,0,.2); border-radius: 18px; padding: .9rem 1.2rem; min-width: 150px; animation: fwg-bounce .7s cubic-bezier(.2,1.6,.4,1) .3s both; }
.fw-tb-stat span { display: block; font-size: .82rem; font-weight: 700; opacity: .9; }
.fw-tb-stat strong { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; }
.fw-tb-stat-white { background: #fff; color: var(--fwg-ink); animation-delay: .45s; }
.fw-tb-stat-white strong { color: var(--fwg-red); }
.fw-tb-body { padding-top: 2rem; }
.fw-tb-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.fw-segs { display: inline-flex; gap: .25rem; background: #fff; border: 1px solid var(--fwg-line); padding: .25rem; border-radius: 999px; flex-wrap: wrap; }
.fw-seg { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--fwg-ink); transition: background .2s, color .2s; }
.fw-seg:hover { color: var(--fwg-red); }
.fw-seg.is-on { background: var(--fwg-ink); color: #fff; }
.fw-week-select { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.fw-week-select select { min-height: 44px; border-radius: 12px; border: 1px solid var(--fwg-line); padding: 0 .8rem; font: inherit; font-weight: 700; background: #fff; max-width: 100%; }
.fw-tb-title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: .2rem 0 .9rem; }
.fw-tb-sub { color: var(--fwg-muted); margin: -.4rem 0 1rem; }
.fw-table { background: #fff; border: 1px solid var(--fwg-line); border-radius: 22px; overflow: hidden; }
.fw-tr { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) 52px 52px 52px 64px 74px; align-items: center; padding: .85rem 1.2rem; border-bottom: 1px solid #EEF0F6; animation: fwg-rise .5s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.fw-tr:last-child { border-bottom: 0; }
.fw-table .fw-tr:not(:has(> span:nth-child(8))) { grid-template-columns: 52px minmax(0, 1fr) 52px 52px 52px 74px; }
.fw-th { font-size: .78rem; font-weight: 800; color: var(--fwg-muted); text-transform: uppercase; letter-spacing: .04em; background: #F8F9FC; animation: none; }
.fw-tr .fw-c { text-align: center; }
.fw-tr .fw-r { text-align: right; }
.fw-pos { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; }
.fw-tr.is-top1 .fw-pos { color: #B8860B; }
.fw-tr.is-top2 .fw-pos { color: #6B7085; }
.fw-tr.is-top3 .fw-pos { color: #A0522D; }
.fw-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-name em { font-style: normal; color: var(--fwg-red); font-size: .85rem; }
.fw-pts { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; text-align: right; }
.fw-tr.is-me { background: #FFF1F1; box-shadow: inset 5px 0 0 var(--fwg-red); }
.fw-move { font-size: .78rem; font-weight: 800; color: #8A8FA8; }
.fw-move-up { color: var(--fwg-green); }
.fw-move-down { color: #B30000; }
.fw-empty-table { background: #fff; border: 2px dashed var(--fwg-line); border-radius: 20px; padding: 1.6rem; text-align: center; color: var(--fwg-muted); }
.fw-empty-table a { color: var(--fwg-blue); font-weight: 800; }
.fw-winners { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fw-winners li { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--fwg-line); border-radius: 18px; padding: .9rem 1.2rem; }
.fw-winners li span:last-child { color: var(--fwg-muted); margin-left: auto; }
.fw-trophy { font-family: var(--font-heading); font-weight: 800; font-size: .85rem; background: #FFD23F; color: var(--fwg-ink); border-radius: 999px; padding: .3rem .7rem; }
.fw-league-link { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--color-background, #F4F5FA); border-radius: 14px; margin-bottom: .5rem; text-decoration: none; color: var(--fwg-ink); transition: transform .2s; }
.fw-league-link:hover { transform: translateX(4px); color: var(--fwg-ink); }
.fw-league-link small { display: block; color: var(--fwg-muted); font-weight: 600; }
.fw-btn-dark { background: var(--fwg-ink); color: #fff; width: 100%; text-align: center; margin-top: .5rem; }
.fw-btn-dark:hover { color: #fff; }
.fw-btn-outline { background: #fff; color: var(--fwg-ink); box-shadow: inset 0 0 0 2px var(--fwg-line); }
.fw-card-blue { background: var(--fwg-blue); border-color: var(--fwg-blue); }
.fw-card-blue h3 { color: #fff; }
.fw-card-blue p { color: rgba(255,255,255,.88); margin-bottom: 1rem; }
.fw-card-blue .btn { width: 100%; text-align: center; }

/* ============================================================
   Home: top of the table + leagues promo
   ============================================================ */
.block.fw-tp { background: #fff; border-top: 1px solid var(--fwg-line); border-bottom: 1px solid var(--fwg-line); padding: 5rem max(1.5rem, calc((100% - var(--fwg-wrap)) / 2)); }
.fw-tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: stretch; }
.fw-eyebrow { display: block; font-weight: 800; color: var(--fwg-red); margin-bottom: .5rem; }
.fw-eyebrow-light { color: #FF8A8A; }
.fw-tp h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 1.4rem; }
.fw-more { display: inline-block; margin-top: 1rem; font-weight: 800; color: var(--fwg-blue); }
.fw-tp-share { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: rgba(255,255,255,.08); border-radius: 16px; padding: .9rem 1rem; font-family: monospace; font-size: .92rem; }
.fw-wa { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: #25D366; color: #0A0C2B; font-family: var(--font-body); font-weight: 800; font-size: .9rem; text-decoration: none; }

/* ============================================================
   Leagues page
   ============================================================ */
.fw-leagues .fw-wrap { padding-top: 2.5rem; }
.fw-lg-msg { background: var(--fwg-green); color: #fff; border-radius: 16px; padding: .9rem 1.2rem; font-weight: 700; margin: 0 0 1.2rem; }
.fw-lg-msg.is-bad { background: #8A1C1C; }
.fw-invite, .fw-lg-guest { background: var(--fwg-blue); color: #fff; border-radius: 26px; padding: 2rem 2.2rem; margin-bottom: 2rem; animation: fwg-bounce .6s cubic-bezier(.2,1.4,.4,1) both; }
.fw-invite h2, .fw-lg-guest h2 { color: #fff; margin: .6rem 0 .4rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.fw-invite p, .fw-lg-guest p { color: rgba(255,255,255,.9); margin: 0 0 1.2rem; }
.fw-invite a:not(.btn) { color: #fff; font-weight: 800; }
.fw-lg-btns { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.fw-lg-card { background: #fff; border: 1px solid var(--fwg-line); border-radius: 22px; padding: 1.3rem 1.4rem; margin-bottom: 1rem; animation: fwg-rise .5s ease both; }
.fw-lg-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.fw-lg-card h3 { margin: 0; font-size: 1.3rem; }
.fw-lg-card small { color: var(--fwg-muted); }
.fw-pill { font-size: .78rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; background: #EEF0F6; white-space: nowrap; }
.fw-pill-green { background: #E3F5EA; color: var(--fwg-green); }
.fw-pill-amber { background: #FFF6E4; color: #7A5A0A; }
.fw-lg-share { background: var(--color-background, #F4F5FA); border-radius: 16px; padding: .9rem 1rem; margin-bottom: .9rem; }
.fw-lg-share code { display: block; font-size: .9rem; word-break: break-all; margin-bottom: .6rem; }
.fw-copy { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--fwg-line); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.fw-code { font-size: .9rem; color: var(--fwg-muted); }
.fw-code strong { color: var(--fwg-ink); letter-spacing: .08em; }
.fw-lg-card .fw-btn-dark { width: auto; display: inline-flex; margin: 0 .6rem .4rem 0; }
.fw-lg-note { color: var(--fwg-muted); font-size: .92rem; margin: 0 0 .5rem; display: block; }
.fw-lg-form { display: flex; flex-direction: column; gap: .8rem; }
.fw-lg-form h3 { margin: 0; }
.fw-lg-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 800; font-size: .95rem; }
.fw-lg-form input { min-height: 50px; border-radius: 14px; border: 2px solid var(--fwg-line); padding: 0 1rem; font: inherit; font-weight: 600; }
.fw-lg-form input:focus { outline: none; border-color: var(--fwg-blue); }
.fw-leagues .fw-main, .fw-tables .fw-main { flex: 999 1 520px; }

@media (max-width: 960px) {
  .fw-tp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .fw-game-cards { grid-template-columns: 1fr; }
  .fw-tr { grid-template-columns: 40px minmax(0, 1fr) 64px !important; padding: .8rem .9rem; }
  .fw-hide-sm { display: none; }
  .fw-tp-lg-in, .fw-invite, .fw-lg-guest { padding: 1.6rem 1.3rem; border-radius: 22px; }
  .fw-eb-row .btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-tables *, .fw-leagues *, .fw-tp * { animation: none !important; transition: none !important; }
}

/* ---- Home "Top of the table" (v2) ---- */
.fw-tp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.fw-tp-head h2 { margin-bottom: 1.2rem; }
.fw-tp-sample { flex-shrink: 0; margin-top: .3rem; padding: .35rem .8rem; border-radius: 999px; background: #FFF4D6; color: #7A5600; font-weight: 800; font-size: .78rem; letter-spacing: .02em; }
.fw-tp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.fw-tp-row, .fw-tp-you a { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) 44px 76px; gap: .9rem; align-items: center; padding: .7rem 1.1rem .7rem .9rem; background: #fff; border: 1px solid var(--fwg-line); border-radius: 18px;
  animation: fwg-rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform .25s, box-shadow .25s, border-color .25s; }
.fw-tp-row:hover { transform: translateX(6px); border-color: var(--fwg-blue); box-shadow: 0 12px 26px -12px rgba(1,2,152,.35); }
.fw-tp-pos { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; color: var(--fwg-blue); background: #EEF0FA; }
.fw-tp-m1 .fw-tp-pos { background: linear-gradient(135deg, #FFE27A, #E7B416); color: #5A4200; box-shadow: 0 4px 12px rgba(231,180,22,.45); }
.fw-tp-m2 .fw-tp-pos { background: linear-gradient(135deg, #F1F3F8, #BFC5D2); color: #3B4255; }
.fw-tp-m3 .fw-tp-pos { background: linear-gradient(135deg, #F6CFA6, #C9844A); color: #4E2A0C; }
.fw-tp-m1 { border-color: #F0D27A; background: linear-gradient(90deg, #FFFBEA, #fff 60%); }
.fw-tp-av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.fw-tp-who { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.fw-tp-who b { font-size: 1.04rem; color: var(--fwg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-tp-who small { color: var(--fwg-muted); font-size: .78rem; }
.fw-tp-bar { display: flex; height: 7px; width: calc(var(--n, 1) * 100%); max-width: 100%; border-radius: 99px; overflow: hidden; background: #EEF0F6; }
.fw-tp-bar i { display: block; height: 100%; transform-origin: left; animation: fw-tp-grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
.fw-tp-bar .w { background: var(--fwg-green); } .fw-tp-bar .d { background: #B9BED0; } .fw-tp-bar .l { background: var(--fwg-red); }
@keyframes fw-tp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fw-tp-row .fw-move { justify-self: center; font-size: .8rem; font-weight: 800; }
.fw-tp-pts { justify-self: end; font-family: var(--font-heading); font-weight: 800; font-size: 1.55rem; color: var(--fwg-green); line-height: 1; text-align: right; }
.fw-tp-pts small { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 700; color: var(--fwg-muted); margin-top: .15rem; }
.fw-tp-pts.neg { color: var(--fwg-red); }
.fw-tp-you a { grid-template-columns: 34px 44px minmax(0, 1fr) auto; text-decoration: none; background: transparent; border: 2px dashed #C9CDE0; }
.fw-tp-you a:hover { border-color: var(--fwg-red); background: #FFF5F5; transform: translateX(6px); }
.fw-tp-you .fw-tp-pos { background: transparent; border: 2px dashed #C9CDE0; color: var(--fwg-muted); }
.fw-tp-you .fw-tp-av { background: var(--fwg-red); font-size: 1.5rem; animation: fw-tp-pulse 2.2s ease-in-out infinite; }
.fw-tp-you b { color: var(--fwg-ink); }
.fw-tp-go { font-weight: 800; color: var(--fwg-red); white-space: nowrap; }
@keyframes fw-tp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,0,0,.35); } 50% { box-shadow: 0 0 0 9px rgba(224,0,0,0); } }

.fw-tp-leagues { position: relative; overflow: hidden; background: var(--fwg-ink); color: #fff; border-radius: 30px; display: flex; transition: transform .3s, box-shadow .3s; isolation: isolate; }
.fw-tp-leagues::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.12); z-index: -1; }
.fw-tp-leagues:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0,0,40,.25); }
.fw-tp-lg-in { padding: 2.8rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; width: 100%; }
.fw-tp-leagues h2 { color: #fff; margin-bottom: .2rem; }
.fw-tp-body p { color: rgba(255,255,255,.86); font-size: 1.05rem; line-height: 1.6; margin: 0 0 .6rem; }
.fw-tp-body a { color: #fff; }
.fw-tp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .28; }
.fw-tp-leagues.has-img { background: linear-gradient(160deg, rgba(10,12,43,.92), rgba(10,12,43,.75)); }
.fw-tp-btns { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-top: .4rem; }
.fw-tp-link { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .fw-tp-row { grid-template-columns: 30px 38px minmax(0, 1fr) 62px; gap: .7rem; padding: .7rem .8rem; }
  .fw-tp-row .fw-move { display: none; }
  .fw-tp-you a { grid-template-columns: 30px 38px minmax(0, 1fr) auto; gap: .7rem; padding: .7rem .8rem; }
  .fw-tp-pos { width: 30px; height: 30px; } .fw-tp-av { width: 38px; height: 38px; border-radius: 12px; }
  .fw-tp-head { flex-direction: column-reverse; gap: .3rem; }
  .fw-tp-you b { white-space: normal; font-size: .95rem; }
  .fw-tp-leagues { border-radius: 22px; }
  .fw-tp-lg-in { padding: 1.9rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .fw-tp-bar i, .fw-tp-you .fw-tp-av { animation: none !important; } }