/* ============================================================
   title.css — the cinematic layers: the loading screen, the character
   select, and the dialogue lower third (ui/title.js, ui/dialogue.js).
   Deep green, sand-gold hairlines, Cinzel over Cormorant.
   ============================================================ */

/* ================= Loading ================= */
#loading { background: #05130C; }
.ld-root {
  --p: 0;
  position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(24, 66, 42, .55), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, #0A2215 0%, #06170E 48%, #020805 100%);
  color: var(--sand-lt);
  transition: opacity .9s var(--ease);
}
.ld-root.out { opacity: 0; }
.ld-root.out .ld-center { transform: translateY(-3vh) scale(1.035); filter: blur(3px); transition: transform 1s var(--ease), filter 1s var(--ease); }
.ld-root::after {                                   /* a fine frame, like a plate border */
  content: ''; position: absolute; inset: 22px; pointer-events: none;
  border: 1px solid rgba(201, 174, 124, .12);
  box-shadow: inset 0 0 0 5px rgba(5, 19, 12, .0), inset 0 0 0 6px rgba(201, 174, 124, .06);
}
.ld-glow {
  position: absolute; left: 50%; top: 38%; width: 70vh; height: 70vh; margin: -35vh 0 0 -35vh; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 200, 130, .16), rgba(201, 174, 124, .05) 38%, transparent 66%);
  animation: ld-breathe 6s ease-in-out infinite alternate;
}
@keyframes ld-breathe { from { opacity: .65; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.ld-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ld-center { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateY(-3vh); }

/* the hawk draws itself in gold, then fills */
.ld-mark { width: clamp(92px, 14vh, 150px); filter: drop-shadow(0 0 22px rgba(232, 200, 130, .22)); }
.ld-hawk { width: 100%; height: auto; display: block; overflow: visible; }
.ld-hawk .s, .ld-hawk .l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-draw 1.5s cubic-bezier(.45, .05, .25, 1) forwards; }
.ld-hawk .s { fill-opacity: 0; animation: ld-draw 1.5s cubic-bezier(.45, .05, .25, 1) forwards, ld-fill .9s var(--ease) 1.25s forwards; }
.ld-hawk .f { opacity: 0; animation: ld-in .8s var(--ease) forwards; }
.ld-hawk .s:nth-of-type(1) { animation-delay: .35s, 1.35s; }
.ld-hawk .s:nth-of-type(5) { animation-delay: .1s, 1.2s; }
.ld-hawk .l { animation-delay: .7s; }
.ld-hawk .f { animation-delay: 1.35s; }
.ld-hawk .f:nth-of-type(3) { animation-delay: 1.45s; } .ld-hawk .f:nth-of-type(4) { animation-delay: 1.55s; }
.ld-hawk .eye { animation-delay: 1.9s; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-fill { to { fill-opacity: 1; } }
@keyframes ld-in { to { opacity: 1; } }

.ld-title {
  margin: clamp(18px, 3.4vh, 34px) 0 0; text-align: center;
  font: 600 clamp(19px, 2.9vh, 30px)/1.25 var(--display); letter-spacing: .36em; text-transform: uppercase; text-indent: .36em;
  color: #E8D3A0;
  background: linear-gradient(180deg, #FFF1C4 5%, #E6C27A 55%, #B98A3A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
  animation: ld-track 2.4s var(--ease-out) .3s both;
}
.ld-title .b { margin-left: .6em; }
@keyframes ld-track { from { opacity: 0; letter-spacing: .62em; } to { opacity: 1; letter-spacing: .36em; } }

.ld-rule { position: relative; width: min(340px, 62vw); height: 11px; margin: clamp(18px, 3vh, 28px) 0 10px; animation: ld-in 1s var(--ease) .8s both; }
.ld-rule::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 174, 124, .28) 12%, rgba(201, 174, 124, .28) 88%, transparent);
}
.ld-end { position: absolute; top: 5.5px; width: 5px; height: 5px; margin: -2.5px; transform: rotate(45deg); border: 1px solid rgba(201, 174, 124, .7); }
.ld-end.l { left: -10px; } .ld-end.r { right: -10px; }
.ld-fill {
  position: absolute; left: 0; top: 5px; height: 1px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p));
  background: linear-gradient(90deg, rgba(201, 174, 124, .2), #E6C27A 60%, #FFF1C4);
  box-shadow: 0 0 8px rgba(255, 214, 120, .5);
  transition: transform .7s var(--ease);
}
.ld-spark {
  position: absolute; top: 5.5px; left: calc(var(--p) * 100%); width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: #FFF6DA; box-shadow: 0 0 6px 2px rgba(255, 220, 140, .85), 0 0 22px 6px rgba(255, 200, 110, .35);
  transition: left .7s var(--ease);
}
.ld-label {
  font: italic 400 clamp(15px, 2vh, 18px)/1.3 var(--body); color: rgba(232, 211, 160, .72); letter-spacing: .02em; min-height: 1.3em;
  animation: ld-in 1s var(--ease) .9s both;
}

.ld-epi {
  position: absolute; left: 50%; bottom: 8.5vh; width: min(760px, 84vw); transform: translateX(-50%); margin: 0; text-align: center;
  opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease-out);
}
.ld-epi.in { opacity: 1; }
.ld-epi q { display: block; quotes: '“' '”'; font: italic 400 clamp(17px, 2.3vh, 21px)/1.5 var(--body); color: rgba(237, 227, 206, .78); text-wrap: balance; }
.ld-epi cite {
  display: block; margin-top: 10px; font: 400 10.5px/1.3 var(--util); font-style: normal; letter-spacing: .28em; text-transform: uppercase; color: rgba(201, 174, 124, .7);
}
.ld-epi cite::before { content: '—\00a0\00a0'; letter-spacing: 0; }

/* a few motes of gold dust drifting up through the glow */
.ld-motes { position: absolute; left: 50%; top: 40%; width: 56vh; height: 60vh; margin: -30vh 0 0 -28vh; pointer-events: none; }
.ld-motes i {
  --dx: 0px; --s: 1;
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFE9B0;
  box-shadow: 0 0 6px 1px rgba(255, 214, 120, .6);
  opacity: 0; animation: ld-mote 10s linear infinite;
}
@keyframes ld-mote {
  0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; }
  15% { opacity: .75; }
  60% { opacity: .45; }
  100% { transform: translate(var(--dx), -40vh) scale(var(--s)); opacity: 0; }
}

/* ================= Title: the character select ================= */
#title { pointer-events: none; }
.tt-root { position: absolute; inset: 0; color: var(--paper); pointer-events: auto; cursor: default; }
.tt-root.over-fig { cursor: pointer; }
.tt-scrim { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.tt-scrim.top { top: 0; height: 40vh; background:
  radial-gradient(ellipse 50% 90% at 50% 0%, rgba(3, 10, 6, .5), transparent 70%),
  linear-gradient(to bottom, rgba(3, 10, 6, .8), rgba(3, 10, 6, .4) 48%, transparent); }
.tt-scrim.bot { bottom: 0; height: 30vh; background: linear-gradient(to top, rgba(3, 10, 6, .86), rgba(3, 10, 6, .42) 45%, transparent); }

/* the pool of light on the hovered reader; the rest of the hall dims */
.tt-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); --sx: 50%; --sy: 62%; }
.tt-spot::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 22vw 44vh at var(--sx) var(--sy), transparent 0, transparent 50%, rgba(2, 6, 4, .32) 100%);
}
.tt-spot::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 9vw 24vh at var(--sx) var(--sy), rgba(255, 214, 150, .13), transparent 70%);
}
.tt-root.has-hover .tt-spot { opacity: 1; }

.tt-head { position: absolute; left: 0; right: 0; top: 5vh; text-align: center; pointer-events: none; isolation: isolate; }
/* a soft pool of shade behind the lettering, so the apse lamps never wash it out */
.tt-head::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -7vh; width: min(1180px, 84vw); height: 40vh; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(3, 10, 6, .62), rgba(3, 10, 6, .34) 52%, rgba(3, 10, 6, .1) 72%, transparent 82%);
}
.tt-mark { width: clamp(38px, 5.4vh, 54px); height: auto; display: block; margin: 0 auto 14px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
.tt-title {
  margin: 0; font: 600 clamp(28px, 5vh, 54px)/1.08 var(--display); letter-spacing: .16em; text-transform: uppercase; text-indent: .16em;
  background: linear-gradient(180deg, #FFF4D2 8%, #EBCB86 52%, #B98A3A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(20, 12, 4, .55)) drop-shadow(0 8px 28px rgba(0, 0, 0, .55));
}
.tt-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px auto 10px; }
.tt-orn i { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 214, 150, .9)); box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tt-orn i:last-child { transform: scaleX(-1); }
.tt-orn b { display: block; width: 7px; height: 7px; transform: rotate(45deg); background: #E6C27A; box-shadow: 0 0 10px rgba(255, 214, 120, .6); }
.tt-sub { margin: 0; font: italic 400 clamp(18px, 2.7vh, 25px)/1.2 var(--body); letter-spacing: .06em; color: #F6E7C4; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 16px rgba(0, 0, 0, .85); }

/* per-figure shade and light */
.tt-figs { position: absolute; inset: 0; pointer-events: none; }
.tt-fig {
  --h: 300px;
  position: absolute; left: 0; top: 0; width: calc(var(--h) * .62); height: calc(var(--h) * 1.3);
  margin: calc(var(--h) * -.65) 0 0 calc(var(--h) * -.31); will-change: transform;
  border-radius: 50%; opacity: 0; transition: opacity .55s var(--ease);
  background: radial-gradient(closest-side, rgba(2, 6, 4, .62), rgba(2, 6, 4, .42) 55%, transparent);
}
.tt-fig::after {
  content: ''; position: absolute; inset: -10%; border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .55s var(--ease);
  background: radial-gradient(closest-side, rgba(255, 214, 150, .16), rgba(255, 200, 130, .06) 55%, transparent);
}
.tt-root.has-hover .tt-fig { opacity: 1; }
.tt-root.has-hover .tt-fig.hot { background: none; }
.tt-fig.hot::after { opacity: 1; }
.tt-root[data-state="chosen"] .tt-fig, .tt-root[data-state="leaving"] .tt-fig { opacity: 0; }

/* floating name tags above the figures */
.tt-tags { position: absolute; inset: 0; pointer-events: none; }
.tt-tag {
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .5s var(--ease);
  opacity: .0;
}
.tt-tag b {
  /* left: 0 pins the name to the anchor; without it the flex parent's static position
     shifted it half its width to the left of the head */
  left: 0; transform: translate(-50%, -100%); position: absolute; white-space: nowrap;
  font: 600 13px/1 var(--display); letter-spacing: .26em; text-transform: uppercase; text-indent: .26em; color: #F3E3BD;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .6); top: -12px;
}
.tt-tag i {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px; transform: rotate(45deg);
  background: #E6C27A; box-shadow: 0 0 10px rgba(255, 214, 120, .8);
}
.tt-root[data-state="open"] .tt-tag.hot { opacity: 1; }
.tt-tag.gone, .tt-root[data-state="chosen"] .tt-tag, .tt-root[data-state="leaving"] .tt-tag { opacity: 0 !important; }

/* the three cards: compact until you look at one, then the line unfolds */
.tt-cards {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 34px); align-items: end;
  width: min(1140px, 84vw);
}
.tt-card {
  --i: 0;
  position: relative; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto auto auto; column-gap: 16px;
  text-align: left; cursor: pointer; color: var(--paper); font: inherit;
  padding: 16px 22px 15px 16px; border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 241, 196, .045), transparent 40%),
    linear-gradient(180deg, rgba(10, 36, 22, .66), rgba(4, 16, 10, .82));
  border: 1px solid rgba(201, 174, 124, .3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 241, 196, .08);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease-out), border-color .3s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  transition-delay: calc(.55s + var(--i) * .12s), calc(.55s + var(--i) * .12s), 0s, 0s, 0s;
}
.tt-card::before {                                   /* gilt corners */
  content: ''; position: absolute; inset: 6px; border-radius: 11px; pointer-events: none; opacity: .5; transition: opacity .3s;
  background:
    linear-gradient(#C9AE7C, #C9AE7C) top left / 14px 1px no-repeat, linear-gradient(#C9AE7C, #C9AE7C) top left / 1px 14px no-repeat,
    linear-gradient(#C9AE7C, #C9AE7C) top right / 14px 1px no-repeat, linear-gradient(#C9AE7C, #C9AE7C) top right / 1px 14px no-repeat,
    linear-gradient(#C9AE7C, #C9AE7C) bottom left / 14px 1px no-repeat, linear-gradient(#C9AE7C, #C9AE7C) bottom left / 1px 14px no-repeat,
    linear-gradient(#C9AE7C, #C9AE7C) bottom right / 14px 1px no-repeat, linear-gradient(#C9AE7C, #C9AE7C) bottom right / 1px 14px no-repeat;
}
.tt-root[data-state="open"] .tt-card { opacity: 1; transform: none; }
.tt-root[data-state="open"].has-hover .tt-card:not(.hot) { opacity: .6; }
.tt-card.hot, .tt-card:focus-visible {
  border-color: rgba(255, 227, 154, .78); outline: none;
  background:
    linear-gradient(180deg, rgba(255, 241, 196, .09), transparent 45%),
    linear-gradient(180deg, rgba(18, 52, 32, .8), rgba(6, 20, 12, .9));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 214, 120, .18), 0 0 46px -8px rgba(255, 214, 120, .45), inset 0 1px 0 rgba(255, 241, 196, .14);
}
.tt-root[data-state="open"] .tt-card.hot { transform: translateY(-4px); transition-delay: 0s; }
.tt-card.hot::before { opacity: 1; }
.tt-key {
  position: absolute; right: 14px; top: 13px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  display: grid; place-items: center; font: 500 11px/1 var(--util); color: rgba(201, 174, 124, .8);
  border: 1px solid rgba(201, 174, 124, .3); background: rgba(232, 211, 160, .04);
}
.tt-card.hot .tt-key { color: var(--green-deep); background: linear-gradient(180deg, #FFF1C4, #E6B653); border-color: transparent; }
.tt-emblem {
  grid-row: 1 / span 3; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; align-self: center;
  color: #EBCB86;
  background: radial-gradient(circle at 40% 32%, #1B4630, #06170E 78%);
  box-shadow: 0 0 0 1px rgba(201, 174, 124, .75), 0 0 0 4px rgba(6, 23, 14, .9), 0 0 0 5px rgba(201, 174, 124, .28), 0 6px 16px rgba(0, 0, 0, .45);
  transition: color .3s, box-shadow .3s;
}
.tt-emblem svg { width: 33px; height: 33px; }
.tt-card.hot .tt-emblem { color: #FFF1C4; box-shadow: 0 0 0 1px #E6C27A, 0 0 0 4px rgba(6, 23, 14, .9), 0 0 0 5px rgba(255, 214, 120, .5), 0 0 22px rgba(255, 214, 120, .35); }
.tt-name { grid-column: 2; font: 600 clamp(18px, 2.5vh, 23px)/1.15 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #F6E4B8; padding-right: 26px; }
.tt-role { grid-column: 2; font: italic 400 clamp(15.5px, 2.05vh, 18.5px)/1.25 var(--body); color: rgba(237, 227, 206, .88); }
.tt-era { grid-column: 2; margin-top: 3px; font: 400 10px/1.3 var(--util); letter-spacing: .26em; text-transform: uppercase; color: rgba(201, 174, 124, .78); }
.tt-more {
  grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .45s var(--ease-out), opacity .35s var(--ease);
}
.tt-more-in { display: block; min-height: 0; overflow: hidden; }
.tt-more-in > span { display: block; }
.tt-card.hot .tt-more, .tt-card:focus-visible .tt-more { grid-template-rows: 1fr; opacity: 1; }
.tt-line {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(201, 174, 124, .18);
  font: 400 clamp(15px, 1.95vh, 17.5px)/1.42 var(--body); color: rgba(237, 227, 206, .84);
}
.tt-more-in > .tt-go {
  display: flex; align-items: center; gap: .5em; padding-top: 10px;
  font: 400 10.5px/1 var(--util); letter-spacing: .24em; text-transform: uppercase; color: #FFE39A;
}
.tt-go i { font-style: normal; letter-spacing: 0; font-size: 13px; }

/* choosing: the chosen card glows, the rest leave */
.tt-root[data-state="chosen"] .tt-card:not(.chosen) { opacity: 0; transform: translateY(24px); transition-delay: 0s; transition-duration: .5s; }
.tt-root[data-state="chosen"] .tt-card.chosen { transform: translateY(-8px); border-color: #FFE39A; transition-delay: 0s; }
.tt-root[data-state="chosen"] .tt-head { opacity: 0; transform: translateY(-12px); transition: opacity .8s var(--ease) .2s, transform 1s var(--ease) .2s; }
.tt-root[data-state="chosen"] .tt-hint, .tt-root[data-state="chosen"] .tt-spot { opacity: 0; }
.tt-root[data-state="chosen"] .tt-scrim.top { opacity: .3; }
.tt-root[data-state="leaving"] { pointer-events: none; }
.tt-root[data-state="leaving"] > * { opacity: 0 !important; transition: opacity .8s var(--ease) !important; }
.tt-head, .tt-hint { transition: opacity .8s var(--ease), transform 1s var(--ease); }
.tt-root[data-state="pre"] .tt-head { opacity: 0; transform: translateY(-10px); }
.tt-root[data-state="open"] .tt-head { opacity: 1; transform: none; transition-delay: .15s; }
.tt-root[data-state="pre"] .tt-hint { opacity: 0; }

.tt-hint {
  position: absolute; left: 50%; bottom: 1.4vh; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; white-space: nowrap;
  font: 400 10px/1 var(--util); letter-spacing: .22em; text-transform: uppercase; color: rgba(201, 174, 124, .62); pointer-events: none;
}
.tt-hint .dot { opacity: .6; }
.tt-hint kbd, .dlg-keys kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 4px; margin: 0 2px; border-radius: 4px;
  font: 500 9.5px/1 var(--util); letter-spacing: .04em; color: #E8D3A0;
  border: 1px solid rgba(201, 174, 124, .35); border-bottom-width: 2px; background: rgba(232, 211, 160, .05);
}

@media (max-height: 760px) {
  .tt-head { top: 4.5vh; }
  .tt-card { padding: 12px 18px 11px 12px; grid-template-columns: 48px 1fr; column-gap: 13px; }
  .tt-emblem { width: 48px; height: 48px; } .tt-emblem svg { width: 29px; height: 29px; }
  .tt-line { margin-top: 9px; padding-top: 8px; font-size: 15px; }
}

/* ================= Dialogue: the lower third ================= */
#dialogue { pointer-events: none; }
.dlg-root { position: absolute; inset: 0; pointer-events: none; }
.dlg-root[data-state="open"] { pointer-events: auto; cursor: default; }
.dlg-bar { position: absolute; left: 0; right: 0; height: 8.5vh; background: #020604; transition: transform .7s var(--ease-out); pointer-events: none; }
.dlg-bar.top { top: 0; transform: translateY(-101%); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.dlg-bar.bot { bottom: 0; transform: translateY(101%); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
.dlg-root[data-state="open"] .dlg-bar { transform: none; }
.dlg-root[data-state="closing"] .dlg-bar { transition-duration: .55s; transition-delay: .08s; }
.dlg-shade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: linear-gradient(to top, rgba(2, 8, 5, .72), rgba(2, 8, 5, .25) 38%, transparent 58%);
}
.dlg-root[data-state="open"] .dlg-shade { opacity: 1; }

.dlg-panel {
  position: absolute; left: 50%; bottom: 5.2vh; width: min(1060px, 80vw);
  padding: 26px 42px 22px; border-radius: 6px 6px 18px 18px;
  color: var(--paper);
  background:
    radial-gradient(ellipse 60% 120% at 12% 0%, rgba(255, 214, 150, .06), transparent 60%),
    linear-gradient(180deg, rgba(12, 40, 25, .86), rgba(4, 16, 10, .93));
  border: 1px solid rgba(201, 174, 124, .34); border-top: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 241, 196, .05);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0; transform: translate(-50%, 28px);
  transition: opacity .55s var(--ease), transform .8s var(--ease-out);
}
.dlg-root[data-state="open"] .dlg-panel { opacity: 1; transform: translate(-50%, 0); transition-delay: .15s; }
.dlg-root[data-state="closing"] .dlg-panel { opacity: 0; transform: translate(-50%, 18px); transition-duration: .35s, .5s; }

/* the papyrus edge along the top, deckled, over a gilt hairline */
.dlg-edge {
  position: absolute; left: -1px; right: -1px; top: -9px; height: 12px; border-radius: 4px 4px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(120, 84, 34, .16) 0 1px, transparent 1px 4px, rgba(120, 84, 34, .08) 4px 5px, transparent 5px 9px),
    repeating-linear-gradient(0deg, rgba(120, 84, 34, .2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #E9DAB8, #D3BC8C);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V4l7-1 9 1.5 6-2 11 1 8-1.5 10 2 7-1 12 .5 9-2 8 1.5 11-.5 6 1.5 10-2 9 1 8-.5 12 1.5 7-2 10 1 9-.5 6 1.5 11-2 8 1 10-.5 7 1.5 9-1.5 12 1 6-1 10 1.5 8-2 11 1 9-.5 7 1.5 10-1 8-1 12 1.5 6-2 9 1 11-.5 8 1.5 7-1.5 10 1 9-1 8 1.5 12-1 6 .5 5-1V12Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V4l7-1 9 1.5 6-2 11 1 8-1.5 10 2 7-1 12 .5 9-2 8 1.5 11-.5 6 1.5 10-2 9 1 8-.5 12 1.5 7-2 10 1 9-.5 6 1.5 11-2 8 1 10-.5 7 1.5 9-1.5 12 1 6-1 10 1.5 8-2 11 1 9-.5 7 1.5 10-1 8-1 12 1.5 6-2 9 1 11-.5 8 1.5 7-1.5 10 1 9-1 8 1.5 12-1 6 .5 5-1V12Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  opacity: .92;
}
.dlg-edge::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #8C6A34, #E6C27A 30%, #FFF1C4 50%, #E6C27A 70%, #8C6A34); }

.dlg-head { display: flex; align-items: center; gap: 16px; margin: -2px 0 12px 78px; min-height: 30px; }
.dlg-medal {
  position: absolute; left: 30px; top: -24px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  color: #F3D78E;
  background: radial-gradient(circle at 40% 32%, #1E4C33, #05130C 78%);
  box-shadow: 0 0 0 1.5px #D9B96E, 0 0 0 5px #06170E, 0 0 0 6px rgba(201, 174, 124, .45), 0 10px 26px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 200, 110, .2);
}
.dlg-medal svg { width: 38px; height: 38px; }
.dlg-who { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dlg-name {
  margin: 0; font: 600 clamp(19px, 2.6vh, 24px)/1 var(--display); letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(180deg, #FFF4D2 10%, #E6C27A 60%, #B98A3A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dlg-epithet { font: italic 400 clamp(16px, 2.2vh, 19px)/1 var(--body); color: rgba(232, 211, 160, .72); padding-left: 14px; border-left: 1px solid rgba(201, 174, 124, .35); }

.dlg-text {
  margin: 0; min-height: 2.9em; max-width: 64ch;
  font: 400 clamp(20px, 2.75vh, 25px)/1.46 var(--body); color: #F1E6CC; letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.dlg-text .w { white-space: nowrap; }
.dlg-text .c { opacity: 0; animation: dlg-char .3s ease-out both; }
.dlg-text.done .c { animation: none; opacity: 1; }
@keyframes dlg-char {
  from { opacity: 0; color: #FFE7A8; text-shadow: 0 0 10px rgba(255, 214, 120, .9); }
  45% { opacity: 1; }
  to { opacity: 1; color: #F1E6CC; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
}
.dlg-more {
  position: absolute; right: 30px; bottom: 20px; width: 10px; height: 10px; opacity: 0; transition: opacity .3s;
  border-right: 1.5px solid #E6C27A; border-bottom: 1.5px solid #E6C27A; transform: rotate(45deg);
}
.dlg-more.on { opacity: 1; animation: dlg-nudge 1.1s ease-in-out infinite; }
@keyframes dlg-nudge { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(2px) rotate(45deg); } }

.dlg-choices {
  list-style: none; margin: 0; padding: 0; display: none; gap: 4px 26px;
}
.dlg-root.has-choices .dlg-choices { display: grid; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(201, 174, 124, .2); }
.dlg-choices.two { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.dlg-root.narrow .dlg-panel { width: min(860px, 80vw); }
.dlg-choices li { opacity: 0; transform: translateY(8px); animation: dlg-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes dlg-up { to { opacity: 1; transform: none; } }
.dlg-choice {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--paper);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.dlg-choice:focus { outline: none; }
.dlg-choice .n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--display); color: #E6C27A; border: 1px solid rgba(201, 174, 124, .55);
  transition: background .2s, color .2s, box-shadow .2s;
}
.dlg-choice .l { display: flex; flex-direction: column; min-width: 0; }
.dlg-choice .l b { font: 600 clamp(18px, 2.3vh, 21px)/1.2 var(--body); color: #F3E3BD; }
.dlg-choice .l small { font: 500 clamp(14px, 1.8vh, 16px)/1.25 var(--body); font-variant: small-caps; letter-spacing: .06em; color: rgba(201, 174, 124, .85); }
.dlg-choices li.focus .dlg-choice, .dlg-choice:hover {
  background: linear-gradient(90deg, rgba(232, 211, 160, .1), rgba(232, 211, 160, .02)); border-color: rgba(201, 174, 124, .3);
}
.dlg-choices li.focus .n, .dlg-choice:hover .n {
  color: #05130C; background: linear-gradient(180deg, #FFF1C4, #E6B653); border-color: transparent; box-shadow: 0 0 12px rgba(255, 214, 120, .45);
}
.dlg-choices li.quiet .l b { font-style: italic; font-weight: 400; color: rgba(237, 227, 206, .7); }
.dlg-choices li.picked .dlg-choice { background: rgba(255, 214, 120, .18); border-color: rgba(255, 227, 154, .7); }

.dlg-keys {
  display: none; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 10px;
  font: 400 9.5px/1 var(--util); letter-spacing: .22em; text-transform: uppercase; color: rgba(201, 174, 124, .55);
}
.dlg-root.has-choices .dlg-keys { display: flex; }
.dlg-keys .dot { opacity: .6; }

html.dlg-open #prompt { opacity: 0 !important; transition: opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .ld-glow, .dlg-more.on { animation: none; }
  .dlg-text .c { animation-duration: .01s; }
}