/* monitor.css — stile comune di StarYes (index.php = 4 finestre; demo-consigli.php = 8 finestre via body.win8). */
:root{ --navy:#0B1437; --blue:#2B8FFF; --blue2:#7CC0FF; --gold:#FFC542; --win:#28e07a; }
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1200px 800px at 50% 42%, #0c1330 0%, #070a18 55%, #04050d 100%);
  color:#cfe0ff; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100%; overflow:hidden; user-select:none;
}
.bg-logo{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('icon.png') center 55% / min(70vh,70vw) no-repeat; opacity:.06}

/* ---- barra superiore brand ---- */
.topbar{position:fixed; top:0; left:0; right:0; height:74px; z-index:30; display:flex; align-items:stretch;
  background:linear-gradient(90deg,#0a1130,#0e1a44); border-bottom:1px solid rgba(43,143,255,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.35); overflow:hidden}
.topbar .brand{flex:none; display:flex; align-items:center; gap:12px; padding:0 16px 0 24px}
.topbar .brand img{height:40px}
.topbar .brand .t{font-size:24px; font-weight:800; letter-spacing:1px; color:#eaf2ff}
.topbar .brand .t span{color:var(--blue2)}
.topbar .live-label{flex:none; align-self:center; display:flex; align-items:center; gap:7px;
  background:var(--blue); color:#001023; font-weight:800; font-size:clamp(11px,1.1vw,14px); letter-spacing:1px;
  padding:7px 13px; border-radius:999px; margin-right:6px}
.topbar .live-label .dot{width:9px; height:9px; border-radius:50%; background:#e8264b;
  box-shadow:0 0 8px #e8264b; animation:livepulse 1.2s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
/* striscia risultati live che scorre nel banner (da scores.php) */
.scores-strip{flex:1; height:100%; overflow:hidden; position:relative}
.scores-track{position:absolute; top:0; height:100%; display:flex; align-items:center; white-space:nowrap;
  will-change:transform; animation:ticker-scroll linear infinite}
.score-item{display:inline-flex; align-items:center; gap:8px; padding:0 22px; font-size:clamp(16px,1.6vw,21px); color:#eaf2ff}
.score-item .lg{font-size:clamp(11px,1vw,13px); color:#7CC0FF; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-right:3px}
.score-item .nm{color:#dce8ff}
.score-item .sc{color:#fff; font-weight:800; font-size:clamp(18px,1.8vw,23px)}
.score-item .dash{color:#7CC0FF; opacity:.6; margin:0 1px}
.score-item .b{height:clamp(20px,2.6vh,26px); width:clamp(20px,2.6vh,26px); object-fit:contain; flex:none}
.score-item .live{color:#36e07a; font-weight:800; font-size:clamp(12px,1.1vw,14px); margin-left:5px}
.score-item .lvl{color:#9fc4ff; font-size:clamp(11px,1vw,13px); margin-left:5px}
.scores-track .sep-logo{height:clamp(18px,2.4vh,26px); width:auto; flex:none; vertical-align:middle; opacity:.5}
.demo-badge{position:fixed; top:84px; right:14px; z-index:31; font-size:11px; letter-spacing:2px;
  color:#9fc4ff; background:rgba(43,143,255,.12); border:1px solid rgba(43,143,255,.35);
  padding:4px 10px; border-radius:8px; opacity:.7}

/* ---- layout a griglia: [finestre sx] [YESSY] [finestre dx] — DEFAULT 4 finestre (2 righe) ---- */
.layout{position:fixed; inset:74px 0 102px 0; z-index:4; display:grid;
  grid-template-columns:1fr 1.05fr 1fr; grid-template-rows:1fr 1fr;
  gap:clamp(12px,2vh,28px); padding:clamp(12px,2.2vh,30px)}
.cell{min-width:0; min-height:0; display:flex; align-items:center; justify-content:center}
.cell.yessy{grid-column:2; grid-row:1 / span 2; position:relative}

/* ---- YESSY al centro ---- */
.glow{position:absolute; top:46%; left:50%; width:70%; height:60%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(43,143,255,.5), rgba(43,143,255,0) 65%);
  filter:blur(24px); opacity:.5; z-index:0; animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.62;transform:translate(-50%,-50%) scale(1.06)}}
.cell.yessy.win .glow{background:radial-gradient(circle, rgba(40,224,122,.6), rgba(255,197,66,0) 65%)}
.avatar{position:relative; z-index:1; width:100%; max-width:640px; aspect-ratio:16/9;
  filter:drop-shadow(0 0 22px rgba(43,143,255,.45)); transition:filter .25s}
.cell.yessy.win .avatar{filter:drop-shadow(0 0 36px rgba(40,224,122,.85))}
.vsrc{position:fixed; top:0; left:0; width:2px; height:2px; opacity:0; pointer-events:none; z-index:-1}
.yessy-cap{position:absolute; bottom:2%; left:50%; transform:translateX(-50%); z-index:2;
  font-size:13px; letter-spacing:2px; color:#7CC0FF; opacity:.55; white-space:nowrap}

/* ---- finestra girevole (porta girevole = rotateY) ---- */
.bwin{width:100%; height:100%; max-width:480px; perspective:1600px}
.bcard{position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.45,.05,.2,1)}
.bface{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:20px; overflow:hidden}
.bface.back{transform:rotateY(180deg)}

/* ---- contenuto consiglio ---- */
.tip{position:relative; width:100%; height:100%; padding:clamp(12px,1.6vw,20px);
  background:linear-gradient(160deg, rgba(16,24,52,.94), rgba(9,14,33,.96));
  border:1px solid rgba(43,143,255,.28); border-radius:20px;
  box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(124,192,255,.05);
  display:flex; flex-direction:column; gap:clamp(5px,1vh,11px); backdrop-filter:blur(6px); overflow:hidden}
.tip::before{content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--accent,#2B8FFF); box-shadow:0 0 18px var(--accent,#2B8FFF)}
.tip-head{display:flex; align-items:center; justify-content:space-between}
.sport-pill{display:inline-flex; align-items:center; gap:8px; font-size:clamp(15px,1.3vw,19px);
  font-weight:800; letter-spacing:.5px; color:#001023; background:var(--accent,#2B8FFF);
  padding:6px 13px; border-radius:999px}
.sport-pill .ico{font-size:1.15em; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.conf{font-size:clamp(14px,1.15vw,18px); letter-spacing:2px; color:var(--gold)}
.conf .off{color:rgba(255,197,66,.25)}
.tip-event{font-size:clamp(18px,1.7vw,26px); font-weight:700; color:#eaf2ff; line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tip-league{font-size:clamp(12px,1vw,15px); color:#7CC0FF; letter-spacing:1px; text-transform:uppercase; opacity:.9}
.tip-detail{font-size:clamp(12.5px,1.02vw,15.5px); color:#a9c2e8; line-height:1.34; opacity:.92;
  flex:1 1 auto; min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tip-bottom{display:flex; align-items:stretch; gap:10px; margin-top:auto}
.tip-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.tip-market{background:rgba(43,143,255,.1); border:1px solid rgba(43,143,255,.3);
  border-radius:13px; padding:8px 13px}
.mk-label{font-size:clamp(10px,.8vw,12px); letter-spacing:2px; color:#7CC0FF; opacity:.8}
.mk-val{font-size:clamp(18px,1.7vw,26px); font-weight:800; color:#fff; line-height:1.1}
.tip-quota{border-radius:13px; background:linear-gradient(160deg,#FFD46b,#F5A623); color:#2a1700;
  display:flex; align-items:center; justify-content:space-between; padding:7px 14px;
  box-shadow:0 6px 18px rgba(245,166,35,.35)}
.q-label{font-size:clamp(10px,.8vw,12px); letter-spacing:2px; font-weight:800; opacity:.75}
.q-val{font-size:clamp(24px,2.2vw,34px); font-weight:900; line-height:1}
/* QR -> ricevuta da portare in cassa */
.tip-qr{flex:none; width:clamp(78px,8vw,118px); background:#fff; border-radius:13px;
  padding:6px 6px 4px; display:flex; flex-direction:column; align-items:center; gap:2px}
.tip-qr img{width:100%; height:auto; display:block; image-rendering:pixelated; border-radius:3px}
.qr-cap{font-size:clamp(8px,.72vw,10.5px); color:#0b1330; font-weight:800; text-align:center; line-height:1.05; letter-spacing:.2px}

/* ---- ticker notizie RSS (striscia in basso) ---- */
.ticker{position:fixed; left:0; right:0; bottom:34px; height:clamp(44px,5.2vh,60px); z-index:30;
  display:flex; align-items:center; background:linear-gradient(90deg,#0a1130,#0e1a44);
  border-top:1px solid rgba(43,143,255,.3); border-bottom:1px solid rgba(43,143,255,.18);
  overflow:hidden; box-shadow:0 -4px 20px rgba(0,0,0,.35)}
.ticker .label{flex:none; height:100%; display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--blue); color:#001023; font-weight:800; font-size:clamp(13px,1.3vw,19px); letter-spacing:1px}
.ticker .label img{height:clamp(18px,2.4vh,26px)}
.ticker .track-wrap{flex:1; height:100%; overflow:hidden; position:relative}
.ticker .track{position:absolute; top:0; display:flex; align-items:center; height:100%; white-space:nowrap;
  will-change:transform; animation:ticker-scroll linear infinite}
.ticker .item{font-size:clamp(15px,1.45vw,23px); color:#dcebff; padding:0 32px}
.ticker .item .src{color:#7CC0FF; font-weight:600; margin-right:8px}
.ticker .sep-logo{height:clamp(20px,2.8vh,30px); flex:none; vertical-align:middle}
@keyframes ticker-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---- footer responsabilità (brand-safe ADM) ---- */
.footer{position:fixed; left:0; right:0; bottom:0; height:34px; z-index:30;
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:12px; color:#7e93b8; background:rgba(7,11,28,.7); border-top:1px solid rgba(43,143,255,.18)}
.footer b{color:#9fc4ff}

/* ---- CHAT con YESSY (voce + testo) ---- */
.yessy-cap{top:8px; bottom:auto}   /* didascalia in alto: lascia spazio alla chat in basso */
.chatdock{position:fixed; left:50%; transform:translateX(-50%); bottom:104px; z-index:32;
  width:min(620px,92vw); display:flex; flex-direction:column; gap:8px; align-items:center}
.chat-reply{max-width:100%; display:none; background:rgba(8,13,30,.92); border:1px solid rgba(43,143,255,.35);
  border-radius:14px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.5); backdrop-filter:blur(8px);
  font-size:clamp(13px,1.15vw,16px); line-height:1.4; text-align:center}
.chat-reply.show{display:block}
.chat-reply .cr-you{color:#9fc4ff; font-size:.9em; opacity:.85; margin-bottom:3px}
.chat-reply .cr-yessy{color:#eaf2ff}
.chat-reply .cr-yessy.thinking{color:#7CC0FF; font-style:italic}
.chat-controls{display:flex; gap:8px; width:100%; align-items:center;
  background:rgba(12,18,40,.85); border:1px solid rgba(43,143,255,.3); border-radius:14px;
  padding:8px; backdrop-filter:blur(8px); box-shadow:0 8px 26px rgba(0,0,0,.45)}
.chat-controls input{flex:1; min-width:0; background:#070b1c; border:1px solid rgba(43,143,255,.3);
  color:#dcebff; padding:11px 13px; border-radius:10px; font-size:15px; outline:none}
.chat-controls input:focus{border-color:var(--blue)}
.chat-controls button{cursor:pointer; border:1px solid rgba(43,143,255,.45); background:rgba(43,143,255,.14);
  color:#dcebff; border-radius:10px; font-size:15px; padding:11px 14px; transition:.15s}
.chat-controls button:hover{background:rgba(43,143,255,.3)} .chat-controls button:active{transform:translateY(1px)}
.chat-controls .mic{font-size:18px; padding:9px 13px}
.chat-controls .mic.rec{background:#e8264b; border-color:#e8264b; color:#fff; animation:livepulse 1s infinite}
.chat-controls .send{background:var(--blue); color:#001023; border-color:var(--blue); font-weight:700}
/* stati avatar durante la chat */
.cell.yessy.talking .avatar{filter:drop-shadow(0 0 30px rgba(43,143,255,.8))}
.cell.yessy.listening .glow{background:radial-gradient(circle, rgba(124,192,255,.55), rgba(43,143,255,0) 65%)}

/* card annuncio col QR (quando YESSY consiglia in idle) — riempie il fumetto chat-reply */
.chat-reply .ann{display:flex; align-items:center; gap:16px; text-align:left}
.chat-reply .ann-info{flex:1; min-width:0}
.chat-reply .ann-pill{display:inline-block; font-weight:800; font-size:13px; letter-spacing:.5px; color:#001023;
  background:var(--accent,#2B8FFF); padding:3px 11px; border-radius:999px; margin-bottom:7px}
.chat-reply .ann-event{font-size:clamp(15px,1.5vw,21px); font-weight:700; color:#eaf2ff; line-height:1.15}
.chat-reply .ann-mk{font-size:clamp(13px,1.2vw,16px); color:#cfe0ff; margin-top:4px}
.chat-reply .ann-mk b{color:var(--gold); font-size:1.2em}
.chat-reply .ann-qr{flex:none; width:clamp(112px,12vw,150px); background:#fff; border-radius:12px; padding:7px 7px 4px;
  display:flex; flex-direction:column; align-items:center; gap:2px}
.chat-reply .ann-qr img{width:100%; height:auto; display:block; image-rendering:pixelated; border-radius:3px}
.chat-reply .ann-qr span{font-size:10px; color:#0b1330; font-weight:800; text-align:center; line-height:1.05}

/* avviso "tocca per attivare la voce" (finché l'audio non è sbloccato dal primo gesto) */
.voice-hint{position:fixed; top:90px; left:50%; transform:translateX(-50%); z-index:34; cursor:pointer;
  display:none; align-items:center; gap:8px; color:#eaf2ff; font-size:14px; font-weight:600;
  background:rgba(43,143,255,.18); border:1px solid rgba(43,143,255,.55);
  padding:8px 16px; border-radius:999px; backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.45); animation:livepulse 2s infinite}
.voice-hint.show{display:inline-flex}

/* ============================================================
   VARIANTE 8 FINESTRE (body.win8) — usata da demo-consigli.php (prova 32").
   4 finestre per lato, YESSY centrale a tutta altezza, card più compatte.
   ============================================================ */
body.win8 .layout{grid-template-rows:repeat(4,1fr); gap:clamp(8px,1.3vh,16px); padding:clamp(8px,1.4vh,20px)}
body.win8 .cell.yessy{grid-row:1 / span 4}
body.win8 .tip{padding:clamp(7px,1vw,13px); gap:clamp(2px,.5vh,6px)}
body.win8 .tip-head{align-items:flex-start}
body.win8 .sport-pill{font-size:clamp(12px,1.05vw,15px); padding:4px 9px}
body.win8 .conf{font-size:clamp(12px,1vw,15px)}
body.win8 .tip-league{font-size:clamp(10px,.85vw,13px)}
body.win8 .tip-event{font-size:clamp(14px,1.3vw,20px); -webkit-line-clamp:1}
body.win8 .tip-detail{font-size:clamp(10.5px,.9vw,13px); -webkit-line-clamp:2}
body.win8 .tip-bottom{gap:8px}
body.win8 .tip-info{gap:6px}
body.win8 .tip-market{padding:5px 10px}
body.win8 .mk-val{font-size:clamp(14px,1.3vw,19px)}
body.win8 .tip-quota{padding:4px 10px}
body.win8 .q-val{font-size:clamp(19px,1.8vw,27px)}
body.win8 .tip-qr{width:clamp(58px,5.6vw,86px)}