/* 一筆箋 — the letter shown where her words will appear, until her first line (DEV-20261011-14).
   Off: localStorage 'night-isle-letter' = 'off' or ?letter=off. Remove: this file, web/js/letter.js and its import in ui.js. */
.yx-letter {
  --yl-paper: linear-gradient(172deg, #1d2750 0%, #182148 46%, #141b3d 100%);
  --yl-fiber: rgba(214, 224, 250, .09);
  --yl-rule: rgba(214, 224, 250, .10);
  --yl-frame: rgba(232, 212, 160, .42);
  --yl-ink: #efdfb2;
  --yl-ink-glow: rgba(242, 223, 174, .35);
  --yl-kana: #cdbde8;
  --yl-faint: #8e98b0;
  --yl-seal: #c0574d;
  --yl-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(232, 212, 160, .10);
  position: absolute; left: 50%; top: 50%; z-index: 3; width: min(520px, 94%);
  transform: translate(-50%, -50%); pointer-events: none;
  animation: yl-arrive 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
:root[data-theme="soft-anime"] .yx-letter {
  --yl-paper: linear-gradient(172deg, #fffcfa 0%, #fdf3f4 50%, #fbecef 100%);
  --yl-fiber: rgba(176, 112, 138, .10);
  --yl-rule: rgba(176, 112, 138, .13);
  --yl-frame: rgba(196, 128, 150, .45);
  --yl-ink: #8a3658;
  --yl-ink-glow: rgba(214, 120, 150, .18);
  --yl-kana: #c86a88;
  --yl-faint: #9a8592;
  --yl-shadow: 0 26px 52px -30px rgba(120, 60, 90, .5), 0 0 0 1px rgba(196, 128, 150, .14);
}
@keyframes yl-arrive { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, -50%); filter: none; } }
.yx-letter.leaving { animation: yl-leave 1.5s cubic-bezier(.22, .8, .24, 1) forwards; }
@keyframes yl-leave { to { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); filter: blur(8px); } }
.subtitle-area[data-letter="on"] > :not(.yx-letter) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; animation: none !important; }
.subtitle-area[data-letter="leaving"] > :not(.yx-letter) { opacity: 1; transition: opacity 1.25s ease .55s; }

.yx-letter .yl-sheet { position: relative; padding: 15px 22px 11px 24px; text-align: left; transform: rotate(-.35deg); }
:root[data-theme="soft-anime"] .yx-letter .yl-sheet { transform: rotate(.3deg); }
/* the paper: washi fibres, a rough deckled edge, a fine double frame */
.yx-letter .yl-deckle { position: absolute; inset: 0; border-radius: 2px; box-shadow: var(--yl-shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.035) 48%, transparent 62%),
    var(--yl-paper); }
.yx-letter .yl-deckle::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 30% 20%, var(--yl-fiber), transparent 70%); }
.yx-letter .yl-deckle::after { content: ''; position: absolute; inset: 7px; border: 1px solid var(--yl-frame); outline: 1px solid color-mix(in srgb, var(--yl-frame) 45%, transparent); outline-offset: 2px; border-radius: 1px; }
.yx-letter .yl-orn { position: absolute; z-index: 1; left: 14px; top: 10px; width: 52px; height: 32px; overflow: visible; opacity: .9; }
.yx-letter .yl-fill { fill: var(--yl-ink); opacity: .85; }
.yx-letter .yl-line { fill: none; stroke: var(--yl-frame); stroke-width: .8; stroke-linecap: round; }
.yx-letter .yl-petal { fill: #f6cdd8; stroke: rgba(196, 96, 124, .45); stroke-width: .35; }
.yx-letter .yl-heart { fill: #f2c992; }
.yx-letter .yl-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; margin: 2px 6px 6px 54px; }
.yx-letter .yl-kana { font-family: "Yashima Kana", "Yu Mincho", "Noto Serif JP", serif; font-size: 11px; letter-spacing: .5em; color: var(--yl-kana); }
.yx-letter .yl-date { font-family: "Noto Serif SC", "Songti SC", serif; font-size: 11px; letter-spacing: .3em; color: var(--yl-faint); }
/* the lines, written out by a glowing nib */
.yx-letter .yl-body { position: relative; z-index: 1; margin: 0 62px 0 10px;
  background: repeating-linear-gradient(180deg, transparent 0 25px, var(--yl-rule) 25px 26px) 0 0 / 100% 26px; }
.yx-letter .yl-line-text { position: relative; margin: 0; height: 26px; line-height: 26px; white-space: nowrap; overflow: visible;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 15.5px; letter-spacing: .14em; color: var(--yl-ink);
  text-shadow: 0 0 8px var(--yl-ink-glow); clip-path: inset(-6px 100% -6px 0); animation: yl-write var(--t) linear forwards; animation-delay: var(--d); }
.yx-letter .yl-line-text::after { content: ''; position: absolute; top: 55%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--yl-ink) 35%, transparent 70%); opacity: 0; animation: yl-nib var(--t) linear forwards; animation-delay: var(--d); }
@keyframes yl-write { to { clip-path: inset(-6px -6% -6px 0); } }
@keyframes yl-nib { 0% { opacity: 1; left: 0; } 94% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
/* her seal, pressed once the lines are written */
.yx-letter .yl-seal { position: absolute; z-index: 1; right: 24px; top: 42px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1.5px solid var(--yl-seal); border-radius: 3px; color: var(--yl-seal); background: color-mix(in srgb, var(--yl-seal) 8%, transparent);
  font-family: "Yashima Mincho", "Noto Serif SC", serif; font-size: 15px; line-height: 1; opacity: 0; transform: rotate(-6deg);
  animation: yl-stamp .95s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: var(--d); }
@keyframes yl-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-16deg); } 60% { opacity: .95; transform: scale(.94) rotate(-5deg); } 100% { opacity: .82; transform: rotate(-6deg); } }
/* the real stages and a way to simply be quiet */
.yx-letter .yl-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 8px 6px 0 10px; }
.yx-letter .yl-stages { display: flex; align-items: center; gap: 7px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 11px; letter-spacing: .26em; color: var(--yl-faint); }
.yx-letter .yl-stages i { width: 5px; height: 5px; margin-left: 8px; transform: rotate(45deg); border: 1px solid var(--yl-frame); transition: .8s; }
.yx-letter .yl-stages i:first-child { margin-left: 0; }
.yx-letter .yl-stages i.done { background: var(--yl-faint); border-color: transparent; }
.yx-letter .yl-stages i.on { background: var(--yl-ink); border-color: var(--yl-ink); box-shadow: 0 0 10px var(--yl-ink); animation: yl-pulse 2.4s ease-in-out infinite; }
:root[data-theme="soft-anime"] .yx-letter .yl-stages i { border-radius: 60% 0 60% 0; }
@keyframes yl-pulse { 50% { opacity: .45; } }
:root .yx-letter .yl-quiet { pointer-events: auto; border: 0 !important; background: none !important; box-shadow: none !important; padding: 2px 0 !important; min-height: 0 !important;
  font-family: "Noto Serif SC", "Songti SC", serif; font-size: 11px !important; letter-spacing: .3em !important; color: var(--yl-faint) !important; border-bottom: 1px solid var(--yl-rule) !important; border-radius: 0 !important; cursor: pointer; backdrop-filter: none !important; }
:root .yx-letter .yl-quiet:hover { color: var(--yl-ink) !important; }
.yx-letter .yl-caption { margin: 12px 0 0; text-align: center; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 12px; letter-spacing: .4em; padding-left: .4em; color: var(--yl-faint);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
:root[data-theme="soft-anime"] .yx-letter .yl-caption { text-shadow: 0 1px 10px rgba(255, 255, 255, .6); }

@media (max-width: 640px) {
  .yx-letter .yl-sheet { padding: 16px 16px 12px 18px; }
  .yx-letter .yl-head { margin-left: 46px; }
  .yx-letter .yl-orn { width: 42px; height: 26px; left: 12px; }
  .yx-letter .yl-body { margin-right: 46px; }
  .yx-letter .yl-line-text { font-size: 14.5px; letter-spacing: .1em; }
  .yx-letter .yl-seal { right: 18px; width: 28px; height: 28px; font-size: 14px; }
  .yx-letter .yl-date { letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .yx-letter, .yx-letter * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* While the letter is out, the subtitle area's own frame (樱语's dialogue box, its name plate and ▼)
   steps back, so the letter is never a box inside a box; it returns as the letter leaves. */
.subtitle-area[data-letter] { transition: background-color 1s ease, border-color 1s ease, box-shadow 1s ease; }
.subtitle-area[data-letter="on"] { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.subtitle-area[data-letter="on"]::before, .subtitle-area[data-letter="on"]::after { opacity: 0 !important; transition: opacity .8s ease; }
/* The status line under her portrait says the same thing while the letter is out; it rests until the letter leaves. */
.call-room:has(.subtitle-area[data-letter="on"]) #statusdetail { opacity: 0; transition: opacity .8s ease; }

/* 2026-10-12 · one grid for the whole letter (DEV-20261012-03): the ornament, the lines and the stages share
   one left edge; the caption, the seal and 先安静陪着我 share one right edge; the sheet is as wide as the
   input row under it and sits level with it. */
.yx-letter { width: min(560px, 94%); }
.yx-letter .yl-sheet, :root[data-theme="soft-anime"] .yx-letter .yl-sheet {
  transform: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0;
  grid-template-areas: "orn head head" "body body seal" "foot foot foot"; align-items: center; padding: 17px 30px 13px; }
.yx-letter .yl-orn { position: relative; grid-area: orn; left: auto; top: auto; width: 30px; height: 19px; margin: 0 10px 0 -2px; align-self: center; }
.yx-letter .yl-head { grid-area: head; margin: 0 0 9px; align-items: center; }
.yx-letter .yl-body { grid-area: body; margin: 0; }
.yx-letter .yl-seal { position: relative; grid-area: seal; right: auto; top: auto; margin-left: 22px; align-self: center; }
.yx-letter .yl-foot { grid-area: foot; margin: 11px 0 0; }
@media (max-width: 640px) {
  .yx-letter .yl-sheet, :root[data-theme="soft-anime"] .yx-letter .yl-sheet { padding: 15px 18px 11px; }
  .yx-letter .yl-orn { width: 26px; height: 17px; margin-right: 8px; }
  .yx-letter .yl-head { margin-left: 0; }
  .yx-letter .yl-body { margin-right: 0; }
  .yx-letter .yl-seal { right: auto; margin-left: 14px; }
}