/* Football Universe — tema "notte allo stadio".
   Superfici scure stratificate, accento dinamico = colore del club allenato (--club), ambra per le azioni secondarie.
   Tipografia: condensata da tabellone per titoli e numeri, sistema per il testo. */
:root {
  --bg: #090d12; --bg-2: #0d131b; --surf: #121a24; --surf-2: #17212d; --surf-3: #1d2937; --line: #243245; --line-2: #2e3e54;
  --ink: #e6edf5; --ink-2: #b6c2d1; --muted: #7d8ca0; --club: #4aa3ff; --club-2: #ffffff; --amber: #f2b23e;
  --good: #3ad49a; --warn: #f2b23e; --bad: #ff5d6c; --info: #5aa9ff;
  --f-display: "DIN Condensed", "Avenir Next Condensed", "Bahnschrift SemiCondensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --f-num: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 10px; --r-lg: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, color-mix(in srgb, var(--club) 14%, transparent), transparent 60%), var(--bg); color: var(--ink); font: 14px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 2px solid var(--club); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: .02em; margin: 0; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1; text-transform: uppercase; }
h2 { font-size: 24px; text-transform: uppercase; }
h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 14px 0 6px; }
p { margin: 0; }
.muted { color: var(--muted); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; text-align: right; }
.c { text-align: center; } .r { text-align: right; justify-content: flex-end; } .grow { flex: 1; min-width: 0; }
.note { color: var(--muted); font-size: 12.5px; margin-top: 10px; max-width: 70ch; }
.lead { color: var(--ink-2); font-size: 17px; max-width: 46ch; }

/* ------------------------------------------------ struttura */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 10px; gap: 14px; overflow-y: auto; }
.brand { font-family: var(--f-display); font-weight: 700; letter-spacing: .14em; font-size: 15px; display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.brand-mark { width: 14px; height: 14px; background: var(--club); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 18px var(--club); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav button { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-align: left; font-family: var(--f-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.side nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side nav button:hover { background: var(--surf); color: var(--ink); }
.side nav button.on { background: var(--surf-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--club); }
.side-foot { margin-top: auto; font-size: 11px; color: var(--muted); padding: 8px; overflow-wrap: anywhere; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 22px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top-club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-club div { display: flex; flex-direction: column; line-height: 1.15; }
.top-club strong { font-family: var(--f-display); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.top-club span { color: var(--muted); font-size: 12px; }
.top-date { font-family: var(--f-display); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; }
.top-adv { display: flex; gap: 6px; }
.content { padding: 22px; max-width: 1500px; width: 100%; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .content, .goal-flash { animation: none !important; } .dot, .ball { transition: none !important; } }
@media (max-width: 980px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; overflow-x: auto; } .side nav { flex-direction: row; } .side-foot { display: none; } }

/* ------------------------------------------------ ricerca globale */
.gsearch { position: relative; flex: 1; min-width: 200px; max-width: 460px; }
.gsearch input { width: 100%; background: var(--surf); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; }
.gs-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surf-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; max-height: 70vh; overflow-y: auto; }
.gs-drop h5 { margin: 8px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.gs-drop button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 7px; text-align: left; }
.gs-drop button:hover { background: var(--surf-3); }
.gs-drop button b { font-family: var(--f-num); color: var(--club); min-width: 22px; }
.gs-drop em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 12px; }

/* ------------------------------------------------ elementi */
.btn { border: 1px solid var(--line-2); background: var(--surf-2); padding: 8px 14px; border-radius: 9px; font-weight: 600; transition: background .12s, border-color .12s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--surf-3); border-color: var(--muted); }
.btn.primary { background: var(--club); border-color: var(--club); color: #071018; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--club); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.xl { padding: 13px 24px; font-family: var(--f-display); font-size: 19px; letter-spacing: .08em; text-transform: uppercase; }
.icon-btn { border: 1px solid var(--line); background: var(--surf); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.link { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--club) 60%, transparent); text-underline-offset: 3px; }
.link:hover { color: var(--club); }
.chip { border: 1px solid var(--line-2); background: var(--surf); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.chip.sm { padding: 3px 9px; font-size: 12px; }
.chip.on { background: var(--club); color: #071018; border-color: var(--club); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: var(--surf-3); color: var(--ink-2); vertical-align: 1px; }
.tag.bad { background: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--bad); }
.tag.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.badge { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--ink-2); background: var(--surf-3); padding: 4px 10px; border-radius: 6px; }
.ovr { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 6px; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: #081016; }
.ovr.sm { min-width: 28px; height: 22px; font-size: 15px; }
.ovr-e { background: linear-gradient(135deg, #f7d76a, #d99b1f); } .ovr-a { background: #3ad49a; } .ovr-b { background: #8fd16a; } .ovr-c { background: #e8c35a; } .ovr-d { background: #e3825b; } .ovr-n { background: var(--surf-3); color: var(--muted); }
.pot { font-family: var(--f-num); color: var(--ink-2); }
.pot-range { color: var(--muted); font-size: 12px; }
.role { display: inline-block; min-width: 38px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; }
.role-gk { background: #3a2f0c; color: #f2c94c; } .role-df { background: #10294a; color: #7cb6ff; } .role-mf { background: #0f3324; color: #59d79f; } .role-at { background: #43151b; color: #ff8590; }
.src { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; }
.src-reale { border-color: color-mix(in srgb, var(--good) 60%, transparent); color: var(--good); }
.src-editor { border-color: var(--amber); color: var(--amber); }
.bar { display: inline-block; width: 64px; height: 6px; background: var(--surf-3); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.bar-fill { display: block; height: 100%; border-radius: 3px; }
.t-good { background: var(--good); } .t-warn { background: var(--warn); } .t-bad { background: var(--bad); } .t-acc { background: var(--club); }
.formstr { display: inline-flex; gap: 2px; }
.fm { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 800; font-style: normal; color: #081016; }
.fm-V { background: var(--good); } .fm-P { background: #8a98ab; } .fm-S { background: var(--bad); }
.crest { flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.crest-empty { display: inline-block; border-radius: 6px; background: var(--surf-3); }
.cl { display: inline-flex; align-items: center; gap: 8px; }
.sub { display: block; font-size: 11.5px; color: var(--muted); }
.alert { background: var(--surf-2); border: 1px solid var(--line-2); border-left: 3px solid var(--info); padding: 9px 12px; border-radius: 8px; margin: 10px 0; }
.alert.bad { border-left-color: var(--bad); }
.errorbox { background: color-mix(in srgb, var(--bad) 12%, var(--surf)); border: 1px solid var(--bad); padding: 14px; border-radius: var(--r); display: flex; gap: 12px; align-items: center; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 30px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--club); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 22px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.empty strong { color: var(--ink-2); font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.boot { display: grid; place-items: center; height: 100vh; }

/* pannelli */
.panel { background: linear-gradient(180deg, var(--surf), color-mix(in srgb, var(--surf) 85%, var(--bg))); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.panel.attention { border-color: var(--amber); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 9px 12px; color: var(--muted); font-family: var(--f-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--club); }
.seg { display: inline-flex; background: var(--surf); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 7px; color: var(--ink-2); }
.seg button.on { background: var(--club); color: #071018; font-weight: 700; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar .tabs { margin: 0; border: 0; }

/* tabelle */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--surf); }
.tbl th.num { text-align: right; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surf-2); }
.tbl tr.me { background: color-mix(in srgb, var(--club) 13%, transparent); }
.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--club); }
.tbl tr.inj td { opacity: .7; }
.tbl tr.future td { color: var(--ink-2); }
.tbl.compact td { padding: 5px 8px; }
.th { border: 0; background: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.th.on { color: var(--ink); }
.pname { font-weight: 600; }
.ratings { display: inline-flex; gap: 3px; }
.ratings i { font-style: normal; font-family: var(--f-num); font-size: 11px; padding: 1px 3px; border-radius: 3px; background: var(--surf-3); }
.ratings i.good { color: var(--good); } .ratings i.bad { color: var(--bad); }
.compare td.best { color: var(--good); font-weight: 700; }
.cb { width: 28px; }
.table-tbl tr.z-pro td:first-child, .table-tbl tr.z-champ td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.table-tbl tr.z-po td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.table-tbl tr.z-rel td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.legend { display: flex; gap: 16px; padding: 10px 14px; font-size: 12px; color: var(--muted); }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .z-pro::before, .legend .z-champ::before { background: var(--good); } .legend .z-po::before { background: var(--info); } .legend .z-rel::before { background: var(--bad); }
.stats-tbl td { padding: 6px 10px; } .stats-tbl td.c { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.stats-tbl td.num:first-child { text-align: left; }

/* liste */
.results, .news-list, .inbox-list, .plist, .rank-list, .notes, .feed { list-style: none; margin: 0; padding: 0; }
.results li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer; }
.results li:last-child { border-bottom: 0; }
.results em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.results .score { font-family: var(--f-display); font-size: 18px; min-width: 60px; text-align: center; }
.fx-list li { padding: 8px 14px; }
.inbox-list li { display: flex; gap: 12px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer; }
.inbox-list li.unread .subj { font-weight: 700; } .inbox-list li.unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--club); margin-top: 7px; flex: none; }
.inbox-list li.sel { background: var(--surf-2); }
.inbox-list .from { color: var(--muted); width: 150px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.news-list p { color: var(--ink-2); font-size: 13px; }
.plist li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); cursor: pointer; }
.plist li.sel { background: color-mix(in srgb, var(--club) 18%, transparent); }
.plist li.unavail { opacity: .55; }
.rank-list { counter-reset: r; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); counter-increment: r; }
.rank-list li::before { content: counter(r); width: 22px; color: var(--muted); font-family: var(--f-num); }
.rank-list em { color: var(--muted); font-style: normal; font-size: 12px; flex: 1; }
.rank-list b { font-family: var(--f-display); font-size: 18px; margin-left: auto; }
.notes li { padding: 6px 0 6px 18px; position: relative; color: var(--ink-2); } .notes li::before { content: '!'; position: absolute; left: 0; color: var(--amber); font-weight: 800; }
.kv-list { margin: 0; display: grid; gap: 6px; }
.kv-list div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); padding-bottom: 6px; }
.kv-list dt { color: var(--muted); } .kv-list dd { margin: 0; text-align: right; font-weight: 600; }
.kv-list.tight div { padding-bottom: 4px; }

/* moduli */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; color: var(--muted); }
.field input, .field select, select, input[type=text], input:not([type]) { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; min-width: 0; }
.field input[type=color] { padding: 2px; height: 36px; }
.num-in { display: flex; align-items: center; gap: 6px; } .num-in input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; } .num-in em { color: var(--muted); font-style: normal; white-space: nowrap; }
.check { display: flex; gap: 8px; align-items: center; }
.slider { display: flex; flex-direction: column; gap: 4px; }
.slider-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); } .slider-l b { color: var(--ink); font-weight: 600; }
.slider input { accent-color: var(--club); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.confirm { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }

/* modali e notifiche */
.modal-bg { position: fixed; inset: 0; background: rgba(3,6,10,.7); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--r-lg); width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.modal.wide { width: min(1100px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-b { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--surf-3); border: 1px solid var(--line-2); border-left: 4px solid var(--good); padding: 10px 14px; border-radius: 9px; box-shadow: var(--shadow); max-width: 380px; }
.toast.err { border-left-color: var(--bad); }
.sim-overlay { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--surf-3); border: 1px solid var(--line-2); padding: 10px 18px; border-radius: 999px; display: flex; gap: 10px; align-items: center; z-index: 55; box-shadow: var(--shadow); font-family: var(--f-display); letter-spacing: .08em; text-transform: uppercase; }

/* pagine */
.page { display: flex; flex-direction: column; gap: 14px; }
.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 6px; }
.page-h p { color: var(--muted); margin-top: 6px; max-width: 80ch; }
.ph-title { display: flex; gap: 14px; align-items: center; }
.ph-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.ph-stats div { display: flex; flex-direction: column; }
.ph-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ph-stats b { font-family: var(--f-display); font-size: 24px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.two-col .span2 { grid-column: 1 / -1; }
h2.sec { margin: 10px 0; color: var(--ink-2); }
.nation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.st { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--surf-3); color: var(--muted); }
.st-in_corso { color: var(--good); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kpi b { font-family: var(--f-display); font-size: 28px; }
.kpi em { font-style: normal; color: var(--muted); font-size: 12px; }
.month-bars { display: flex; gap: 6px; align-items: flex-end; height: 140px; padding-top: 6px; }
.mb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 14px; }
.mb span { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; } .mb .pos { background: var(--good); } .mb .neg { background: var(--bad); }
.mb em { font-size: 10px; color: var(--muted); font-style: normal; }
.facility { display: flex; align-items: center; gap: 10px; }
.round-sel select { margin-left: 8px; }

/* home */
.home { display: flex; flex-direction: column; gap: 16px; }
.hero-match { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line-2); padding: 22px 26px; background:
  radial-gradient(600px 220px at 50% 120%, color-mix(in srgb, var(--club) 35%, transparent), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 70px, transparent 70px 140px), linear-gradient(180deg, #0f2a1c, #0b1a12); }
.hm-top { display: flex; justify-content: space-between; color: var(--ink-2); font-family: var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.hm-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 18px 0 10px; }
.hm-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hm-team strong { font-family: var(--f-display); font-size: 30px; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.hm-vs { display: flex; flex-direction: column; align-items: center; } .hm-vs span { font-family: var(--f-display); font-size: 40px; color: var(--club); } .hm-vs em { font-style: normal; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.hm-meta { text-align: center; color: var(--ink-2); }
.hm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.hm-empty { text-align: center; padding: 18px; } .hm-empty p { color: var(--ink-2); margin: 8px auto 0; max-width: 60ch; }
.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-grid .span2 { grid-column: span 2; }
@media (max-width: 1200px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } .home-grid .span2 { grid-column: auto; } .hm-team strong { font-size: 20px; } }
.pos-big { display: flex; align-items: baseline; gap: 8px; } .pos-big span { font-family: var(--f-display); font-size: 52px; line-height: .9; color: var(--club); } .pos-big em { color: var(--muted); font-style: normal; }
.objective { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surf-2); }
.objective strong { font-family: var(--f-display); font-size: 20px; text-transform: uppercase; }

/* inizio e procedura guidata */
.start { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.3fr); gap: 30px; padding: 40px; align-items: start; }
@media (max-width: 900px) { .start { grid-template-columns: 1fr; padding: 20px; } }
.start-hero { display: flex; flex-direction: column; gap: 22px; padding-top: 40px; }
.brand-big { font-family: var(--f-display); font-size: clamp(56px, 8vw, 104px); line-height: .86; letter-spacing: .04em; display: flex; flex-direction: column; gap: 8px; }
.brand-big .brand-mark { width: 26px; height: 26px; margin-bottom: 14px; }
.save-list { display: flex; flex-direction: column; gap: 10px; }
.save-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surf-2); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--club); }
.save-info { display: flex; flex-direction: column; min-width: 0; } .save-info strong { font-family: var(--f-display); font-size: 20px; text-transform: uppercase; }
.save-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dup-row { grid-column: 1 / -1; display: flex; gap: 8px; }
.wizard { min-height: 100vh; display: flex; flex-direction: column; }
.wizard-h { display: flex; align-items: center; gap: 20px; padding: 18px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-family: var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surf-3); font-size: 12px; }
.steps li.on { background: var(--surf-2); color: var(--ink); } .steps li.on span { background: var(--club); color: #071018; } .steps li.done span { background: var(--good); color: #071018; }
.wizard-b { flex: 1; padding: 26px 28px; overflow-y: auto; }
.wizard-f { display: flex; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--bg-2); position: sticky; bottom: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.choice { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surf); }
.choice strong { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.choice span { color: var(--ink-2); }
.choice.on { border-color: var(--club); box-shadow: 0 0 0 1px var(--club), 0 0 30px color-mix(in srgb, var(--club) 25%, transparent); }
.pick3 { display: grid; grid-template-columns: 220px 260px 1fr; gap: 14px; min-height: 60vh; }
@media (max-width: 900px) { .pick3 { grid-template-columns: 1fr; } }
.col-list { display: flex; flex-direction: column; gap: 2px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 8px; max-height: 70vh; overflow-y: auto; }
.col-list h4 { margin: 4px 8px 8px; }
.li { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: left; width: 100%; }
.li:hover { background: var(--surf-2); } .li.on { background: color-mix(in srgb, var(--club) 20%, var(--surf-2)); }
.li em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 12px; white-space: nowrap; }
.club-li .rank { width: 20px; color: var(--muted); font-family: var(--f-num); font-size: 12px; } .stars { color: var(--amber); letter-spacing: -1px; }
.detail-step { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.lead-s { color: var(--ink-2); }
.detail-default { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 6px; }
.detail-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--surf); }
.detail-row em { color: var(--muted); font-style: normal; font-size: 12px; margin-left: 8px; }
.estimate { padding: 12px 14px; border-radius: 10px; background: var(--surf-2); border-left: 3px solid var(--club); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.summary { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.summary-club { display: flex; gap: 16px; align-items: center; }

/* scheda giocatore */
.player-hero { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .player-hero { grid-template-columns: 1fr; } }
.ph-card { position: relative; border-radius: 18px; padding: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--club) 55%, #0b1118), #0d141c 70%); border: 1px solid color-mix(in srgb, var(--club) 50%, var(--line)); box-shadow: var(--shadow); }
.ph-ovr { display: flex; flex-direction: column; align-items: flex-start; } .ph-ovr b { font-family: var(--f-display); font-size: 58px; line-height: .85; } .ph-ovr span { font-family: var(--f-display); font-size: 20px; letter-spacing: .08em; }
.ph-face { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: -40px 0 10px auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); font-family: var(--f-display); font-size: 36px; color: var(--ink-2); }
.ph-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 10px; }
.ph-card-stats div { display: flex; gap: 6px; align-items: baseline; } .ph-card-stats b { font-family: var(--f-display); font-size: 22px; } .ph-card-stats span { font-size: 11px; color: var(--ink-2); letter-spacing: .06em; }
.ph-info { display: flex; flex-direction: column; gap: 12px; }
.ph-info h1 { font-size: 44px; }
.ph-sub { color: var(--ink-2); }
.ph-club { display: flex; gap: 8px; align-items: center; }
.ph-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ph-kpis div { background: var(--surf); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.ph-kpis span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .ph-kpis b { font-family: var(--f-display); font-size: 21px; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.attr-row { display: grid; grid-template-columns: 1fr 80px 30px; gap: 10px; align-items: center; font-size: 13px; }
.attr-row .bar { width: 100%; }
.editor-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.editor-attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.editor-attrs fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.editor-attrs legend { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 4px; }
.ed-attr { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.ed-attr input { width: 56px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; text-align: right; }
.star { border: 0; background: none; color: var(--amber); font-size: 16px; }

/* tattiche */
.tac-grid { display: grid; grid-template-columns: minmax(320px, 520px) minmax(280px, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
@media (max-width: 1250px) { .tac-grid { grid-template-columns: minmax(300px, 480px) 1fr; } .tac-bench { grid-column: 1 / -1; } }
@media (max-width: 760px) { .tac-grid { grid-template-columns: 1fr; } }
.tac-side { display: flex; flex-direction: column; gap: 12px; }
.pitch-v { position: relative; width: 100%; aspect-ratio: 68/100; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(180deg, #1d5a33 0 10%, #1a5230 10% 20%); box-shadow: inset 0 0 60px rgba(0,0,0,.4); }
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; width: 84px; }
.slot .shirt { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--club-raw, #1d3b6e); color: var(--club-2, #fff); border: 3px solid var(--club-2, #fff); font-family: var(--f-display); font-size: 19px; box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: transform .12s; }
.slot.empty .shirt { background: rgba(255,255,255,.08); border-style: dashed; color: #fff; }
.slot.off .shirt { box-shadow: 0 0 0 3px var(--amber), 0 3px 8px rgba(0,0,0,.4); }
.slot.sel .shirt { transform: scale(1.15); box-shadow: 0 0 0 4px #fff; }
.slot.target .shirt { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.slot .nm { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 5px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .rl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.8); letter-spacing: .06em; }
.plist-foot { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-top: 1px solid var(--line); }

/* partita dal vivo */
.live-app { display: block; }
.live { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 1500px; margin: 0 auto; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: var(--surf); border: 1px solid var(--line-2); border-radius: 18px; padding: 12px 20px; }
.sb-team { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 26px; text-transform: uppercase; } .sb-team.r { justify-content: flex-end; }
.sb-score { display: flex; align-items: center; gap: 12px; position: relative; } .sb-score b { font-family: var(--f-display); font-size: 54px; line-height: 1; min-width: 40px; text-align: center; } .sb-score span { font-size: 30px; color: var(--muted); }
.sb-score i { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-style: normal; background: var(--club); color: #071018; font-weight: 800; font-family: var(--f-num); padding: 1px 10px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.sb-score em { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-style: normal; color: var(--amber); font-size: 12px; white-space: nowrap; }
.live-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
@media (max-width: 1050px) { .live-grid { grid-template-columns: 1fr; } }
.live-main { display: flex; flex-direction: column; gap: 10px; }
.pitch-h { position: relative; width: 100%; aspect-ratio: 100/62; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(90deg, #1d5a33 0 10%, #1a5230 10% 20%); box-shadow: inset 0 0 80px rgba(0,0,0,.45); }
.dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); transition: left .55s ease, top .55s ease; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.dot.gk { border-color: #f2c94c; }
.ball { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; transition: left .45s ease, top .45s ease; }
.goal-flash { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(0,0,0,.55), transparent 70%); font-family: var(--f-display); font-size: 110px; line-height: .9; color: #fff; letter-spacing: .1em; animation: goal 2.2s ease-out; }
.goal-flash span { font-size: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
@keyframes goal { 0% { transform: scale(.6); opacity: 0; } 15% { transform: scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.live-ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.poss { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 700; }
.poss span { display: grid; place-items: center; color: #071018; min-width: 40px; }
.live-side { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px 12px; max-height: calc(100vh - 140px); overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 34px 22px 1fr; gap: 6px; padding: 6px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 13px; color: var(--ink-2); }
.feed li b { font-family: var(--f-num); color: var(--muted); }
.feed li.ev-goal { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--good) 10%, transparent); }
.feed li.mine.ev-goal { background: color-mix(in srgb, var(--club) 20%, transparent); }
.feed li.ev-rosso { color: var(--bad); }
.feed.static li { grid-template-columns: 40px 24px 1fr; }
.live-tac, .live-subs { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.report-h { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); }
.rh-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; width: 100%; }
.rh-team { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; } .rh-team strong { font-family: var(--f-display); font-size: 26px; text-transform: uppercase; }
.rh-score { font-family: var(--f-display); font-size: 70px; line-height: 1; display: flex; gap: 14px; align-items: center; position: relative; } .rh-score span { color: var(--muted); font-size: 40px; } .rh-score em { position: absolute; bottom: -18px; left: 0; right: 0; font-size: 13px; font-style: normal; color: var(--amber); }
.rh-scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; color: var(--ink-2); font-size: 13px; }
.rh-scorers div { display: flex; flex-direction: column; } .rh-scorers div:first-child { align-items: flex-end; }
.motm { color: var(--ink-2); }

/* calendario mensile */
.month { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.month-h, .month-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month-h span { text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 4px; }
.day { min-height: 74px; border-radius: 8px; background: var(--surf-2); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.day.blank { background: none; } .day.today { box-shadow: inset 0 0 0 2px var(--club); } .day.has { background: color-mix(in srgb, var(--club) 14%, var(--surf-2)); cursor: pointer; }
.day b { color: var(--muted); font-weight: 600; } .day-m { display: flex; flex-direction: column; } .day-m em { font-style: normal; font-weight: 700; } .day-m i { font-style: normal; color: var(--muted); font-size: 10.5px; }

/* mercato, notizie, mondo */
.market { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .market { grid-template-columns: 1fr; } }
.filters form { display: flex; flex-direction: column; gap: 9px; }
.news-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.news-card { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.news-card h3 { color: var(--ink); font-size: 20px; text-transform: none; letter-spacing: .01em; }
.news-card p { color: var(--ink-2); }
.news-card.imp-3 { border-color: var(--amber); }
.news-card.lead { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, var(--club) 18%, var(--surf)), var(--surf)); } .news-card.lead h3 { font-size: 28px; }
@media (max-width: 760px) { .news-card.lead { grid-column: auto; } }
.mail { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 14px; }
@media (max-width: 860px) { .mail { grid-template-columns: 1fr; } }
.mail .inbox-list { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; max-height: 70vh; overflow-y: auto; }
.mail-body { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.world { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
@media (max-width: 800px) { .world { grid-template-columns: 1fr; } }
.world-list { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 8px; max-height: 80vh; overflow-y: auto; }
.world-detail { display: flex; flex-direction: column; gap: 12px; }
.row2 > * { min-width: 0; }
.field input, .field select { width: 100%; }
.ph-kpis .pot { font-family: var(--f-display); font-size: 21px; color: var(--ink); }
.ph-kpis .src { align-self: flex-start; margin: 2px 0 0; }
.dot em { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }

/* ---------------------------------------------------------------- controller */
body.pad-mode { cursor: none; }
.pad-ring { position: fixed; left: 0; top: 0; z-index: 2147483645; pointer-events: none; border: 2px solid #79caff; border-radius: 9px; box-shadow: 0 0 0 2px #001b35, 0 0 16px #64c5ff99; transition: transform .11s ease, width .11s ease, height .11s ease; display: none; }
.pad-ring.hover { border-color: #79caff88; box-shadow: 0 0 0 1px #001b35, 0 0 10px #64c5ff55; }
.pad-ring.editing { border-color: var(--amber); box-shadow: 0 0 0 2px #2a1a00, 0 0 18px color-mix(in srgb, var(--amber) 60%, transparent); }
.pad-pointer { position: fixed; left: 0; top: 0; width: 22px; height: 22px; z-index: 2147483646; pointer-events: none; display: none; filter: drop-shadow(0 2px 4px #0009); }
.pad-pointer::before { content: ''; display: block; width: 0; height: 0; border-left: 17px solid #fff; border-top: 23px solid transparent; transform: rotate(-35deg); filter: drop-shadow(0 0 1px #000); }
body.pad-mode tr[data-pad-focus] td, body.pad-mode li[data-pad-focus] { background: color-mix(in srgb, var(--amber) 9%, transparent); }
body.pad-mode .content { padding-bottom: 64px; }
.pad-g { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -5px; }
.pad-g-txt { display: inline-grid; place-items: center; border-radius: 50%; background: #1c2431; border: 1px solid #45526a; font: 700 11px var(--f-body); }
.pad-g-pill { width: auto; height: 18px; padding: 0 6px; border-radius: 5px; background: #1c2431; border: 1px solid #45526a; font: 700 10px/16px var(--f-body); letter-spacing: .04em; color: #c9d3e0; vertical-align: -3px; }
.pad-inline { margin-left: 6px; display: inline-flex; }
.pad-hints { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2147483600; pointer-events: none; display: flex; gap: 14px; align-items: center; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line-2); box-shadow: var(--shadow); backdrop-filter: blur(10px); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; }
.pad-hint { display: inline-flex; align-items: center; gap: 6px; }
.pad-kb, .pad-picker { position: fixed; z-index: 2147483640; left: 50%; bottom: 70px; transform: translateX(-50%); background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 16px; }
.pad-kb { width: min(680px, calc(100vw - 32px)); }
.pad-kb-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pad-kb-h span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pad-kb-h b { font: 600 20px var(--f-body); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px; min-height: 44px; word-break: break-all; }
.pad-kb-h .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--amber); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pad-kb-row { display: flex; gap: 6px; margin-bottom: 6px; justify-content: center; }
.pad-key { flex: 1; min-width: 0; text-align: center; padding: 9px 0; border-radius: 8px; background: var(--surf-2); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.pad-key.wide { flex: 2.4; font-size: 12px; letter-spacing: .06em; }
.pad-key.on { background: var(--amber); border-color: var(--amber); color: #121212; transform: scale(1.06); }
.pad-kb-help { margin-top: 10px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pad-picker { width: min(420px, calc(100vw - 32px)); top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.pad-picker-h { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 10px; font-size: 17px; }
.pad-picker ul { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; }
.pad-picker li { padding: 9px 12px; border-radius: 8px; }
.pad-picker li.cur { color: var(--club); }
.pad-picker li.on { background: var(--amber); color: #121212; font-weight: 600; }
.live-side .tabs button { padding: 9px 8px; font-size: 15px; display: inline-flex; align-items: center; }
.tabs button .pad-inline { margin-left: 5px; }
.tabs button .pad-g { width: 17px; height: 17px; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.group-grid .tbl tr.z-pro td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.ko-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.ties { list-style: none; margin: 0; padding: 0; }
.ties li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tie-team { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--ink-2); text-align: left; min-width: 0; }
.tie-team.r { justify-content: flex-end; text-align: right; }
.tie-team.win { color: var(--ink); font-weight: 700; }
.tie-agg { font-family: var(--f-num); font-size: 15px; min-width: 52px; text-align: center; }
.tie-legs { grid-column: 1 / -1; display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--muted); }
/* staff e conferenze stampa */
.two-col.wide-left { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .two-col.wide-left { grid-template-columns: 1fr; } }
.lvl { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.lvl .bar { width: 80px; }
.lvl b { font-family: var(--f-num); font-size: 12.5px; }
.staff-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.staff-roles li { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 13px; }
.form-grid { display: grid; gap: 12px; }
.form-grid .field select, .form-grid .field input { width: 100%; }
.press-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--surf)); }
.press-card > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.press-qs { display: grid; gap: 18px; }
.press-q h3 { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 16px; color: var(--ink); margin: 2px 0 10px; }
.press-opts { display: grid; gap: 8px; }
.press-opt { text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surf-2); color: var(--ink-2); }
.press-opt:hover { border-color: var(--muted); }
.press-opt.on { border-color: var(--club); background: color-mix(in srgb, var(--club) 16%, var(--surf-2)); color: var(--ink); font-weight: 600; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* 0.7.2 — Matchday identity: palette di club, navigazione editoriale, movimento discreto */
.app { --accent-soft: color-mix(in srgb,var(--club) 22%,#182132); }
.side {background:linear-gradient(160deg,color-mix(in srgb,var(--club) 15%,#101822) 0%,#101820 48%,#0b1018 100%);border-right:1px solid color-mix(in srgb,var(--club) 40%,#273342);box-shadow:6px 0 30px #0003;}
.brand {padding:16px 12px 20px;letter-spacing:.075em;font-size:18px;color:#fff;border-bottom:1px solid #ffffff22;}
.brand-mark {width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--club),var(--amber));transform:rotate(-12deg);}
.side nav {gap:3px;padding-top:7px;}
.side nav button {position:relative;min-height:40px;padding:9px 12px;border-radius:5px;font-family:var(--f-body);font-size:13px;font-weight:700;letter-spacing:.015em;text-transform:none;transition:background .22s ease,color .22s ease,transform .22s ease;}
.side nav button:hover {background:color-mix(in srgb,var(--club) 19%,#1b2431);color:white;transform:translateX(3px);}
.side nav button.on {background:linear-gradient(95deg,color-mix(in srgb,var(--club) 37%,#172336),color-mix(in srgb,var(--club) 9%,#14202c));box-shadow:inset 4px 0 var(--club),inset 0 1px #ffffff17;color:white;}
.side nav button.on svg {color:var(--club);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--club) 45%,transparent));}
.side nav button:nth-child(6) {margin-top:8px;border-top:1px solid #ffffff16;border-radius:0;padding-top:15px;}
.side nav button:nth-child(6).on {border-radius:5px;}
.top {background:linear-gradient(90deg,color-mix(in srgb,var(--club) 9%,#101720),#101720 75%);border-bottom:2px solid color-mix(in srgb,var(--club) 45%,#2a3440);}
.content {animation:fu-screen-in .36s cubic-bezier(.2,.8,.2,1) both;}
@keyframes fu-screen-in {from{opacity:.25;transform:translateY(13px) scale(.993)}to{opacity:1;transform:translateY(0) scale(1)}}
.page .panel,.page .card {transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.page .panel:hover,.page .card:hover {border-color:color-mix(in srgb,var(--club) 38%,#2d3948);}
.modal-bg {animation:fu-shade .2s ease both;backdrop-filter:blur(6px)}
.modal {animation:fu-dialog .3s cubic-bezier(.2,.8,.2,1) both;border-top:4px solid var(--club);background:linear-gradient(155deg,#172333,#101722);box-shadow:0 25px 85px #000b;}
.modal-h {background:linear-gradient(90deg,color-mix(in srgb,var(--club) 14%,#192332),transparent);padding:20px 24px;}
.modal-b {padding:23px 24px;gap:16px;}
@keyframes fu-shade {from{opacity:0}to{opacity:1}}
@keyframes fu-dialog {from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.fu-offer-context {border:1px solid #ffffff20;background:linear-gradient(125deg,color-mix(in srgb,var(--club) 15%,#182434),#15202c);border-radius:10px;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.fu-offer-context span {font-size:11px;color:#aab9c9;display:block;text-transform:uppercase;letter-spacing:.09em}.fu-offer-context strong{display:block;margin-top:6px;font-size:18px;color:#f5f7fa;font-variant-numeric:tabular-nums}
.fu-offer-explainer {color:#c7d2df;font-size:12px;border-left:3px solid var(--amber);padding:9px 12px;background:#ffffff0a}
.fu-offer-extra {display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #ffffff20;border-radius:9px;}
.fu-offer-extra label {display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}.fu-offer-extra select {background:#0d1724;color:white;border:1px solid #4c5d73;border-radius:6px;padding:8px}
.fu-market-box {border-top:3px solid var(--club)!important;background:linear-gradient(155deg,#192536,#101923)!important;box-shadow:0 10px 32px #0004;}
.fu-action.primary {background:var(--club)!important;border-color:var(--club)!important;color:#09121c!important}
@media(prefers-reduced-motion:reduce){.content,.modal-bg,.modal,.side nav button{animation:none!important;transition:none!important;transform:none!important}}

/* 0.8.1 — spogliatoio, raccomandazioni e presentazioni native */
.dr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dr-summary > div { background: linear-gradient(135deg, color-mix(in srgb, var(--club) 14%, var(--surf)), var(--surf)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.dr-summary span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dr-summary b { font-family: var(--f-display); font-size: 24px; }
.press-opt b { display: block; }
.scene { position: relative; overflow: hidden; border-radius: 18px; padding: 34px 32px 26px; border: 1px solid color-mix(in srgb, var(--club) 45%, var(--line)); background: radial-gradient(900px 300px at 15% -20%, color-mix(in srgb, var(--club) 40%, transparent), transparent 60%), linear-gradient(140deg, #0f1c2c, #0a111b 70%); }
.scene-stamp { display: inline-block; font-family: var(--f-display); letter-spacing: .2em; font-size: 13px; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); padding: 4px 10px; border-radius: 6px; animation: fu-rise .5s ease both; }
.scene-player { font-size: 52px; line-height: 1; margin: 18px 0 6px; text-transform: uppercase; animation: fu-rise .6s .1s ease both; }
.scene-route { color: var(--ink-2); font-size: 16px; }
.scene-fee { font-family: var(--f-num); font-size: 22px; color: var(--good); margin-top: 8px; }
.scene-beats { margin: 18px 0; padding-left: 20px; display: grid; gap: 6px; }
.scene-beats li { animation: fu-rise .5s ease both; }
.scene-nav { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@keyframes fu-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene *, .scene-stamp { animation: none !important; } }
.deal-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.deal-ctx > div { background: var(--surf-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; }
.deal-ctx span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.deal-ctx b { font-family: var(--f-num); font-size: 15px; }

/* 0.8.2 — bonus legati alle prestazioni nelle finestre di contratto */
.bonus-set { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 4px; margin: 10px 0; display: grid; gap: 6px; }
.bonus-set legend { padding: 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Football Universe LIVE: native controls preserve pad focus and modal isolation. */
.live-hero { padding:30px 32px; margin-bottom:20px; border:1px solid var(--line); border-radius:16px; background:radial-gradient(ellipse at 85% 20%,#184450 0,transparent 60%),linear-gradient(125deg,#111c29,#0b111b); }
.live-eyebrow { font-size:10px; font-weight:800; letter-spacing:.2em; color:#64ddc5; }
.live-hero h1 { font-size:clamp(28px,4vw,46px); margin:12px 0; letter-spacing:-.04em; }
.live-hero em { color:#64ddc5; font-style:normal; }
.live-hero p { color:#b6c6d5; }
.live-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0; }
.live-number { display:block;font-size:36px;margin:12px 0; }
.live-number small { font-size:12px;color:var(--muted);margin-left:6px; }
.live-story { padding:16px 0;border-bottom:1px solid var(--line); }
.live-story p { line-height:1.6; }
.live-event { display:block;width:100%;text-align:left;color:inherit;background:transparent;border:1px solid var(--line);border-radius:10px;padding:16px;margin:10px 0;cursor:pointer;transition:background .16s,border-color .16s; }
.live-event:hover,.live-event:focus-visible { background:#142332;border-color:#64ddc5; }
.live-event span { display:block;color:var(--muted);font-size:11px;margin-bottom:8px; }
.live-event b { display:block;font-size:15px; }
.live-event p { color:var(--muted);line-height:1.5;margin:9px 0; }
.live-event small { color:#64ddc5; }
.live-timeline { margin:20px 0;border-left:2px solid #254c50;padding-left:20px; }
.live-relations article { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line); }
.live-relations strong { font-size:28px; }
.live-relations h3 { font-size:15px; }
.live-journalists { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px; }
.live-journalists blockquote { margin:20px 0;padding-left:12px;border-left:2px solid #64ddc5;line-height:1.5; }
.live-pulse { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:linear-gradient(120deg,#142332,#122d31);border:1px solid #315a60;border-radius:12px;margin-bottom:18px; }
.live-pulse h3 { margin:8px 0; }.live-pulse p { margin:0;color:#b6c6d5;font-size:12px; }
@media(max-width:1000px){.live-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}.live-journalists{grid-template-columns:1fr;}.live-pulse{align-items:flex-start;flex-direction:column;}}
@media(prefers-reduced-motion:reduce){.live-event{transition:none;}}

.live-universe .two-col { grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); }
.live-universe .panel { min-width:0; }
.live-story p,.live-event { overflow-wrap:anywhere; }
.dna-row { display:grid;grid-template-columns:100px 1fr 32px 64px;align-items:center;gap:12px;margin:16px 0; }
@media(max-width:600px){.dna-row{grid-template-columns:85px 1fr 25px;gap:8px;}.dna-row small{grid-column:2/4;}}
.room-parties { padding:16px;border-radius:12px;background:var(--surf-2);margin-bottom:16px; }
.room-log { padding-left:20px; }.room-log li { margin:12px 0;color:var(--ink-2);line-height:1.6; }

/* Match Director: posizioni vere, transizioni solo nella presentazione. */
.director-stage { position: absolute; inset: 0; transition: transform .45s ease; }
.director-caption { position: absolute; bottom: 10px; left: 12px; right: 12px; padding: 10px 14px; background: #101820e8; border-left: 3px solid var(--accent); border-radius: 6px; color: white; font-size: 14px; z-index: 2; pointer-events: none; }
.director-caption b { margin-right: 10px; color: #68cabb; }
.director-views { flex-wrap: wrap; }
.director-score { text-align: center; padding: 10px; font-weight: 600; }
.director-replay .dot, .director-replay .ball { transition: left .45s ease, top .45s ease; }
.director-replay { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .director-stage, .director-replay .dot, .director-replay .ball { transition: none; } }

.live-side .tabs { flex-wrap: wrap; }

.universe-command {margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#11242b,#111822);}
.uc-heading span {font-size:10px;letter-spacing:.15em;color:#79c9bc;}
.uc-heading h2 {margin:5px 0 16px;}
.universe-hub {display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;}
.uc-card {text-align:left;background:#14212c;border:1px solid #30414d;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:7px;transition:background .2s ease;}
.uc-card:hover {background:#203442;}
.uc-card span {font-weight:700;color:#eff5f4;}
.uc-card b {font-size:13px;color:#79c9bc;}
.uc-card small {color:#a7b6c0;font-size:11px;}
.uc-reunion {margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.uc-reunion p {color:var(--ink-2);}

/* REBORN: ambienti distinti, protagonisti e memoria al centro dell'interazione. */
.reborn-app {display:block;background:#101719;--muted:#a5b2b7;--r:3px;--r-lg:5px;--surf:#162124;--surf-2:#1d2b2e;--line:#344245}
.reborn-app .side {position:sticky;top:0;height:auto;z-index:20;display:grid;grid-template-columns:190px minmax(0,1fr);padding:10px 22px;background:#10191cf2;gap:14px;border:0;border-bottom:1px solid #405050;overflow:visible}
.reborn-app .brand {font-size:12px;letter-spacing:.12em;padding:0;line-height:1.5}
.reborn-app .brand-mark {background:#e7bf89;box-shadow:none;width:8px;height:30px;transform:skew(-15deg)}
.reborn-app .side nav {flex-direction:row;overflow-x:auto;scrollbar-width:thin;align-items:center}
.reborn-app .side nav button {flex:none;white-space:nowrap;padding:11px 14px;border-radius:0;font-weight:600}
.reborn-app .side nav button svg {width:16px;height:16px}
.reborn-app .side nav button.on {background:#e7bf89;color:#152024;border:0}
.reborn-app .side-foot {display:none}
.reborn-app .top {position:static;border:0;background:transparent;min-height:72px;padding:15px 30px}
.reborn-app .content {max-width:1600px;padding:12px 30px 70px}
.reborn-app .page-h {align-items:flex-end;padding-bottom:24px;border-bottom:1px solid #405054;margin-bottom:25px}
.reborn-app .page-h h1 {font-size:clamp(36px,5vw,72px);line-height:.92;letter-spacing:-.04em}
.reborn-app .page-h p {margin-top:14px;max-width:70ch}
.reborn-app .panel {box-shadow:none;border:0;border-top:1px solid #455557;background:transparent;border-radius:0}
.reborn-app .btn {border-radius:2px;padding:11px 17px;font-weight:600;transition:background 120ms,transform 120ms}
.reborn-app .btn:active {transform:translateY(1px)}
.reborn-app .btn.primary {background:#e7bf89;color:#182327;border-color:#e7bf89}
.reborn-app .tabs {border:0;border-bottom:1px solid #506064;background:transparent;padding:0;gap:15px}
.reborn-app .tabs button {border-radius:0;background:transparent;border:0;padding:12px 4px;color:#b4c2c6}
.reborn-app .tabs button.on {color:#edc591;border-bottom:3px solid #edc591}
.reborn-scene {position:relative;isolation:isolate;overflow:hidden;background:#152b32;min-height:220px}
.scene-backdrop {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-3;opacity:.88}
.scene-light {position:absolute;inset:0;background:linear-gradient(90deg,#10191cf2,#10191c99 48%,transparent);z-index:-2}
.scene-grain {position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0c161bb0,transparent 45%);pointer-events:none}
.scene-content {padding:32px;position:relative}
.reborn-kicker {display:block;font-size:10px;letter-spacing:.22em;font-weight:700;color:#e7bf89;margin-bottom:18px}
.career-atmosphere {min-height:240px;border-radius:0}
.career-atmosphere h1 {max-width:13ch;font-size:clamp(42px,5.5vw,76px);letter-spacing:-.045em;text-transform:none;line-height:.92}
.career-chapter {display:flex;align-items:center;gap:25px;margin-top:25px;flex-wrap:wrap}
.career-chapter>span {font-size:10px;letter-spacing:.17em;color:#bdc6c5}
.career-atmosphere.mood-pressione .scene-light {background:linear-gradient(90deg,#231619f5,#331e2390,transparent)}
.career-atmosphere.mood-derby .scene-light {background:linear-gradient(90deg,#17272ff5,#293b4880,transparent)}
.career-atmosphere.mood-celebrazione .scene-light {background:linear-gradient(90deg,#292319f5,#50412b77,transparent)}
.reborn-app .hero-match {padding:24px 32px;background:#1a292d;border-radius:0;margin-top:0;border:0}
.reborn-app .hm-teams {padding:20px 0;max-width:700px;margin:auto}
.reborn-app .hm-team strong {font-size:23px}
.reborn-app .hm-team .crest {width:52px!important;height:58px!important}
.reborn-app .hm-meta {font-size:12px;color:#afc1c5}
.reborn-app .hm-actions {margin-top:18px}
.reborn-app .universe-hub {border:0;border-bottom:1px solid #506064;padding:12px 0;margin:0;background:transparent}
.reborn-app .universe-hub button {border-radius:0;border:0;background:transparent;border-left:1px solid #405354;box-shadow:none}
.career-details {margin-top:25px}
.career-details summary {font-size:20px;cursor:pointer;display:list-item;border-top:1px solid #405354;padding:20px 0;color:#e8e4da}
.career-details summary span {font-size:12px;color:#a5b4b8;margin-left:20px}
.career-details .home-grid {padding-top:20px}
.talent-ribbon {display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.talent-ribbon>span {font-size:9px;letter-spacing:.2em;color:#e7bf89}
.talent-ribbon button {background:#14252daa;border:0;border-bottom:1px solid #dfbe8d;color:#fff;padding:8px 12px}
.player-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:18px 0}
.roster-player {position:relative;isolation:isolate;overflow:hidden;min-height:310px;background:linear-gradient(155deg,#355357,#1c2c32 70%);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:3px solid #e7bf89}
.roster-player:nth-child(3n+2) {background:linear-gradient(150deg,#514b3e,#202b31 70%)}
.roster-number {position:absolute;top:20px;left:22px;font:700 54px/1 var(--f-display);color:#eee5d6}
.roster-number small {display:block;font:700 11px var(--f-body);letter-spacing:.1em;margin-top:8px}
.player-silhouette {position:absolute;right:15px;top:78px;width:110px;height:155px;z-index:-1;background:#a5b7b742;clip-path:polygon(30% 0,65% 0,75% 10%,75% 28%,65% 40%,95% 54%,100% 100%,0 100%,5% 54%,30% 40%,20% 28%,20% 10%)}
.roster-name {display:block;text-align:left;background:transparent;border:0;padding:0;margin-top:170px}
.roster-name strong {display:block;font:700 27px/1.05 var(--f-display);letter-spacing:-.02em;color:#f3ece0}
.roster-name span,.roster-status {font-size:11px;color:#c4d0d0}
.roster-status {display:flex;justify-content:space-between;gap:12px;margin:12px 0}
.roster-compare {font-size:12px;display:flex;align-items:center;gap:10px}
.reborn-app .player-hero {border:0;background:#1d3035;padding:35px;border-radius:0;align-items:center}
.reborn-app .ph-info h1 {font-size:clamp(36px,5vw,66px);letter-spacing:-.035em}
.reborn-app .ph-card {border-radius:0;transform:rotate(-3deg);border:1px solid #b9c4b9}
.reborn-app[data-environment="mercato"] .page-h {background:url('cinema-firma.svg') right 35%/65% auto no-repeat;padding:30px;background-color:#15232b}
.reborn-app[data-environment="tattiche"] .content {background:radial-gradient(ellipse at top right,#254634,#101b1c 65%)}
.reborn-app[data-environment="finanze"] .page-h {background:#ded8c6;color:#15252c;padding:30px;min-height:200px}
.reborn-app[data-environment="finanze"] .page-h p {color:#3f5559}
.reborn-app[data-environment="finanze"] .two-col {grid-template-columns:1.7fr 1fr}
.reborn-app[data-environment="universo-live"] .page-h {border-left:5px solid #cf7663;padding:20px}
.reborn-app[data-environment="notizie"] .news-page {grid-template-columns:1.6fr 1fr;gap:0}
.reborn-app[data-environment="notizie"] .news-card {border-radius:0;border:0;border-bottom:1px solid #486065;background:transparent;padding:30px}
.reborn-app[data-environment="notizie"] .news-card.lead {background:linear-gradient(90deg,#17232cf5,#17232c70),url('cinema-stampa.svg') center/cover;max-width:none;padding:35px;min-height:320px}
.reborn-app[data-environment="notizie"] .news-card.lead h3 {font-size:40px;color:#f2e9d9}
.development-studio {display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.development-studio .scene-content {padding:35px}
.development-studio .reborn-scene {min-height:450px;position:sticky;top:90px}
.development-studio h2 {font-size:56px;text-transform:none;letter-spacing:-.035em;line-height:.95}
.development-numbers {display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:55px}
.development-numbers span {display:block;font-size:11px;color:#cad1cb}
.development-numbers b {font-size:48px;color:#e7bf89}
.development-work {padding:15px 0}
.development-work h3 {color:#e7bf89;margin:24px 0 12px}
.development-work ul {padding-left:18px;color:#bccbcb;line-height:1.8}
.development-work form {border-top:1px solid #445354;margin-top:20px;padding:10px 0}
.growth-history {display:flex;align-items:flex-end;gap:8px;overflow:auto;padding:20px 0;border-bottom:1px solid #435457}
.growth-history>div {min-width:40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.growth-history i {display:block;background:#e7bf89;width:14px;max-height:130px}
.growth-history small {font-size:8px;white-space:nowrap;color:#b3c2c3}
.cutscene {min-height:470px}
.cutscene .scene-backdrop {animation:scene-reveal 4s ease-out both;transform-origin:80% 50%}
.cutscene.variant-1 .scene-backdrop {transform:scale(1.06) translateX(-2%)}
.cutscene.variant-2 .scene-backdrop {object-position:90% 35%}
.cutscene h2 {font-size:clamp(35px,5vw,65px);line-height:.96;text-transform:none;max-width:16ch;letter-spacing:-.035em;margin:65px 0 22px;color:#f1e9da}
.cutscene p {max-width:50ch;font-size:15px;line-height:1.6;color:#d0d9d7}
.cutscene-controls {display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.story-heading {padding:20px 0 40px;border-bottom:1px solid #465957}
.story-heading h1 {font-size:clamp(70px,10vw,130px);line-height:.78;letter-spacing:-.065em;text-transform:none}
.story-heading h1 em {color:#e7bf89;font-style:normal}
.story-heading p {margin-top:28px;color:#bbc8c9}
.story-filters {display:flex;gap:25px;margin:25px 0}
.story-filters label {display:flex;align-items:center;gap:15px}
.manager-identity {border-left:3px solid #e7bf89;padding:18px 25px;background:#1a2b2e;margin-bottom:25px}
.manager-identity>span {font-size:10px;letter-spacing:.17em;color:#e7bf89}
.manager-identity h2 {font-size:34px;margin:10px 0}
.manager-identity>div {font-size:12px;color:#afc2c1;margin-top:10px}
.story-filmstrip {display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.moment-poster {padding:0;text-align:left;border:0;background:transparent;transition:transform 160ms}
.moment-poster:hover {transform:translateY(-3px)}
.moment-poster .reborn-scene {height:280px}
.moment-poster:nth-child(3n) {grid-column:span 2}
.moment-poster h2 {font-size:35px;line-height:1;text-transform:none;max-width:17ch;margin:40px 0 18px;color:#e9e6dc}
.moment-poster span,.moment-poster small {color:#c9d3ca;font-size:11px}
.press-stage {min-height:420px}
.press-stage h3 {font-size:28px;text-transform:none;max-width:36ch;color:#ede5d7;line-height:1.2;margin:45px 0 24px}
.press-stage .press-opts {display:grid;grid-template-columns:1fr;max-width:700px}
.press-stage .press-opt {background:#16282ddd;border:1px solid #6b7776;text-align:left;padding:15px;color:#e4e6de}
.press-stage .press-opt.on {border-color:#e7bf89;background:#473f2bdd}
.press-stage.variant-1 .scene-backdrop {object-position:80% 35%;transform:scale(1.1)}
.press-stage.variant-2 .scene-backdrop {object-position:65% 50%;transform:scale(1.05)}
@keyframes scene-reveal {from{transform:scale(1.04);opacity:.3}to{transform:scale(1);opacity:.88}}
@media(max-width:900px){
 .reborn-app .side {grid-template-columns:1fr;padding:10px 14px;gap:7px}.reborn-app .brand {font-size:10px}.reborn-app .brand-mark {height:15px}
 .reborn-app .top {padding:14px;flex-wrap:wrap}.reborn-app .content {padding:8px 14px 70px}
 .development-studio {grid-template-columns:1fr}.development-studio .reborn-scene {position:static;min-height:300px}
 .story-filmstrip {grid-template-columns:1fr}.moment-poster:nth-child(3n){grid-column:auto}
 .reborn-app[data-environment="notizie"] .news-page {grid-template-columns:1fr}
 .reborn-app[data-environment="finanze"] .two-col {grid-template-columns:1fr}
 .career-details summary span {display:block;margin:8px 0}.career-atmosphere h1 {font-size:48px}
 .scene-content {padding:24px}.reborn-app .hm-team strong {font-size:18px}
 .story-filters {flex-wrap:wrap}.player-gallery {grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .cutscene .scene-backdrop {animation:none}.reborn-app * {transition:none!important}
 .moment-poster:hover {transform:none}
}

.modal-bg:has(.reborn-scene) .modal {background:#16252b;border:1px solid #516061;border-radius:2px}
.modal-bg:has(.reborn-scene) .modal-head {background:#16252b;border:0}
.modal-bg:has(.reborn-scene) .btn.primary {background:#e7bf89;color:#17252b;border-color:#e7bf89;border-radius:2px}
.modal-bg:has(.reborn-scene) .btn {border-radius:2px}
.reborn-app .universe-command {background:transparent;border:0;padding:20px 0}
.reborn-app .uc-heading>span {display:none}
.reborn-app .uc-heading>h2 {font-size:16px;letter-spacing:.14em;color:#a7b9bd;margin-bottom:15px}

.pre-match-scene h2 {font-size:clamp(26px,4vw,50px);text-transform:none;line-height:1;max-width:25ch;margin:24px 0}
.pre-match-scene h2 em {font-size:15px;letter-spacing:.1em;color:#b8c6c7;font-style:normal}
.prematch-lineups {display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:24px 0}
.prematch-lineups h3 {color:#e7bf89;margin-bottom:10px}
.prematch-lineups section>span {font-size:10px;color:#abbfc3}
.prematch-lineups section>div {display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.prematch-lineups section>div>span {font-size:11px;background:#17272ecc;padding:4px 9px}
.match-result-scene .report-h {background:transparent;border:0}
@media(max-width:700px){.prematch-lineups {grid-template-columns:1fr}}

.start .start-hero {background:linear-gradient(90deg,#101b1cee,#101b1c77),url('cinema-stadio.svg') center/cover;border-radius:0;padding:42px}
.start .brand-big {letter-spacing:-.025em;line-height:.9}
.start .start-hero:after {content:"ANYWHERE / 1.3.0";display:block;color:#e7bf89;font-size:10px;letter-spacing:.2em;margin-top:20px}
.start .start-hero .btn.primary {background:#e7bf89;color:#192a2c;border-radius:2px;border-color:#e7bf89}

/* CAREER EVOLUTION: archivio sportivo, leggibile anche con il controller. */
.archive-table{max-width:1100px;margin:22px auto}.archive-row{display:grid;grid-template-columns:minmax(40px,auto) minmax(180px,1fr) minmax(180px,auto);gap:18px;align-items:center;padding:18px;border-bottom:1px solid #ffffff20;background:#141b24}.archive-row small{display:block;color:#9da9b9;margin-top:5px}.season-recap h2{font-size:clamp(30px,5vw,66px)}.recap-results p{font-size:clamp(16px,2vw,24px);margin:12px 0}.num-in input{min-width:0;width:100%}.num-in .icon-btn{flex-shrink:0}.num-in{display:flex;align-items:center}@media(max-width:700px){.archive-row{grid-template-columns:40px 1fr}.archive-row>span:last-child{grid-column:2}.archive-row> b:last-child{grid-column:2}}

.performance-trio{display:flex;gap:20px;flex-wrap:wrap}.performance-trio span{color:#aeb8c4;font-size:11px;letter-spacing:.08em}.performance-trio b{display:block;color:#fff;font-size:28px;letter-spacing:0}.replacement-candidates{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}

.sub-candidates{display:grid;gap:8px}.sub-player{display:grid;grid-template-columns:40px 1fr;text-align:left;gap:5px 12px;background:#17222c;color:#fff;border:1px solid #ffffff22;padding:12px;border-radius:8px}.sub-player>span:last-child{grid-column:2;font-size:12px;color:#b7c1ce}.sub-player.sel{border-color:#ffd178;background:#343025}.sub-player:disabled{opacity:.4}

/* Allenamento: una rosa, un percorso, un obiettivo. */
.training-hero,.academy-hero{min-height:220px;padding:30px;margin-bottom:24px}.training-hero h1,.academy-hero h1{font-size:clamp(28px,4vw,52px);line-height:1.05}.training-layout{display:grid;grid-template-columns:minmax(240px,32%) 1fr;gap:30px}.training-roster{max-height:850px;overflow:auto;display:flex;flex-direction:column;gap:7px}.training-player{display:grid;grid-template-columns:38px 1fr 40px;gap:10px;align-items:center;background:#14222a;color:#e9f1f4;border:1px solid #ffffff19;padding:14px;text-align:left;border-radius:8px}.training-player> b{font-size:25px}.training-player small{display:block;font-size:11px;color:#aebfc7;margin-top:5px}.training-player.sel{border-left:5px solid #dcbd7c;background:#25333a}.training-player em{font-size:12px;font-style:normal}.training-detail{background:linear-gradient(145deg,#162a31,#10191f);padding:28px;border-radius:12px}.training-title h2{font-size:36px;margin:10px 0 24px}.training-title>span{color:#a3bec2;text-transform:uppercase;letter-spacing:.14em}.training-signal{display:flex;gap:15px;flex-wrap:wrap;color:#b1c8ce;font-size:13px;margin:22px 0}.training-tags{display:flex;gap:7px;flex-wrap:wrap}.training-tags>span{border:1px solid #ffffff21;padding:8px;border-radius:4px;font-size:12px}.training-progress{border-left:3px solid #c6aa6a;padding:20px;margin:26px 0;background:#233139}.training-progress progress{width:100%;height:10px;accent-color:#d5bd7b;margin-top:15px}.training-plan{margin-top:30px}.training-plan .field{max-width:550px}.academy-chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.academy-chapter{display:grid;grid-template-columns:40px 1fr;text-align:left;gap:7px;padding:20px;background:#14232c;color:#fff;border:1px solid #ffffff22;border-radius:8px}.academy-chapter b{font-size:25px;color:#bc9f67}.academy-chapter span{grid-column:2;color:#aebac5;font-size:12px}.academy-chapter.complete{border-color:#5d8e81}.academy-guide{position:fixed;z-index:90;right:24px;bottom:18px;width:min(550px,calc(100vw - 32px));max-height:40vh;overflow:auto;padding:22px;background:#10252ef5;color:#edf2f4;border:1px solid #ddbb78;box-shadow:0 18px 60px #0009;border-radius:12px}.academy-guide-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#dcbf83}.academy-guide h2{font-size:22px;margin:10px 0}.academy-guide p,.academy-guide>strong{font-size:13px;line-height:1.5}.academy-guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.academy-highlight{outline:3px solid #f8cc76!important;outline-offset:5px;box-shadow:0 0 0 10px #f8cc7620!important}.academy-active .content{padding-bottom:280px}@media(max-width:850px){.training-layout{grid-template-columns:1fr}.training-roster{max-height:300px}.training-detail{padding:20px}.academy-guide{right:16px;padding:16px}.training-title h2{font-size:29px}}

.tactics-team{padding:18px;background:#14202a;border-radius:8px;margin:18px 0}.tactics-team>summary,.tactical-attributes>summary{cursor:pointer;font-weight:700;padding:10px}.tactical-attributes{margin:15px 0}.attribute-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.attribute-grid span{display:flex;justify-content:space-between;gap:7px;font-size:12px}.replacement-candidates{max-height:260px;overflow:auto}

/* =====================================================================================================
   1.3.0 "Anywhere" — telefono, tablet e touch. Stessa interfaccia del computer, disposizione diversa.
   ===================================================================================================== */
.mob-only, .mob-tabs, .d-short { display: none; }
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(3,6,10,.62); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(640px, 100%); max-height: calc(var(--vh, 1vh) * 86); overflow-y: auto; background: linear-gradient(180deg, #172333, #101722); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px #000a; animation: fu-sheet .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fu-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 2px auto 10px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 12px; font-family: var(--f-display); font-size: 19px; letter-spacing: .05em; text-transform: uppercase; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sheet-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 84px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surf); color: var(--ink-2); font-size: 12.5px; line-height: 1.2; text-align: center; }
.sheet-grid button.on { border-color: var(--club); color: var(--ink); background: var(--surf-2); }
.sheet-grid svg, .mob-tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sheet-list { display: flex; flex-direction: column; gap: 10px; }
.sheet-list .btn { min-height: 52px; font-size: 16px; justify-content: center; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* touch: niente funzioni solo al passaggio del mouse, bersagli comodi */
.is-touch .btn, .is-touch button.link { touch-action: manipulation; }
.is-touch .btn { min-height: 44px; }
.is-touch .icon-btn { min-width: 44px; min-height: 44px; }
.is-touch input, .is-touch select, .is-touch textarea { font-size: 16px; min-height: 44px; } /* sotto 16px Safari ingrandisce la pagina */
.is-touch input[type=range] { min-height: 36px; }
.is-touch .tbl tbody tr { cursor: default; }

/* grafica leggera: stesse partite e stessi risultati, meno effetti */
.lowfx *, .lowfx *::before, .lowfx *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
.lowfx .top, .lowfx .modal-bg, .lowfx .sheet-bg { backdrop-filter: none !important; }
.lowfx .modal, .lowfx .panel, .lowfx .sheet { box-shadow: none !important; }

@media (max-width: 900px) {
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  .app, .reborn-app { display: block !important; min-height: calc(var(--vh, 1vh) * 100); }
  .app .side, .reborn-app .side { display: none !important; }
  .mob-only { display: inline-flex; align-items: center; justify-content: center; }
  .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; flex-wrap: nowrap; }
  .top .icon-btn { width: 40px; height: 40px; padding: 0; font-size: 20px; }
  .top-club { min-width: 0; } .top-club div { min-width: 0; }
  .top-club strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .top-club span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 11px; }
  .top-date { padding: 4px 6px; font-size: 14px; white-space: nowrap; } .d-long { display: none; } .d-short { display: inline; }
  .gsearch { display: none; }
  .top.search-open .gsearch { display: block; grid-column: 1 / -1; grid-row: 2; max-width: none; min-width: 0; }
  .top-adv { grid-column: 6; } .top-adv .btn:not(.primary) { display: none; }
  .top-adv .btn.primary { min-height: 40px; padding: 0 14px; font-size: 15px; }
  .content { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .mob-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 4px 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mob-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; justify-content: center; border: 0; background: none; color: var(--muted); font-size: 11px; letter-spacing: .02em; border-radius: 10px; }
  .mob-tabs button.on { color: var(--ink); background: var(--surf); box-shadow: inset 0 2px 0 var(--club); }
}
@media (max-width: 760px) {
  .page-h h1, .content h1 { font-size: clamp(26px, 8vw, 36px); line-height: 1.05; }
  .panel-h { padding: 12px; } .panel-b { padding: 12px; }
  /* finestre: a tutta larghezza, ancorate in basso come i fogli nativi */
  .modal-bg { padding: 0; align-items: end; place-items: end center; }
  .modal { width: 100%; max-height: calc(var(--vh, 1vh) * 92); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal-f { position: sticky; bottom: 0; background: inherit; flex-wrap: wrap; }
  .modal-f .btn { flex: 1 1 140px; }
  /* tabelle larghe come schede */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl.cardify, table.tbl.cardify tbody { display: block; width: 100%; }
  table.tbl.cardify thead { display: none; }
  table.tbl.cardify tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
  table.tbl.cardify td { display: flex; flex-direction: column; gap: 1px; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.tbl.cardify td::before { content: attr(data-label); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  table.tbl.cardify td:first-child { grid-column: 1 / -1; font-size: 16px; font-weight: 600; }
  table.tbl.cardify td:first-child::before { display: none; }
  table.tbl.cardify td:empty { display: none; }
  table.tbl.cardify td:has(> button), table.tbl.cardify td:has(> .btn) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  table.tbl.cardify td:has(> button)::before, table.tbl.cardify td:has(> .btn)::before { width: 100%; }
  /* classifiche e confronti restano tabelle: colonna squadra fissa, scorrimento orizzontale */
  .table-tbl, .compare, .stats-tbl { font-size: 13px; }
  .table-tbl th, .table-tbl td { padding: 7px 6px; }
  .table-tbl td:nth-child(2), .table-tbl th:nth-child(2) { position: sticky; left: 0; background: var(--surf); z-index: 1; }
  .two-col, .grid2, .grid3 { grid-template-columns: 1fr !important; }
  .academy-guide { left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-height: 34vh; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)) !important; left: 10px; right: 10px; }
  .pad-hints { display: none; }
}
/* telefono in orizzontale: barre più sottili, più spazio al campo */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .app, .reborn-app { display: block !important; } .app .side, .reborn-app .side { display: none !important; } .mob-only { display: inline-flex; align-items: center; justify-content: center; }
  .top { padding-top: 4px; padding-bottom: 4px; } .gsearch { display: none; } .top.search-open .gsearch { display: block; }
  .top-adv .btn:not(.primary) { display: none; }
  .mob-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: env(safe-area-inset-left); right: env(safe-area-inset-right); bottom: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .mob-tabs button { display: flex; flex-direction: row; gap: 6px; min-height: 40px; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); font-size: 12px; }
  .mob-tabs button.on { color: var(--ink); }
  .content { padding: 10px max(12px, env(safe-area-inset-right)) calc(52px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
}
/* tattiche al tocco */
.drag-ghost { position: fixed; z-index: 100; transform: translate(-50%, -130%); pointer-events: none; padding: 6px 12px; border-radius: 20px; background: var(--club); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px #000a; white-space: nowrap; }
.slot.drop .shirt { outline: 3px solid var(--amber); outline-offset: 3px; }
.is-touch .pitch-v .slot { touch-action: none; }
.sel-close { display: none; }
@media (max-width: 760px) {
  .tactics .sel-panel.open { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 45; max-height: calc(var(--vh, 1vh) * 55); overflow-y: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px #000c; }
  .tactics .sel-panel.open .sel-close { display: inline-flex; position: absolute; top: 8px; right: 10px; z-index: 2; }
  .tactics .sel-panel.open .panel-h { position: sticky; top: 0; background: inherit; z-index: 1; padding-right: 90px; }
  .tactics .sel-panel:not(.open) { display: none; }
  .pitch-v { max-width: 520px; margin: 0 auto; }
  .pitch-v .slot .shirt { width: 40px; height: 40px; font-size: 15px; }
  .pitch-v .slot .nm { font-size: 11px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .plist li { min-height: 52px; }
}
/* Match Director sul telefono */
@media (max-width: 760px) {
  .live { padding: calc(8px + env(safe-area-inset-top)) 8px calc(84px + env(safe-area-inset-bottom)); gap: 8px; overflow-x: hidden; }
  .scoreboard { gap: 6px; padding: 8px 10px 14px; border-radius: 14px; position: sticky; top: env(safe-area-inset-top); z-index: 5; }
  .sb-team { font-size: 14px; gap: 6px; flex-direction: column; text-align: center; line-height: 1.1; min-width: 0; } .sb-team.r { flex-direction: column-reverse; }
  .sb-team span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sb-team svg, .sb-team .crest { width: 30px !important; height: 30px !important; }
  .sb-score b { font-size: 38px; min-width: 26px; } .sb-score span { font-size: 22px; } .sb-score { gap: 6px; }
  .director-views { flex-wrap: wrap; } .director-views button { flex: 1; min-height: 40px; }
  .live-grid { grid-template-columns: 1fr; }
  .live-ctrl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .live-ctrl .btn.primary { flex: 1 1 auto; min-height: 50px; font-size: 16px; }
  .live-ctrl .seg button { min-width: 42px; min-height: 44px; }
  .live-ctrl .btn.ghost { font-size: 12px; padding: 4px 8px; min-height: 44px; width: 64px; line-height: 1.1; white-space: normal; text-align: center; }
  .live-ctrl .seg button { min-width: 36px; padding: 0 4px; }
  .live-ctrl .btn.xl { grid-column: 1 / -1; }
  .live-side { max-height: none; overflow: visible; padding: 2px 8px 10px; }
  .live-side .tabs { position: sticky; top: 92px; z-index: 4; background: var(--surf); overflow-x: auto; }
  .sub-player { min-height: 52px; }
  .stats-tbl td { padding: 6px 4px; }
}
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .live { padding: 6px max(10px, env(safe-area-inset-left)) 6px max(10px, env(safe-area-inset-right)); gap: 6px; }
  .scoreboard { padding: 4px 12px; } .sb-team { font-size: 15px; } .sb-score b { font-size: 30px; }
  .live-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
  .live { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .live-side { max-height: calc(var(--vh, 1vh) * 100 - 130px); overflow-y: auto; }
  .live-ctrl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .live-ctrl .btn.primary { min-height: 42px; }
  .live-side .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .director-views, .poss { display: none; }
}
/* salvataggi e sincronizzazione */
.saves-sync { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sync-row > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.sync-row .tag { align-self: flex-start; }
.sync-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conflict-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; } .conflict-cmp > div { background: var(--surf-2); border-radius: 12px; padding: 12px; }
.conflict-actions { flex-direction: column; align-items: stretch; } .conflict-actions .btn { white-space: normal; text-align: center; }
label.check { display: flex; gap: 10px; align-items: flex-start; } label.check input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; }
.cloud-only h4 { margin: 10px 0 0; }
@media (max-width: 760px) { .sync-actions { width: 100%; } .sync-actions .btn { flex: 1 1 140px; } .conflict-cmp { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rh-teams { gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rh-team strong, .match-result-scene .rh-team strong { font-size: 16px !important; overflow-wrap: anywhere; }
  .rh-team svg, .rh-team .crest { width: 44px !important; height: 44px !important; }
  .rh-score, .match-result-scene .rh-score { font-size: 46px !important; gap: 8px; } .rh-score span { font-size: 28px; }
  .rh-scorers { gap: 12px; font-size: 12px; }
  .match-result-scene { padding: 16px 10px !important; }
}
/* 1.3.0: telefoni stretti (iPhone SE 1a gen., 320 px) — la barra in alto non deve mai allargare la pagina */
@media (max-width: 380px) {
  .top { gap: 3px; padding-left: 6px; padding-right: 6px; }
  .top .icon-btn { width: 36px; height: 36px; font-size: 18px; }
  .top-date { padding: 2px 3px; font-size: 12px; }
  .top-adv .btn.primary { padding: 0 9px; font-size: 14px; min-height: 36px; }
  .top-club img, .top-club .crest { width: 28px; height: 28px; }
  .mob-tabs button { font-size: 10px; min-width: 0; }
}
@media (max-width: 760px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .detail-row { flex-wrap: wrap; min-width: 0; }
  .detail-row .grow { flex: 1 1 100%; min-width: 0; }
}
.update-bar { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: var(--surf, #141c26); border: 1px solid var(--line, #2a3440); box-shadow: 0 12px 40px #0008; color: var(--ink, #e6edf5); font-size: 14px; }
.update-bar span { flex: 1 1 220px; min-width: 0; }
@media (max-width: 900px) { .update-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }