/* ==========================================================================
   Cerulean Glossary Tooltips
   --------------------------------------------------------------------------
   Hover/tap-activated terminal-panel tooltips for inline glossary terms
   marked with .cer-term[data-term="..."]. VT323 monospace, Matrix CRT
   styling at the Max intensity (panel halo + ambient gradient + dim
   scanlines + tight 2-layer text glow + brighter base color + glowing
   cursor pulse).

   Pairs with glossary.js. Self-contained: VT323 loads via @import below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ---- Theming variables (override in your global :root if needed) ---- */
:root {
  --cer-mx-bg: #000;
  --cer-mx-text: #4dff80;
  --cer-mx-text-bright: #88ffaa;
  --cer-mx-border: rgba(51, 255, 102, 0.85);
  --cer-mx-glow-1: rgba(77, 255, 128, 0.9);
  --cer-mx-glow-2: rgba(77, 255, 128, 0.5);
  --cer-mx-panel-glow-1: rgba(51, 255, 102, 0.35);
  --cer-mx-panel-glow-2: rgba(51, 255, 102, 0.15);
  --cer-mx-ambient: rgba(51, 255, 102, 0.08);
  --cer-mx-ambient-mid: rgba(51, 255, 102, 0.03);
  --cer-mx-scanline: rgba(0, 0, 0, 0.15);

  --cer-term-underline: rgba(127, 156, 196, 0.7);
  --cer-term-hover: var(--cer-mx-text);

  --cer-bubble-max-w: 290px;
}

/* ---- Inline term marker ---- */
.cer-term {
  position: relative;
  display: inline;
  color: inherit;
  cursor: help;
  text-decoration: underline dashed;
  text-decoration-color: var(--cer-term-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cer-term:hover,
.cer-term:focus-visible {
  color: var(--cer-term-hover);
  text-decoration-color: var(--cer-term-hover);
  outline: none;
}

/* ---- Terminal panel container ---- */
.cer-bubble {
  position: absolute;
  z-index: 100;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: calc(90vw - 4rem);
  max-width: var(--cer-bubble-max-w);
  cursor: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;

  background:
    radial-gradient(
      ellipse at center,
      var(--cer-mx-ambient) 0%,
      var(--cer-mx-ambient-mid) 50%,
      transparent 100%
    ),
    var(--cer-mx-bg);
  border: 1px solid var(--cer-mx-border);
  padding: 0.95rem 1.05rem 0.8rem;
  box-shadow:
    0 0 36px var(--cer-mx-panel-glow-1),
    0 0 80px var(--cer-mx-panel-glow-2);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.cer-term:hover .cer-bubble,
.cer-term:focus-visible .cer-bubble,
.cer-term.is-active .cer-bubble {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ---- Dim scanlines overlay ---- */
.cer-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    var(--cer-mx-scanline) 2px,
    var(--cer-mx-scanline) 3px
  );
  z-index: 3;
}

/* ---- Terminal text content ---- */
.cer-bubble-content {
  position: relative;
  z-index: 2;
  font-family: 'VT323', 'Lucida Console', monospace;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--cer-mx-text);
  white-space: normal;
  overflow-wrap: break-word;
  display: block;
}
.cer-bubble-content,
.cer-bubble-content * {
  text-shadow:
    0 0 1px var(--cer-mx-glow-1),
    0 0 2px var(--cer-mx-glow-2);
}

.cer-bubble-prompt {
  display: block;
  margin-bottom: 0.25rem;
}
.cer-bubble-term {
  color: var(--cer-mx-text-bright);
}
.cer-bubble-rule {
  display: block;
  margin: 0.25rem 0 0.45rem;
  opacity: 0.55;
  letter-spacing: 0;
}
.cer-bubble-def {
  display: block;
  margin: 0;
  text-wrap: pretty;
}
.cer-bubble-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--cer-mx-text-bright);
  box-shadow:
    0 0 6px var(--cer-mx-glow-2),
    0 0 12px var(--cer-mx-panel-glow-2);
  animation: cer-blink 1.1s steps(2) infinite;
}
@keyframes cer-blink {
  50% { background: transparent; box-shadow: none; }
}

/* ---- Flipped orientation (panel below term when near viewport top) ---- */
.cer-term.cer-flip .cer-bubble {
  bottom: auto;
  top: calc(100% + 0.6rem);
}

/* ---- Mobile: slightly tighter padding and font ---- */
@media (max-width: 480px) {
  .cer-bubble {
    padding: 0.85rem 0.95rem 0.7rem;
  }
  .cer-bubble-content {
    font-size: 1.15rem;
  }
}