/*
 * 追従UI、秘密の封筒、JS演出の初期状態。
 * 重なり順と演出専用要素をまとめる。
 */
/* Mobile fixed event bar */
.mobile-event-bar { position: fixed; z-index: 120; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; display: none; min-height: 64px; padding: 8px 8px 8px 14px; align-items: center; justify-content: space-between; gap: 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); }
.mobile-event-copy { min-width: 0; font-size: .72rem; font-weight: 700; line-height: 1.45; }
.mobile-event-bar a { min-height: 44px; display: inline-flex; padding: 8px 13px; align-items: center; flex: none; border: 2px solid var(--ink); border-radius: 12px; background: var(--red); color: var(--white); font-size: .75rem; font-weight: 700; }

/* Secret envelope / R09 */
.secret-modal[hidden] { display: none; }
.secret-modal { position: fixed; z-index: 500; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(33,48,78,.82); }
.secret-dialog { position: relative; width: min(620px, 100%); max-height: calc(100svh - 48px); overflow-y: auto; padding: clamp(28px, 5vw, 52px); border: 4px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); text-align: center; }
.secret-close { position: absolute; z-index: 8; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; padding: 0; border: 2px solid var(--ink); border-radius: 999px; place-items: center; background: var(--paper-light); font-size: 1.3rem; cursor: pointer; }
.secret-kicker { color: var(--red); font-family: var(--latin); font-size: .72rem; letter-spacing: .12em; }
.secret-dialog h2 { margin-top: 10px; font-family: var(--display); font-size: clamp(26px, 5vw, 38px); font-weight: 400; line-height: 1.45; }
.envelope-pocket { position: relative; width: min(330px, 78vw); height: 205px; margin: 32px auto 0; overflow: hidden; border: 3px solid var(--ink); background: var(--red); perspective: 700px; }
.envelope-pocket::before, .envelope-pocket::after { position: absolute; z-index: 3; bottom: -2px; width: 72%; height: 100%; background: #e83e2e; box-shadow: 0 0 0 2px rgba(33,48,78,.35); content: ""; }
.envelope-pocket::before { left: -22%; clip-path: polygon(0 100%,100% 18%,100% 100%); }
.envelope-pocket::after { right: -22%; clip-path: polygon(0 18%,100% 100%,0 100%); }
.envelope-flap { position: absolute; z-index: 4; top: -2px; right: -2px; left: -2px; height: 132px; border: 3px solid var(--ink); background: var(--yellow); clip-path: polygon(0 0,100% 0,50% 100%); transform-origin: top center; }
.secret-letter { position: relative; z-index: 2; width: calc(100% - 36px); margin: 18px auto 0; padding: 22px 16px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 4px 4px 0 var(--ink); }
.secret-letter small { display: block; font-weight: 700; }
.secret-letter strong { display: block; margin-top: 9px; color: var(--red); font-family: var(--display); font-size: clamp(24px, 6vw, 38px); letter-spacing: .08em; }
.secret-letter p { margin-top: 9px; color: var(--ink-soft); font-size: .8rem; }
.secret-reveal { min-height: 0; }
.secret-dialog.is-opened .secret-reveal { min-height: 176px; margin-top: 22px; }
.secret-dialog.is-opened .secret-reveal .secret-letter { width: min(430px, 100%); margin-top: 0; }
.confetti-piece { position: fixed; z-index: 700; width: 10px; height: 17px; pointer-events: none; }
.pointer-star { position: fixed; z-index: 350; top: 0; left: 0; display: none; width: 13px; height: 13px; pointer-events: none; background: var(--yellow); clip-path: polygon(50% 0,61% 35%,98% 36%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 36%,39% 35%); }
html.pointer-fine.motion-ok .pointer-star { display: block; }

/* JS-only reveal setup */
html.motion-ok .reveal-item { opacity: 0; transform: translateY(24px); }
html.motion-ok .marker i { transform: scaleX(0) rotate(-1.5deg); }