/* **La télé gobeline** (poste, neige, mire, cristal) : lu par la fenêtre du jeu ET par la vitrine (public/site/tele.js) - un seul endroit. Les variables --texte et --r viennent de la page. */
.tele-corps { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.tele-ecrin { min-height: 0; container-type: size; display: grid; place-items: center; }
.tele-poste { position: relative; width: min(100cqw, 100cqh * var(--r)); user-select: none; }
.tele-cadre { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)); }
.tele-cristal { position: absolute; z-index: 0; overflow: hidden; border-radius: 14% / 10%; background: radial-gradient(ellipse at 45% 40%, #1d2b29, #060908 75%); }
.tele-lecteur { position: absolute; z-index: 1; transition: opacity .25s; }
.tele-lecteur iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.tele-poste.neige .tele-lecteur, .tele-poste.mire .tele-lecteur { opacity: 0; }
.tele-eclat { position: absolute; z-index: 2; pointer-events: none; opacity: 0; border-radius: 14% / 10%; background: radial-gradient(ellipse, #fff 0, rgba(210, 255, 235, .75) 25%, rgba(120, 220, 190, 0) 70%); }
.tele-poste.allume .tele-eclat { animation: tele-allume .7s ease-out both; }
.tele-neige { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: #4a4d4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
.tele-poste.neige .tele-neige, .tele-poste.mire .tele-neige { opacity: 1; animation: tele-neige .45s steps(6) infinite; }
.tele-mire { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: linear-gradient(90deg, #c8c8c0 0 14.3%, #c8c020 0 28.6%, #20b8b8 0 42.9%, #30b030 0 57.1%, #b030b0 0 71.4%, #c03020 0 85.7%, #2030b8 0); }
.tele-mire::after { content: ''; position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 240, .85); border-radius: 50%; background: radial-gradient(circle, #5a8a2a 0 26%, #1a1a14 27% 34%, rgba(0, 0, 0, .35) 35%); }
.tele-poste.mire .tele-mire { opacity: .9; animation: tele-mire .3s steps(2) infinite; }
.tele-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.tele-dit { margin: 0; color: var(--texte); font-style: normal; text-align: center; }
.tele-gestes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@keyframes tele-neige { to { background-position: 180px 120px; } }
@keyframes tele-mire { 50% { filter: brightness(1.18) contrast(1.1); transform: translateY(1%); } }
@keyframes tele-allume { 0% { opacity: 1; transform: scaleY(.03); } 35% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .tele-poste.neige .tele-neige, .tele-poste.mire .tele-neige, .tele-poste.mire .tele-mire, .tele-poste.allume .tele-eclat { animation: none; } }