/* Instructor-Briefing (Farben aus index.html: --cyan = Rot, --pink = Orange) */
.brief-btn { margin-top:22px; padding:11px 20px; font:inherit; font-size:11px; letter-spacing:.35em; color:var(--cyan); cursor:pointer;
  background:rgba(5,6,15,.55); border:1px solid rgba(255,42,58,.6); border-radius:999px; box-shadow:0 0 14px rgba(255,42,58,.2); }
.brief-btn::before { content:"▶"; margin-right:.8em; font-size:9px; }
body.done .brief-btn { display:none; }

.bf { position:fixed; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--safe-top) + 8px) 20px calc(var(--safe-bottom) + 8px);
  background:rgba(3,1,2,.94); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s; }
.bf.open { opacity:1; pointer-events:auto; }
.bf button { font:inherit; cursor:pointer; }
.bf [hidden] { display:none !important; }  /* sonst überdeckt die unsichtbare Abspielfläche die Knöpfe */
.bf h3 { font-size:14px; letter-spacing:.35em; color:#fff; margin:14px 0 8px; }

.bf-ask svg { width:54px; height:54px; color:var(--cyan); filter:drop-shadow(0 0 10px var(--cyan)); animation:blink 1.4s steps(2) infinite; }
.bf-ask p { font-size:12px; line-height:1.7; color:var(--dim); margin-bottom:22px; }
.bf-go { display:block; margin:0 auto 12px; padding:13px 26px; border:0; border-radius:999px; background:var(--cyan); color:#fff;
  font-size:12px; letter-spacing:.3em; box-shadow:0 0 20px rgba(255,42,58,.6); }
.bf-mute { background:none; border:0; color:var(--dim); font-size:11px; text-decoration:underline; }

.bf-play { position:absolute; inset:0; padding:calc(var(--safe-top) + 10px) 18px calc(var(--safe-bottom) + 12px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bf-grid { position:absolute; inset:0; opacity:.35; pointer-events:none;
  background:linear-gradient(rgba(255,42,58,.12) 1px, transparent 1px) 0 0/100% 28px, linear-gradient(90deg, rgba(255,42,58,.08) 1px, transparent 1px) 0 0/28px 100%;
  animation:bfscan 6s linear infinite; }
@keyframes bfscan { to { background-position:0 28px, 28px 0; } }
.bf-top { position:absolute; top:calc(var(--safe-top) + 12px); left:18px; right:60px; display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.25em; color:var(--dim); }
.bf-rec { color:var(--cyan); animation:blink 1s steps(2) infinite; }
.bf-x { position:absolute; top:calc(var(--safe-top) + 4px); right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid #4a2a30; background:none; color:var(--dim); }
.bf-core { position:relative; width:min(62vw,240px); aspect-ratio:1; display:grid; place-items:center; }
.bf-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,42,58,.5); box-shadow:0 0 30px rgba(255,42,58,.25), inset 0 0 30px rgba(255,42,58,.15);
  animation:bfring 3s ease-in-out infinite; }
.bf-ring.r2 { inset:14%; border-style:dashed; border-color:rgba(255,138,61,.4); animation:bfspin 14s linear infinite; }
@keyframes bfring { 50% { transform:scale(1.04); box-shadow:0 0 50px rgba(255,42,58,.4), inset 0 0 40px rgba(255,42,58,.2); } }
@keyframes bfspin { to { transform:rotate(360deg); } }
.bf-wave { display:flex; align-items:center; gap:3px; height:40%; }
.bf-wave i { width:4px; height:8%; border-radius:2px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:height .2s; }
.bf.talk .bf-wave i { animation:bfbar .5s ease-in-out infinite alternate; }
.bf.talk .bf-wave i:nth-child(3n) { animation-duration:.33s; } .bf.talk .bf-wave i:nth-child(4n+1) { animation-duration:.42s; animation-delay:-.2s; }
.bf.talk .bf-wave i:nth-child(5n+2) { animation-duration:.27s; animation-delay:-.1s; } .bf.talk .bf-wave i:nth-child(7n) { animation-duration:.6s; }
@keyframes bfbar { from { height:10%; } to { height:100%; } }
.bf-id { margin-top:20px; font-size:9px; letter-spacing:.25em; color:var(--dim); }
.bf-sub { position:absolute; left:18px; right:18px; bottom:calc(var(--safe-bottom) + 30px); min-height:3.4em;
  font-size:15px; line-height:1.55; color:#fff; text-shadow:0 0 12px rgba(0,0,0,.9); }
.bf.live .bf-play { animation:bfin .5s ease-out; }
@keyframes bfin { 0% { clip-path:inset(50% 0 50% 0); filter:brightness(3); } 100% { clip-path:inset(0); filter:none; } }
.bf.off .bf-play { animation:bfoff .6s ease-in forwards; }
@keyframes bfoff { 40% { clip-path:inset(49% 0 49% 0); filter:brightness(4); } 100% { clip-path:inset(50% 50% 50% 50%); } }
/* Verbindungsstörungen */
.bf-static { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; image-rendering:pixelated; mix-blend-mode:screen; }
.bf-static.on { opacity:.55; }
.bf-play.gl-tear > :not(.bf-static) { animation:gltear .12s steps(2) infinite; }
@keyframes gltear { 0% { transform:translateX(var(--gx)); clip-path:inset(0 0 calc(100% - var(--gy)) 0); }
  50% { transform:translateX(calc(var(--gx) * -1)); clip-path:inset(var(--gy) 0 0 0); } 100% { transform:none; clip-path:inset(0); } }
.bf-play.gl-rgb { filter:drop-shadow(var(--gx) 0 rgba(255,0,60,.8)) drop-shadow(calc(var(--gx) * -1) 0 rgba(0,220,255,.6)) contrast(1.3); }
.bf-play.gl-rgb .bf-core { transform:translateX(var(--gx)) skewX(6deg); }
.bf-play.gl-roll { animation:glroll .15s linear infinite; }
@keyframes glroll { 0% { transform:translateY(0); filter:brightness(1.6); } 100% { transform:translateY(-12px); filter:brightness(.6); } }
.bf-lost { position:absolute; left:0; right:0; top:46%; display:none; font-size:20px; letter-spacing:.4em; color:#fff;
  text-shadow:0 0 12px var(--cyan); background:rgba(0,0,0,.85); padding:14px 0; }
.bf.lost .bf-lost { display:block; } .bf.lost .bf-core, .bf.lost .bf-sub { opacity:0; }

.bf-sub::after { content:"_"; color:var(--cyan); text-shadow:0 0 8px var(--cyan); animation:blink 1s steps(2) infinite; margin-left:1px; }
.bf-sub.sg { text-shadow:-2px 0 rgba(255,42,58,.9), 2px 0 rgba(0,220,255,.5); }

/* Erschütterung bei der Explosion */
.bf.quake .bf-play { animation:quake .09s linear infinite; }
@keyframes quake { 0% { transform:translate(0,0) } 25% { transform:translate(-7px,4px) rotate(-.6deg) } 50% { transform:translate(6px,-5px) }
  75% { transform:translate(-4px,-3px) rotate(.5deg) } 100% { transform:translate(3px,6px) } }

/* Szenen (Version 2) */
.bf-scene { position:absolute; left:0; right:0; top:calc(var(--safe-top) + 44px); width:100%; height:62%; opacity:0; transition:opacity .4s; pointer-events:none; }
.bf.scene .bf-scene { opacity:1; }
.bf-core, .bf-id { transition:opacity .4s; }
.bf.scene .bf-core, .bf.scene .bf-id { opacity:0; }

.bf-end .bf-actions { display:flex; gap:10px; justify-content:center; margin-top:18px; }
.bf-end button { padding:11px 18px; border-radius:10px; font-size:11px; letter-spacing:.25em; }
.bf-again { background:none; border:1px solid #4a2a30; color:var(--dim); } .bf-close { background:var(--cyan); border:0; color:#fff; }