/* Encrypted adventures — the password dialog and the sealing animation
   (static/sealed-play.js). Skinned to the "Living Memory" tokens the rest of
   the UI V2 screens read (ui-v2/css/tokens.css): the violet ground, the double
   codex frame, Cinzel for the title, JetBrains Mono for the eyebrow, Cormorant
   for the body. It rides the .modal shell only for the fixed backdrop. */

#sealed-modal { background: rgba(7, 2, 15, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

#sealed-modal .sealed-modal {
  position: relative; overflow: hidden;
  width: min(460px, calc(100vw - 32px));
  padding: 30px 30px 24px;
  border-radius: var(--sv-r-card, 0);
  border: 1px solid var(--sv-line-strong, rgba(162,77,255,.45));
  box-shadow: var(--sv-card-inset, inset 0 0 0 4px #07020f, inset 0 0 0 5px rgba(162,77,255,.1)), var(--sv-shadow-pop, 0 30px 70px -30px rgba(0,0,0,.9));
  background: linear-gradient(180deg, rgba(30,8,66,.72), rgba(7,2,15,.96));
  color: var(--sv-text, #f3ecff);
  animation: sealed-rise .45s var(--sv-ease-out, cubic-bezier(.22,1,.36,1)) both;
}
/* the glow behind the lock, like the tale cards */
#sealed-modal .sealed-modal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(162,77,255,.32), transparent 58%);
}

/* ---- header: eyebrow, lock, title ---- */
.sealed-eyebrow {
  position: relative; text-align: center;
  font-family: var(--sv-font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--sv-violet-bright, #c98bff); margin: 0 0 14px;
}
.sealed-lock {
  position: relative; width: 64px; height: 64px; margin: 0 auto 14px;
  display: block; filter: drop-shadow(0 0 16px rgba(201,139,255,.45));
  transition: transform var(--sv-t-med, .3s) var(--sv-ease-spring, cubic-bezier(.34,1.56,.64,1)), filter var(--sv-t-med, .3s);
}
.sealed-lock .shackle { transform-origin: 22px 26px; transition: transform .55s var(--sv-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
#sealed-modal .sealed-modal h3 {
  position: relative; margin: 0 0 6px; text-align: center;
  font-family: var(--sv-font-display, 'Cinzel', Georgia, serif); font-weight: 700;
  font-size: 19px; letter-spacing: .08em; line-height: 1.25;
  color: var(--sv-text, #f3ecff); text-shadow: 0 1px 18px rgba(162,77,255,.35);
}
.sealed-lead {
  position: relative; margin: 0 0 18px; text-align: center;
  font-family: var(--sv-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px; line-height: 1.5; color: var(--sv-text-muted, #c0acef);
}

/* ---- the field: shaped like the composer input ---- */
.sealed-field { position: relative; display: flex; flex-direction: column; gap: 7px; margin: 0 0 10px; }
.sealed-field.hidden { display: none; }
.sealed-field span {
  font-family: var(--sv-font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sv-text-dim, #8d74b8);
}
.sealed-field input {
  box-sizing: border-box; width: 100%; padding: 12px 14px;
  border: 1px solid rgba(162,77,255,.3); border-radius: var(--sv-r-md, 10px);
  background: rgba(7,2,15,.6); color: var(--sv-text, #f3ecff);
  font-family: var(--sv-font-read, 'Literata', Georgia, serif); font-size: 17px; letter-spacing: .04em;
  outline: none; transition: border-color var(--sv-t-fast, .15s), box-shadow var(--sv-t-fast, .15s);
}
.sealed-field input:focus { border-color: var(--sv-line-hover, rgba(201,139,255,.9)); box-shadow: var(--sv-glow-focus, 0 0 0 3px rgba(201,139,255,.35)); }
.sealed-show {
  position: relative; display: flex; align-items: center; gap: 8px; margin: -2px 0 14px;
  font-family: var(--sv-font-body, 'Cormorant Garamond', Georgia, serif); font-size: 14px;
  color: var(--sv-text-dim, #8d74b8); cursor: pointer; user-select: none;
}
.sealed-show input { accent-color: var(--sv-violet, #a24dff); }

/* ---- the warning is the point of the create dialog, not a footnote ---- */
.sealed-warn {
  position: relative; margin: 0 0 12px; padding: 10px 12px;
  border-left: 2px solid var(--sv-danger, #dc5a4e); background: rgba(220,90,78,.10);
  font-family: var(--sv-font-body, 'Cormorant Garamond', Georgia, serif); font-size: 15px; line-height: 1.45;
  color: var(--sv-text-soft, #e0d0fb);
}
.sealed-warn:empty { display: none; }
.sealed-honest {
  position: relative; margin: 0 0 6px; text-align: center;
  font-family: var(--sv-font-body, 'Cormorant Garamond', Georgia, serif); font-style: italic;
  font-size: 13.5px; line-height: 1.45; color: var(--sv-text-dim, #8d74b8);
}
.sealed-err {
  position: relative; margin: 0 0 10px; padding: 8px 12px; text-align: center;
  border: 1px solid rgba(220,90,78,.55); border-radius: var(--sv-r-sm, 8px); background: rgba(220,90,78,.10);
  font-family: var(--sv-font-body, 'Cormorant Garamond', Georgia, serif); font-size: 14.5px; color: #ffb3a9;
}
.sealed-err.hidden { display: none; }

/* ---- actions: the app's primary gradient, not the generic modal button ---- */
#sealed-modal .modal-actions { position: relative; margin-top: 8px; justify-content: flex-end; }
#sealed-modal .modal-actions.hidden { display: none; }
#sealed-modal .modal-actions button {
  padding: 10px 18px; border-radius: var(--sv-r-pill, 999px);
  border: 1px solid var(--sv-line-strong, rgba(162,77,255,.45)); background: transparent;
  color: var(--sv-text-muted, #c0acef);
  font-family: var(--sv-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: transform var(--sv-t-fast, .15s) var(--sv-ease-spring, cubic-bezier(.34,1.56,.64,1)), border-color var(--sv-t-fast, .15s), color var(--sv-t-fast, .15s);
}
#sealed-modal .modal-actions button:hover { border-color: var(--sv-line-hover, rgba(201,139,255,.9)); color: var(--sv-text, #f3ecff); transform: translateY(-1px); }
#sealed-modal .modal-actions button.primary {
  border-color: transparent; color: #fff;
  background: var(--sv-grad-primary, linear-gradient(180deg, #c98bff, #6a1fe0));
  box-shadow: var(--sv-glow-primary, 0 10px 32px -10px rgba(162,77,255,.6));
}
#sealed-modal .modal-actions button.primary:hover { color: #fff; filter: brightness(1.08); }
#sealed-modal .modal-actions button[disabled] { opacity: .55; cursor: default; transform: none; }

/* ---- states ---- */
.sealed-modal.sealed-shake { animation: sealed-shake .5s var(--sv-ease-out, cubic-bezier(.22,1,.36,1)) 1; }
.sealed-modal.sealed-shake .sealed-lock { filter: drop-shadow(0 0 18px rgba(220,90,78,.7)); }
.sealed-modal.sealed-busy .sealed-lock { animation: sealed-breathe 1.1s ease-in-out infinite; }
.sealed-modal.sealed-open .sealed-lock { filter: drop-shadow(0 0 22px rgba(232,200,78,.7)); transform: scale(1.08); }
.sealed-modal.sealed-open .sealed-lock .shackle { transform: translateY(-9px) rotate(-14deg); }
.sealed-modal.sealed-open .sealed-lock path, .sealed-modal.sealed-open .sealed-lock rect { stroke: #e8c84e; }
.sealed-modal.sealed-open h3 { color: #e8c84e; text-shadow: 0 0 18px rgba(232,200,78,.5); }
.sealed-modal.sealed-leave { animation: sealed-leave .4s var(--sv-ease-out, cubic-bezier(.22,1,.36,1)) forwards; }

/* ---- the sealing animation: the typed word dissolving into real ciphertext ---- */
.sealed-anim { position: relative; padding: 18px 4px 6px; text-align: center; }
.sealed-anim.hidden { display: none; }
.sealed-anim-word {
  font-family: var(--sv-font-mono, ui-monospace, monospace);
  font-size: 20px; letter-spacing: .18em; min-height: 1.6em;
  color: var(--sv-violet-bright, #c98bff); text-shadow: 0 0 14px rgba(197,139,214,.55);
  word-break: break-all; transition: color .4s, text-shadow .4s;
}
.sealed-anim-word.sealed-anim-done { color: #e8c84e; text-shadow: 0 0 18px rgba(232,200,78,.6); animation: sealed-pulse 1.1s ease-out 1; }
.sealed-anim-label {
  margin-top: 12px; color: var(--sv-text-dim, #8d74b8);
  font-family: var(--sv-font-mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase;
}

@keyframes sealed-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sealed-leave { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes sealed-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes sealed-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sealed-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  #sealed-modal .sealed-modal, .sealed-modal.sealed-shake, .sealed-modal.sealed-busy .sealed-lock,
  .sealed-modal.sealed-leave, .sealed-anim-word.sealed-anim-done { animation: none; }
  .sealed-lock, .sealed-lock .shackle { transition: none; }
}

/* The Library card's lock: a sealed tale says so where the art would be. */
.sv-sealed-badge {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sv-font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #d8b6e6; background: rgba(7, 2, 15, 0.7); border: 1px solid rgba(197, 139, 214, 0.45);
  border-radius: 4px; padding: 3px 7px; pointer-events: none;
}