/* LA ROSA */

.squad { display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }

/* ---- punteggio e record, sempre in alto ---- */
.squad__scores { display: flex; align-items: baseline; gap: var(--s-4); }

.squad__score {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--chalk);
}

.squad__best {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
}
.squad__best strong { font-size: var(--t-md); color: var(--chalk-3); }
.squad__best--beaten strong { color: var(--lime); }
.squad__best--beaten .label { color: var(--lime-deep); }

/* ---- identità squadra ---- */
.squad__banner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--team-a) 22%, transparent) 0%,
      color-mix(in srgb, var(--team-b) 12%, transparent) 55%,
      transparent 100%),
    var(--ink-850);
  overflow: hidden;
  position: relative;
}
.squad__banner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 0% 0%, rgba(255,255,255,0.07), transparent 60%);
  pointer-events: none;
}
.squad__ident { min-width: 0; }
.squad__team { font-size: clamp(1.8rem, 7vw, 3rem); line-height: 0.9; }
.squad__season { margin-top: var(--s-2); color: var(--chalk-3); }

/* ---- cronometro ---- */
.timer {
  position: relative;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.timer__fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  opacity: 0.34;
  will-change: transform;
}
.timer__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--chalk);
}
.timer--urgent .timer__fill { background: linear-gradient(90deg, var(--amber), var(--flare)); opacity: 0.5; }
.timer--urgent .timer__num { color: var(--flare); animation: tick-urgent 1s var(--e-out) infinite; }

/* ---- campo di digitazione ---- */
.squad__form { position: relative; }
.squad__input {
  width: 100%;
  height: 62px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  color: var(--chalk);
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
}
.squad__input::placeholder { color: var(--chalk-4); font-weight: 400; }
.squad__input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-glow);
}
.squad__input--bad { animation: flash-bad 340ms var(--e-out); border-color: var(--flare) !important; }
.squad__input:disabled { opacity: 0.5; }

.squad__progress { color: var(--chalk-4); }

/* ---- griglia delle caselle ---- */
.squad__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s-2);
  padding-bottom: var(--s-6);
}

.slot {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border: 1px dashed rgba(237,232,218,0.14);
  background: rgba(237,232,218,0.015);
  transform: rotate(var(--tilt, 0deg));
  transition: border-color var(--d-base) linear, background var(--d-base) linear;
}

.slot__n {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot--filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--lime) 45%, transparent);
  background: color-mix(in srgb, var(--lime) 9%, transparent);
  --ring-color: var(--lime-glow);
}
.slot--filled .slot__n { color: var(--chalk); }

.slot--missed {
  border-style: solid;
  border-color: rgba(255,90,60,0.22);
  background: rgba(255,90,60,0.05);
}
.slot--missed .slot__n { color: var(--chalk-3); }

@media (min-width: 46rem) {
  .squad__grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .squad__score { font-size: 3rem; }
}

/* partita in pausa: la scheda è in secondo piano */
.timer--paused .timer__fill { filter: grayscale(1); opacity: 0.18; }
.timer--paused .timer__num::after {
  content: ' ⏸';
  color: var(--chalk-3);
}

/* il suggerimento a pagamento, in un angolo del campo di digitazione */
.squad__hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 42px;
  font-size: 0.8rem;
  padding-inline: var(--s-4);
}
.squad__input { padding-right: 9.5rem; }

/* la casella con le sole iniziali */
.slot--ghost {
  border-style: solid;
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.slot--ghost .slot__n { color: var(--amber); letter-spacing: 0.12em; }