/* Flash info télé (ui/flash.js) : petite télé de chaîne d'info, à droite de l'écran.
   Unité --fu (posée par Flash.layout : celle du HUD, réduite s'il manque de place). */
#flash { position: fixed; z-index: 6; width: calc(var(--fu, 3px) * 96); pointer-events: none; display: none; --tvred: #e0323c; --tvblue: #1a2a5c; }
#flash.show { display: block; }
#flash.hold { visibility: hidden; }
body:not([data-scene="game"]):not([data-scene="netgame"]) #flash { display: none !important; }
#flash .fl-tv { position: relative; background: #17131f; padding: var(--fu) calc(var(--fu) * 1.5) calc(var(--fu) * 1.5);
  clip-path: polygon(calc(var(--fu) * 2) 0, calc(100% - var(--fu) * 2) 0, 100% calc(var(--fu) * 2), 100% calc(100% - var(--fu) * 2), calc(100% - var(--fu) * 2) 100%, calc(var(--fu) * 2) 100%, 0 calc(100% - var(--fu) * 2), 0 calc(var(--fu) * 2));
  box-shadow: inset 0 0 0 var(--fu) #0b0910, inset 0 calc(var(--fu) * 2) 0 0 #3b3350, inset 0 calc(var(--fu) * -2) 0 0 #0b0910; }

/* en-tête : logo, chaîne, DIRECT, heure */
#flash .fl-head { display: flex; align-items: center; gap: calc(var(--fu) * 1.5); height: calc(var(--fu) * 7); padding: 0 var(--fu); }
#flash .fl-logo { font: calc(var(--fu) * 4)/1 'Silk', monospace; color: #fff; background: var(--tvred); padding: calc(var(--fu) * .8) var(--fu) calc(var(--fu) * .6);
  box-shadow: inset 0 calc(var(--fu) * -1) 0 #8e1820, var(--fu) 0 0 var(--tvblue); letter-spacing: 0; }
#flash .fl-chaine { font: calc(var(--fu) * 3.6)/1 'Silk', monospace; color: var(--paper); letter-spacing: calc(var(--fu) * .2); white-space: nowrap; }
#flash .fl-direct { margin-left: auto; font: calc(var(--fu) * 3.2)/1 'Silk', monospace; color: #fff; background: var(--tvred); padding: calc(var(--fu) * .8) calc(var(--fu) * 1.2) calc(var(--fu) * .5); }
#flash .fl-direct::before { content: ''; display: inline-block; width: calc(var(--fu) * 1.5); height: calc(var(--fu) * 1.5); margin-right: var(--fu); background: #fff; vertical-align: calc(var(--fu) * .2); animation: fl-blink 1s steps(1) infinite; }
#flash .fl-clock { font: calc(var(--fu) * 3.4)/1 'Silk', monospace; color: var(--sun); }

/* l'image : vue en direct, lignes et vignette de télé */
#flash .fl-screen { position: relative; aspect-ratio: 128 / 72; background: #000; overflow: hidden; margin-top: var(--fu);
  box-shadow: 0 0 0 var(--fu) #0b0910; }
#flash .fl-screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#flash .fl-scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px calc(var(--fu) * 1)),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45) 100%); mix-blend-mode: multiply; }
#flash .fl-live { position: absolute; left: var(--fu); top: var(--fu); display: flex; align-items: center; gap: var(--fu);
  font: calc(var(--fu) * 2.8)/1 'Silk', monospace; color: #fff; background: rgba(10, 8, 16, .72); padding: calc(var(--fu) * .7) calc(var(--fu) * 1.2) calc(var(--fu) * .5); }
#flash .fl-live i { width: calc(var(--fu) * 1.5); height: calc(var(--fu) * 1.5); background: var(--tvred); animation: fl-blink 1s steps(1) infinite; }
#flash .fl-credit { position: absolute; right: var(--fu); top: var(--fu); font: calc(var(--fu) * 2.6)/1 'Pixelify', monospace; color: rgba(255, 255, 255, .85);
  text-shadow: calc(var(--fu) * .5) calc(var(--fu) * .5) 0 #000; max-width: 45%; text-align: right; }
#flash .fl-credit:empty, #flash .fl-cut:empty { display: none; }
#flash .fl-cut { position: absolute; right: var(--fu); bottom: calc(var(--fu) * 1.2); font: calc(var(--fu) * 2.6)/1 'Silk', monospace; color: var(--ink); background: var(--sun); padding: calc(var(--fu) * .6) var(--fu) calc(var(--fu) * .4); }
/* incrustation du nom (bas gauche de l'image) */
#flash .fl-name { position: absolute; left: 0; bottom: calc(var(--fu) * 1.2); display: flex; flex-direction: column; max-width: 74%;
  background: var(--tvblue); padding: calc(var(--fu) * .8) calc(var(--fu) * 2) calc(var(--fu) * .8) calc(var(--fu) * 1.5); box-shadow: inset calc(var(--fu) * 1) 0 0 var(--sun);
  animation: fl-name .5s steps(5) both .6s; }
#flash .fl-name b { font: calc(var(--fu) * 3.4)/1.1 'Silk', monospace; color: #fff; font-weight: 400; white-space: nowrap; }
#flash .fl-name span { font: calc(var(--fu) * 3)/1.15 'Pixelify', monospace; color: #c9d3ff; }

/* bandeau : pastille, titre, citation ou sous-titre, défilant */
#flash .fl-badge { display: inline-block; margin-top: calc(var(--fu) * 1.5); font: calc(var(--fu) * 3)/1 'Silk', monospace; color: var(--ink); background: var(--sun);
  padding: calc(var(--fu) * .8) calc(var(--fu) * 1.5) calc(var(--fu) * .6); }
#flash .fl-badge.hot { color: #fff; background: var(--tvred); animation: fl-hot .5s steps(1) 3; }
#flash .fl-chyron { font: calc(var(--fu) * 3.6)/1.2 'Silk', monospace; color: var(--paper); background: #0b0910; padding: calc(var(--fu) * 1.2) calc(var(--fu) * 1.5) var(--fu);
  box-shadow: inset calc(var(--fu) * 1) 0 0 var(--tvred); animation: fl-wipe .45s steps(6) both .25s; }
#flash .fl-quote { margin: calc(var(--fu) * 1.2) 0 0; font: italic calc(var(--fu) * 3.8)/1.25 'Pixelify', monospace; color: #fff; padding: 0 var(--fu); }
#flash .fl-sous { margin: calc(var(--fu) * 1) 0 0; font: calc(var(--fu) * 3.4)/1.25 'Pixelify', monospace; color: var(--dim); padding: 0 var(--fu); }
#flash .fl-ticker { position: relative; overflow: hidden; margin-top: calc(var(--fu) * 1.5); height: calc(var(--fu) * 5); background: var(--tvblue); box-shadow: inset 0 calc(var(--fu) * .5) 0 #2e4590; }
#flash .fl-ticker span { position: absolute; left: 0; top: calc(var(--fu) * 1.2); white-space: nowrap; font: calc(var(--fu) * 2.8)/1 'Silk', monospace; color: #fff;
  animation: fl-tick 20s linear infinite; padding-left: 100%; }

/* entrée et sortie : la télé glisse depuis la droite, l'image s'allume comme un vieux tube */
#flash.in { animation: fl-in .38s steps(6) both; }
#flash.in .fl-screen canvas { animation: fl-crt .5s steps(5) both .2s; }
#flash.out { animation: fl-out .4s steps(6) both; }
@keyframes fl-in { from { transform: translateX(calc(100% + var(--fu) * 8)); } to { transform: none; } }
@keyframes fl-out { 0% { transform: none; opacity: 1; } 100% { transform: translateX(calc(100% + var(--fu) * 8)); opacity: 1; } }
@keyframes fl-crt { 0% { transform: scale(1, .02); filter: brightness(3); } 60% { transform: scale(1, .5); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
@keyframes fl-blink { 50% { opacity: 0; } }
@keyframes fl-hot { 50% { background: var(--sun); color: var(--ink); } }
@keyframes fl-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fl-name { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes fl-tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* option « flashs réduits » (a11y) : pas de clignotement */
.a11y-noflash #flash .fl-direct::before, .a11y-noflash #flash .fl-live i, .a11y-noflash #flash .fl-badge.hot, .a11y-noflash #flash.in .fl-screen canvas { animation: none !important; }