/* BLOOD OVERRIDE ― 縦長一画面。スマホの縦画面でそのまま遊べる形 */
:root{
  --night:#0b0a0f; --ink:#e9e3ea; --dim:#8d8496; --line:#3a3146;
  --blood:#7a1f2b; --paper:#ece4d6; --paperink:#2a2230; --snow:#f3f0ec; --snowink:#3b3640;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000}
body{color:var(--ink);font-family:var(--serif)}
button{font:inherit}

#stage{container-type:size;position:relative;max-width:480px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;background:var(--night);
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}

/* 背景・スチル・エフィジー・立ち絵 */
#bg,#still{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s}
#bg.on,#still.on{opacity:1}
#bgold{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;pointer-events:none}
#still{background:rgba(11,10,15,.4);display:flex;align-items:flex-start;justify-content:center;padding-top:8%}
#still img{width:150%;max-width:none;flex:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%)}
#effigy{position:absolute;left:8%;right:8%;top:6%;height:62%;background:no-repeat center/contain;opacity:0;transition:opacity .6s ease-out}
#effigy.on{transition:opacity 3s ease-in;opacity:1;animation:float 6s ease-in-out infinite,breathe 5s ease-in-out infinite}
#effigy.on.dim{opacity:.22;transition-duration:.8s}
#effigy.on.under{opacity:0;transition-duration:.8s}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes breathe{0%,100%{filter:brightness(.9) drop-shadow(0 0 18px rgba(200,190,255,.25))}50%{filter:brightness(1.15) drop-shadow(0 0 30px rgba(200,190,255,.45))}}
#ash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1s}
#ash.on{opacity:1}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.5s;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 78%);mask-image:linear-gradient(to bottom,#000 60%,transparent 78%)}
#embers.on{opacity:1}
/* スチルの差し替え：ゆっくり溶けるように */
#still .xfade.quick{animation-duration:.8s}
#still .xfade{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:8%;opacity:0;animation:xfade 2.2s ease-in-out forwards}
@keyframes xfade{to{opacity:1}}
/* スタッフロール */
#credits{position:absolute;inset:0;z-index:6;background:#050407;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .6s}
#credits.on{opacity:1}
#credits .reel{position:absolute;inset:0}
#credits .reel img{position:absolute;left:50%;top:50%;width:170%;max-width:none;transform:translate(-50%,-55%) scale(1);opacity:0;transition:opacity 3s ease-in-out,transform 22s linear;filter:brightness(.42) saturate(.8);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
#credits .reel img.on{opacity:1;transform:translate(-50%,-55%) scale(1.08)}
#credits .roll{z-index:1;padding:0 16px;text-shadow:0 1px 8px rgba(0,0,0,.9);position:absolute;left:0;right:0;top:0;text-align:center;font-family:"Cormorant Garamond",var(--serif)}
#credits h2{margin:0;font-weight:500;font-size:26px;letter-spacing:.24em;text-indent:.24em;white-space:nowrap;color:#ece5ea;transition:opacity 1.6s ease-out,filter 1.6s ease-out,letter-spacing 2.4s ease-out}
#credits h2.pre{opacity:0;filter:blur(6px);letter-spacing:.4em;transition:none}
#credits .role{margin:0 0 6px;font-size:11px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:#8a7f86}
#credits .name{margin:0;font-size:17px;line-height:1.5;letter-spacing:.1em;color:#e2d8dc}
#credits .gap{height:46px}
#credits .note{margin:0;font-size:15px;font-style:italic;letter-spacing:.08em;color:#a8999f}
#credits .name+.name{margin-top:10px}
#credits .name small{display:block;margin-top:1px;font-size:11px;font-style:italic;letter-spacing:.14em;color:#8a7f86}
/* 最後の一行：流れには乗らず、曲の終わり近くに真ん中へ浮かぶ。スチルが消えたあとも少し残ってから消える */
#credits .lastline{position:absolute;z-index:2;left:0;right:0;top:50%;margin:0;padding:0 16px;text-align:center;font-family:"Cormorant Garamond",var(--serif);
  font-size:15px;font-style:italic;letter-spacing:.12em;color:#c9a98a;text-shadow:0 1px 10px rgba(0,0,0,.95);
  opacity:0;filter:blur(5px);transform:translateY(calc(-50% + 16px));transition:opacity 3.4s ease-out,filter 3.4s ease-out,transform 5s cubic-bezier(.2,.7,.2,1)}
#credits .lastline.on{opacity:1;filter:none;transform:translateY(-50%)}
#credits .lastline.on.out{opacity:0;transition:opacity 2.8s ease-in}
#credits .skiphint{position:absolute;z-index:3;left:0;right:0;bottom:6%;margin:0;text-align:center;font-size:11px;letter-spacing:.3em;text-indent:.3em;color:#8a7f86;opacity:0;transition:opacity .4s;pointer-events:none;font-family:var(--serif)}
#credits .skiphint.on{opacity:1}
#credits .reel.off img,#credits .reel.off img.on{opacity:0;transition:opacity 3.5s ease-in-out,transform 22s linear}
/* 炎が燃え上がる光 */
#flare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 80% 60% at 45% 38%,rgba(255,244,214,1),rgba(255,170,70,.95) 45%,rgba(200,70,10,.85) 80%,rgba(90,20,0,.8))}
#flare.on{animation:flare 1.6s ease-out forwards}
@keyframes flare{0%{opacity:0}18%{opacity:1}32%{opacity:1}100%{opacity:0}}
/* 立ち絵の枠を、絵そのものの大きさ（820×1093）に合わせる。ふちのぼかしが絵のふちに乗るように。下端は画面の 80%。下はぼかさない（文の窓のふちで切れて、#shade で暗くなる） */
#stand,#standold{position:absolute;left:0;right:0;margin:0 auto;bottom:20%;width:min(100cqw,55.5cqh);aspect-ratio:820/1093;background:no-repeat center bottom/contain;opacity:0;transition:opacity .5s,filter .35s;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 6%,#000 16%,#000 84%,rgba(0,0,0,.35) 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 6%,#000 16%,#000 84%,rgba(0,0,0,.35) 94%,transparent 100%)}
#stand.on{opacity:1}
#stand.dim{filter:brightness(.55)}
/* 幽霊の光（breathe の drop-shadow）が枠の上で切れて線に見えないよう、幽霊のときだけ枠を上に伸ばす。絵の大きさと位置は変わらない（下ぞろえ・横幅いっぱい） */
#stand.ghost,#standold.ghost{aspect-ratio:820/1213;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 87.4%,transparent 100%),linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 6%,#000 16%,#000 84%,rgba(0,0,0,.35) 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 87.4%,transparent 100%),linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 6%,#000 16%,#000 84%,rgba(0,0,0,.35) 94%,transparent 100%);
  /* 二枚のマスクは「重なったところだけ」残す（足し算だと横と下のぼかしが消える） */
  -webkit-mask-composite:source-in;mask-composite:intersect}
#stand.ghost.on{opacity:.8;animation:gfloat 6s ease-in-out infinite,breathe 5s ease-in-out infinite}
/* 手紙が燃えるあいだ、幽霊がゆっくり薄くなって、消えきる（薄く残さない） */
#stand.ghost.on.thin{opacity:0;transition:opacity 6s cubic-bezier(.3,.6,.4,1),filter .35s}
@keyframes gfloat{50%{translate:0 -10px}}
#still.tall img{width:100%}
/* スチルへゆっくり寄る（九章の灰燼の聖女） */
@keyframes push{from{transform:scale(1)}to{transform:scale(1.22)}}
#stand,#standold{transform-origin:50% 100%;transform:translateY(var(--stand-y,0)) scale(var(--stand-scale,.88))}
/* 立ち絵の切り替え：前の絵を上に重ねて、ゆっくり消す */
#standold{pointer-events:none;transition:opacity .45s ease-out}
#standold.ghost{animation:gfloat 6s ease-in-out infinite,breathe 5s ease-in-out infinite}
#standold.dim{filter:brightness(.55)}
#shade{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to bottom,transparent,rgba(11,10,15,.85) 55%,var(--night));pointer-events:none}

/* 文字窓 */
#win{position:absolute;left:12px;right:12px;bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 4%);min-height:7.4em;padding:22px 18px 18px;
  background:rgba(14,11,19,.9);border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:0;transition:opacity .6s;pointer-events:none}
#win.on{opacity:1}
#nm{position:absolute;top:-13px;left:14px;padding:3px 14px;font-size:12px;letter-spacing:.25em;background:var(--night);border:1px solid var(--line);border-left:2px solid var(--blood)}
#nm:empty{display:none}
#txt,#txm{margin:0;font-size:15.5px;line-height:1.95;letter-spacing:.03em;white-space:pre-wrap}
#txt{min-height:3.9em}
/* 区切りを測る見えない箱（engine.js vlines）。#txt と同じ幅から 1px 引く */
#txm{position:absolute;visibility:hidden;pointer-events:none;left:18px;right:19px;top:0;min-height:0}
#win.narr #txt{color:#c4bcc8}

/* 独白（白：ドリーミィ／黒：オレスト） */
#mono{position:absolute;inset:0;padding:72px 28px 48px;display:flex;flex-direction:column;gap:1.05em;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .9s}
#mono.on{opacity:1}
#monoold{position:absolute;inset:0;opacity:0;pointer-events:none}
#mono.white,#monoold.white{background:linear-gradient(rgba(243,240,236,.88),rgba(243,240,236,.55) 70%,rgba(243,240,236,.35));color:var(--snowink)}
#mono.dark,#monoold.dark{background:linear-gradient(rgba(6,5,9,.88),rgba(6,5,9,.62) 75%,rgba(6,5,9,.45));color:var(--ink)}
#mono p{margin:0;line-height:2.1;font-size:16px;letter-spacing:.05em;animation:rise .7s ease-out;white-space:pre-wrap}
#mono.white p.old{color:#9a93a0}
#mono.dark p.old{color:var(--dim)}
/* 読者だけに見せる昔話（八章の四百三十年前）：暗い琥珀色、少し小さく */
#mono.tale,#monoold.tale{background:linear-gradient(rgba(14,8,5,.78),rgba(14,8,5,.55) 70%,rgba(14,8,5,.42));color:#dccbb6;justify-content:center}
#mono.tale p{font-size:15px;letter-spacing:.08em}
#mono.tale p.old{color:#8a7a6a}
/* スチルを見せたまま独白を重ねるところ（七章の冬の手元）：独白の暗幕を薄くする */
#stage[data-lightmono] #mono.dark{background:linear-gradient(rgba(6,5,9,.72),rgba(6,5,9,.35) 45%,rgba(6,5,9,.25));text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* 手紙：暗い中に便箋が一枚。封蝋が割れて、三つ折りがひらく */
#letter{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(6,5,9,.62),rgba(6,5,9,.9) 75%);
  opacity:0;pointer-events:none;transition:opacity .8s;display:flex;align-items:flex-start;justify-content:center;padding:58px 20px 34px}
#letter.on{opacity:1}
#letter .sheet{position:relative;width:100%;height:64%;overflow:hidden;padding:34px 26px 30px;color:#2b2119;
  font-family:"Klee One",var(--serif);transform:rotate(-.7deg);transform-origin:50% 0;transition:transform .8s cubic-bezier(.3,.7,.2,1),opacity .5s;
  background:
    linear-gradient(to bottom,transparent calc(33.3% - 1px),rgba(95,64,30,.2) 33.3%,rgba(255,250,235,.35) calc(33.3% + 1px),transparent calc(33.3% + 3px)),
    linear-gradient(to bottom,transparent calc(66.6% - 1px),rgba(95,64,30,.2) 66.6%,rgba(255,250,235,.35) calc(66.6% + 1px),transparent calc(66.6% + 3px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(172deg,#efe3c8,#e5d4b1 60%,#d8c39b);
  box-shadow:inset 0 0 28px rgba(110,62,20,.42),inset 0 0 4px rgba(70,35,10,.5),0 14px 34px rgba(0,0,0,.7);
  border-radius:2px 3px 2px 4px}
#letter .sheet.folded{transform:rotate(-.7deg) scaleY(.34);opacity:.96}
#letter .body{display:flex;flex-direction:column;gap:.35em}
#letter p{margin:0;font-size:16px;line-height:2.05;letter-spacing:.05em;white-space:pre-wrap}
#letter p.gap{height:.9em}
#letter .ink{animation:ink .9s ease-out both}
/* まだ続きがある気配：最後の行の下に、読めない薄いインクの筋 */
#letter .sheet.more .body::after{content:'';display:block;width:72%;height:3.4em;margin-top:.5em;background:repeating-linear-gradient(to bottom,rgba(43,33,25,.22) 0 2px,transparent 2px 2.05em);filter:blur(1.6px);-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent);mask-image:linear-gradient(to bottom,#000 10%,transparent);animation:ink 2.4s ease-out both}
@keyframes ink{from{opacity:0;color:#6b5540;text-shadow:0 0 5px rgba(60,35,15,.55)}60%{opacity:1}to{opacity:1;text-shadow:0 0 0 transparent}}
/* 封蝋：割れ目で左右に分かれて落ちる */
#letter .seal{position:absolute;left:50%;top:calc(58px + 4%);width:84px;height:84px;margin-left:-42px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
#letter .seal i{position:absolute;inset:0;transition:transform .7s cubic-bezier(.5,0,.8,.6),opacity .7s}
#letter .seal i:first-child{clip-path:polygon(0 0,52% 0,47% 22%,55% 40%,46% 58%,53% 78%,48% 100%,0 100%)}
#letter .seal i:last-child{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,53% 78%,46% 58%,55% 40%,47% 22%)}
#letter .seal.broke i:first-child{transform:translate(-14px,26px) rotate(-14deg);opacity:0}
#letter .seal.broke i:last-child{transform:translate(14px,30px) rotate(12deg);opacity:0}
#letter .seal img{width:100%;height:100%;display:block}

/* 札 */
#card{position:absolute;inset:0;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 24px;opacity:0;pointer-events:none;transition:opacity 1s}
#card.on{opacity:1}
#card.place{background:rgba(11,10,15,.78)}
#card .place{font-size:19px;letter-spacing:.35em;text-indent:.35em;animation:rise 1.2s ease-out}
#card .time{font-size:12px;letter-spacing:.4em;color:var(--dim)}
#card.chapter .place{font-size:13px;color:var(--dim)}
#card.chapter .time{font-size:22px;color:var(--ink);letter-spacing:.3em}
#card h1,#title h1{margin:0;font-weight:600;font-size:25px;letter-spacing:.16em;text-indent:.16em;white-space:nowrap}
#card h1{animation:rise 2s ease-out}
.rule{width:40px;height:1px;background:var(--blood)}

/* 小物 */
#prop{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,5,9,.7);opacity:0;pointer-events:none;transition:opacity .6s}
#prop.on{opacity:1}
#prop img{width:72%;filter:drop-shadow(0 10px 26px rgba(0,0,0,.7));animation:rise 1s ease-out}

/* 選択・帳面 */
.ask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 32px;background:rgba(6,5,9,.72);opacity:0;pointer-events:none;transition:opacity .5s;text-align:center}
.ask.on{opacity:1;pointer-events:auto}
.ask p{margin:0 0 6px;font-size:14px;letter-spacing:.2em;line-height:2;color:var(--ink)}
.ask small{font-size:11px;color:var(--dim);letter-spacing:.08em;line-height:1.8;margin-top:6px}
.ask button,#menu button{min-width:200px;padding:13px 18px;font-size:15px;letter-spacing:.3em;color:var(--ink);background:rgba(20,16,26,.92);border:1px solid var(--line);cursor:pointer}
.ask button:hover,.ask button:focus-visible,#menu button:hover,#menu button:focus-visible{border-color:var(--ink);outline:none}

/* タイトル */
#title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 24px;
  background:linear-gradient(rgba(11,10,15,.55),rgba(11,10,15,.9)),url(../img/bg/inn.webp) center/cover;transition:opacity 1s}
#title.off{opacity:0;pointer-events:none}
#menu{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;margin-top:30px}
#title .go{margin:12px 0 0;font-size:11px;color:var(--dim);letter-spacing:.25em}
/* クリア後：蝋燭と黒百合の古書机の絵。上はタイトルとボタンのために暗く、下の封蝋の手紙のあたりは明るいまま */
#title.cleared{justify-content:flex-start;padding-top:14vh;padding-top:14dvh;
  background:linear-gradient(#0b0a0f 20%,rgba(11,10,15,.55) 42%,rgba(11,10,15,.05) 64%,rgba(11,10,15,.05) 84%,rgba(11,10,15,.4)),url(../img/bg/title_cleared.webp) center bottom/100% auto no-repeat #0b0a0f}
/* 絵は横幅に合わせて下に寄せる（蝋燭・封筒・グラスが全部入るように）。上の空いたところは暗い色でつなぐ */
/* 絵の中の手紙・黒百合・菓子缶とグラスに重ねる、見えないボタン */
#title .hot{position:absolute;padding:0;border:0;background:none;cursor:pointer;border-radius:10px;transition:box-shadow .5s}
#title.sub .hot{display:none}
#title .hot:hover,#title .hot:focus-visible{outline:none;box-shadow:0 0 22px 4px rgba(255,190,120,.18)}

#end{position:absolute;inset:0;display:none;place-items:center;text-align:center;color:var(--dim);font-size:13px;letter-spacing:.25em;line-height:2.4;background:var(--night)}
#end.on{display:grid;animation:rise 1s}
#end small{font-size:11px}

#ui{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:8px}
#ui button{font-size:11px;letter-spacing:.12em;color:var(--dim);background:rgba(11,10,15,.6);border:1px solid var(--line);padding:6px 10px;cursor:pointer}
#hint{position:absolute;bottom:4px;right:14px;font-size:10px;color:var(--dim);z-index:4;pointer-events:none;opacity:.7}

@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  /* 動きを止めると、透明から出てくる作りのものが透明のまま残るので、出きった姿に置く */
  #still .xfade{opacity:1}
  #boot.go img,#boot.go p{opacity:1;transform:none}}

/* ツール（左上） */
#tools{position:absolute;top:10px;left:10px;z-index:5;display:flex;gap:6px}
#tools button{font-size:11px;letter-spacing:.08em;color:var(--dim);background:rgba(11,10,15,.6);border:1px solid var(--line);padding:6px 8px;cursor:pointer}
#tools button.on{color:var(--ink);border-color:var(--ink)}
#title:not(.off)~#tools{display:none}
/* 幅の狭いスマホ（360px など）：左上と右上のボタンがぶつからないように詰める */
@media (max-width:374px){#tools{left:8px;gap:4px}#ui{right:8px;gap:4px}#tools button,#ui button{padding:6px 6px;letter-spacing:.02em}}

/* ログ */
#log{position:absolute;inset:0;z-index:6;background:rgba(8,7,11,.96);display:none;flex-direction:column;padding:56px 18px 18px;cursor:default}
#log.on{display:flex}
#log .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px}
#log .row b{display:block;font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--dim)}
#log .row p{margin:2px 0 0;font-size:14px;line-height:1.85;white-space:pre-wrap}
#log .row.narr p,#log .row.mono p{color:#bdb4c2}
#log .row.letter p{color:#e2d3b4}
#log .close{margin-top:12px;align-self:center;min-width:160px;padding:10px;font-size:13px;letter-spacing:.3em;color:var(--ink);background:transparent;border:1px solid var(--line);cursor:pointer}

/* ウルティカの帳面 */
.ask .memo,#menu .memo{font-size:13px;letter-spacing:.06em;line-height:1.8;color:#e8dcc4;font-style:italic}
.ask .memo{margin:-4px 0 6px;padding:8px 14px;border-left:2px solid rgba(232,220,196,.35);text-align:left;max-width:280px}
#menu.book{gap:10px;max-height:62vh;overflow-y:auto;padding:0 4px}
#menu.book .page{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;letter-spacing:.12em;min-width:250px;max-width:300px}
#menu.book .page .ch{font-size:14px}
#menu.book .page .memo{font-size:12px}
#menu.book .page.blank{min-height:64px;justify-content:flex-start}
#menu.book .page .date{font-size:12px;opacity:.7}
#menu.book .track{width:min(300px,82vw);min-width:0;box-sizing:border-box}
#menu.book .track.playing{border-color:var(--ink)}
#menu.book .track.playing .ch::before{content:'♪ '}
#menu.book .back{min-width:120px;align-self:center;margin-top:6px;font-size:13px}
#menu.book .seen{cursor:default}

/* 起動：残り火郵便局 */
#boot{position:absolute;inset:0;z-index:8;background:#050407;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .9s}
#boot.on{display:flex}
#boot img{width:150px;height:150px;opacity:0;transform:scale(1.9);filter:drop-shadow(0 6px 10px rgba(0,0,0,.8))}
#boot p{margin:0;font-size:13px;letter-spacing:.6em;text-indent:.6em;color:#9c8f8a;opacity:0}
#boot.go img{animation:stamp .55s cubic-bezier(.6,0,.9,.4) forwards}
#boot.go p{animation:bootText 1.2s ease-out .7s forwards}
#boot.out{opacity:0}
/* サイトの封蝋から来たとき：封蝋も文字も出さず、黒からタイトルへ */
#boot{cursor:pointer}
#boot .half{position:absolute;width:150px;height:150px;transition:transform .7s cubic-bezier(.5,0,.8,.6),opacity .7s}
#boot .half img{width:150px;height:150px;opacity:1;transform:none;animation:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.8))}
#boot .half.l{clip-path:polygon(0 0,52% 0,47% 22%,55% 40%,46% 58%,53% 78%,48% 100%,0 100%)}
#boot .half.r{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,53% 78%,46% 58%,55% 40%,47% 22%)}
#boot.broke .half.l{transform:translate(-18px,34px) rotate(-14deg);opacity:0}
#boot.broke .half.r{transform:translate(18px,38px) rotate(12deg);opacity:0}
#boot::after{content:'封を切る';position:absolute;bottom:calc(30% - 40px);left:0;right:0;text-align:center;font-size:15px;letter-spacing:.5em;text-indent:.5em;color:#cdbfb8;opacity:0;transition:opacity 1.2s}
#boot.ready::after{opacity:1;animation:bootHint 2.6s ease-in-out 1.2s infinite}
#boot.broke::after{opacity:0;animation:none}
/* 封を切ると音が出ることの案内 */
#boot::before{content:'音が出ます';position:absolute;bottom:calc(30% - 70px);left:0;right:0;text-align:center;font-size:12px;letter-spacing:.4em;text-indent:.4em;color:#948890;opacity:0;transition:opacity 1.2s}
#boot.ready::before{opacity:1}
#boot.broke::before{opacity:0}
@keyframes bootHint{50%{opacity:.55}}
@keyframes bootText{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9)}70%{opacity:1;transform:scale(.94)}85%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}