/* ─────────────────────────────────────────────
   el éter — hoja de estilos
   negro profundo · serif poética · mono susurrante
   ───────────────────────────────────────────── */

:root {
  --bg: #06060a;
  --ink: #e9e6df;            /* voz humana */
  --ink-warm: #f0e7d4;       /* la voz propia */
  --gold: #c9a96a;           /* sellos, premium, lo especial */
  --meta: rgba(233, 230, 223, 0.38);
  --meta-dim: rgba(233, 230, 223, 0.22);
  --hairline: rgba(233, 230, 223, 0.16);
  --font-voice: "Cormorant Garamond", serif;
  --font-meta: "IBM Plex Mono", monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-voice);
  -webkit-font-smoothing: antialiased;
  animation: pageIn 2.4s ease both;
}

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Atmósfera ───────────────────────────── */

.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* cuando WebGL toma el relevo, la atmósfera CSS se retira */
body.gl-on .nebula, body.gl-on .dust { display: none; }

.nebula {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
}
.nebula-a {
  background: radial-gradient(circle, #141a38 0%, transparent 65%);
  top: -25vmax; left: -15vmax;
  animation: driftA 90s ease-in-out infinite alternate;
}
.nebula-b {
  background: radial-gradient(circle, #0d2624 0%, transparent 65%);
  bottom: -30vmax; right: -20vmax;
  animation: driftB 120s ease-in-out infinite alternate;
}
@keyframes driftA { to { transform: translate(8vmax, 6vmax); } }
@keyframes driftB { to { transform: translate(-7vmax, -5vmax); } }

.dust { position: absolute; inset: 0; }
.mote {
  position: absolute;
  border-radius: 50%;
  background: #cfd3e8;
  animation: twinkle var(--tw, 6s) ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: var(--o-min, 0.05); }
  to   { opacity: var(--o-max, 0.35); }
}

.grain {
  position: absolute; inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-30px, 20px); }
  50% { transform: translate(20px, -30px); }
  75% { transform: translate(-20px, -20px); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ── Esquinas ────────────────────────────── */

.corner {
  position: fixed;
  z-index: 20;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
  text-decoration: none;
  transition: color 0.6s ease;
}
.corner:hover { color: var(--meta); }
.corner-tl { top: 26px; left: 30px; }
.corner-br { bottom: 24px; right: 30px; cursor: pointer; }

/* ── El campo ────────────────────────────── */

.field {
  position: fixed; inset: 0;
  z-index: 5;
}

.msg {
  position: absolute;
  max-width: 30ch;
  text-align: center;
  font-size: var(--fs, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  cursor: pointer;
  will-change: transform, opacity;
  transition: opacity 2.8s ease, filter 1.2s ease;
  user-select: none;
}
.msg.alive { opacity: var(--o, 0.7); }
.msg.leaving { opacity: 0; transition-duration: 3.5s; }

/* foco: el éter se aparta para escuchar */
.field.dimmed .msg.alive:not(.focused) { opacity: calc(var(--o, 0.7) * 0.25); }
.field.hushed .msg.alive:not(.mine) { opacity: calc(var(--o, 0.7) * 0.3); }
.msg.focused {
  opacity: 1 !important;
  filter: drop-shadow(0 0 18px rgba(233, 230, 223, 0.08));
}

.msg.mine { color: var(--ink-warm); }
.msg.mine .msg-text::before { content: "✦ "; color: var(--gold); font-size: 0.7em; vertical-align: 0.15em; }

.msg-text { display: block; }
.msg.sealed .msg-text { color: #e7d9bb; }

/* meta del mensaje: ojito, contador, responder */
.msg-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--meta-dim);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.msg.focused .msg-meta { opacity: 1; transform: translateY(0); }

.eye { display: inline-flex; align-items: center; gap: 5px; }
.eye svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.1; }
.eye.pulse svg { animation: eyePulse 0.9s ease; }
@keyframes eyePulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); stroke: var(--gold); }
  100% { transform: scale(1); }
}

.seal-tag { color: var(--gold); opacity: 0.8; }

.reply-cta {
  color: var(--meta);
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.5s ease;
}
.msg:hover .reply-cta, .msg.focused .reply-cta { border-color: var(--hairline); }
.reply-cta:hover { color: var(--ink); }

/* ── Escritura ───────────────────────────── */

.writer {
  position: fixed;
  left: 50%;
  bottom: max(44px, env(safe-area-inset-bottom, 0px) + 36px);
  transform: translateX(-50%);
  width: min(560px, 86vw);
  z-index: 30;
  opacity: 0;               /* invisible hasta que empieces a escribir */
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.writer.awake { opacity: 1; pointer-events: auto; }
.writer.away { opacity: 0 !important; pointer-events: none !important; } /* leyendo una carta */

.writer-inner { position: relative; }

#composer {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  outline: none;
  resize: none;
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  caret-color: var(--gold);
  padding: 6px 34px 10px 2px;
  transition: border-color 0.8s ease;
  overflow: hidden;
}
#composer:focus { border-color: rgba(233, 230, 223, 0.34); }
#composer:disabled { opacity: 0.45; }

.ghost {
  position: absolute;
  top: 6px; left: 2px;
  font-size: 19px;
  font-style: italic;
  color: var(--meta-dim);
  pointer-events: none;
  transition: opacity 1.1s ease;
}
.ghost.hidden { opacity: 0; }

/* el texto guía: flota ENCIMA del cuadro, brillando apenas, como parte del éter */
.prompt {
  text-align: center;
  margin-bottom: 14px;
  font-family: var(--font-voice);
  font-size: 20px;
  font-style: italic;
  color: rgba(240, 231, 212, 0.66);
  pointer-events: none;
  transition: opacity 1.1s ease;
  text-shadow:
    0 0 14px rgba(240, 231, 212, 0.30),
    0 0 36px rgba(201, 169, 106, 0.18);
  animation: promptBreath 5.5s ease-in-out infinite alternate;
}
.prompt.hidden { opacity: 0; }
.prompt.dim { opacity: 0.4; }
@keyframes promptBreath {
  from { text-shadow: 0 0 12px rgba(240, 231, 212, 0.22), 0 0 30px rgba(201, 169, 106, 0.12); }
  to   { text-shadow: 0 0 18px rgba(240, 231, 212, 0.42), 0 0 48px rgba(201, 169, 106, 0.26); }
}

/* lo que escribes también flota: tinta cálida con resplandor propio */
#composer {
  color: var(--ink-warm);
  text-shadow:
    0 0 12px rgba(240, 231, 212, 0.28),
    0 0 32px rgba(201, 169, 106, 0.15);
  text-align: center;
}

.release-btn {
  position: absolute;
  right: 0; bottom: 12px;
  background: none;
  border: none;
  font-size: 15px;
  color: var(--meta-dim);
  cursor: pointer;
  transition: color 0.5s ease, transform 0.5s ease;
  opacity: 0;
  pointer-events: none;
}
.writer.has-text .release-btn { opacity: 1; pointer-events: auto; }
.release-btn:hover { color: var(--gold); transform: rotate(90deg); }

.writer-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 16px;
  margin-top: 6px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: var(--meta-dim);
}
.char-count { opacity: 0; transition: opacity 0.6s ease; }
.char-count.visible { opacity: 1; }

/* ── Susurros ────────────────────────────── */

.whisper {
  position: fixed;
  left: 50%;
  bottom: max(208px, env(safe-area-inset-bottom, 0px) + 200px); /* por encima del texto guía del escritor */
  transform: translateX(-50%);
  width: min(620px, 88vw);
  text-align: center;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 2;
  color: var(--meta);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 25;
}
.whisper.visible { opacity: 1; pointer-events: auto; }
.whisper .w-link {
  color: var(--gold);
  cursor: pointer;
  border-bottom: 1px solid rgba(201, 169, 106, 0.3);
}

/* ── El ancla: conservar mi nombre ───────── */
/* la invitación no muere con el susurro: se asienta en su esquina */

#keepName {
  position: fixed;
  right: 26px;
  bottom: 22px;
  z-index: 26;
  background: none;
  border: none;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  /* transform 1.6s: también es la curva del vuelo susurro → esquina */
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.3, 0, 0.2, 1), color 0.9s ease;
}
#keepName.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#keepName:hover { color: var(--gold); }
#keepName span { color: var(--gold); opacity: 0.8; }
#keepName.landing { color: var(--gold); } /* dorado en vuelo, se enfría al posarse */

/* ── El ojito propio ─────────────────────── */
/* la suma de todas las miradas que han recibido tus cartas;
   aparece cuando tienes cartas viajando, pulsa dorado al subir */

.my-eyes {
  position: fixed;
  left: 26px;
  bottom: 22px;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--meta-dim);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease, color 0.5s ease;
}
.my-eyes.visible { opacity: 1; pointer-events: auto; }
.my-eyes:hover { color: var(--meta); }
.my-eyes svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.1; }
.my-eyes.pulse svg { animation: eyeUp 0.9s ease; }
.my-eyes.pulse span { animation: eyeUpText 0.9s ease; }

/* ── La invitación táctil (móvil) ────────── */
/* el escritor duerme también en móvil: esto lo despierta */

#writerSummon {
  position: fixed;
  left: 50%;
  bottom: max(44px, env(safe-area-inset-bottom, 0px) + 36px);
  transform: translateX(-50%);
  z-index: 29;
  background: none;
  border: none;
  padding: 10px 18px;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  color: rgba(240, 231, 212, 0.55);
  text-shadow: 0 0 14px rgba(240, 231, 212, 0.22);
  cursor: pointer;
  transition: opacity 0.9s ease;
}
#writerSummon.hidden { opacity: 0; pointer-events: none; }

/* ── Panel de respuesta ──────────────────── */

.veil {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: veilIn 0.9s ease both;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.veil.closing { animation: veilOut 0.6s ease both; }
@keyframes veilOut { to { opacity: 0; } }

.reply-panel {
  position: relative;
  width: min(540px, 88vw);
  padding: 20px 10px;
  text-align: center;
  animation: panelIn 1s ease both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.close-veil {
  position: absolute;
  top: -34px; right: 0;
  background: none; border: none;
  color: var(--meta-dim);
  font-size: 22px;
  font-family: var(--font-voice);
  cursor: pointer;
  transition: color 0.5s ease;
}
.close-veil:hover { color: var(--ink); }

.reply-context {
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--meta-dim);
  margin-bottom: 22px;
  text-transform: lowercase;
}

.reply-quote {
  font-size: 23px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 34px;
}

#replyComposer {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  outline: none;
  resize: none;
  font-family: var(--font-voice);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  caret-color: var(--gold);
  text-align: center;
  padding-bottom: 10px;
  transition: border-color 0.8s ease;
}
#replyComposer:focus { border-color: rgba(233, 230, 223, 0.34); }
#replyComposer::placeholder { color: var(--meta-dim); font-style: italic; }

.reply-hint {
  margin-top: 16px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
}

.reply-send {
  margin-top: 26px;
  background: none;
  border: 1px solid rgba(201, 169, 106, 0.35);
  border-radius: 99px;
  padding: 10px 26px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.6s ease, border-color 0.6s ease;
}
.reply-send:hover { background: rgba(201, 169, 106, 0.08); border-color: rgba(201, 169, 106, 0.6); }

.received-text {
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-warm);
}

/* ── Mensajes en el espacio ──────────────── */

#words {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none; /* por ahora ambiente puro; la interacción vendrá después */
  /* perspective la fija JS: alto/2 px ⇔ el mismo lente fov-90° del WebGL */
  perspective-origin: 50% 50%;
}

#scene {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d; /* profundidad real: el navegador ordena y proyecta */
  will-change: transform;
}

.word {
  position: absolute;
  left: 0; top: 0;
  width: 36ch;
  max-width: 64vw;
  text-align: center;
  font-family: var(--font-voice);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.65); /* legible incluso sobre niebla clara */
  opacity: 0;
  backface-visibility: hidden;
}

/* ── La carta ────────────────────────────── */

#letter {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 46vh; /* el orbe se posa arriba del centro; la carta vive debajo */
  pointer-events: none;
}

.letter-inner {
  max-width: 46ch;
  padding: 0 24px;
  text-align: center;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
#letter.open .letter-inner { opacity: 1; transform: translateY(0); }

/* tu carta citada: sin etiqueta — se reconoce porque brilla con TU tinta
   (el mismo resplandor cálido con el que escribes) y lleva tu sello ✦ */
.letter-quote {
  margin-bottom: 22px;
  font-family: var(--font-voice);
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-warm);
  opacity: 0.82;
  text-shadow:
    0 0 12px rgba(240, 231, 212, 0.26),
    0 0 32px rgba(201, 169, 106, 0.15);
}
.letter-quote::before {
  content: "✦ ";
  color: var(--gold);
  font-style: normal;
  font-size: 0.75em;
  vertical-align: 0.12em;
}

.letter-text {
  font-family: var(--font-voice);
  font-size: 21px;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink-warm);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.7);
}

.letter-sign {
  margin-top: 18px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--meta);
}

.letter-eye {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--meta-dim);
}
.letter-eye svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
}
.letter-eye.pulse svg { animation: eyeUp 0.9s ease; }
.letter-eye.pulse span { animation: eyeUpText 0.9s ease; }
@keyframes eyeUp {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); stroke: var(--gold); }
  100% { transform: scale(1); }
}
@keyframes eyeUpText {
  0% { color: inherit; }
  35% { color: var(--gold); }
  100% { color: inherit; }
}

.letter-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}

.letter-actions button {
  background: none;
  border: none;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--meta);
  cursor: pointer;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.5s ease;
}
.letter-actions button:hover { color: var(--gold); border-color: rgba(201, 169, 106, 0.4); }
#letterReply { color: var(--gold); }

.letter-hint {
  margin-top: 22px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
}

/* ── La respuesta: la trae el mensajero ────── */
/* sin "te respondieron": la respuesta habla en el azul del orbe
   que la trajo hasta ti — verla ya es entenderla */

#letter.reply-view .letter-text {
  color: #c9efed;
  text-shadow:
    0 0 14px rgba(140, 230, 230, 0.32),
    0 0 42px rgba(80, 180, 180, 0.20),
    0 1px 24px rgba(0, 0, 0, 0.7);
}
#letter.reply-view .letter-hint { color: rgba(140, 230, 230, 0.34); }

.letter-replybox { margin-top: 26px; }
.letter-replybox textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  outline: none;
  resize: none;
  font-family: var(--font-voice);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  caret-color: var(--gold);
  text-align: center;
  padding-bottom: 8px;
  transition: border-color 0.8s ease;
}
.letter-replybox textarea:focus { border-color: rgba(233, 230, 223, 0.34); }
.letter-replybox textarea::placeholder { color: var(--meta-dim); font-style: italic; }
.reply-note {
  margin-top: 12px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
}
#letterReplySend {
  margin-top: 18px;
  background: none;
  border: 1px solid rgba(201, 169, 106, 0.35);
  border-radius: 99px;
  padding: 9px 24px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.6s ease, border-color 0.6s ease;
}
#letterReplySend:hover { background: rgba(201, 169, 106, 0.08); border-color: rgba(201, 169, 106, 0.6); }

/* ── Panel de ajustes ────────────────────── */

#panel {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 100;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--meta);
}

#panelToggle {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  letter-spacing: 0.18em;
  color: var(--meta-dim);
  cursor: pointer;
  transition: color 0.5s ease;
}
#panelToggle:hover { color: var(--gold); }

#panelBody {
  margin-top: 10px;
  width: 230px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 14px 16px;
  background: rgba(8, 8, 14, 0.82);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.p-section { margin-bottom: 14px; }
.p-title {
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  font-size: 9.5px;
}

.p-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.p-row span { flex: 0 0 76px; color: var(--meta); }
.p-row output { flex: 0 0 32px; text-align: right; color: var(--meta-dim); }

.p-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gold);
  height: 2px;
}
.p-row input[type="color"] {
  flex: 1;
  height: 20px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.p-row input[type="checkbox"] { accent-color: var(--gold); }

#panelCopy {
  width: 100%;
  margin-top: 4px;
  background: none;
  border: 1px solid rgba(201, 169, 106, 0.35);
  border-radius: 99px;
  padding: 7px 0;
  font: inherit;
  letter-spacing: 0.2em;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.5s ease;
}
#panelCopy:hover { background: rgba(201, 169, 106, 0.08); }

#panelSummon {
  width: 100%;
  margin-top: 2px;
  background: none;
  border: 1px solid rgba(158, 199, 255, 0.3);
  border-radius: 99px;
  padding: 6px 0;
  font: inherit;
  letter-spacing: 0.2em;
  color: #9ec7ff;
  cursor: pointer;
  transition: background 0.5s ease;
}
#panelSummon:hover { background: rgba(158, 199, 255, 0.08); }

/* ── Móvil ───────────────────────────────── */

@media (max-width: 640px) {
  .msg { max-width: 24ch; }
  #composer, .ghost { font-size: 17px; }
  .reply-quote { font-size: 19px; }
  .corner-tl { top: 18px; left: 20px; }
  .corner-br { bottom: 16px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .nebula { animation: none; }
}