/* ============================================================
   HUD FRAME — primitivo cornice sci-fi scalabile (Titan Vanguard)
   Riproduce la cornice del pack SVG come forma CSS: ottagono
   asimmetrico (taglio diagonale in alto-sx e basso-dx), bordo
   luminoso + hairline interna (doppia linea) + glow esterno.
   Scala a QUALSIASI proporzione senza distorcere né tagliare il
   contenuto. Un solo primitivo per popup, bottoni e card.
   Variabili:  --cut (ampiezza taglio angoli)  --bw (spessore bordo)
   Varianti:   .fr-red (selezione/hover)  .fr-gold  .fr-dim
   ============================================================ */
:root{
  --cy:#39e0ff; --cy2:#7fe8ff; --gold:#ffcf4a; --ink:#eafcff; --red:#ff3c6e;
}

/* il taglio del clip in unità assolute → bordo di spessore costante
   a ogni proporzione (niente stretch della cornice) */
.frame{
  position:relative; --cut:14px; --bw:2px;
  border:none;                    /* annulla il bordo "outset" nativo dei <button> */
  --edge:linear-gradient(180deg,#3fbfe6 0%,#2aa8d8 50%,#146a86 100%);
  --fill:linear-gradient(180deg, rgba(46,110,150,.60) 0%, rgba(16,44,68,.93) 46%, rgba(7,22,38,.97) 100%);
  --glow:rgba(57,224,255,.45);
  --line:rgba(120,205,235,.3);
  background:var(--edge);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter:drop-shadow(0 0 9px var(--glow)) drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
/* riempimento interno (inset del bordo) + gloss + hairline interna (2ª linea) */
.frame::before{
  content:""; position:absolute; inset:var(--bw); z-index:0; pointer-events:none;
  background:var(--fill);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow:
    inset 0 1px 0 var(--line),                  /* luce dall'alto (bevel, tenue) */
    inset 0 0 0 1px rgba(90,180,215,.2),        /* hairline interna = doppia linea */
    inset 0 -10px 18px rgba(0,0,0,.5);          /* profondità in basso */
}
.frame > *{ position:relative; z-index:1; }
/* NB: il contenuto di .frame va sempre in ELEMENTI (span/div), mai testo nudo:
   il ::before (riempimento) è posizionato e coprirebbe i nodi di testo inline. */

/* varianti colore del bordo/glow */
.frame.fr-red{
  --edge:linear-gradient(180deg,#ffc0cf 0%,#ff5a7a 42%,#d1114f 100%);
  --glow:rgba(255,60,110,.6); --line:rgba(255,190,205,.5);
  --fill:linear-gradient(180deg, rgba(122,30,54,.9) 0%, rgba(54,13,25,.95) 46%, rgba(18,5,11,.98) 100%);
}
.frame.fr-gold{
  --edge:linear-gradient(180deg,#ffe6a3 0%,#ffcf4a 45%,#c9761a 100%);
  --glow:rgba(255,207,74,.55); --line:rgba(255,231,170,.5);
}
.frame.fr-dim{  /* secondario/spento (es. ANNULLA) */
  --edge:linear-gradient(180deg,#9fb6cc 0%,#5b6f84 45%,#2b3646 100%);
  --glow:rgba(120,150,180,.25); --line:rgba(190,210,230,.35);
  --fill:linear-gradient(180deg, rgba(70,86,104,.5) 0%, rgba(22,32,46,.92) 46%, rgba(10,16,26,.97) 100%);
}

/* ---- GLITCH testo (riuso hub): slice orizzontali + split RGB a raffiche ---- */
.gtxt{ position:relative; display:inline-block;
  text-shadow:1.5px 0 rgba(255,45,85,.5), -1.5px 0 rgba(57,224,255,.5); }
.is-sel .gtxt{ animation:glitchTxt 1.4s steps(1,end) infinite; }
@keyframes glitchTxt{
  0%,52%,100%{ transform:none; clip-path:none; text-shadow:1.5px 0 rgba(255,45,85,.5), -1.5px 0 rgba(57,224,255,.5); }
  54%{ transform:translateX(-7px); clip-path:inset(4% 0 60% 0); text-shadow:6px 0 #ff2d55, -6px 0 #39e0ff; }
  58%{ transform:translateX(7px);  clip-path:inset(48% 0 12% 0); text-shadow:-6px 0 #ff2d55, 6px 0 #39e0ff; }
  62%{ transform:translateX(-5px); clip-path:inset(26% 0 34% 0); text-shadow:6px 0 #ff2d55, -6px 0 #39e0ff; }
  66%{ transform:translateX(4px);  clip-path:inset(62% 0 6% 0);  text-shadow:-5px 0 #ff2d55, 5px 0 #39e0ff; }
  70%{ transform:none; clip-path:none; } }

/* pulsazione glow per lo stato selezionato (retroilluminazione pulita) */
@keyframes selGlow{
  0%,100%{ filter:drop-shadow(0 0 10px var(--glow)) drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
  50%{     filter:drop-shadow(0 0 22px var(--glow)) drop-shadow(0 3px 8px rgba(0,0,0,.5)); } }
@keyframes selJitter{ 0%,53%,100%{ transform:none; } 55%{ transform:translateX(-2px);} 58%{ transform:translateX(2px);} 62%{ transform:translateX(-1px);} 66%{ transform:none; } }

/* ==========================================================
   MODALE DI CONFERMA (js/modal.js) — popup con cornice .frame,
   linguetta titolo e ingresso a glitch.
   ========================================================== */
.tv-modal-back{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px;
  background:rgba(2,7,14,.72); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:tvBackIn .18s ease both; }
.tv-modal-back.via{ animation:tvBackOut .2s ease both; }
@keyframes tvBackIn{ from{opacity:0} to{opacity:1} }
@keyframes tvBackOut{ from{opacity:1} to{opacity:0} }

.tv-modal-wrap{ position:relative; width:min(92vw,420px); animation:tvGlitchIn .5s steps(1,end) both; }
@keyframes tvGlitchIn{
  0%{ opacity:0; transform:translateX(-8px); filter:drop-shadow(8px 0 #ff2d55) drop-shadow(-8px 0 #39e0ff); }
  20%{ opacity:1; transform:translateX(8px); filter:drop-shadow(-8px 0 #ff2d55) drop-shadow(8px 0 #39e0ff); }
  35%{ transform:translateX(-5px); filter:drop-shadow(6px 0 #ff2d55) drop-shadow(-6px 0 #39e0ff); }
  50%{ transform:translateX(4px); }
  65%{ transform:none; filter:drop-shadow(3px 0 #ff2d55) drop-shadow(-3px 0 #39e0ff); }
  100%{ opacity:1; transform:none; filter:none; } }

.tv-modal{ --cut:20px; --bw:2.2px; padding:48px 30px 30px; }
.tv-modal-msg{ text-align:center; color:#cfeaf5; font-size:1.05rem; line-height:1.5; letter-spacing:.3px; margin:4px 4px 22px; }
.tv-modal-msg b{ color:#8fe4ff; }
.tv-modal-btns{ display:flex; gap:14px; justify-content:center; }
.tv-modal-btn{ --cut:11px; --bw:1.6px; min-width:130px; padding:13px 20px; cursor:pointer; text-align:center;
  font-family:var(--font-titoli); font-weight:700; letter-spacing:1.5px; font-size:.95rem; color:#fff;
  text-shadow:0 0 10px rgba(57,224,255,.5), 0 1px 3px rgba(0,0,0,.8); }
.tv-modal-btn.fr-dim{ color:#dbe6f0; text-shadow:0 0 6px rgba(140,170,200,.4), 0 1px 3px rgba(0,0,0,.8); }
.tv-modal-btn.fr-red{ text-shadow:0 0 10px rgba(255,90,130,.6), 0 1px 3px rgba(0,0,0,.8); }

.tv-modal-titolo{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); z-index:4; font-family:var(--font-titoli);
  display:flex; align-items:center; min-height:44px; padding:0 40px; color:#eafcff; font-weight:800; letter-spacing:4px; font-size:1rem;
  text-shadow:0 0 10px var(--cy); background:linear-gradient(180deg,#1c4e6c,#0b2638); border-bottom:2px solid var(--cy);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 100%,0 100%); filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.tv-modal-x{ position:absolute; top:-4px; right:-4px; z-index:5; width:38px; height:34px; border:none; color:#fff; font-weight:700; font-size:1rem; cursor:pointer;
  background:linear-gradient(160deg,#ff5a8f,#d1114f); clip-path:polygon(26% 0,100% 0,100% 100%,0 100%); box-shadow:0 0 12px rgba(255,45,111,.5); }

/* ==========================================================
   INVITO INSTALL (js/install.js) — banner in basso, dismissibile.
   ========================================================== */
.tv-install{ position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 200;
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: linear-gradient(180deg, rgba(20,52,76,.96), rgba(7,20,34,.98));
  border: 1px solid rgba(120,232,255,.55);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow: inset 0 1px 0 rgba(180,245,255,.35), 0 6px 20px rgba(0,0,0,.55);
  animation: tvInstIn .3s ease both; }
.tv-install.via{ animation: tvInstOut .25s ease both; }
@keyframes tvInstIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@keyframes tvInstOut{ from{ opacity: 1; } to{ opacity: 0; transform: translateY(16px); } }
.tv-install .txt{ flex: 1; font-size: .76rem; line-height: 1.35; color: #cfeaf5; letter-spacing: .2px; text-transform: none; }
.tv-install .txt b{ color: #8fe4ff; }
.tv-install-go{ flex: none; font-family: var(--font-titoli); font-weight: 700; letter-spacing: 1px; font-size: .72rem; color: #04121e; cursor: pointer;
  padding: 8px 12px; border: none; background: linear-gradient(180deg,#8fe8ff,#2ec4e6);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.tv-install-x{ flex: none; width: 28px; height: 28px; border: none; cursor: pointer; color: #9fbdd0; font-size: .85rem;
  background: rgba(255,255,255,.06); border-radius: 6px; }