/* 黑醬・在身邊 — 開場短片（二版） */
html.intro-open{overflow:hidden}
html.intro-open main{visibility:hidden}
#intro{position:fixed;inset:0;z-index:50;background:var(--paper,#f4f0e9);color:var(--ink,#483d35);display:flex;align-items:center;justify-content:center;transition:opacity 1.3s ease}
#intro.leaving{opacity:0;pointer-events:none}
#intro [hidden]{display:none!important}
.intro-gate{display:flex;flex-direction:column;align-items:center;gap:26px;padding:32px;text-align:center;animation:intro-arrive 1.1s both}
.gate-mark{width:46px;height:46px;stroke:var(--warm,#886955);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.gate-button{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--line,#dcd2c6);background:transparent;color:inherit;border-radius:100px;padding:22px 44px;cursor:pointer;font:400 20px/1.4 var(--serif,"Songti TC","Noto Serif TC",serif);letter-spacing:.14em;transition:background .25s,transform .25s;-webkit-tap-highlight-color:transparent}
.gate-button:hover{background:#e9dfd23b;transform:translateY(-1px)}
.gate-button small{font:12px/1.5 var(--body,"PingFang TC",sans-serif);letter-spacing:.08em;color:var(--quiet,#8b7d71)}
.gate-skip{border:0;background:transparent;color:var(--quiet,#8b7d71);font:12px var(--body,"PingFang TC",sans-serif);letter-spacing:.1em;cursor:pointer;padding:12px;text-decoration:underline;text-decoration-color:#ccb9a6;text-underline-offset:5px}
.intro-film{position:absolute;inset:0;background:#121119;animation:intro-fade .6s both}
.intro-film video{width:100%;height:100%;object-fit:cover;display:block;background:#121119}
@media (min-aspect-ratio:9/16){.intro-film video{object-fit:contain}}
.intro-skip,.intro-sound{position:absolute;border:0;border-radius:100px;font:12px var(--body,"PingFang TC",sans-serif);letter-spacing:.1em;cursor:pointer;padding:10px 14px;-webkit-tap-highlight-color:transparent}
.intro-skip{right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));background:rgba(20,18,28,.35);color:rgba(255,250,240,.85);opacity:0;animation:intro-arrive .8s 2.5s both;backdrop-filter:blur(4px)}
.intro-sound{left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(244,240,233,.92);color:#483d35}
.intro-tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.intro-tools .quiet-button{text-decoration:none;display:inline-flex;align-items:center}
@keyframes intro-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.intro-gate,.intro-film{animation:none}}