:root{
  --bg:#000000; --fg:#ffffff; --bar-height:100%; --side-pad: 50px;  /* un filo più ampio per non “stringere” i testi */ --gap:20px;
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
html, body {
  background: #000 !important;
  margin: 0;
  padding: 0;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:transparent; }
.ticker-bar{ position:relative; height:var(--bar-height); display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--gap); padding:0 var(--side-pad); background:rgba(0,0,0,.92); color:var(--fg);
  font-family:var(--font); backdrop-filter: blur(6px); border-top: 4px solid #e6263f; }
.ticker-left{ display:flex; align-items:center; gap:10px; }
.logo{ height: clamp(50px, 4.5vh, 70px); max-height: 54px;   /* logo un po' più alto dentro un frame 64px */ width:auto; display:block;}
.brand{ font-weight:800; letter-spacing:.3px; font-size: clamp(18px, 3.5vh, 34px);   /* scritta “AdnKronos” più grande */ white-space:nowrap; line-height:1; }
.ticker-center{ overflow:hidden; height:100%; }
.marquee-viewport{ overflow:hidden; width:100%; height:100%; display:flex; align-items:center; position:relative; }
.marquee-viewport::before,.marquee-viewport::after{ content:""; position:absolute; top:0; bottom:0; width:8%; pointer-events:none; z-index:2; }
.marquee-viewport::before{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 100%); }
.marquee-viewport::after{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 100%); }
.marquee-track{
  white-space:nowrap; display:inline-block; line-height:1; font-weight:600; text-transform:uppercase;
  font-size: clamp(50px, 5.5vh, 70px);  /* titoli più grandi */ padding-left:100%; animation:marquee 40s linear infinite;
}
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.ticker-right{ display:flex; align-items:center; }
.clock{ font-variant-numeric:tabular-nums;  font-weight:650; font-size: clamp(50px, 5.5vh, 70px);  /* orario più grande */ opacity:0; line-height:1; }
.fade-in-start{ animation:fadeIn .6s ease forwards; } @keyframes fadeIn{ to{ opacity:1; } }
.ticker-bar.error{ background:#3b0f14; } .ticker-bar.error .marquee-track{ color:#ffd1d6; }