/* comedy.css — gag-layer overlay. Hidden in ?shot via comedy.js not initialising at all. */
.comedy-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }

.comedy-bubble {
  position: absolute; left: 0; top: 0; transform: translate(-999px, -999px);
  translate: -50% -100%;
  background: #fff; color: #2a1409; font: 800 13px/1.1 'Nunito', sans-serif;
  padding: 6px 10px; border-radius: 12px; border: 2px solid #2a1409;
  opacity: 0; transition: opacity .15s ease; white-space: nowrap; max-width: 220px;
  text-align: center;
}
.comedy-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; translate: -50% 0;
  border: 6px solid transparent; border-top-color: #2a1409;
}
.comedy-bubble--on { opacity: 1; }
.comedy-bubble--stream { font-size: 17px; padding: 8px 14px; }

.comedy-cloud, .comedy-clutch {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  font-size: 22px; opacity: 0; transition: opacity .2s ease;
}
.comedy-cloud--on, .comedy-clutch--on { opacity: 1; }

.comedy-thump {
  position: absolute; right: 3%; top: 36%; translate: 0 -50%;
  background: #2a1409; color: #ffd23f; font: 900 14px 'Lilita One', sans-serif;
  padding: 6px 12px; border-radius: 8px; opacity: 0; transition: opacity .15s ease;
}
.comedy-thump--on { opacity: 1; }

.comedy-idle {
  position: absolute; left: 62%; top: 58%; font-size: 20px; opacity: 0;
  transition: opacity .2s ease;
}
.comedy-idle--on { opacity: 1; }

.comedy-narrator {
  position: absolute; left: 3%; bottom: 3%; max-width: 44%;
  background: rgba(20, 12, 30, .82); color: #ffe6fb; font: 700 12px/1.3 'Nunito', sans-serif;
  padding: 8px 12px; border-radius: 8px; border-left: 3px solid #ff7be6;
  opacity: 0; transition: opacity .1s ease; font-style: italic;
}
.comedy-narrator--on { opacity: 1; }

@media (max-width: 640px) {
  .comedy-bubble { font-size: 11px; max-width: 160px; }
  .comedy-narrator { max-width: 70%; font-size: 11px; }
}