/* DLL Oracle styles (moved from theme style.css) */

.dll-oracle {
  max-width: 900px;                /* overall width of oracle block */
  width: 100%;
  margin: 2rem auto;               /* center horizontally */
  font-family: "Vectrex", monospace;
  display: block;                  /* IMPORTANT: not flex */
}

/* Form row: input + button (+ optional select) */
.dll-oracle__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

/* Text input box — large, monospaced, uppercase */
.dll-oracle__input {
  flex: 1 1 650px;                 /* prefers to be wide */
  min-width: 320px;
  padding: 0.8rem 1.2rem;
  border: 1px solid #000;          /* single line border */
  background: #fff;
  color: #000;
  font-family: "Vectrex", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.3rem, 2vw + 0.8rem, 2.4rem); /* nearly as big as output */
  line-height: 1.2;
  outline: none;
  box-shadow: none;
}

/* Send button — same scale as input */
.dll-oracle__btn {
  padding: 0.8rem 1.2rem;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: "Vectrex", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.2rem, 1.8vw + 0.6rem, 2.0rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;                  /* don't stretch */
}

.dll-oracle__btn:hover {
  background: #000;
  color: #fff;
}

/* Character counter (bottom-right or inline) */
.dll-oracle__counter {
  color: #444;
  font-family: "Vectrex", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-basis: 100%;
  text-align: right;
  padding-right: 0.5rem;
  margin-top: 0.25rem;
}

/* Optional: selector dropdown, if used */
.dll-oracle__select {
  flex: 0 1 220px;
  min-width: 160px;
  padding: 0.8rem 1rem;
  border: 1px solid #000;
  background: #fff;
  font-family: "Vectrex", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 1.4vw + 0.5rem, 1.6rem);
  color: #000;
}

/* Output container: sits BELOW the form, centered */
.dll-oracle__out {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Make sure the reveal container itself is transparent, too */
.dll-oracle__out .glitch-reveal {
  background: transparent !important;
  padding: 0 !important;
  margin: 0.5em auto;
  max-width: 95%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

/* The blocks themselves carry the look */
.glitch-reveal .word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.18em;
  padding: 0.10em 0.28em;
  font-size: clamp(2.2rem, 4vw + 1rem, 3.8rem);
  line-height: 1.2;
  min-height: 1.3em;
  border-radius: 0;            /* square */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* White on black (default) */
.glitch-reveal .word.inverse {
  background: #000;
  color: #fff;
}

/* White on red (highlight) */
.glitch-reveal .word.redinverse {
  background: #a10000;
  color: #fff;
}