/* ══════════════════════════════════════════════════════════════════════════
   FantaLocuste — "champ select" delle Locuste
   Cornici oro hextech, fondo a nido d'ape, verde Locusta per ciò che è tuo.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --fx-ink:      #06080a;
  --fx-panel:    #0d1114;
  --fx-panel-2:  #12181c;
  --fx-gold:     #c8aa6e;
  --fx-gold-hi:  #f0e6d2;
  --fx-gold-lo:  #785a28;
  --fx-green:    var(--green-bright);
  --fx-red:      #e0574f;
  --fx-mute:     #7d8a8f;
  --fx-display:  'Cinzel', 'Rajdhani', serif;
  --fx-mono:     'JetBrains Mono', 'Courier New', monospace;
  --fx-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23c8aa6e' stroke-opacity='.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.fx-page {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200, 170, 110, .10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(77, 184, 77, .06), transparent 70%),
    var(--fx-hex), var(--fx-ink);
  color: var(--gray-light);
  padding-bottom: 5rem;
}

.fx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1rem; }

/* ── Titoli ─────────────────────────────────────────────────────────────── */
.fx-eyebrow {
  font-family: var(--font-title); font-weight: 700; font-size: .72rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--fx-gold);
}
.fx-title {
  font-family: var(--fx-display); font-weight: 700; line-height: .95; margin: .4rem 0 0;
  font-size: clamp(2.4rem, 8vw, 5.2rem); letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--fx-gold-hi) 0%, var(--fx-gold) 55%, var(--fx-gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 18px rgba(200, 170, 110, .18));
}
.fx-title em { font-style: normal; color: var(--fx-green); -webkit-text-fill-color: var(--fx-green); }
.fx-h2 {
  font-family: var(--fx-display); color: var(--fx-gold-hi); font-size: 1.35rem;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.fx-h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--fx-gold-lo), transparent); }

/* ── Cornice hextech riusabile ─────────────────────────────────────────── */
.fx-frame {
  position: relative; background: linear-gradient(180deg, var(--fx-panel-2), var(--fx-panel));
  border: 1px solid rgba(200, 170, 110, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .45);
}
.fx-frame::before, .fx-frame::after {
  content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--fx-gold);
  pointer-events: none;
}
.fx-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fx-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ── Bottone "lock in" ─────────────────────────────────────────────────── */
.fx-lockin {
  --c: var(--fx-gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: 1rem 1.4rem; cursor: pointer;
  font-family: var(--fx-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fx-ink); text-decoration: none;
  background: linear-gradient(180deg, var(--fx-gold-hi), var(--fx-gold) 45%, #a88947);
  border: 1px solid var(--fx-gold-hi);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: filter var(--transition), transform var(--transition);
}
.fx-lockin:hover:not(:disabled) { filter: brightness(1.12); color: var(--fx-ink); }
.fx-lockin:active:not(:disabled) { transform: scale(.985); }
.fx-lockin:disabled { cursor: not-allowed; filter: grayscale(.9) brightness(.55); }
.fx-lockin.is-ready { animation: fx-ready 2.2s ease-in-out infinite; }
.fx-lockin--ghost {
  background: transparent; color: var(--fx-gold-hi); border-color: var(--fx-gold);
  clip-path: none;
}
.fx-lockin--ghost:hover { color: var(--fx-ink); background: var(--fx-gold); }
@keyframes fx-ready { 0%, 100% { box-shadow: 0 0 0 rgba(200, 170, 110, 0); }
                      50%      { box-shadow: 0 0 28px rgba(200, 170, 110, .45); } }

/* ── Timer di blocco (stile draft) ─────────────────────────────────────── */
.fx-clock { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.fx-clock__label { font-family: var(--font-title); font-size: .78rem; letter-spacing: .24em;
                   text-transform: uppercase; color: var(--fx-mute); }
.fx-clock__time { font-family: var(--fx-mono); font-size: clamp(1.4rem, 4.5vw, 2.1rem);
                  color: var(--fx-gold-hi); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.fx-clock.is-hot .fx-clock__time { color: var(--fx-red); animation: fx-blink 1s steps(2) infinite; }
.fx-clockbar { position: relative; height: 3px; background: rgba(200, 170, 110, .12); overflow: hidden; }
.fx-clockbar span {
  position: absolute; inset: 0 auto 0 50%; width: 0; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--fx-gold) 20%, var(--fx-gold-hi) 50%, var(--fx-gold) 80%, transparent);
  transition: width 1s linear;
}
@keyframes fx-blink { 50% { opacity: .55; } }

/* ══════════════════════════════════════════════════════════════════════════
   BUILDER
   ══════════════════════════════════════════════════════════════════════════ */
.fx-draft-top { padding: 1.4rem 0 1rem; text-align: center; }
.fx-draft-top .fx-back { position: absolute; left: 1rem; top: 1.5rem; font-family: var(--font-title);
                         letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--fx-mute); }
.fx-draft-top .fx-back:hover { color: var(--fx-gold-hi); }
.fx-draft-top .fx-clock { margin: .3rem 0 .8rem; }
.fx-notice { margin: 1rem auto; max-width: 720px; padding: .9rem 1.2rem; text-align: center; }

.fx-board { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 960px) { .fx-board { grid-template-columns: 380px 1fr; align-items: start; } }

/* ── Colonna squadra ───────────────────────────────────────────────────── */
.fx-roster { padding: 1.1rem; }
@media (min-width: 960px) { .fx-roster { position: sticky; top: 80px; } }
.fx-name { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.fx-name label { font-family: var(--font-title); font-size: .72rem; letter-spacing: .24em;
                 text-transform: uppercase; color: var(--fx-gold); }
.fx-name input {
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(200, 170, 110, .3); color: var(--white);
  padding: .65rem .8rem; font-family: var(--fx-display); font-size: 1.1rem; letter-spacing: .06em;
  outline: none; border-radius: 0; width: 100%;
}
.fx-name input:focus { border-color: var(--fx-gold); box-shadow: 0 0 0 3px rgba(200, 170, 110, .12); }

.fx-sub { font-family: var(--font-title); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
          color: var(--fx-mute); margin: 1rem 0 .5rem; display: flex; justify-content: space-between; }
.fx-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }

.fx-slot {
  position: relative; display: flex; align-items: center; gap: .75rem; min-height: 64px;
  padding: .5rem .6rem .5rem .5rem; cursor: pointer; overflow: hidden; isolation: isolate;
  background: rgba(0, 0, 0, .35); border: 1px dashed rgba(200, 170, 110, .28);
  transition: border-color var(--transition), background var(--transition);
}
.fx-slot:hover { border-color: rgba(200, 170, 110, .6); }
.fx-slot.is-active { border: 1px solid var(--fx-gold); background: rgba(200, 170, 110, .08);
                     box-shadow: inset 0 0 22px rgba(200, 170, 110, .12); }
.fx-slot.is-filled { border-style: solid; border-color: rgba(200, 170, 110, .35); }
.fx-slot.is-active.is-filled { border-color: var(--fx-gold); }
.fx-slot__splash {
  position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 50% 22%;
  opacity: .55; transform: translateX(18%); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.fx-slot.is-filled .fx-slot__splash { transform: translateX(0); }
.fx-slot__role {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center; color: var(--fx-gold);
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(200, 170, 110, .45);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.fx-slot.is-filled .fx-slot__role { color: var(--fx-green); border-color: var(--fx-green); }
.fx-slot__body { min-width: 0; flex: 1; }
.fx-slot__name { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; color: var(--white);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; }
.fx-slot__name small { color: var(--fx-mute); font-weight: 600; font-size: .75em; margin-left: .15rem; }
.fx-slot__meta { font-size: .72rem; color: var(--gray-light); opacity: .85; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; }
.fx-slot__empty { font-family: var(--font-title); letter-spacing: .16em; text-transform: uppercase;
                  font-size: .82rem; color: var(--fx-mute); }
.fx-slot__btn {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .15); color: var(--fx-mute);
  font-family: var(--fx-display); font-weight: 700; font-size: .8rem; transition: all var(--transition);
}
.fx-slot__btn:hover { color: var(--white); border-color: var(--white); }
.fx-slot__btn--cap.is-on { background: var(--fx-gold); color: var(--fx-ink); border-color: var(--fx-gold-hi);
                           box-shadow: 0 0 14px rgba(200, 170, 110, .6); }
.fx-slot__btn--x:hover { color: var(--fx-red); border-color: var(--fx-red); }
.fx-slot__num { position: absolute; top: 4px; right: 6px; font-family: var(--fx-mono); font-size: .6rem;
                color: var(--fx-gold-lo); }
.fx-slot.just-filled .fx-slot__splash { animation: fx-slam .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes fx-slam { from { transform: translateX(40%); opacity: 0; } to { transform: translateX(0); opacity: .55; } }

.fx-status { margin: 1rem 0 .9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.fx-stat { text-align: center; padding: .5rem .2rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(200, 170, 110, .15); }
.fx-stat b { display: block; font-family: var(--fx-mono); font-size: 1.15rem; color: var(--fx-gold-hi); }
.fx-stat span { font-family: var(--font-title); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fx-mute); }
.fx-stat.is-warn b { color: var(--fx-red); }
#fx-cap { font-size: .85rem; line-height: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-costline { text-align: center; margin: 0 0 .6rem; }
.fx-entry { margin: 0 0 .9rem; padding: .75rem .9rem; text-align: center;
            background: rgba(200, 170, 110, .06); border: 1px solid rgba(200, 170, 110, .25); }
.fx-entry__fee { margin: 0 0 .35rem; font-family: var(--font-title); letter-spacing: .08em; color: var(--gray-light); }
.fx-entry__fee b { color: var(--fx-gold-hi); font-family: var(--fx-mono); }
.fx-entry__note { margin: .2rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--fx-mute); }
.fx-entry__note a { color: var(--fx-gold-hi); text-decoration: underline; text-underline-offset: 2px; }
.fx-hero__cta .fx-entry { margin: .4rem 0 0; }
.fx-msg { min-height: 1.3em; margin: .7rem 0 0; font-size: .85rem; text-align: center; color: var(--fx-mute); }
.fx-msg.is-error { color: var(--fx-red); }
.fx-msg.is-ok { color: var(--fx-green); }

/* ── Pool ──────────────────────────────────────────────────────────────── */
.fx-pool { padding: 1rem; min-width: 0; }
.fx-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.fx-roles { display: flex; gap: .3rem; flex-wrap: wrap; }
.fx-role {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .65rem; cursor: pointer;
  background: rgba(0, 0, 0, .4); border: 1px solid rgba(200, 170, 110, .2); color: var(--fx-mute);
  font-family: var(--font-title); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  transition: all var(--transition);
}
.fx-role:hover { color: var(--fx-gold-hi); border-color: rgba(200, 170, 110, .55); }
.fx-role.is-on { color: var(--fx-ink); background: var(--fx-gold); border-color: var(--fx-gold-hi); }
.fx-role svg { width: 16px; height: 16px; }
.fx-search, .fx-teamsel {
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(200, 170, 110, .25); color: var(--white);
  padding: .5rem .7rem; font-family: var(--font-body); font-size: .85rem; outline: none; border-radius: 0;
}
.fx-search { flex: 1 1 160px; min-width: 0; }
.fx-teamsel { flex: 0 1 200px; }
.fx-search:focus, .fx-teamsel:focus { border-color: var(--fx-gold); }
.fx-hint { font-size: .8rem; color: var(--fx-mute); margin: -.3rem 0 .9rem; }
.fx-hint b { color: var(--fx-gold-hi); font-weight: 600; }

.fx-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.fx-card {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0;
  background: var(--fx-panel-2); border: 1px solid rgba(200, 170, 110, .18); color: inherit; overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), filter var(--transition);
  animation: fx-in .45s both; animation-delay: calc(var(--i, 0) * 18ms);
}
.fx-card:hover { transform: translateY(-3px); border-color: var(--fx-gold); }
.fx-card:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-card__art { position: relative; aspect-ratio: 1 / 1; background: #000 center / cover no-repeat; }
.fx-card__art::after { content: ''; position: absolute; inset: 0;
                       background: linear-gradient(180deg, transparent 45%, rgba(6, 8, 10, .95)); }
.fx-card__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fx-display);
                     font-size: 2.2rem; color: var(--fx-gold-lo); }
.fx-card__role { position: absolute; top: 6px; left: 6px; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center;
                 color: var(--fx-gold-hi); background: rgba(0, 0, 0, .7); border: 1px solid rgba(200, 170, 110, .5); }
.fx-card__role svg { width: 16px; height: 16px; }
.fx-card__logo { position: absolute; top: 6px; right: 6px; z-index: 1; width: 26px; height: 26px; object-fit: contain;
                 background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .12); padding: 2px; }
.fx-card__rank { position: absolute; left: 6px; bottom: 6px; z-index: 1; font-family: var(--font-title); font-weight: 700;
                 font-size: .7rem; letter-spacing: .06em; color: var(--fx-gold-hi); text-transform: uppercase; }
.fx-card__body { padding: .5rem .55rem .6rem; }
.fx-card__name { font-family: var(--font-title); font-weight: 700; font-size: .98rem; color: var(--white); line-height: 1.1;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-card__team { font-size: .7rem; color: var(--fx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.fx-card__flag { position: absolute; inset: auto 0 auto 0; top: 42%; z-index: 2; text-align: center; font-family: var(--fx-display);
                 font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; padding: .3rem 0;
                 background: rgba(6, 8, 10, .82); display: none; }
.fx-card.is-picked { border-color: var(--fx-green); box-shadow: 0 0 0 1px var(--fx-green), 0 0 18px rgba(77, 184, 77, .25); }
.fx-card.is-picked .fx-card__flag { display: block; color: var(--fx-green); }
.fx-card.is-blocked { filter: grayscale(1) brightness(.55); cursor: not-allowed; }
.fx-card.is-blocked:hover { transform: none; border-color: rgba(200, 170, 110, .18); }
.fx-card.is-blocked .fx-card__flag { display: block; color: var(--fx-red); }
.fx-empty { grid-column: 1 / -1; text-align: center; color: var(--fx-mute); padding: 2rem 0; }

/* barra di salvataggio fissa su mobile */
@media (max-width: 959px) {
  .fx-savebar { position: sticky; bottom: 0; z-index: 20; margin: 0 -1.1rem -1.1rem; padding: .8rem 1.1rem;
                background: linear-gradient(0deg, var(--fx-ink) 70%, transparent); }
  .fx-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .fx-draft-top .fx-back { position: static; display: inline-block; margin-bottom: .6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME
   ══════════════════════════════════════════════════════════════════════════ */
.fx-hero { position: relative; padding: 3.5rem 0 2.5rem; text-align: center; overflow: hidden; }
.fx-hero__crest {
  position: absolute; left: 50%; top: 52%; width: min(560px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 170, 110, .08); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 40px rgba(200, 170, 110, .02), 0 0 0 90px rgba(200, 170, 110, .015);
}
.fx-hero__sub { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .14em; color: var(--gray-light);
                text-transform: uppercase; margin: .9rem 0 1.8rem; }
.fx-hero__cta { max-width: 420px; margin: 1.6rem auto 0; display: grid; gap: .6rem; }
.fx-hero .fx-clock { animation: fx-in .6s .15s both; }

.fx-section { margin-top: 2.6rem; }
.fx-grid-4 { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fx-rule { padding: 1.1rem 1.1rem 1rem; }
.fx-rule__big { font-family: var(--fx-display); font-weight: 700; font-size: 2rem; color: var(--fx-gold-hi); line-height: 1; }
.fx-rule__big small { font-size: .5em; color: var(--fx-gold); margin-left: .2rem; }
.fx-rule h3 { font-family: var(--font-title); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin: .5rem 0 .3rem; }
.fx-rule p { font-size: .86rem; line-height: 1.55; margin: 0; }

.fx-tablebox { padding: .4rem .2rem; }
.fx-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fx-table td { padding: .6rem .8rem; border-bottom: 1px solid rgba(200, 170, 110, .1); }
.fx-table td:last-child { text-align: right; font-family: var(--fx-mono); font-weight: 700; color: var(--fx-gold-hi); white-space: nowrap; }
.fx-table td.neg { color: var(--fx-red); }
.fx-table tr:last-child td { border-bottom: 0; }
.fx-points { display: grid; gap: .8rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .fx-points { grid-template-columns: minmax(240px, 1fr) 2fr; } }
.fx-tablecap { margin: .5rem .8rem .2rem; font-family: var(--font-title); font-size: .7rem; letter-spacing: .22em;
               text-transform: uppercase; color: var(--fx-gold); }
.fx-table .fx-table__group td { text-align: left; padding-top: .9rem; font-family: var(--font-title); font-size: .68rem; letter-spacing: .2em;
                      text-transform: uppercase; color: var(--fx-mute); border-bottom-color: rgba(200, 170, 110, .25); }
.fx-table--bonus td b { font-family: var(--font-title); color: var(--white); font-weight: 700; letter-spacing: .03em; }
.fx-table__rule { font-size: .82rem; color: var(--gray-light); }
.fx-table td.fx-table__rule { text-align: left; font-family: var(--font-body); font-weight: 400; color: var(--gray-light); white-space: normal; }
.fx-notes { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.6; color: var(--fx-mute); }
.fx-notes b { color: var(--fx-gold-hi); font-weight: 600; }
@media (max-width: 560px) { .fx-table--bonus td { padding: .5rem .45rem; } .fx-table__rule { font-size: .76rem; } }
.fx-note { font-size: .82rem; color: var(--fx-mute); margin: .8rem 0 0; line-height: 1.5; }
.fx-soon { padding: 1.1rem; border-style: dashed; text-align: center; }
.fx-soon b { font-family: var(--fx-display); color: var(--fx-gold-hi); letter-spacing: .08em; display: block; margin-bottom: .3rem; }

.fx-prizes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fx-prize { padding: 1rem; text-align: center; }
.fx-prize__pos { font-family: var(--fx-display); font-weight: 700; font-size: 1.5rem; color: var(--fx-gold); }
.fx-prize__what { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; color: var(--white); margin-top: .3rem; }
.fx-prize--first { border-color: var(--fx-gold); background: linear-gradient(180deg, rgba(200, 170, 110, .16), var(--fx-panel)); }
.fx-prize--first .fx-prize__pos { color: var(--fx-gold-hi); }

.fx-myteam { padding: 1.1rem; }
.fx-myteam__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.fx-myteam__name { font-family: var(--fx-display); font-size: 1.5rem; color: var(--fx-gold-hi); letter-spacing: .05em; }
.fx-myteam__meta { font-size: .8rem; color: var(--fx-mute); }
.fx-mini { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.fx-mini__slot { position: relative; padding: .55rem .6rem; background: rgba(0, 0, 0, .4); border: 1px solid rgba(200, 170, 110, .18); min-height: 64px; }
.fx-mini__slot.is-bench { border-style: dashed; }
.fx-mini__label { font-family: var(--font-title); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fx-gold); }
.fx-mini__name { font-family: var(--font-title); font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-mini__team { font-size: .7rem; color: var(--fx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-mini__cap { position: absolute; top: .4rem; right: .45rem; width: 18px; height: 18px; display: grid; place-items: center;
                font-family: var(--fx-display); font-size: .65rem; font-weight: 700; background: var(--fx-gold); color: var(--fx-ink); }

.fx-rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fx-round { padding: .6rem .8rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(200, 170, 110, .15); }
.fx-round b { display: block; font-family: var(--font-title); color: var(--white); letter-spacing: .06em; }
.fx-round span { font-size: .78rem; color: var(--fx-mute); }
.fx-round.is-next { border-color: var(--fx-gold); box-shadow: inset 0 0 18px rgba(200, 170, 110, .1); }
.fx-round.is-next span { color: var(--fx-gold-hi); }
.fx-round.is-done { opacity: .55; }

.fx-entries { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 1.2rem; }
.fx-entries li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid rgba(200, 170, 110, .08); display: flex; justify-content: space-between; gap: .6rem; }
.fx-entries b { font-family: var(--font-title); color: var(--white); letter-spacing: .04em; }
.fx-entries span { font-size: .78rem; color: var(--fx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-entries a { color: inherit; text-decoration: none; }
.fx-entries a b::after { content: ' ›'; color: var(--fx-gold); }
.fx-entries a:hover b, .fx-entries a:focus-visible b { color: var(--fx-gold-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMAZIONE DI UNA SQUADRA (pubblica dopo il blocco)
   ══════════════════════════════════════════════════════════════════════════ */
.fx-teamview { max-width: 640px; }
.fx-teamview__name { font-family: var(--fx-display); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.05;
                     color: var(--fx-gold-hi); letter-spacing: .05em; margin: .4rem 0 .2rem; overflow-wrap: anywhere; }
.fx-teamview__owner { margin: 0; font-size: .85rem; color: var(--fx-mute); }
.fx-teamview__box { padding: .2rem 1.1rem 1.1rem; }
.fx-teamview__cta { max-width: 360px; margin: 1.4rem auto 0; }
.fx-roundtabs { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.fx-roundtabs a {
  display: block; padding: .45rem .8rem; text-decoration: none; background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(200, 170, 110, .18); color: var(--fx-mute);
  font-family: var(--font-title); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.fx-roundtabs a:hover { color: var(--fx-gold-hi); border-color: rgba(200, 170, 110, .55); }
.fx-roundtabs a.is-on { color: var(--fx-ink); background: var(--fx-gold); border-color: var(--fx-gold-hi); }
.fx-slot--view, .fx-slot--view:hover { cursor: default; border-color: rgba(200, 170, 110, .35); }
.fx-slot--view .fx-slot__btn { cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   PUNTI · CLASSIFICA · PAGELLE
   ══════════════════════════════════════════════════════════════════════════ */
.fx-badge { display: inline-block; padding: .15rem .5rem; border: 1px solid var(--fx-gold); color: var(--fx-gold-hi);
            font-family: var(--font-title); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
            vertical-align: middle; background: rgba(200, 170, 110, .08); }
.fx-state { margin: .2rem 0 .8rem; font-size: .82rem; color: var(--fx-mute); line-height: 1.5; }
.fx-draft-top .fx-state { margin-top: .5rem; }
.fx-links { max-width: 360px; margin: 1rem auto 0; }

.fx-standings th { padding: .55rem .8rem; font-family: var(--font-title); font-size: .66rem; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--fx-mute); text-align: left;
                   border-bottom: 1px solid rgba(200, 170, 110, .25); }
.fx-standings th:nth-child(n+3) { text-align: right; }
.fx-standings__pos { width: 2.4rem; font-family: var(--fx-mono); font-weight: 700; color: var(--fx-gold); }
.fx-standings__team a { font-family: var(--font-title); font-weight: 700; color: var(--white); text-decoration: none;
                        letter-spacing: .03em; overflow-wrap: anywhere; }
.fx-standings__team a:hover, .fx-standings__team a:focus-visible { color: var(--fx-gold-hi); text-decoration: underline;
                                                                  text-underline-offset: 3px; }
.fx-standings__team small { display: block; font-size: .72rem; color: var(--fx-mute); }
.fx-table td.fx-standings__last { text-align: right; font-family: var(--fx-mono); color: var(--gray-light); white-space: nowrap; }
.fx-standings tr.is-me td { background: rgba(77, 184, 77, .07); }
.fx-standings tr.is-me .fx-standings__team a { color: var(--fx-green); }
@media (max-width: 560px) { .fx-standings th, .fx-standings td { padding: .5rem .45rem; } }

/* pagella in una riga: risultato + voci, sotto il nome */
.fx-score { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; font-size: .76rem; }
.fx-score.is-wait, .fx-score.is-dnp, .fx-score.is-sub { color: var(--fx-mute); font-style: italic; }
.fx-score.is-sub { color: var(--fx-green); font-style: normal; }
.fx-score b { color: var(--fx-gold-hi); font-style: normal; }
.fx-chip { display: inline-flex; gap: .3rem; align-items: baseline; padding: .12rem .45rem; white-space: nowrap;
           background: rgba(0, 0, 0, .55); border: 1px solid rgba(200, 170, 110, .22); color: var(--gray-light); }
.fx-chip b { font-family: var(--fx-mono); font-weight: 700; color: var(--fx-green); }
.fx-chip.is-neg b { color: var(--fx-red); }
.fx-chip--result { border-color: rgba(200, 170, 110, .55); color: var(--white); }
.fx-chip--result b { color: var(--fx-gold-hi); }
.fx-score__stats { margin-top: .3rem; font-family: var(--fx-mono); font-size: .7rem; color: var(--fx-mute); }

/* formazione: punti a destra dello slot */
.fx-slot.has-score .fx-slot__meta { white-space: normal; }
.fx-slot__pts { flex: 0 0 auto; min-width: 2.6rem; text-align: right; font-family: var(--fx-mono); font-weight: 700;
                font-size: 1.35rem; color: var(--fx-gold-hi); text-shadow: 0 1px 8px #000; }
.fx-slot__pts.is-bench { font-size: 1rem; color: var(--fx-mute); }
.fx-teamview__total { display: flex; align-items: baseline; justify-content: center; gap: .7rem; margin: 0 0 .9rem;
                      font-family: var(--font-title); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
                      color: var(--fx-mute); }
.fx-teamview__total b { font-family: var(--fx-mono); font-size: 2.2rem; letter-spacing: 0; color: var(--fx-gold-hi); }
.fx-teamview__foot a { color: var(--fx-gold-hi); }

/* pagelle */
.fx-ratings { max-width: 860px; }
.fx-rate { padding: .9rem 1rem 1rem; margin-top: 1rem; }
/* minmax(0, …): senza, le colonne non scendono sotto la larghezza del testo e su mobile il riquadro esce dallo schermo */
.fx-rate__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.fx-rate__team { display: flex; align-items: center; gap: .5rem; min-width: 0; font-family: var(--font-title);
                 font-weight: 700; color: var(--white); letter-spacing: .03em; }
.fx-rate__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rate__team.is-right { justify-content: flex-end; text-align: right; }
.fx-rate__team img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.fx-rate__score { font-family: var(--fx-mono); font-weight: 700; font-size: 1.4rem; color: var(--fx-gold-hi); }
.fx-rate__score i { font-style: normal; color: var(--fx-gold-lo); margin: 0 .2rem; }
.fx-rate__meta { margin: .3rem 0 .6rem; text-align: center; font-size: .76rem; color: var(--fx-mute); }
.fx-rate__meta a { color: var(--fx-gold-hi); }
.fx-rate__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.fx-rate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .55rem .7rem;
                background: rgba(0, 0, 0, .35); border: 1px solid rgba(200, 170, 110, .14); }
.fx-rate__row.is-best { border-color: var(--fx-gold); box-shadow: inset 0 0 18px rgba(200, 170, 110, .12); }
.fx-rate__who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.fx-rate__role { color: var(--fx-green); display: grid; place-items: center; }
.fx-rate__name { font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--white);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rate__champs { display: inline-flex; gap: 2px; margin-left: auto; }
.fx-rate__champs img { width: 24px; height: 24px; border: 1px solid rgba(200, 170, 110, .35); }
.fx-rate__body { grid-column: 1; min-width: 0; }
.fx-rate__body .fx-score { margin-top: 0; }
.fx-rate__vote { grid-column: 2; grid-row: 1 / span 2; font-family: var(--fx-mono); font-weight: 700; font-size: 1.6rem;
                 color: var(--fx-gold-hi); min-width: 2.8rem; text-align: right; }
.fx-rate__vote.is-neg { color: var(--fx-red); }
.fx-rate__row.is-best .fx-rate__vote::before { content: '★ '; font-size: .7em; color: var(--fx-gold); }
.fx-rate__dnp { margin: .6rem 0 0; font-size: .78rem; color: var(--fx-mute); }
.fx-rate__forfeit { margin: .2rem 0 0; font-size: .8rem; line-height: 1.7; color: var(--gray-light); }
.fx-rate__forfeit .fx-chip { margin-right: .4rem; }
.fx-rate__forfeit .fx-chip.is-neg b { color: var(--fx-red); }
@media (max-width: 560px) {
  .fx-rate { padding: .8rem .6rem .9rem; }
  .fx-rate__team img { width: 24px; height: 24px; }
  .fx-rate__team { font-size: .85rem; }
  .fx-rate__score { font-size: 1.15rem; }
  .fx-rate__row { padding: .5rem .5rem; gap: .2rem .5rem; }
  .fx-rate__vote { font-size: 1.3rem; min-width: 2.2rem; }
  .fx-rate__champs img { width: 20px; height: 20px; }
}
.fx-ratings .fx-notes a { color: var(--fx-gold-hi); }

@media (prefers-reduced-motion: reduce) {
  .fx-card, .fx-hero .fx-clock, .fx-lockin.is-ready, .fx-slot.just-filled .fx-slot__splash { animation: none !important; }
}