/* Rognarr_TV — thème commun à toutes les scènes (1920×1080, toujours).
   Les quatre couleurs d'accent sont réécrites par la palette choisie dans le panel. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@500;700&family=Noto+Sans+Runic&display=swap');

:root {
  --nuit: #05061a;
  --encre: #0b0e2e;
  --encre-2: #141a4a;
  --a1: #37e0ff;
  --a2: #2d5bff;
  --a3: #8b3dff;
  --a4: #ff2fd0;
  --a1r: 55, 224, 255;
  --a2r: 45, 91, 255;
  --a3r: 139, 61, 255;
  --a4r: 255, 47, 208;
  --soleil: #ffc93c;
  --orange: #ff7a2e;
  --rouge: #ff3b5c;
  --texte: #eef2ff;
  --gris: #9aa3d6;

  --titre: 'Chakra Petch', 'Noto Sans Runic', sans-serif;
  --police-titre: var(--titre);
  --mono: 'JetBrains Mono', 'Noto Sans Runic', monospace;

  --neon: linear-gradient(90deg, var(--a1), var(--a2) 40%, var(--a3) 70%, var(--a4));
  --sheen-periode: 12s;
  --sheen-delay: 0ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  color: var(--texte);
  font-family: var(--titre);
  -webkit-font-smoothing: antialiased;
}
body { background: var(--nuit); position: relative; }
body.transparent { background: transparent; }

canvas.fond { position: absolute; inset: 0; width: 1920px; height: 1080px; }
svg.calque { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }

/* ---------- Biseau : la forme commune à tous les panneaux ---------- */

.biseau {
  --g: 18px;
  --p: 7px;
  --bord: 2px;
  position: relative;
  clip-path: polygon(var(--g) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--g)),
                     calc(100% - var(--g)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--g));
  background: var(--neon);
}
.biseau::before {
  content: '';
  position: absolute;
  inset: var(--bord);
  clip-path: inherit;
  background: linear-gradient(180deg, rgba(20, 26, 74, .96), rgba(5, 6, 26, .94));
  z-index: 0;
}
.biseau > * { position: relative; z-index: 1; }
.lueur { filter: drop-shadow(0 0 14px rgba(var(--a1r), 0.45)) drop-shadow(0 0 28px rgba(var(--a4r), 0.3)); }

/* ---------- Reflet partagé ---------- */

@keyframes balayage {
  0%   { background-position: 160% 0; }
  11%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
.reflet {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .5) 47%, rgba(var(--a4r), 0.4) 50%,
    rgba(255, 255, 255, 0) 55%, transparent 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: balayage var(--sheen-periode) linear infinite;
  animation-delay: var(--sheen-delay);
}

.texte-neon {
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(var(--a1r), 0.35)) drop-shadow(0 0 32px rgba(var(--a4r), 0.25));
}

.etiquette {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gris);
}

.point-live {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rouge); box-shadow: 0 0 10px var(--rouge);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

/* ---------- Fil du chat ---------- */

.fil-chat {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
}
.fil-chat.vers-bas { justify-content: flex-start; }

.msg {
  position: relative;
  flex-shrink: 0;
  padding: 10px 16px 11px 18px;
  background: linear-gradient(90deg, rgba(11, 14, 46, .9), rgba(11, 14, 46, .66));
  border-left: 3px solid var(--c, var(--a1));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  font-size: 22px;
  line-height: 1.3;
  animation: entree .35s cubic-bezier(.2, .9, .3, 1.2) both;
  overflow-wrap: anywhere;
}
.msg .nom {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c, var(--a1));
  margin-bottom: 2px;
  text-shadow: 0 0 10px var(--c, var(--a1));
}
.msg .nom .badge { font-size: 12px; padding: 1px 6px; margin-left: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); color: var(--texte); text-shadow: none; letter-spacing: .1em; vertical-align: 2px; }
.msg .txt { font-weight: 500; }
.msg .txt img { height: 1.35em; vertical-align: -.35em; margin: 0 2px; }
.msg.sortie { animation: sortie .5s ease-in forwards; }

@keyframes entree {
  from { opacity: 0; transform: translateX(-24px) skewX(-8deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sortie { to { opacity: 0; transform: translateX(-30px); filter: blur(6px); } }

/* ---------- Barre de progression ---------- */

.barre {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, .07);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.barre > i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--neon);
  transition: width .9s linear;
}
.barre > i::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(5, 6, 26, .45) 14px 18px);
}

/* ---------- Cadre (webcam, panneaux) ---------- */

.zone { position: absolute; overflow: hidden; }
.zone .reflet { position: absolute; inset: 0; }
@keyframes coureur { to { stroke-dashoffset: -1000; } }
.coureur { animation: coureur 7s linear infinite; }

/* ---------- Bandeau d'annonce (haut) ---------- */

.annonce {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  max-width: 1400px; display: none;
}
.annonce.visible { display: block; animation: glisse .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.annonce .biseau { --g: 14px; --p: 6px; display: flex; align-items: center; gap: 18px; padding: 14px 30px 14px 16px; }
.annonce .tag {
  font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .25em;
  padding: 6px 12px; background: var(--neon); color: var(--nuit);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.annonce .texte { font-size: 30px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1200px; }
@keyframes glisse { from { opacity: 0; transform: translate(-50%, -40px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Carte du haut : alertes et messages mis en avant ---------- */

.carte-haut { position: absolute; left: 50%; top: 104px; width: 900px; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.carte-haut .biseau { --g: 30px; --p: 10px; --bord: 3px; padding: 24px 50px 26px; text-align: center; }
.carte-haut .visuel { display: none; max-width: 460px; max-height: 200px; margin: 0 auto 12px; object-fit: contain; }
.carte-haut .type { font-family: var(--mono); font-size: 17px; letter-spacing: .32em; text-transform: uppercase; color: var(--a4); }
.carte-haut .titre { font-size: 62px; font-weight: 700; line-height: 1.05; margin: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-haut .sous { font-family: var(--mono); font-size: 21px; }
.carte-haut .citation { font-size: 34px; font-weight: 600; line-height: 1.25; margin-top: 10px; overflow-wrap: anywhere; }
.carte-haut .citation img { height: 1.3em; vertical-align: -.3em; }
.carte-haut.visible { animation: chute .7s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.carte-haut.partie { animation: remonte .5s ease-in forwards; }
@keyframes chute { from { opacity: 0; transform: translate(-50%, -80px) scale(.85); filter: blur(8px); } to { opacity: 1; transform: translate(-50%, 0); filter: none; } }
@keyframes remonte { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -60px) scale(.9); filter: blur(6px); } }

.eclair {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(var(--a4r), 0.2) 47%,
    rgba(255, 255, 255, .28) 50%, rgba(var(--a1r), 0.2) 53%, transparent 60%);
  background-size: 300% 100%;
}
.eclair.go { animation: eclair 1.3s ease-out; }
@keyframes eclair { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }

/* ---------- Puces d'infos (HUD) ---------- */

.hud { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.puce { --g: 12px; --p: 5px; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 14px; min-width: 270px; max-width: 420px; }
.puce .ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-family: 'Noto Sans Runic'; font-size: 24px; color: var(--a1); text-shadow: 0 0 10px var(--a1); }
.puce .ico img { width: 36px; height: 48px; object-fit: cover; margin-top: -6px; margin-bottom: -6px; }
.puce .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.puce .val { font-size: 25px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.puce .barre { height: 7px; margin-top: 6px; width: 220px; }
.puce.flash { animation: flash .6s ease-out; }
@keyframes flash { 30% { filter: brightness(1.8); transform: scale(1.04); } }

/* ---------- Logo ---------- */

.logo { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Polices ---------- */

#compte, #mot, #gg, #jeu-grand, .carte-haut .titre, .police-titre { font-family: var(--police-titre); }

/* ---------- Couches ---------- */

.annonce, .carte-haut, .eclair { z-index: 50; }
.couche-ajouts { position: absolute; inset: 0; pointer-events: none; }
.couche-ajouts.avant { z-index: 40; }
.ajout { position: absolute; transform-origin: center; }
.ajout-texte { white-space: pre-wrap; line-height: 1.15; }
.ajout-texte.neon { text-shadow: 0 0 12px currentColor, 0 0 32px currentColor; }
.ajout img { display: block; width: 100%; height: auto; }
.ajout-panneau { display: grid; place-items: center; text-align: center; padding: 24px; }
.perso-couleur { color: var(--couleur-perso) !important; }
.perso-couleur .texte-neon, .perso-couleur.texte-neon, .perso-couleur .chaud, .perso-couleur.chaud {
  background: none !important; -webkit-text-fill-color: var(--couleur-perso); color: var(--couleur-perso);
}