/* ============================================================================
   LE TRATTATIVE CON GLI SPONSOR (public/aiuto/trattative.js): le finestre animate (arrivo della proposta col logo
   che si rivela in 3D con un colpo di luce, la trattativa, la firma con le zone e la chiusura col timbro), la scheda
   degli sponsor nella Squadra e nella Carriera, i diritti TV nei Conti. Solo trasformazioni e opacità; con
   prefers-reduced-motion niente 3D né particelle, solo dissolvenze. Stesso linguaggio della 2.0: Saira Condensed
   corsivo maiuscolo, vetro scuro, il colore della scuderia (--team), il cordolo.
   ============================================================================ */
:root { --tt-ease: cubic-bezier(.2, .8, .2, 1); --tt-spring: cubic-bezier(.34, 1.36, .5, 1); --tt-display: var(--display, "Saira Condensed", "Arial Narrow", system-ui, sans-serif); }

/* ------------------------------------------------------------------ il velo */
.tt-ov { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px 14px;
  background: radial-gradient(70rem 46rem at 50% 38%, rgba(var(--team-rgb, 255,122,26), .2), rgba(4,5,8,.95) 68%), rgba(4,5,8,.9);
  opacity: 0; transition: opacity .3s var(--tt-ease); overflow: hidden auto; color: var(--text, #F1F3F7); font-family: var(--sans, system-ui, sans-serif); }
.tt-ov.on { opacity: 1; }
/* è anche una .modal (per i comandi col controller): niente sfocatura né riquadro delle finestre del gestionale */
.tt-ov.modal, .tt-ov.modal.show { display: grid; padding: max(14px, env(safe-area-inset-top)) 14px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 150; }
.tt-ov canvas.tt-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tt-x { position: absolute; top: .8rem; right: .8rem; z-index: 5; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,12,16,.7); color: #fff; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tt-x:hover { background: rgba(255,255,255,.12); }
.tt-skip { position: fixed; right: 1rem; bottom: 1rem; z-index: 6; font: 700 .62rem var(--mono, monospace); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .45rem .8rem; cursor: pointer; }
.tt-ov.done .tt-skip { display: none; }

/* ------------------------------------------------------------------ 1. l'arrivo: il logo si rivela in 3D */
.tt-arrive { position: relative; z-index: 2; width: min(94vw, 980px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 40px); align-items: center; }
.tt-scene { position: relative; perspective: 1100px; perspective-origin: 50% 40%; width: 100%; aspect-ratio: 16 / 10; }
.tt-plate { position: absolute; inset: 6% 4%; transform-style: preserve-3d; transform: rotateY(-78deg) rotateX(12deg) translateZ(-260px) scale(.86); opacity: 0; will-change: transform; }
.tt-face, .tt-edge { position: absolute; inset: 0; border-radius: 1.2rem; }
.tt-face { display: grid; place-items: center; overflow: hidden; background: var(--ground, #fff); backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -12px 30px rgba(0,0,0,.12), 0 30px 80px rgba(0,0,0,.55); }
.tt-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 38%, transparent 62%, rgba(0,0,0,.14)); pointer-events: none; }
.tt-face img { position: absolute; left: 9%; top: 12%; width: 82%; height: 76%; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.tt-edge { background: color-mix(in srgb, var(--ground, #fff) 52%, #000); transform: translateZ(calc(var(--i) * -2.2px)); }
.tt-sheen { position: absolute; inset: 0; border-radius: 1.2rem; overflow: hidden; pointer-events: none; mix-blend-mode: screen; transform: translateZ(1px); }
.tt-sheen::before { content: ''; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -70%; transform: skewX(-14deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5) 40%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.5) 60%, transparent); }
.tt-flare { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.65), rgba(var(--team-rgb, 255,122,26), .3) 38%, transparent 70%); }
.tt-floor { position: absolute; left: 10%; right: 10%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); opacity: 0; transform: scaleX(.4); }

.tt-ov.play .tt-plate { animation: ttPlateIn 1.55s var(--tt-ease) .15s forwards; }
.tt-ov.play .tt-sheen::before { animation: ttSheen .95s cubic-bezier(.3,.6,.2,1) 1.15s forwards; }
.tt-ov.play .tt-flare { animation: ttFlare 1.15s ease-out 1.1s forwards; }
.tt-ov.play .tt-floor { animation: ttFloor 1.2s var(--tt-ease) .5s forwards; }
.tt-ov.done .tt-plate { animation: ttIdle 7s ease-in-out infinite; opacity: 1; transform: none; }
@keyframes ttPlateIn {
  0% { transform: rotateY(-78deg) rotateX(12deg) translateZ(-260px) scale(.86); opacity: 0; }
  22% { opacity: 1; }
  68% { transform: rotateY(10deg) rotateX(-4deg) translateZ(30px) scale(1.02); }
  100% { transform: rotateY(0) rotateX(0) translateZ(0) scale(1); opacity: 1; }
}
@keyframes ttIdle { 0%, 100% { transform: rotateY(-5deg) rotateX(3deg); } 50% { transform: rotateY(5deg) rotateX(-2deg) translateY(-4px); } }
@keyframes ttSheen { to { left: 140%; } }
@keyframes ttFlare { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 28% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes ttFloor { to { opacity: .8; transform: scaleX(1); } }

.tt-info { display: grid; gap: .55rem; min-width: 0; }
.tt-eyebrow { font: 700 .66rem var(--mono, monospace); letter-spacing: .26em; text-transform: uppercase; color: var(--team-hi, #FF9A4D); display: flex; align-items: center; gap: .6rem; }
.tt-eyebrow::before { content: ''; width: 2.2rem; height: .35rem; background: var(--kerb-band, repeating-linear-gradient(90deg, #E5484D 0 .5rem, #E8ECF2 .5rem 1rem)); transform: skewX(-12deg); }
.tt-name { margin: 0; font: 900 italic clamp(2rem, 4.6vw, 3.6rem)/.92 var(--tt-display); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.tt-why { color: var(--text-2, #C3CAD6); font-size: .92rem; line-height: 1.45; }
.tt-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.tt-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font: 600 .7rem var(--mono, monospace); letter-spacing: .04em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text-2, #C3CAD6); white-space: nowrap; }
.tt-chip.k { background: color-mix(in srgb, var(--team, #FF7A1A) 22%, transparent); border-color: color-mix(in srgb, var(--team, #FF7A1A) 55%, transparent); color: #fff; }
.tt-chip.warn { border-color: rgba(240,192,64,.5); color: #F0C040; }
.tt-card { margin-top: .4rem; padding: 1rem 1.1rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(12,14,19,.88);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: grid; gap: .7rem; }
.tt-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tt-num small { display: block; font: 700 .56rem var(--mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #8D97A8); }
.tt-num b { display: block; margin-top: .15rem; font: 800 italic 1.45rem/1 var(--tt-display); letter-spacing: .01em; }
.tt-terms { display: grid; gap: .3rem; font-size: .8rem; color: var(--text-2, #C3CAD6); }
.tt-terms li { list-style: none; display: flex; gap: .5rem; align-items: baseline; }
.tt-terms li::before { content: ''; flex: none; width: .45rem; height: .45rem; transform: skewX(-12deg) translateY(-.05rem); background: var(--team-hi, #FF9A4D); }
.tt-terms ul { margin: 0; padding: 0; display: grid; gap: .3rem; }
.tt-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.tt-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.6rem; padding: .55rem 1.1rem; border: 0; border-radius: .45rem;
  font: 800 italic .95rem var(--tt-display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: transform .15s var(--tt-ease), background .2s; }
.tt-btn:hover { background: rgba(255,255,255,.14); }
.tt-btn:active { transform: scale(.97); }
.tt-btn.pri { color: var(--team-ink, #160C04); background: linear-gradient(135deg, color-mix(in srgb, var(--team, #FF7A1A) 85%, #fff), var(--team, #FF7A1A)); box-shadow: 0 8px 22px rgba(var(--team-rgb, 255,122,26), .35); }
.tt-btn.pri:hover { filter: brightness(1.08); }
.tt-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: var(--text-2, #C3CAD6); }
.tt-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.tt-btn:focus-visible { outline: 2px solid var(--team-hi, #FF9A4D); outline-offset: 3px; }

.tt-ov .tt-up { opacity: 0; transform: translateY(14px); }
.tt-ov.play .tt-up { animation: ttUp .55s var(--tt-ease) forwards; animation-delay: var(--d, 1s); }
.tt-ov.done .tt-up { opacity: 1; transform: none; }
@keyframes ttUp { to { opacity: 1; transform: none; } }
/* saltare l'animazione: tutto subito alla fine */
.tt-ov.skip *, .tt-ov.skip *::before, .tt-ov.skip *::after { animation-delay: 0s !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }

/* ------------------------------------------------------------------ 2. la trattativa */
.tt-win { position: relative; z-index: 2; width: min(96vw, 1060px); max-height: calc(100dvh - 28px); overflow: auto; border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01) 30%), rgba(10,12,16,.94); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.6); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .45s var(--tt-ease), opacity .3s; }
.tt-ov.on .tt-win { transform: none; opacity: 1; }
.tt-win::before { content: ''; position: sticky; top: 0; display: block; height: .32rem; z-index: 3; background: var(--kerb-band, repeating-linear-gradient(90deg, #E5484D 0 .55rem, #E8ECF2 .55rem 1.1rem)); opacity: .85; }
.tt-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 3.6rem 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.tt-mini { width: clamp(5.5rem, 14vw, 8.5rem); aspect-ratio: 16 / 10; perspective: 600px; }
.tt-mini .tt-plate { inset: 0; opacity: 1; transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg)); transition: transform .5s var(--tt-ease); animation: none; }
.tt-mini .tt-face { border-radius: .7rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 26px rgba(0,0,0,.5); }
.tt-mini .tt-edge { border-radius: .7rem; }
.tt-head h2 { margin: 0; font: 900 italic clamp(1.4rem, 3vw, 2.1rem)/.95 var(--tt-display); text-transform: uppercase; }
.tt-head .tt-sub { margin-top: .3rem; color: var(--muted, #8D97A8); font-size: .78rem; }
.tt-mood { display: grid; justify-items: center; gap: .1rem; min-width: 7.5rem; }
.tt-mood svg { width: 7.5rem; height: 4.3rem; overflow: visible; }
.tt-mood .needle { transform-origin: 60px 58px; transition: transform .9s var(--tt-spring); }
.tt-mood b { font: 800 italic 1rem var(--tt-display); text-transform: uppercase; letter-spacing: .03em; }
.tt-mood small { font: 600 .58rem var(--mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #8D97A8); }
.tt-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; }
.tt-pane { padding: 1rem 1.2rem; min-width: 0; }
.tt-pane + .tt-pane { border-left: 1px solid rgba(255,255,255,.07); }
.tt-h { margin: 0 0 .6rem; font: 700 .6rem var(--mono, monospace); letter-spacing: .22em; text-transform: uppercase; color: var(--muted, #8D97A8); display: flex; justify-content: space-between; gap: .5rem; }
.tt-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 7rem; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.tt-row:first-of-type { border-top: 0; }
.tt-row label { font-weight: 650; font-size: .86rem; }
.tt-row label small { display: block; font-weight: 500; color: var(--muted, #8D97A8); font-size: .7rem; }
.tt-row output { text-align: right; font: 800 italic 1.12rem var(--tt-display); }
.tt-row output small { display: block; font: 600 .62rem var(--mono, monospace); color: var(--muted, #8D97A8); font-style: normal; letter-spacing: .02em; }
.tt-range { position: relative; height: 2rem; display: flex; align-items: center; }
.tt-range input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: .4rem; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; margin: 0; padding: 0; border: 0; }
.tt-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; border: 3px solid var(--team, #FF7A1A); box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; }
.tt-range input[type=range]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 3px solid var(--team, #FF7A1A); cursor: pointer; }
.tt-range .tick { position: absolute; top: .2rem; width: 2px; height: 1.6rem; background: var(--good, #35D07F); border-radius: 2px; pointer-events: none; transform: translateX(-50%); transition: left .6s var(--tt-ease); }
.tt-range .tick::after { content: attr(data-l); position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); font: 700 .55rem var(--mono, monospace); color: var(--good, #35D07F); white-space: nowrap; }
.tt-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tt-seg button { min-height: 2.1rem; padding: .3rem .7rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text-2, #C3CAD6); font: 700 .78rem var(--sans, system-ui); cursor: pointer; }
.tt-seg button[aria-pressed=true] { background: color-mix(in srgb, var(--team, #FF7A1A) 26%, transparent); border-color: var(--team, #FF7A1A); color: #fff; }
.tt-seg button:disabled { opacity: .45; cursor: not-allowed; }
.tt-total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: .6rem; padding: .7rem .8rem; border-radius: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.tt-total b { font: 800 italic 1.35rem var(--tt-display); }
.tt-total small { color: var(--muted, #8D97A8); font-size: .72rem; }
.tt-extra { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tt-chat { display: grid; gap: .55rem; max-height: 22rem; overflow: auto; padding-right: .2rem; }
.tt-msg { max-width: 92%; padding: .55rem .75rem; border-radius: .8rem; font-size: .82rem; line-height: 1.4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.tt-msg.me { justify-self: end; background: color-mix(in srgb, var(--team, #FF7A1A) 16%, rgba(255,255,255,.03)); border-color: color-mix(in srgb, var(--team, #FF7A1A) 35%, transparent); }
.tt-msg small { display: block; margin-bottom: .2rem; font: 700 .56rem var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8D97A8); }
.tt-msg.new { animation: ttMsg .45s var(--tt-ease) both; }
.tt-msg.ok { border-color: rgba(53,208,127,.5); }
.tt-msg.bad { border-color: rgba(229,89,94,.55); }
@keyframes ttMsg { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.tt-banner { margin: 0 1.2rem 0; padding: .7rem .9rem; border-radius: .6rem; font-weight: 700; display: none; }
.tt-banner.ok { display: block; background: rgba(53,208,127,.12); border: 1px solid rgba(53,208,127,.45); color: #7FE7B0; animation: ttMsg .4s var(--tt-ease); }
.tt-banner.bad { display: block; background: rgba(229,89,94,.12); border: 1px solid rgba(229,89,94,.45); color: #F59A9D; animation: ttMsg .4s var(--tt-ease); }
.tt-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .9rem 1.2rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); position: sticky; bottom: 0; background: rgba(10,12,16,.96); }
.tt-foot .left { margin-right: auto; color: var(--muted, #8D97A8); font-size: .74rem; align-self: center; }
.tt-gone .tt-mini .tt-plate { transform: rotateX(80deg) translateY(30%) !important; opacity: .25; transition: transform 1s cubic-bezier(.5,0,.75,0), opacity 1s; }

/* ------------------------------------------------------------------ 3. la firma: le zone */
.tt-signgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.tt-zonelist { display: grid; gap: .35rem; align-content: start; }
.tt-z { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .45rem .55rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; }
.tt-z:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.tt-z[aria-pressed=true] { border-color: var(--team, #FF7A1A); background: color-mix(in srgb, var(--team, #FF7A1A) 16%, transparent); }
.tt-z:disabled { cursor: not-allowed; opacity: .6; }
.tt-z .box { width: 1.1rem; height: 1.1rem; border-radius: .25rem; border: 2px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: .7rem; font-weight: 900; }
.tt-z[aria-pressed=true] .box { background: var(--team, #FF7A1A); border-color: var(--team, #FF7A1A); color: var(--team-ink, #160C04); }
.tt-z .nm { font-weight: 650; font-size: .84rem; }
.tt-z .nm small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted, #8D97A8); }
.tt-z .vis { width: 3.2rem; height: .32rem; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.tt-z .vis i { display: block; height: 100%; background: var(--team-hi, #FF9A4D); }
.tt-z img { height: 1.2rem; width: auto; max-width: 4.6rem; border-radius: .2rem; }
.tt-preview { margin-top: .5rem; padding: .7rem .8rem; border-radius: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.tt-preview b { font: 800 italic 1.3rem var(--tt-display); }
.tt-preview small { color: var(--muted, #8D97A8); font-size: .72rem; }

/* l'auto in 3D (CSS): le zone sono le sue facce; gira da sola, si trascina */
.tt-car3d { position: relative; width: 100%; aspect-ratio: 16 / 10; perspective: 1400px; perspective-origin: 50% 30%; touch-action: none; user-select: none; cursor: grab; overflow: hidden; border-radius: .8rem;
  background: radial-gradient(60% 50% at 50% 70%, rgba(255,255,255,.06), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)); }
.tt-car3d:active { cursor: grabbing; }
.tt-car3d .floor { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); }
.tt-car3d .rig { position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--k, 1)) rotateX(var(--pitch, -24deg)) rotateY(var(--yaw, -32deg)); }
.tt-car3d .rig.spin { transition: transform .8s var(--tt-ease); }
.tt-f { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: visible; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--car, #FF7A1A) 92%, #fff), var(--car, #FF7A1A) 60%, color-mix(in srgb, var(--car, #FF7A1A) 70%, #000)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.tt-f.dark { background: linear-gradient(180deg, #2A3240, #10141B); }
.tt-f.glass { background: linear-gradient(180deg, rgba(150,190,230,.55), rgba(20,30,45,.85)); }
.tt-f.zone { cursor: pointer; }
.tt-f.zone::after { content: ''; position: absolute; inset: 0; border: 2px dashed transparent; pointer-events: none; transition: border-color .2s, background .2s; }
.tt-f.zone.free::after { border-color: rgba(255,255,255,.55); }
.tt-f.zone.want::after { border-color: var(--good, #35D07F); }
.tt-f.zone.sel::after { border: 3px solid #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 18px rgba(255,255,255,.45); }
.tt-f.zone.hot::after { border-color: #fff; background: rgba(255,255,255,.12); }
.tt-f img { max-width: 86%; max-height: 72%; object-fit: contain; pointer-events: none; }
.tt-f .lbl { position: absolute; font: 800 italic .7rem var(--tt-display); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; }
.tt-wheel { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, #9AA3B2 0 22%, #2A2F38 24% 40%, #0B0D11 42% 100%); box-shadow: inset 0 0 0 3px #050608; }
.tt-carhint { position: absolute; left: .7rem; bottom: .6rem; font: 600 .62rem var(--mono, monospace); letter-spacing: .08em; color: rgba(255,255,255,.55); }

/* il pilota (tuta e casco), davanti e dietro */
.tt-suit { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.tt-suit svg { width: 100%; height: auto; }
.tt-suit .cap { text-align: center; font: 700 .58rem var(--mono, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--muted, #8D97A8); }
.tt-suit .zone { cursor: pointer; transition: opacity .2s; }
.tt-suit .zone .hit { fill: transparent; stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.tt-suit .zone.taken .hit { stroke: rgba(255,255,255,.15); stroke-dasharray: none; }
.tt-suit .zone.want .hit { stroke: var(--good, #35D07F); }
.tt-suit .zone.sel .hit { fill: rgba(255,255,255,.2); stroke: #fff; stroke-width: 2.2; stroke-dasharray: none; }
.tt-suit .zone:hover .hit { fill: rgba(255,255,255,.12); }

/* ------------------------------------------------------------------ le schede nel gestionale */
.tt-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 14px; padding: 6px 0 4px; }
.tt-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 4px 0 8px; font-size: .82rem; color: var(--text-2, #C3CAD6); }
.tt-title b { font: 800 italic 1.05rem var(--tt-display); text-transform: uppercase; color: #fff; }
.tt-list { display: grid; gap: .45rem; }
.tt-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .55rem .6rem; border-radius: .6rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.tt-item.fresh { border-color: color-mix(in srgb, var(--team, #FF7A1A) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--team, #FF7A1A) 30%, transparent) inset; }
.tt-item .lg { height: 2.3rem; width: auto; max-width: 6.5rem; border-radius: .35rem; display: block; }
.tt-item .t { font-weight: 700; font-size: .86rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tt-item .d { color: var(--muted, #8D97A8); font-size: .72rem; margin-top: .12rem; line-height: 1.35; }
.tt-item .r { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tt-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.tt-empty { color: var(--muted, #8D97A8); font-size: .8rem; padding: .5rem 0; }
.tt-sec { margin: 12px 0 6px; font: 700 .6rem var(--mono, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--muted, #8D97A8); display: flex; gap: .6rem; align-items: center; }
.tt-sec::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.tt-badge { display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 999px; font: 700 .6rem var(--mono, monospace); letter-spacing: .04em; background: rgba(255,255,255,.08); color: var(--text-2, #C3CAD6); }
.tt-badge.k { background: color-mix(in srgb, var(--team, #FF7A1A) 24%, transparent); color: #fff; }
.tt-badge.ok { background: rgba(53,208,127,.16); color: #7FE7B0; }
.tt-badge.bad { background: rgba(229,89,94,.16); color: #F59A9D; }
.tt-note { color: var(--muted, #8D97A8); font-size: .72rem; line-height: 1.45; margin-top: 8px; }

/* i diritti TV nei Conti */
.tt-tv { display: grid; gap: .7rem; padding: 0 15px 14px; }
.tt-tvc { padding: .8rem .9rem; border-radius: .7rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); display: grid; gap: .55rem; }
.tt-tvc .top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.tt-tvc .top b { font: 800 italic 1.05rem var(--tt-display); text-transform: uppercase; }
.tt-tvc .bc { display: flex; gap: .4rem; align-items: center; }
.tt-tvc .bc img { height: 1.5rem; width: auto; border-radius: .25rem; }
.tt-bar { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); }
.tt-bar i { display: block; height: 100%; }
.tt-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .72rem; color: var(--text-2, #C3CAD6); }
.tt-legend span::before { content: ''; display: inline-block; width: .6rem; height: .6rem; border-radius: .15rem; margin-right: .35rem; background: var(--c); vertical-align: -.05rem; }
.tt-tvnums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }

/* ------------------------------------------------------------------ telefono */
@media (max-width: 760px) {
  .tt-arrive { grid-template-columns: 1fr; gap: 10px; }
  .tt-scene { width: min(86vw, 420px); justify-self: center; }
  .tt-grid, .tt-signgrid { grid-template-columns: 1fr; }
  .tt-arrive .tt-card { background: rgba(12,14,19,.97); }
  .tt-pane + .tt-pane { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .tt-head { grid-template-columns: auto minmax(0, 1fr); padding-right: 3.4rem; }
  .tt-mood { grid-column: 1 / -1; justify-self: start; grid-auto-flow: column; align-items: center; gap: .6rem; }
  .tt-mood svg { width: 5.5rem; height: 3.2rem; }
  .tt-row { grid-template-columns: 1fr auto; }
  .tt-row .tt-range, .tt-row .tt-seg { grid-column: 1 / -1; grid-row: 2; }
  .tt-nums { grid-template-columns: 1fr 1fr; }
  .tt-tvnums { grid-template-columns: 1fr 1fr; }
  .tt-win { width: 100%; max-height: calc(100dvh - 20px); border-radius: .9rem; }
  .tt-foot .tt-btn { flex: 1 1 auto; }
  .tt-chat { max-height: 14rem; }
}

/* ------------------------------------------------------------------ meno movimento */
@media (prefers-reduced-motion: reduce) {
  .tt-ov.play .tt-plate { animation: ttFade .35s ease forwards; transform: none; }
  .tt-ov.play .tt-sheen::before, .tt-ov.play .tt-flare, .tt-ov.done .tt-plate { animation: none; }
  .tt-ov.play .tt-floor { animation: ttFade .35s ease forwards; transform: none; }
  .tt-ov.play .tt-up { animation: ttFade .3s ease forwards; transform: none; animation-delay: 0s; }
  .tt-car3d .rig.spin, .tt-mood .needle { transition: none; }
  .tt-win { transition: opacity .2s; transform: none; }
  .tt-msg.new, .tt-banner.ok, .tt-banner.bad { animation: none; }
}
@keyframes ttFade { from { opacity: 0; } to { opacity: 1; } }