/* 「置き配」v7 — v7_design_spec_20260914.md §2 トークン / §3 画面の型 */ /* ---------------------------------------------------------------- トークン */ :root{ --void:#08090c; --panel:#12151b; --line:#23262e; --line-2:#181b21; --ink:#ddd8ce; --ink-2:#8b8d93; --ink-3:#565961; --ink-4:#383b42; --blood:#74161a; --blood-lit:#a8272c; --slip:#e9e4d8; --slip-ink:#1a1a18; --ink-route:#e8e4da; /* ルートのインク (§7) */ --paper:#f2eee4; /* 紙モードの地 */ --reg-x:2px; --reg-y:1.1px; /* 見当 (§12.1)。平常は 2px */ --reg-ms:500ms; --dim:1; /* 減光 */ --blur:0px; --lh:1.85; /* 行間。枝に入ると 1.68 へ */ } @font-face{font-family:Shippori;src:url(assets/font/shippori-400.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Shippori;src:url(assets/font/shippori-600.woff2)format("woff2");font-weight:600;font-display:swap} @font-face{font-family:Shippori;src:url(assets/font/shippori-800.woff2)format("woff2");font-weight:800;font-display:swap} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%;background:#000;overflow:hidden;overscroll-behavior:none} body{display:grid;place-items:center;font-family:Shippori,"Shippori Mincho",serif; color:var(--ink);user-select:none;-webkit-user-select:none} /* ---------------------------------------------------------------- 器 (§2 寸法) */ /* 幅 min(100vw,430px)・9:16。縦長端末は上下に黒、横長は左右に黒 */ #frame{position:relative; width:min(100vw,430px,calc(100vh * 9 / 16)); aspect-ratio:9 / 16;max-height:100vh; background:var(--void);overflow:hidden;isolation:isolate; touch-action:none;cursor:pointer} /* ---------------------------------------------------------------- 版 (§4.2・§12) 三原色の三版で刷る。R を (+d, +d*0.55)、B を (-d, -d*0.55)、G は動かさない。 screen なので見当が合えば白。平常は 2px（幹の地）、0px は異様に明瞭。 */ #bgbox{position:absolute;inset:0;overflow:hidden; transition:top 600ms ease,left 600ms ease,right 600ms ease,width 600ms ease,height 600ms ease} #bg,#bg2{position:absolute;inset:0;filter:brightness(var(--dim)) blur(var(--blur)); transition:filter 600ms ease;isolation:isolate} #bg2{opacity:0;transition:opacity 420ms ease,filter 600ms ease} .plate{position:absolute;inset:0;background:var(--ink-route); -webkit-mask-size:cover;mask-size:cover; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .plate.fit{-webkit-mask-size:contain;mask-size:contain} .plate.ch{mix-blend-mode:screen; transition:transform var(--reg-ms,500ms) cubic-bezier(.4,0,.3,1)} .plate.ch.r{background:#ff0000;transform:translate(var(--reg-x),var(--reg-y))} .plate.ch.g{background:#00ff00} .plate.ch.b{background:#0000ff; transform:translate(calc(var(--reg-x) * -1),calc(var(--reg-y) * -1))} /* ルートのインク。三版の上に色を乗せる（幹＝白のときは出さない） */ #bgink{position:absolute;inset:0;background:var(--ink-route);mix-blend-mode:color; opacity:0;pointer-events:none;transition:opacity 600ms ease} /* 紙モード（狐回のコマ・周回の一行）は黒い点を紙に刷る */ .plate.paper{background:#141414;mix-blend-mode:multiply} /* 背後だけずらす（オルフェウス §6.F 1705） */ #behind .plate.ch.r{transform:translate(var(--reg-back,0px),0)} #behind .plate.ch.b{transform:translate(calc(var(--reg-back,0px) * -1),0)} #vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity 400ms ease;pointer-events:none;background:#000; filter:grayscale(1) contrast(1.3) brightness(calc(var(--dim) * .82))} #vid.on{opacity:1} /* 全画面の映像は場面の暗さを引き継がない。 D3 の追跡は闇(--dim .3)の場面に出るので、掛けると真っ黒で「流れていない」に見えた */ #vid.full{filter:grayscale(1) contrast(1.25) brightness(.92)} #vid.raw{filter:none} /* 製版済みの映像（白い点だけ・opening_plate）。静止画と同じくインクを乗せる。 刷りの CSS（#vidfx）は掛けない＝網点が二重にならない（素材側の注意 2026-09-14） */ #vid.plated{filter:none;mix-blend-mode:multiply} /* 環境層（雨の輪）。版の上に重ねる。黒は透けて、点だけが載る */ #vid.amb{filter:none;mix-blend-mode:screen;opacity:.9;object-fit:cover} #vidink{position:absolute;inset:0;background:var(--ink-route);opacity:0; transition:opacity 400ms ease;pointer-events:none} #vidink.on{opacity:1} #vidfx{position:absolute;inset:0;pointer-events:none;opacity:0; transition:opacity 400ms ease} #vidfx.on{opacity:1} #vidfx .tint{position:absolute;inset:0;background:var(--ink-route); mix-blend-mode:color} #vidfx .screen{position:absolute;inset:0; background-image:repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.92) 0 1.15px,transparent 1.3px 3.2px); background-size:3.2px 3.2px;mix-blend-mode:multiply} #white{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none; transition:opacity 400ms ease} #blackout{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none; transition:opacity 500ms ease;z-index:40} /* 瞼を閉じるように暗く (幹 448) */ /* 字の上には降りてこない（z-index は #text 27 の下）。暗くなっても字は読める */ #lidT,#lidB{position:absolute;left:0;right:0;height:0;background:#000;z-index:26; transition:height 1200ms cubic-bezier(.5,0,.4,1);pointer-events:none} #lidT{top:0}#lidB{bottom:0} /* ---------------------------------------------------------------- 字幕 (§3.1) */ /* 読む場所と見る場所を分ける（作者 2026-09-14）。 固定の帯ではなく、字そのものに面を敷く。字が動けば面も付いていく */ #grad{position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none; background:linear-gradient(to bottom,transparent 0,rgba(6,7,10,.42) 58%,rgba(6,7,10,.72)); z-index:10;opacity:1;transition:opacity 420ms ease} body.notext #grad{opacity:0} body[data-form=manga] #grad,body[data-form=app] #grad{opacity:0} #text{position:absolute;left:12px;right:12px;bottom:48px;z-index:27; padding:15px 17px 16px; background:rgba(7,8,11,.88); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); border-top:1px solid rgba(232,228,218,.28); box-shadow:0 12px 34px rgba(0,0,0,.55); font-size:16px;line-height:var(--lh);letter-spacing:.04em; transition:line-height 900ms ease; white-space:pre-wrap} /* 面が要らない型・場面 */ #text.plated,body[data-form=manga] #text,#text:empty{ background:none;border:0;box-shadow:none} #text .ln{opacity:0;transform:translateY(6px);animation:rise 520ms ease forwards} @keyframes rise{to{opacity:1;transform:none}} #text .ln.blood{color:var(--blood-lit)} #text.solo{font-size:21px;bottom:auto;top:50%;transform:translateY(-50%);text-align:center; padding:20px 17px} /* 列挙（幹 D7 の部位）。画面いっぱいに上から落とす */ #text.listing{bottom:auto;top:14%;font-size:21px;line-height:2.5;letter-spacing:.04em; background:none;border:0;box-shadow:none} body.notext #text{opacity:0} #text .cont{display:inline-block} /* 話速同期 (録音・ボイスメッセージ) */ #text .ln.speak span{opacity:0;animation:sp 1ms linear forwards} @keyframes sp{to{opacity:1}} /* 網点で刷った字幕 (ベンガル 1205) */ #text.plated .ln{color:transparent;background:var(--ink); -webkit-background-clip:text;background-clip:text; -webkit-mask-image:repeating-radial-gradient(circle at 0 0,#000 0 1.5px,transparent 1.6px 3.6px); mask-image:repeating-radial-gradient(circle at 0 0,#000 0 1.5px,transparent 1.6px 3.6px); -webkit-mask-size:3.6px 3.6px;mask-size:3.6px 3.6px;transition:opacity 3s linear} #text.dissolving .ln{opacity:0} /* ---------------------------------------------------------------- HUD・進捗 (§2) */ #bar{position:absolute;top:9px;left:14px;right:14px;height:1.5px;display:flex;gap:2px;z-index:30} #bar i{flex:1;background:#2a2d35;transition:background 300ms} #bar i.read{background:var(--ink-2)}#bar i.now{background:var(--ink)} #top{position:absolute;top:22px;left:16px;right:16px;z-index:30;display:flex; justify-content:space-between;font-family:"Noto Sans JP",system-ui,sans-serif; font-size:9px;font-weight:300;letter-spacing:.26em;color:#41444c;pointer-events:none} #back{position:absolute;left:0;top:0;bottom:0;width:24px;z-index:32;cursor:w-resize} /* ---------------------------------------------------------------- 触れるもの (§2) 明滅（呼吸）は外した（作者 2026-09-14「明滅するのやめてほしい」）。 代わりに動かない印を置く：四隅の鉤と、血赤の細い枠。 */ .touch{position:relative} .touch::before{content:"";position:absolute;inset:-7px;pointer-events:none; border:1px solid rgba(168,39,44,.34);border-radius:2px} .touch::after{content:"";position:absolute;inset:-7px;pointer-events:none; background: linear-gradient(var(--blood-lit),var(--blood-lit)) left 0 top 0/11px 1.5px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) left 0 top 0/1.5px 11px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) right 0 top 0/11px 1.5px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) right 0 top 0/1.5px 11px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) left 0 bottom 0/11px 1.5px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) left 0 bottom 0/1.5px 11px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) right 0 bottom 0/11px 1.5px no-repeat, linear-gradient(var(--blood-lit),var(--blood-lit)) right 0 bottom 0/1.5px 11px no-repeat; opacity:.85} /* 「※唯一の進行手段」の場面。画面全体が待っている合図（動かない） */ #frame.waiting::after{content:"";position:absolute;inset:6px;pointer-events:none;z-index:33; border:1px solid rgba(168,39,44,.42)} /* ---------------------------------------------------------------- 触れるもの */ #stage{position:absolute;inset:0;z-index:15} /* 触れるもの＝印の枠（マスクなし）の中に版（マスクあり）を入れる。 同じ要素に印を付けると mask が枠まで抜いてしまう */ .obj{position:absolute;touch-action:none} .objplate{position:absolute;inset:0;background:var(--ink-route); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .drop{position:absolute;bottom:0;width:46%;height:24%;z-index:14; font-family:"Noto Sans JP",system-ui,sans-serif;font-size:9px;letter-spacing:.26em; color:var(--ink-4);display:grid;place-items:end center;padding-bottom:10px;opacity:0; transition:opacity 300ms} .drop.lit{opacity:1;box-shadow:inset 0 -40px 60px -40px rgba(221,216,206,.14)} #dropL{left:0}#dropR{right:0} /* 日の区切り */ #daycard{position:absolute;inset:0;z-index:42;display:grid;place-items:center; background:var(--void);animation:dayin 420ms ease both} #daycard:not(.den) span{font-family:Shippori,serif;font-size:22px;font-weight:600; letter-spacing:.5em;text-indent:.5em;color:var(--ink)} #daycard::after{content:"";position:absolute;left:50%;top:calc(50% + 30px); width:46px;height:1px;margin-left:-23px;background:var(--line)} #daycard.out{animation:dayout 360ms ease both} @keyframes dayin{from{opacity:0}} @keyframes dayout{to{opacity:0}} /* 選択肢 — 該当の場所から線を引いて、無機質な札で選ばせる */ .choices{position:absolute;inset:0;z-index:28} .choices .lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none; overflow:visible} .choices .lead{filter:drop-shadow(0 0 2px rgba(0,0,0,.9))} .choices .lead polyline{fill:none;stroke:var(--ink);stroke-width:1;opacity:.8; stroke-dasharray:3 4;stroke-linecap:round;animation:leadin 420ms ease both} .choices .lead circle{fill:rgba(8,9,12,.75);stroke:var(--blood-lit);stroke-width:1.5} @keyframes leadin{from{opacity:0}} /* 本文の上に置く。字と重ならない高さ */ .choices .rows{position:absolute;left:16px;right:16px;bottom:31%; display:flex;flex-direction:column;align-items:flex-end;gap:9px} body[data-form=stairs] .choices .rows{bottom:44%} .choices .pick{display:flex;align-items:center;gap:9px; min-height:44px;padding:11px 15px;cursor:pointer; background:rgba(10,12,16,.9);border:1px solid var(--ink-3);border-radius:0; font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;letter-spacing:.04em; color:var(--ink);animation:pickin 460ms ease both} .choices .pick i{width:5px;height:5px;background:var(--blood-lit);flex:0 0 5px} .choices .pick:nth-child(2){animation-delay:90ms} .choices .pick:nth-child(3){animation-delay:180ms} @keyframes pickin{from{opacity:0;transform:translateX(10px)}} .choices .pick:active,.choices .pick.taken{background:rgba(40,14,16,.95); border-color:var(--blood-lit)} .choices .pick[disabled]{opacity:.35} body[data-form=manga] .choices .pick{background:#fff;color:#141414;border-color:#141414} body[data-form=manga] .choices .lead polyline{stroke:#141414} /* ---------------------------------------------------------------- 通知カード (§3.2) */ #ov{position:absolute;inset:0;z-index:25;pointer-events:none} #ov.act{pointer-events:auto} .card{position:absolute;left:14px;right:14px;background:var(--panel); border:1px solid var(--line);border-radius:14px;padding:11px 12px 12px; font-family:"Noto Sans JP",system-ui,sans-serif; box-shadow:0 18px 40px rgba(0,0,0,.6);touch-action:none} .card.top{top:64px;animation:cardIn 520ms cubic-bezier(.2,.8,.3,1) both} .card.rise{bottom:12px;animation:cardRise 1200ms cubic-bezier(.2,.85,.25,1) both} /* 本文と一緒に出る札は字幕の面より上で止まる。せり上がりはそのまま */ .card.rise.over{bottom:27%} .card.top.over{top:56px} /* 写真つきの札は背が高くなるので、一緒に字を出すときだけ写真を低くする */ .card.over .shot{aspect-ratio:16/10} @keyframes cardIn{from{opacity:0;transform:translateY(-14px) scale(.98)}} @keyframes cardRise{from{opacity:0;transform:translateY(90px)}} .card .hd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500; color:#cfd2d8} .card .glyph{width:16px;height:16px;border-radius:4px;background:var(--ink-2); display:grid;place-items:center;font-size:9px;color:#12151b;font-weight:700} .card .dot{width:5px;height:5px;border-radius:50%;background:var(--blood-lit)} .card .time{margin-left:auto;font-size:10px;font-weight:300;color:var(--ink-3)} .card .ttl{margin-top:6px;font-size:12.5px;font-weight:500;color:#e3e5ea} .card .shot{margin-top:8px;aspect-ratio:4/3;background:#0b0d11;border-radius:8px; overflow:hidden;position:relative} .card .shot .plate{background:#9aa0a8} .card .shot.red{background:#c8442c} .card .memo{margin-top:8px;font-size:10px;font-weight:300;line-height:1.7;color:var(--ink-2)} .card .sizes{margin-top:8px;display:flex;gap:6px;font-size:9px;letter-spacing:.1em; color:var(--ink-4)} .card .sizes b{color:var(--ink);font-weight:500} .card .more{margin-top:6px;font-size:10px;color:#7f93d6} #ov .zoomed{transform-origin:center;transition:transform 300ms ease} /* ---------------------------------------------------------------- 汎用 UI 画面 */ .ui{position:absolute;inset:0;font-family:"Noto Sans JP",system-ui,sans-serif; display:flex;flex-direction:column;animation:fade 420ms ease both} /* 全画面の UI の上に本文が乗る画面では、下 40% を沈めて字を読ませる */ body:not(.notext) #ov .ui::after,body:not(.notext) #ov .sns::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(0,0,0,.93) 62%)} body.notext #ov .ui::after,body.notext #ov .sns::after{display:none} @keyframes fade{from{opacity:0}} .slip{background:var(--slip);color:var(--slip-ink);padding:10px 12px;border-radius:2px; font-family:"Noto Sans JP",system-ui,sans-serif;font-size:10px;line-height:1.7; box-shadow:0 8px 24px rgba(0,0,0,.55)} .slip .lbl{font-size:8px;letter-spacing:.26em;color:#6b675e;margin-bottom:3px} .slip.blank{min-height:34px} /* 冷蔵庫に貼られる付箋は一枚ずつ落ちてくる */ .slip.put{opacity:0;animation:slipin 420ms ease forwards} @keyframes slipin{from{opacity:0;transform:translateY(-10px) rotate(0)}to{opacity:1}} /* SNS のタイムライン (幹 15)。スマホの画面なので網点にはしない＝配達アプリと同じ扱い */ #ov .sns{position:absolute;left:0;right:0;top:56px;bottom:0;background:#000; display:flex;flex-direction:column; font-family:"Noto Sans JP",system-ui,sans-serif;animation:fade 420ms ease both} .sns .bar{flex:0 0 44px;display:flex;align-items:center;gap:16px;padding:0 14px; border-bottom:1px solid #1c1f23;font-size:11.5px;color:#6b7076} .sns .bar .glyph{font-size:14px;color:#e7e9ea;font-weight:700} .sns .bar .tab{color:#e7e9ea;font-weight:700;position:relative} .sns .bar .tab::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px; background:#1d9bf0;border-radius:2px} .sns .bar .tab.dim{color:#6b7076;font-weight:400} .sns .bar .tab.dim::after{display:none} .sns .feed{flex:1;overflow:hidden;padding-top:2px} .sns article{display:flex;gap:9px;padding:11px 14px 9px;border-bottom:1px solid #1c1f23} .sns .av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#2f3336; position:relative;overflow:hidden} .sns .av::after{content:"";position:absolute;left:50%;bottom:-9px;width:26px;height:26px; margin-left:-13px;border-radius:50%;background:#464c52} .sns .av::before{content:"";position:absolute;left:50%;top:7px;width:12px;height:12px; margin-left:-6px;border-radius:50%;background:#464c52} .sns .col{min-width:0;flex:1} .sns .hd{display:flex;align-items:baseline;gap:5px;font-size:11.5px;color:#71767b; white-space:nowrap;overflow:hidden} .sns .hd b{color:#e7e9ea;font-weight:700} .sns article p{margin-top:2px;font-size:12.5px;line-height:1.5;color:#e7e9ea; word-break:break-all} .sns .act{display:flex;gap:16px;margin-top:8px;font-size:10px;color:#71767b} /* 本文は「ぼかして表示」の指定。指を止めさせない程度に薄く敷く */ body[data-sns=blur] #ov .sns{filter:blur(2.2px)} #ov .sns{opacity:.97} /* 下に続きがある感じ。文面は足さず、灰色の帯だけ置く */ .sns article.ghost .hd b{display:block;width:38%;height:9px;background:#1c1f23;border-radius:2px} .sns article.ghost p{height:26px;background:#15181b;border-radius:3px;margin-top:6px} .sns article.ghost .av{background:#191c1f} .sns article.ghost .av::before,.sns article.ghost .av::after{background:#232629} /* UI の画面が出ている間はスキップのつまみを隠す（重なって邪魔になる） */ #ov.act ~ #skip{display:none} /* PC 作業 (§6.0) */ .tick{background:#14171d;border:1px solid var(--line);border-radius:8px;padding:9px 10px; display:flex;align-items:center;gap:8px;font-size:10.5px;color:#a7abb3; transition:opacity 320ms,transform 320ms} .tick b{margin-left:auto;font-size:9px;letter-spacing:.18em;color:var(--ink-3); border:1px solid var(--line);border-radius:4px;padding:3px 7px} .tick.done{opacity:.25;transform:translateX(10px)} /* 配達アプリ (§3.4) */ /* アプリを見ている間は器の HUD を出さない (アプリ自身がステータスバーを持つ §3.4) */ body[data-form=app] #grad,body[data-form=app] #bar,body[data-form=app] #top{display:none} #app{position:absolute;inset:0;background:#0a0c10;display:flex;flex-direction:column; font-family:"Noto Sans JP",system-ui,sans-serif;transition:transform 800ms ease,opacity 800ms ease} #app.small{transform:scale(.8);opacity:.34} #app .sbar{height:26px;flex:0 0 26px;display:flex;align-items:center;padding:0 14px; font-size:9.5px;color:var(--ink-2);letter-spacing:.06em} #app .sbar b{margin-left:auto;font-weight:400} #app .nav{flex:0 0 38px;display:flex;align-items:center;gap:8px;padding:0 12px; border-bottom:1px solid var(--line-2);font-size:11.5px;color:#cfd2d8} #app .nav .av{width:22px;height:22px;border-radius:50%;background:#2b3038} #app .log{flex:1;overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column; gap:7px;scrollbar-width:none} #app .log::-webkit-scrollbar{display:none} .bub{max-width:74%;padding:7px 10px;border-radius:13px;font-size:11.5px;line-height:1.65} .bub.them{align-self:flex-start;background:#151a26;border:1px solid #2a3352;color:#c8cddd} .bub.me{align-self:flex-end;background:#1d2438;border:1px solid #38446b;color:#dfe4f2} .bub.new{animation:bubIn 320ms ease both} @keyframes bubIn{from{opacity:0;transform:translateY(8px)}} .bub.err{border-color:#6e2a22;color:var(--ink-3)} .sys{align-self:center;font-size:9.5px;color:var(--ink-3);text-align:center; padding:5px 10px;line-height:1.6} #app .send{flex:0 0 46px;display:flex;align-items:center;gap:8px;padding:0 12px; border-top:1px solid var(--line-2)} #app .send input{flex:1;background:#111520;border:1px solid #2a3352;border-radius:16px; padding:8px 12px;color:#dfe4f2;font-size:11.5px;font-family:inherit;outline:none; transition:border-color 900ms,color 900ms} #app .send.failed input{border-color:#c8442c;color:var(--ink-3)} #app .send button{width:30px;height:30px;border:none;border-radius:50%; background:#5b6fd6;color:#fff;font-size:12px;cursor:pointer} #app .errline{font-size:9.5px;color:#c8442c;padding:0 14px 6px;text-align:right} /* 注文履歴 (作者了承: 「本日もご注文…」×10 の置き換え) */ .orders{padding:10px 12px;display:flex;flex-direction:column;gap:1px} .orders .r{display:flex;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-2); font-size:10.5px;color:#9ea3ac} .orders .r b{margin-left:auto;color:#c8cddd;font-weight:400;font-variant-numeric:tabular-nums} .orders .r i{font-style:normal;color:var(--ink-3);font-size:9.5px;width:56px} /* 配達マップ (地図は描かない) */ .map{flex:1;position:relative;background:#15181d;margin:10px;border-radius:10px;overflow:hidden} .map .pin,.map .me{position:absolute;transform:translate(-50%,-50%)} .map .pin{left:50%;top:34%;width:12px;height:12px;border-radius:50% 50% 50% 0; background:var(--blood-lit);rotate:-45deg} .map .me{width:10px;height:10px;border-radius:50%;background:#5b6fd6; box-shadow:0 0 0 6px rgba(91,111,214,.22);transition:top 2.2s ease-in-out,left 2.2s ease-in-out} .map .dist{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:11px; color:#c8cddd;font-variant-numeric:tabular-nums} /* 波形 (声は出さない §2-10) */ .wave{display:flex;align-items:center;gap:2px;height:26px;padding:0 2px} .wave i{flex:1;background:var(--ink-3);border-radius:1px;animation:wv 1.1s ease-in-out infinite} @keyframes wv{0%,100%{height:14%}50%{height:100%}} .wavebox{position:absolute;left:22px;right:22px;top:44%;transform:translateY(-50%)} .wavebox .mic{font-size:9px;letter-spacing:.26em;color:var(--ink-3);margin-bottom:8px} /* LINE / Slack の小窓 (西遊記) */ .msgpanel{position:absolute;left:20px;right:20px;top:26%;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:10px 11px 12px; font-family:"Noto Sans JP",system-ui,sans-serif;display:flex;flex-direction:column;gap:6px; box-shadow:0 16px 36px rgba(0,0,0,.6);animation:cardIn 460ms ease both} .msgpanel .mh{font-size:9px;letter-spacing:.26em;color:var(--ink-3);margin-bottom:2px} .msgpanel .mbub{max-width:78%;padding:6px 10px;border-radius:12px;font-size:11.5px; line-height:1.6;background:#1a1e26;border:1px solid var(--line);color:#c9ccd3} .msgpanel .mbub.me{align-self:flex-end;background:#20262f} .msgpanel .mrow{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#9ea3ac} .msgpanel .mrow i{width:12px;height:12px;border-radius:3px;background:#2b3038;flex:0 0 12px} /* MMO の HUD (§3.5) */ #hudui{position:absolute;inset:0;font-family:"Noto Sans JP",system-ui,sans-serif; pointer-events:none;--jade:#5fb8a0;--gold:#c9a95a; /* 舞台の上端。地面（版の y=408）が画面の 59% に来るように置く */ --sky:42px} /* 金の二重枠と四隅の角。中華ゲームの額縁 */ #hudui .frame{position:absolute;inset:8px;border:1px solid rgba(201,169,90,.22)} #hudui .frame::after{content:"";position:absolute;inset:3px; border:1px solid rgba(95,184,160,.12)} #hudui .frame .c{position:absolute;width:15px;height:15px;border:0 solid var(--gold); opacity:.7} #hudui .frame .tl{left:-1px;top:-1px;border-width:2px 0 0 2px} #hudui .frame .tr{right:-1px;top:-1px;border-width:2px 2px 0 0} #hudui .frame .bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px} #hudui .frame .br{right:-1px;bottom:-1px;border-width:0 2px 2px 0} /* 家具は落とした（作者 2026-09-16）。残り人数・戦場名・ミニマップ・ キルフィードは無い。残すのは二人・パーティ欄・マイク・PING・切断 */ #hudui .party{position:absolute;left:18px;top:74px;font-size:9.5px;color:#7ec9b5} #hudui .pm{display:flex;align-items:center;gap:6px;margin-bottom:4px} #hudui .pm b{font-weight:400;width:26px} #hudui .pm .hp{display:block;width:54px;height:3px;background:rgba(6,18,15,.8); border:1px solid rgba(95,184,160,.3)} #hudui .pm .hp i{display:block;height:100%;background:var(--jade)} #hudui .pm .mic{font-style:normal;font-size:9px;opacity:.2;transition:opacity 220ms} #hudui .pm .mic.on{opacity:1} #hudui .ping{position:absolute;right:18px;top:78px;font-size:9px;letter-spacing:.18em; color:var(--jade);transition:color 1.2s} #hudui .ping.bad{color:#c8442c} /* 離席中。ここが一度も出ていなかった（素材側 2026-09-16 §1） */ #hudui .pm .st{font-size:8.5px;letter-spacing:.2em;color:var(--ink-3)} #hudui .pm.afk b{color:var(--ink-3)} /* ゲーム内のメッセージ欄。**この一枚しか字が出ない**。字幕の面と二枚あって 重なっていたのをやめた（作者 2026-09-16「全部ゲームのメッセージ欄に統一して」） */ #hudui .log{position:absolute;left:12px;right:12px;bottom:14px; max-height:38%;overflow:hidden;display:flex;flex-direction:column; justify-content:flex-end; font-size:12.5px;color:#cfe8e0;line-height:1.75; background:rgba(6,10,9,.86);border-left:2px solid rgba(95,184,160,.45); padding:11px 13px 12px} #hudui .log .ln{margin-bottom:3px;animation:logIn 320ms ease both} /* 古いものから沈む。いちばん下がいま読む行 */ #hudui .log .ln:nth-last-child(n+6){opacity:.2} #hudui .log .ln:nth-last-child(5){opacity:.32} #hudui .log .ln:nth-last-child(4){opacity:.46} #hudui .log .ln:nth-last-child(3){opacity:.62} #hudui .log .ln:nth-last-child(2){opacity:.8} #hudui .log .ln:last-child{opacity:1} @keyframes logIn{from{opacity:0;transform:translateY(4px)}} /* パーティチャットは一段小さく、名前付き */ #hudui .log .ln:not(.say){font-size:11px;color:#a9d4c9} #hudui .log .ln b{font-weight:400;font-size:8.5px;letter-spacing:.12em; color:var(--gold);margin-right:7px} #hudui .log .ln.me b{color:#7ec9b5} /* 地の文。ここが本文 */ #hudui .log .ln.say{color:#e4efe9;letter-spacing:.01em} #hudui .banner{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:13px; color:var(--gold);letter-spacing:.08em;opacity:0;transition:opacity 500ms} #hudui .banner.on{opacity:1;text-shadow:0 0 18px rgba(201,169,90,.5)} #hudui .cut{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.82); color:var(--jade);font-size:12px;letter-spacing:.2em;font-weight:300;opacity:0; transition:opacity 900ms} #hudui .cut.on{opacity:1} /* NPC ダイアログ (翡翠) */ /* 龍の声。ゲームのダイアログではない。金の罫を上下に引いた明朝の板 */ .npc{position:absolute;left:12px;right:12px;top:11%;max-height:44%;overflow:hidden; border-top:2px solid rgba(201,169,90,.85);border-bottom:1px solid rgba(201,169,90,.4); background:linear-gradient(to bottom,rgba(10,9,6,.94),rgba(10,9,6,.88)); padding:12px 14px 13px;font-family:"Shippori Mincho","Noto Serif JP",serif; font-size:13px;line-height:1.85;color:#e7dcc0;letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.6)} .npc .who{font-family:"Noto Sans JP",sans-serif;font-size:8.5px;letter-spacing:.42em; color:#c9a95a;margin-bottom:7px} /* 版が一瞬だけ閃く（ベンガル 1207 の本棚）。版が失われたあとでも出る */ .plateflash{position:absolute;inset:0;z-index:12;pointer-events:none; animation:plateflash 280ms steps(4,end) forwards} .plateflash .plate{background:var(--ink-route)} @keyframes plateflash{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}} /* 絵が入るはずだった枠だけ（ベンガル 1183）。空白を「無くなった」に変える */ .voidframe{position:absolute;left:14%;right:14%;top:22%;bottom:38%; border:1px solid rgba(163,93,156,.28); opacity:0;animation:rise 900ms ease forwards} .voidframe .c{position:absolute;width:12px;height:12px;border:0 solid var(--ink-route); opacity:.55} .voidframe .tl{left:-1px;top:-1px;border-width:1px 0 0 1px} .voidframe .tr{right:-1px;top:-1px;border-width:1px 1px 0 0} .voidframe .bl{left:-1px;bottom:-1px;border-width:0 0 1px 1px} .voidframe .br{right:-1px;bottom:-1px;border-width:0 1px 1px 0} /* スマホの待受画面。彼女の写真だが、網点の面までしか見えない */ .lockscr{position:absolute;left:20%;right:20%;top:13%;bottom:20%; border:1px solid rgba(232,228,218,.22);border-radius:15px;overflow:hidden; background:#090b0e;box-shadow:0 18px 52px rgba(0,0,0,.72); opacity:0;animation:rise 620ms ease forwards} .lockscr .ph{position:absolute;inset:0; background: radial-gradient(52% 38% at 40% 31%,rgba(232,228,218,.72),transparent 64%), radial-gradient(86% 54% at 70% 82%,rgba(232,228,218,.34),transparent 72%), linear-gradient(158deg,rgba(232,228,218,.26),rgba(0,0,0,.6)); -webkit-mask-image:radial-gradient(#000 1.05px,transparent 1.3px); mask-image:radial-gradient(#000 1.05px,transparent 1.3px); -webkit-mask-size:3.4px 3.4px;mask-size:3.4px 3.4px} /* 883 は写真の中に 8bit の塔。等倍で置いて点をぼかさない */ .lockscr.px{background:#06100d} .lockscr .pix{position:absolute;inset:0;overflow:hidden} /* 258 CSS px ＝ 端末の 516 物理 px。版の点と画面の点が 1:1 で合う */ .lockscr .pix i{position:absolute;left:50%;top:58%;width:258px;height:210px; margin:-105px 0 0 -129px;background:#5fb8a0;image-rendering:pixelated; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .lockscr .pix i.g{background:#c9a95a} .lockscr .tm{position:absolute;left:0;right:0;top:13%;text-align:center; font-family:"Noto Sans JP",sans-serif;font-size:34px;font-weight:200; letter-spacing:.02em;color:rgba(255,255,255,.92); text-shadow:0 2px 10px rgba(0,0,0,.8)} .lockscr .dt{position:absolute;left:0;right:0;top:13%;margin-top:42px;text-align:center; font-family:"Noto Sans JP",sans-serif;font-size:10px;letter-spacing:.14em; color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.8)} .lockscr .lk{position:absolute;left:50%;bottom:16px;width:56px;height:3px; margin-left:-28px;border-radius:2px;background:rgba(255,255,255,.55)} /* 物が喋る声。吹き出しではない。画面の真ん中に赤い明朝で、呪文のように 一字ずつ浮かぶ（作者 2026-09-16）。口を持った龍は .npc の板で喋る */ .spell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; z-index:14;pointer-events:none} /* 版を沈める。字だけが浮いて見えるように */ .spell::before{content:"";position:absolute;inset:0; background:radial-gradient(ellipse 78% 46% at 50% 50%, rgba(0,0,0,.9),rgba(0,0,0,.62) 76%,rgba(0,0,0,.5))} .spell .w{position:relative;padding:0 8%;text-align:center; font-family:"Shippori Mincho","Noto Serif JP",serif; font-size:17px;line-height:2.45;letter-spacing:.22em;color:#e04437; text-shadow:0 0 26px rgba(224,68,55,.5),0 0 4px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,1)} .spell span{display:inline-block;opacity:0; animation:spellin 700ms ease forwards} @keyframes spellin{ from{opacity:0;filter:blur(4px);transform:translateY(4px)} to{opacity:1;filter:blur(0);transform:none}} /* 肉の沈黙 */ .silence{position:absolute;left:0;right:0;top:20%;text-align:center; font-size:12px;letter-spacing:.04em;color:var(--ink-3);opacity:.85} /* 縦読みマンガ (§3.6) */ body[data-form=manga] #frame{background:var(--paper)} body[data-form=manga] #grad,body[data-form=manga] #text{display:none} body[data-form=manga] #bar i{background:rgba(20,20,20,.16)} body[data-form=manga] #bar i.read{background:rgba(20,20,20,.4)} body[data-form=manga] #bar i.now{background:#141414} body[data-form=manga] #top{color:rgba(20,20,20,.34)} /* 周回の一行も紙 */ #round ~ #bar i{} #manga{position:absolute;inset:0;background:var(--paper);overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:12px} #manga .panel{position:relative;border:2.5px solid #141414;background:var(--paper); min-height:74px;overflow:hidden;animation:panelIn 300ms ease both} @keyframes panelIn{from{opacity:0;transform:translateY(10px)}} #manga .panel .plate{background:#141414;mix-blend-mode:multiply} #manga .panel .plate.kaki{background:#d98a3f;transform:translate(2px,2px)} #manga .shadow{position:absolute;right:12%;bottom:0;width:34%;height:82%; background:#141414;clip-path:polygon(38% 0,62% 0,78% 32%,72% 100%,28% 100%,22% 32%)} #manga .bub{max-width:80%;background:#fff;border:2.5px solid #141414;border-radius:16px; padding:7px 11px;font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700; font-size:13px;line-height:1.5;color:#141414;position:relative} #manga .bub.left{align-self:flex-start}#manga .bub.right{align-self:flex-end} #manga .bub.thorn{border-radius:4px; clip-path:polygon(0 6%,5% 0,12% 6%,20% 0,28% 6%,40% 0,52% 6%,64% 0,76% 6%,88% 0,100% 6%, 100% 94%,88% 100%,76% 94%,64% 100%,52% 94%,40% 100%,28% 94%,16% 100%,4% 94%,0 100%)} #manga .ono{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg); font-family:"Dela Gothic One","Noto Sans JP",sans-serif;color:#d98a3f; -webkit-text-stroke:2px #141414;white-space:nowrap} #manga .focus{position:absolute;inset:0; background:repeating-conic-gradient(from 0deg at 50% 50%,#141414 0deg 1.1deg,transparent 1.1deg 3.4deg); -webkit-mask-image:radial-gradient(circle,transparent 26%,#000 62%); mask-image:radial-gradient(circle,transparent 26%,#000 62%)} #manga .smoke{position:absolute;inset:0} #manga .smoke i{position:absolute;border-radius:50%;background:#fff; border:2.5px solid #141414} #manga .cap{font-family:Shippori,serif;font-size:13px;line-height:1.8;color:#1a1a18; padding:2px 4px} #manga .panel.last{background:#08090c} #manga .panel.last .plate{background:#e8e4da;mix-blend-mode:normal} /* 原稿用紙・縦書き (§3.7) */ #ms{position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(to right,rgba(214,230,238,.13) 0 .5px,transparent .5px 11px), repeating-linear-gradient(to bottom,rgba(214,230,238,.13) 0 .5px,transparent .5px 11px); opacity:0;transition:opacity 900ms} #ms.on{opacity:1} #snow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s; background-image: radial-gradient(circle,rgba(214,230,238,.5) 0 .9px,transparent 1px), radial-gradient(circle,rgba(214,230,238,.32) 0 .7px,transparent .8px); background-size:23px 31px,37px 47px} #snow.on{opacity:var(--snowo,1);animation:snow 26s linear infinite} /* 永訣の朝：みぞれが強くなる（中盤の演出・2026-09-24）。細かい粒の層を重ねる */ #snow::after{content:"";position:absolute;inset:0;opacity:var(--snowd,0);transition:opacity 1.2s; background-image:radial-gradient(circle,rgba(214,230,238,.55) 0 .8px,transparent .9px), radial-gradient(circle,rgba(214,230,238,.4) 0 1.1px,transparent 1.2px); background-size:13px 19px,29px 23px;animation:snow2 11s linear infinite} @keyframes snow2{to{background-position:-8px 570px,12px 690px}} @keyframes snow{to{background-position:6px 620px,-10px 940px}} /* upright だと「……」「――」「（）」まで正立に固定され、縦組みの形にならない（永訣 639・作者 2026-09-19）。mixed が縦組みの標準 */ body[data-form=manuscript] #text{writing-mode:vertical-rl;text-orientation:mixed; left:auto;right:18px;top:44px;bottom:44px;max-height:none;width:auto; font-size:16.5px;line-height:2.0;letter-spacing:.06em; padding:14px 16px;border-top:0;border-right:1px solid rgba(214,230,238,.26)} body[data-form=manuscript] #text.solo{padding:14px 16px} body[data-form=manuscript] #text.solo{top:52px;transform:none;text-align:start} body[data-form=manuscript] #grad{ background:linear-gradient(to left,rgba(0,0,0,.72) 0%,transparent 46%); height:100%;width:100%;opacity:1} /* 旧仮名の脇組み (§3.7・本文 626 以降) */ #text .kana{writing-mode:vertical-rl;font-size:8.5px;color:#9fb6c4;letter-spacing:.12em; opacity:0;animation:rise 900ms ease forwards} body:not([data-form=manuscript]) #text .kana{writing-mode:horizontal-tb;font-size:11px; padding-left:1.2em} /* 寄席 (§3.8) */ #yose{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 900ms} #yose.on{opacity:1} #yose .glow{position:absolute;inset:0; background:radial-gradient(ellipse at 50% 82%,rgba(224,138,42,.55),transparent 62%)} #yose .zabu{position:absolute;left:8%;right:8%;bottom:6%;height:26px;background:#3a1f0e; border-radius:3px} #yose .mekuri{position:absolute;right:12px;top:52px;background:var(--paper);color:#141414; font-family:"Reggae One","Noto Sans JP",sans-serif;font-size:15px;padding:12px 7px; writing-mode:vertical-rl;box-shadow:0 8px 22px rgba(0,0,0,.6); transition:transform 700ms ease,opacity 700ms} #yose .mekuri.fall{transform:translateY(120px) rotate(9deg);opacity:0} .fuda{position:absolute;left:14px;right:52px;top:11%;max-height:42%;overflow:hidden; background:var(--paper); color:#141414;font-family:Shippori,"Noto Serif JP",serif;font-weight:600;font-size:14.5px;letter-spacing:.03em; line-height:1.75;padding:10px 12px;box-shadow:0 10px 26px rgba(0,0,0,.55)} /* 死神の台詞：Reggae One は読みづらい（作者 2026-09-28）→ 本文と同じ明朝の太め */ /* 蝋燭 */ #candles{position:absolute;left:0;right:0;bottom:26%;display:flex;justify-content:center; align-items:flex-end;gap:34px;pointer-events:none;z-index:12; filter:drop-shadow(0 0 26px rgba(224,138,42,.35))} #candles .c{position:relative;width:118px;height:190px} /* 蝋燭は実写の切り出しなので、四隅を落として矩形に見せない */ #candles .c .plate{background:#e08a2a; -webkit-mask-image:var(--m),radial-gradient(ellipse at 50% 60%,#000 38%,transparent 76%); mask-image:var(--m),radial-gradient(ellipse at 50% 60%,#000 38%,transparent 76%); -webkit-mask-composite:source-in;mask-composite:intersect; -webkit-mask-size:contain,cover;mask-size:contain,cover} #candles .c.mine{height:330px} #candles .c.out .plate{opacity:.12} /* 非常階段・案C (§3.9) */ body[data-form=stairs] #text{top:38%;bottom:auto;transform:none;text-align:center} body[data-form=stairs] #grad{ background:linear-gradient(to bottom,rgba(0,0,0,.7) 0 18%,transparent 42%,rgba(0,0,0,.92))} #behind{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:16;pointer-events:none} #behind .plate.b{transform:translate(var(--shift-back),0)} #hem{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(47,179,122,.2); z-index:26;opacity:0;transition:opacity 500ms} #hem.on{opacity:1} #sign{position:absolute;left:0;right:0;top:44%;text-align:center;z-index:22; font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:700;font-size:66px; color:#2fb37a;letter-spacing:.04em;opacity:0;transition:opacity 600ms; text-shadow:0 0 28px rgba(47,179,122,.35)} #sign.on{opacity:1} #exitpic{position:absolute;left:14px;top:48%;width:26px;height:30px;z-index:22; opacity:0;transition:opacity 600ms} #exitpic.on{opacity:.8} #exitpic svg{width:100%;height:100%;fill:#2fb37a} #spider{position:absolute;inset:0;z-index:34;display:none} #spider .plate{background:var(--ink-route)} /* 二列 (§3.10) */ #split{position:absolute;inset:0;z-index:28;display:none;grid-template-columns:1fr 1px 1fr; padding:56px 0 26px;background:rgba(8,9,12,.5)} #split.on{display:grid} #split.on ~ #text{display:none} #split .rule{background:var(--line)} #split .col{padding:0 12px;overflow:hidden;font-size:12px;line-height:1.78} #split .col .who{font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.26em; color:var(--ink-3);margin-bottom:12px} #split .col.b .who{color:var(--blood-lit)} #split .col p{opacity:0;transform:translateY(-8px);animation:drop 800ms ease forwards} #split .col p.gapline{height:1.78em} @keyframes drop{to{opacity:1;transform:none}} /* 周回の一行 (§3.11) */ #round{position:absolute;inset:0;z-index:36;display:none;place-items:center; background:var(--paper);color:#1a1a18;padding:0 34px;text-align:center} #round.on{display:grid} #round.on ~ #bar,#round.on ~ #top,#split.on ~ #bar,#split.on ~ #top{display:none} #round .bgp{position:absolute;inset:0;opacity:.18} #round .bgp .plate{background:#141414;mix-blend-mode:multiply} #round p{position:relative;font-size:16px;line-height:2.1;letter-spacing:.04em; opacity:0;animation:rise 700ms ease forwards} /* タイトル・結末画面・フローチャート (§3.12) */ .scr{position:absolute;inset:0;z-index:38;display:none;flex-direction:column; background:var(--void)} .scr.on{display:flex} #title{align-items:center;justify-content:center;gap:26px} #title h1{font-size:34px;font-weight:600;letter-spacing:.42em;text-indent:.42em; color:var(--ink)} #title .kv{width:230px} #title .tap{font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.26em; color:var(--ink-4);animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}} #title .menu{display:flex;gap:18px;font-family:"Noto Sans JP",sans-serif;font-size:12px; letter-spacing:.04em;color:var(--ink-3)} #title .menu button{background:none;border:none;color:inherit;font:inherit;cursor:pointer; padding:8px 4px;min-height:44px} #end{justify-content:flex-end} #end .pic{position:absolute;inset:0} #end .foot{position:relative;padding:0 22px 46px;font-family:"Noto Sans JP",sans-serif; font-size:9px;letter-spacing:.26em;color:var(--ink-3);text-align:center} /* フローチャート = 送り状の言語 */ #flow{padding:52px 0 26px;overflow-y:auto} #flow h2{font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.3em; color:var(--ink-3);text-align:center;margin-bottom:20px} #flow .spine{position:relative;margin:0 auto;width:250px;padding-left:26px} #flow .spine::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:1px; background:var(--line)} #flow .day{position:relative;margin-bottom:2px} #flow .day>.d{font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.2em; color:var(--ink-4);padding:7px 0} #flow .day>.d::before{content:"";position:absolute;left:-23px;top:12px;width:5px;height:5px; border-radius:50%;background:var(--line);border:1px solid var(--void)} #flow .row{display:flex;align-items:center;gap:9px;padding:5px 0 5px 8px; font-family:"Noto Sans JP",sans-serif;font-size:12px;color:var(--ink-3)} #flow .row .th{width:34px;height:34px;flex:0 0 34px;background:#0d0f13;border-radius:3px; position:relative;overflow:hidden} #flow .row .th .plate{background:currentColor} #flow .row.got{color:var(--ink)} #flow .row .nm{letter-spacing:.06em} #flow .row .hid{letter-spacing:.3em;color:var(--ink-4)} #flow .row.pick{cursor:pointer;min-height:44px} #flow .row.pick:active{background:rgba(221,216,206,.06)} #flow .back{margin:24px auto 0;display:block;background:none;border:1px solid var(--line); color:var(--ink-3);font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.2em; padding:11px 22px;min-height:44px;cursor:pointer} /* スタッフロール */ #credits{overflow-y:auto;background:#fff;color:#141414} #credits .in{padding:70px 26px 90px;font-family:"Noto Sans JP",sans-serif;font-size:12px; line-height:2.1;text-align:center} #credits h2{font-family:Shippori,serif;font-size:26px;letter-spacing:.34em; text-indent:.34em;margin-bottom:34px;font-weight:600} #credits .sec{margin-top:30px;font-size:9px;letter-spacing:.28em;color:#6b675e} #credits .src{font-size:9px;line-height:1.9;color:#4a4740} /* 戻って読み直す。左上のつまみ。音と映像は鳴らさず、字と版だけ戻す */ #rewind{position:absolute;top:30px;left:12px;z-index:34;display:none; align-items:center;justify-content:center;min-width:54px;min-height:44px; padding:9px 11px;border:1px solid var(--line);border-radius:4px; background:rgba(10,12,16,.72);font-family:"Noto Sans JP",system-ui,sans-serif; cursor:pointer;-webkit-user-select:none;user-select:none} #rewind.on{display:flex} #rewind .lbl{font-size:9px;letter-spacing:.2em;color:var(--ink-2)} #rewind:active{border-color:var(--ink-3)} /* 読み返し中の帯 */ #rewbar{position:absolute;left:0;right:0;bottom:0;z-index:35;display:none; align-items:center;justify-content:space-between;padding:10px 14px; background:rgba(8,9,12,.92);border-top:1px solid var(--line); font-family:"Noto Sans JP",system-ui,sans-serif;font-size:9px;letter-spacing:.2em; color:var(--ink-3)} #rewbar.on{display:flex} #rewbar button{background:none;border:1px solid var(--line);color:var(--ink-2); font:inherit;letter-spacing:.2em;padding:9px 14px;min-height:44px;border-radius:3px; cursor:pointer} body.rewound #text{color:var(--ink-2)} body.rewound #bar,body.rewound #skip{display:none} /* 読み返し中は、いまの画面の触れるものを出さない（別の画面の字の上に残らないように） */ body.rewound #stage,body.rewound #candles,body.rewound #hudui{display:none} /* 既読を追う (§9)。自動送りではなく、押している間だけ進むつまみ */ #skip{position:absolute;top:30px;right:12px;z-index:34;display:none; flex-direction:column;align-items:flex-end;gap:2px; padding:9px 11px;min-width:62px;min-height:44px;justify-content:center; border:1px solid var(--line);border-radius:4px;background:rgba(10,12,16,.72); font-family:"Noto Sans JP",system-ui,sans-serif;cursor:pointer; -webkit-user-select:none;user-select:none;touch-action:none} #skip.on{display:flex} #skip .lbl{font-size:9px;letter-spacing:.26em;color:var(--ink-2)} #skip .hint{font-size:9px;letter-spacing:.2em;color:var(--ink-4)} #skip.held{border-color:var(--blood-lit);background:rgba(30,10,12,.8)} #skip.held .lbl{color:var(--ink)} /* 分岐で止まったときの合図 */ #stopmark{position:absolute;left:0;right:0;top:34%;z-index:34;text-align:center; font-family:"Noto Sans JP",system-ui,sans-serif;font-size:9px;letter-spacing:.2em; color:var(--blood-lit);opacity:0;transition:opacity 300ms} #stopmark.on{opacity:1} /* ダイジェスト (§9 既読の自動送り) */ #digest{position:absolute;top:14px;left:0;right:80px;z-index:31;text-align:right; font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.26em; color:var(--ink-4);opacity:0;transition:opacity 300ms} #digest.on{opacity:1} body.digest #text{color:var(--ink-3)} /* 蠅・血の一点 */ .fly{position:absolute;width:3px;height:3px;background:var(--ink);border-radius:50%; z-index:17} /* 独白の間だけ HUD を引かせる */ #hudui.dimmed .party,#hudui.dimmed .ping,#hudui.dimmed .frame, #hudui.dimmed .log{opacity:.22;transition:opacity 900ms} @keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-3px)} 100%{transform:translateY(0)}} @keyframes swing{0%{transform:rotate(-24deg)}50%{transform:rotate(52deg)} 100%{transform:rotate(-24deg)}} @keyframes draw{0%{transform:translateX(0)}50%{transform:translateX(-5px)} 100%{transform:translateX(0)}} /* ゲームのログも読む場所。字幕と同じ面を敷く（作者 2026-09-14） */ #hudui .log{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); border-top:1px solid rgba(127,227,196,.26)} /* 履歴の中の定型（本日もご注文…）。日付だけ添えて淡く積む */ #app .bub.auto{opacity:.62} #app .bub.auto i{font-style:normal;font-size:8.5px;letter-spacing:.16em; color:#7c8296;margin-right:8px} /* 遡れることの合図 */ #app .hint{position:absolute;left:50%;transform:translateX(-50%);right:auto;bottom:64px;text-align:center; font-size:9px;letter-spacing:.2em;color:#cfd6ea;pointer-events:none; padding:6px 12px;border-radius:14px;background:rgba(10,12,20,.78); transition:opacity 700ms ease} #app .hint.off{opacity:0} /* 字が崩れて落ちる（ベンガル 1212） */ #text .ln .crm{display:inline-block;animation:crumb 2600ms ease-in forwards} @keyframes crumb{0%{transform:none;opacity:1} 100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}} /* 録音アプリ（幹 D7） */ .recapp{position:absolute;inset:0;background:#0b0c10} .recapp .sb{position:absolute;left:0;right:0;top:0;height:26px;display:flex; align-items:center;justify-content:space-between;padding:0 14px;font-size:9px; letter-spacing:.16em;color:#6f7480;font-family:"Noto Sans JP",sans-serif} .recapp .tm{position:absolute;left:0;right:0;top:24%;text-align:center;font-size:26px; letter-spacing:.08em;color:#e8e4da;font-family:"Noto Sans JP",sans-serif; font-variant-numeric:tabular-nums} .recapp .wv{position:absolute;left:14%;right:14%;top:38%;height:22px;display:flex; align-items:center;justify-content:space-between} .recapp .wv i{display:block;width:2px;background:#3a3f4a;border-radius:1px} .recapp.rec .wv i{background:#8d3a30;animation:wv 900ms ease-in-out infinite alternate} @keyframes wv{to{transform:scaleY(1.9)}} .recapp .hint{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:9px; letter-spacing:.3em;color:#6f7480;font-family:"Noto Sans JP",sans-serif} .recapp .ring{position:absolute;left:50%;top:62%;width:66px;height:66px;margin-left:-33px; border:2px solid #4a4f5a;border-radius:50%;display:grid;place-items:center} .recapp .dot{width:46px;height:46px;border-radius:50%;background:#7e2f27; transition:transform 130ms ease,background 260ms ease,border-radius 260ms ease} .recapp.rec .dot{background:#c8442c;border-radius:8px;width:30px;height:30px; animation:recpulse 1.6s ease-in-out infinite} @keyframes recpulse{0%,100%{opacity:1}50%{opacity:.55}} /* 幹 D7 最後の開封。網点にしない実写（作者 2026-09-15） */ .eyereal{position:absolute;inset:0;background:#000 center/cover no-repeat url(assets/image/eyes_real.jpg); opacity:.3;filter:brightness(.5) contrast(1.05);transform:scale(1.15); transition:opacity 1600ms ease,filter 1600ms ease,transform 1800ms ease} .eyereal[data-k="1"]{opacity:.55;filter:brightness(.95) contrast(1.25);transform:scale(1.5)} .eyereal[data-k="2"]{opacity:.8;filter:brightness(1.35) contrast(1.5);transform:scale(1.95)} .eyereal[data-k="3"]{opacity:1;filter:brightness(1.75) contrast(1.7);transform:scale(2.5)} .eyetip{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-size:12px; letter-spacing:.04em;color:var(--ink-3);animation:tipfade 2.2s ease-in-out infinite} @keyframes tipfade{0%,100%{opacity:.35}50%{opacity:.95}} /* 終幕の巻物と分割（作者 2026-09-15） */ #split.roll{display:none;background:#05060a;padding:0;grid-template-columns:none} #split.roll.on{display:block} #split.roll .stage{position:absolute;left:0;right:0;top:0; display:flex;gap:0;will-change:transform} #split.roll .col{flex:1 1 50%;padding:0 10px;overflow:hidden; font-size:9px;line-height:11px;color:var(--ink-2);opacity:.92; transition:transform 1100ms cubic-bezier(.4,0,.2,1),opacity 800ms ease} #split.roll .col p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:clip} /* 割れるまでは二列とも全部見えている＝一本の柱に見える */ #split.roll .col.b{position:absolute;left:0;right:0;top:0;padding:0 10px} #split.roll.cut .col.b{position:static} #split.roll.cut .col.a p.e,#split.roll.cut .col.b p.o{opacity:.06} #split.roll.cut .col.a{transform:translateX(-4%)} #split.roll.cut .col.b{transform:translateX(4%)} #split.roll .tags{position:absolute;left:0;right:0;top:14px;display:flex; opacity:0;transition:opacity 900ms ease;pointer-events:none} #split.roll.tag .tags{opacity:1} #split.roll .tags span{flex:1;text-align:center;font-size:9px;letter-spacing:.22em; font-family:"Noto Sans JP",sans-serif} #split.roll .tags .ta{color:var(--ink-2)} #split.roll .tags .tb{color:var(--blood-lit)} /* 読み直しの段。隣人側だけ自分で流れていく */ #split.roll.read{display:block;padding:0} #split.roll.read .stage{position:absolute;left:0;right:0;top:40px;bottom:22px; display:flex;gap:0;transform:none;transition:transform 900ms ease} #split.roll.read .stage::after{content:"";position:absolute;left:50%;top:0;bottom:0; width:1px;background:var(--line)} #split.roll.read .col{position:static;flex:1 1 50%;overflow:hidden; font-size:12px;line-height:1.72;padding:0 12px;transform:none;opacity:1} #split.roll.read .col.a p.e,#split.roll.read .col.b p.o{display:none} #split.roll.read .col.a p,#split.roll.read .col.b p{opacity:1} #split.roll.read .col p{white-space:normal} #split.roll.read .tags{top:14px} /* 冷蔵庫から部位が飛び出して混ざる（西遊記 916） */ /* 飛び出す物はインクを乗せず、白いまま浮かせる */ .burst .plate{background:#efece4;mix-blend-mode:normal;transform:none} .burst{position:absolute;left:26%;top:36%;width:48%;height:30%;opacity:0; transform:translate(0,0) scale(.35) rotate(0); transition:transform 1000ms cubic-bezier(.16,.85,.3,1),opacity 420ms ease} .burst.fly{opacity:1; transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot))} .burst.mix{transition:transform 820ms cubic-bezier(.7,0,.25,1),opacity 500ms ease; transform:translate(0,0) scale(.82) rotate(0)} /* 届いたものを並べる（幹 D7 の列挙・作者 2026-09-16） */ .parts{position:absolute;left:8%;right:8%;top:14%;bottom:16%; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr); gap:10px} .parts .pt{position:relative;opacity:0;transform:translateY(8px) scale(.94); transition:opacity 620ms ease,transform 620ms cubic-bezier(.2,.8,.3,1)} .parts .pt.on{opacity:1;transform:none} .parts .pt .plate{background:var(--ink);mix-blend-mode:normal;transform:none; -webkit-mask-size:contain;mask-size:contain} .parts .pt span{position:absolute;left:0;right:0;bottom:-2px;text-align:center; font-size:9px;letter-spacing:.3em;color:var(--ink-3)} /* 赤く染まったあと（イサクの結末） */ body.bloodied #bgink{opacity:1} /* キラーワードは級数を落とす（作者 2026-09-16） */ #text.solo.small{font-size:16px;letter-spacing:.04em;line-height:2.1} /* 分岐までジャンプ（二周目から・作者 2026-09-16） */ #jump{position:absolute;inset:0;z-index:38;background:rgba(6,7,10,.96); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:40px 22px;opacity:0;transition:opacity 260ms ease} #jump.on{opacity:1} #jump h2{font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.3em; color:var(--ink-3);margin-bottom:14px} #jump .list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px} #jump .row{display:block;width:100%;text-align:left;padding:11px 13px; background:rgba(22,24,30,.9);border:1px solid var(--line);color:var(--ink-1); font-family:"Shippori Mincho",serif;font-size:12px;letter-spacing:.04em} #jump .row i{display:block;font-style:normal;font-family:"Noto Sans JP",sans-serif; font-size:9px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:3px} #jump .row:active{border-color:var(--ink-3)} #jump .back{margin-top:18px;font-size:9px;letter-spacing:.2em;color:var(--ink-3); background:none;border:0;padding:8px 14px} /* 終幕の反転開示（scroll 版の最後の演出に倣う・作者 2026-09-16） */ #split.roll .col p.red{color:#c8442c !important;transition:color 700ms ease} #split.roll .rvbox{position:absolute;width:13px;height:9px;background:#efece4; box-shadow:0 2px 10px rgba(0,0,0,.7);opacity:0;z-index:4; transition:opacity 240ms ease} #split.roll .rvbox.on{opacity:1} #split.roll.jolt .stage{animation:jolt 240ms ease} @keyframes jolt{0%{transform:translateY(0)}40%{transform:translateY(3px)} 100%{transform:translateY(0)}} #split.roll .nameplate{position:absolute;inset:0;display:grid;place-items:center; background:#05060a;opacity:0;pointer-events:none;transition:opacity 900ms ease;z-index:6} #split.roll.plate .nameplate{opacity:1} #split.roll .nameplate span{font-family:"Shippori Mincho",serif;font-size:26px; letter-spacing:.34em;color:#171512;background:#d8d2c4;padding:16px 26px 16px 34px; border:1px solid #9a927f;box-shadow:0 8px 30px rgba(0,0,0,.7)} /* ================================================================ 2026-09-17 総点検の直し ================ */ /* 戻る／SKIP のつまみは、何かが重なっている画面・アプリ・マンガ・二列では出さない（2-1） */ #ov.act ~ #rewind,#ov.act ~ #skip,#split.on ~ #rewind,#split.on ~ #skip, body[data-form=app] #rewind,body[data-form=app] #skip, body[data-form=manga] #rewind,body[data-form=manga] #skip{display:none} /* オルフェウス：札がせり上がっている間は本文を上へ逃がす（2-3） */ body[data-form=stairs] #ov.act ~ #text{top:12%} /* 録音アプリ：赤い丸は本文の面より上に（2-5） */ .recapp .tm{top:14%} .recapp .wv{top:25%} .recapp .hint{top:34%} .recapp .ring{top:40%} /* 備考の拡大：札は少しだけ大きく、字を大きく（2-6） */ #ov .memozoom .memo{font-size:14.5px;line-height:1.8;color:var(--ink)} #ov .memozoom{transform-origin:center top} /* 版の縁の色の縞（2-15）：三版を器より少し大きく敷く */ #bg .plate.ch,#bg2 .plate.ch{inset:-14px} /* 旧仮名の脇組みを読める級数に（4-4） */ #text .kana{font-size:11px} /* 眼の一枚：面なし・影だけ、字は目の少し下へ（4-2） */ #text.solo.bare{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; top:auto;bottom:16%;transform:none;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 3px #000} /* 曾呂利：空のまま送れない（4-6） */ #app .send.nudge input{animation:nudge 400ms ease} @keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* 最初の一枚のタップの合図（「7」） */ #taphint{position:absolute;right:22px;bottom:18px;z-index:33;font-family:"Noto Sans JP",sans-serif; font-size:9px;letter-spacing:.3em;color:var(--ink-3);opacity:0;transition:opacity 600ms;pointer-events:none} #taphint.on{opacity:1;animation:pulse 2.2s ease-in-out 1s infinite} #taphint::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px; border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);transform:rotate(45deg) translateY(-3px)} /* ---------------------------------------------------------------- 網点の動き（作者了承 2026-09-17） */ @property --br{syntax:'';inherits:true;initial-value:0px} @property --wp{syntax:'';inherits:true;initial-value:-20%} /* 1 三版が順に乗る：黒がローラーで剥がれ、緑→赤→青が順に乗って見当が合う */ #bg2.land{transition:none;animation:landwipe 640ms cubic-bezier(.6,0,.3,1) both} @keyframes landwipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} #bg2.land .plate.ch{animation:landin 520ms cubic-bezier(.2,.8,.2,1) both} #bg2.land .plate.ch.g{animation-name:landin-g;animation-delay:0ms} #bg2.land .plate.ch.r{animation-name:landin-r;animation-delay:140ms} #bg2.land .plate.ch.b{animation-name:landin-b;animation-delay:280ms} @keyframes landin-g{0%{opacity:0}60%{opacity:1}100%{opacity:1}} @keyframes landin-r{0%{opacity:0;transform:translate(14px,8px)}60%{opacity:1} 100%{opacity:1;transform:translate(var(--reg-x),var(--reg-y))}} @keyframes landin-b{0%{opacity:0;transform:translate(-14px,-8px)}60%{opacity:1} 100%{opacity:1;transform:translate(calc(var(--reg-x) * -1),calc(var(--reg-y) * -1))}} /* 3 見当が息をする：空気の画面で赤と青の版が 4 秒でゆっくり開いて閉じる */ body[data-mode=air]:not(.digest) #bg{animation:breathe 4.2s ease-in-out infinite} @keyframes breathe{0%,100%{--br:0px}50%{--br:2.6px}} #bg .plate.ch.r{transform:translate(calc(var(--reg-x) + var(--br)),calc(var(--reg-y) + var(--br) * .55))} #bg .plate.ch.b{transform:translate(calc((var(--reg-x) + var(--br)) * -1),calc((var(--reg-y) + var(--br) * .55) * -1))} /* 4 光が当たる：点の明るさを光源で変える */ #light{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity 900ms ease;--lc:#9fc0ff} #light.on{opacity:1} #light .shade,#light .glow{position:absolute;inset:0;transition:transform var(--lms,1800ms) ease-out} #light .shade{mix-blend-mode:multiply;opacity:.9} #light .glow{mix-blend-mode:screen;opacity:.85} #light.at-bottom .glow{background:radial-gradient(ellipse 70% 42% at 50% 118%,var(--lc),color-mix(in srgb,var(--lc) 35%,transparent) 45%,transparent 70%)} #light.at-bottom .shade{background:radial-gradient(ellipse 70% 60% at 50% 118%,transparent 30%,rgba(0,0,0,.72) 85%)} #light.at-top .glow{background:radial-gradient(ellipse 80% 46% at 50% -14%,var(--lc),color-mix(in srgb,var(--lc) 35%,transparent) 45%,transparent 70%)} #light.at-top .shade{background:radial-gradient(ellipse 80% 64% at 50% -14%,transparent 30%,rgba(0,0,0,.72) 85%)} #light:not(.on) .glow{transform:translateY(60px)} #light.at-top:not(.on) .glow{transform:translateY(-60px)} /* 5 インクが染み替わる：新しい夜のインクが斜めに流れて塗り替える */ #wash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;opacity:0; -webkit-mask-image:linear-gradient(105deg,#000 0,#000 var(--wp),transparent calc(var(--wp) + 18%)); mask-image:linear-gradient(105deg,#000 0,#000 var(--wp),transparent calc(var(--wp) + 18%))} #wash.on{opacity:1;animation:wash 2000ms cubic-bezier(.4,0,.2,1) both} @keyframes wash{from{--wp:-20%}to{--wp:120%}} /* 6 刷りムラと紙：空気の版に常時、薄く */ #mura,#grain{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 900ms ease} #mura{inset:-20%;mix-blend-mode:multiply; background: radial-gradient(ellipse 40% 30% at 30% 40%,rgba(0,0,0,.26),transparent 70%), radial-gradient(ellipse 50% 40% at 75% 70%,rgba(0,0,0,.2),transparent 70%), radial-gradient(ellipse 30% 50% at 60% 20%,rgba(0,0,0,.16),transparent 70%); animation:mura 14s ease-in-out infinite alternate} @keyframes mura{from{transform:translate(0,0) rotate(0)}to{transform:translate(6%,4%) rotate(3deg)}} #grain{mix-blend-mode:overlay; background-image:repeating-radial-gradient(circle at 37% 61%,rgba(255,255,255,.09) 0 .6px,transparent .7px 2.3px)} body[data-mode=air] #mura{opacity:.85} body[data-mode=air] #grain{opacity:.3} /* 8 字が刷られる：立たせる行は赤と青の版がずれて現れ、見当が合って白くなる */ #text .ln.pr .c{position:relative;display:inline-block;opacity:0;animation:pin 380ms forwards} #text .ln.pr .c::before,#text .ln.pr .c::after{content:attr(data-c);position:absolute;left:0;top:0; mix-blend-mode:screen;animation:pinr 380ms forwards;animation-delay:inherit} #text .ln.pr .c::before{color:#ff5a3c} #text .ln.pr .c::after{color:#3c8cff;animation-name:pinb} @keyframes pin{to{opacity:1}} @keyframes pinr{0%{transform:translate(6px,3px);opacity:1}100%{transform:translate(.6px,.3px);opacity:.45}} @keyframes pinb{0%{transform:translate(-6px,-3px);opacity:1}100%{transform:translate(-.6px,-.3px);opacity:.45}} /* 幹の崩れ（作者 2026-09-24）：二重刷り。字に赤と青のずれた写しが付き、重なって消える */ #text.misd .ln:not(.pr){animation:rise 520ms ease forwards,misd var(--mt,1400ms) cubic-bezier(.2,.7,.2,1) backwards} @keyframes misd{ 0%{text-shadow:var(--mx,5px) calc(var(--mx,5px)*.55) 0 rgba(255,90,60,.85),calc(var(--mx,5px)*-1) calc(var(--mx,5px)*-.55) 0 rgba(60,140,255,.85)} 100%{text-shadow:0 0 0 rgba(255,90,60,0),0 0 0 rgba(60,140,255,0)}} /* 一行を立てる画面では、元の刷りのずれ幅と長さを強める */ #text.misd .ln.pr .c,#text.misd .ln.pr .c::before,#text.misd .ln.pr .c::after{animation-duration:var(--mt,1400ms)} #text.misd .ln.pr .c::before{animation-name:pinrx} #text.misd .ln.pr .c::after{animation-name:pinbx} @keyframes pinrx{0%{transform:translate(var(--mx,6px),calc(var(--mx,6px)*.5));opacity:1}100%{transform:translate(.6px,.3px);opacity:.45}} @keyframes pinbx{0%{transform:translate(calc(var(--mx,6px)*-1),calc(var(--mx,6px)*-.5));opacity:1}100%{transform:translate(-.6px,-.3px);opacity:.45}} /* 虫食い：欠けた字が遅れて埋まる */ #text .ln .mo{opacity:0;animation:mofill 600ms ease forwards} @keyframes mofill{to{opacity:1}} /* 終幕：割れる瞬間の各夜の一行目（作者了承「4」） */ #split.roll .nights{position:absolute;left:0;right:0;top:52px;bottom:30px;pointer-events:none;z-index:5; display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 10px; transition:opacity 800ms ease} #split.roll .nights.off{opacity:0} #split.roll .nights .n{font-size:12px;line-height:1.6;width:50%;opacity:0;animation:rise 700ms ease forwards; padding:0 8px} #split.roll .nights .n.o{align-self:flex-start;text-align:left} #split.roll .nights .n.e{align-self:flex-end;text-align:right} #split.roll .nights .n i{display:block;font-style:normal;font-family:"Noto Sans JP",sans-serif;font-size:9px; letter-spacing:.2em;opacity:.7;margin-bottom:2px} /* ---------------------------------------------------------------- 二色刷り（作者決定 2026-09-17） */ /* 影〜中間（lo）は第二のインク（そのインクの暗い側）、明るい面（hi）はそのインク。 包みの中で三版を白く重ねてから色を乗せるので、外の #bgink は切る */ .duo{position:absolute;inset:0;isolation:isolate} /* 三版は縁の色ずれのためだけに残す。素のままだと赤と青が画面全体に紫の被りを作るので薄く */ .duo .plate.ch{opacity:.42} .duo .plate.solid{background:var(--ink-lo,#3f5a8a);transition:background var(--ink-ms,600ms) ease} .duo.hi .plate.solid{background:var(--ink-route)} body.duo #bgink{opacity:0 !important} /* 影の版はインクそのものの色（暗い）。三版は縁の色ずれだけに残す */ #bg .plate.solid,#bg2 .plate.solid{inset:-14px} /* 明るい面の点は影の点の上に乗る（白い紙に二度刷る順） */ .duo.hi{z-index:1} /* ---------------------------------------------------------------- 刷りを抜く（作者決定 2026-09-17・本文の箱を廃止） 箱をやめ、版の下四割の点を黒い点が育って埋め（#pstop）、その黒に字を置く。 #pstop の背景は engine.js の buildPstop() が作る（黒い点が下へ行くほど大きくなる 18 段）。 試作の比較は ?box=old / a / c（boxtest.html）。 */ #grad{opacity:0} #pstop{position:absolute;left:0;right:0;bottom:0;height:48%;z-index:11;pointer-events:none; opacity:1;transition:opacity 420ms ease} body.notext #pstop,body[data-form=manga] #pstop,body[data-form=app] #pstop, body[data-form=manuscript] #pstop,body[data-form=stairs] #pstop,#split.on ~ #pstop{opacity:0} body[data-form=manuscript] #grad{opacity:1} #text{background:none;border:0;box-shadow:none;padding:0 8px;bottom:54px; -webkit-backdrop-filter:none;backdrop-filter:none; text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.45)} body[data-form=manuscript] #text{padding:14px 16px} /* 比較用に残す型 */ /* ---------------------------------------------------------------- 構図の型の試作（2026-09-17・?lay=band|win） band＝帯：版を横長の帯にして上に置く（写真の中ほどの横一筋）。上下は黒 win＝窓：版を小さく刷って闇の中に置く。減光しない（闇＝小さく、の型） */ body[data-lay=band] #bgbox{top:12%;bottom:auto;height:40%} body[data-lay=win] #bgbox{top:14%;bottom:auto;left:13%;right:13%;height:44%} body[data-lay=win] #bg,body[data-lay=win] #bg2{filter:brightness(.9) blur(var(--blur))} body[data-lay=band] #pstop,body[data-lay=win] #pstop{opacity:0} body[data-lay=band] #mura,body[data-lay=band] #grain,body[data-lay=win] #mura,body[data-lay=win] #grain{opacity:0 !important} /* 余白の多い型（作者 2026-09-17「もっと余白のあるパターン」） */ body[data-lay=stamp] #bgbox{top:12%;bottom:auto;left:9%;right:auto;width:48%;height:34%} body[data-lay=stamp] #bg,body[data-lay=stamp] #bg2{filter:brightness(.92) blur(var(--blur))} body[data-lay=card] #bgbox{top:14%;bottom:auto;left:22%;right:22%;height:38%} body[data-lay=card] #bg,body[data-lay=card] #bg2{filter:brightness(.92) blur(var(--blur))} body[data-lay=strip] #bgbox{top:16%;bottom:auto;left:9%;right:9%;height:26%} body[data-lay=stamp] #pstop,body[data-lay=card] #pstop,body[data-lay=strip] #pstop{opacity:0} body[data-lay=stamp] #mura,body[data-lay=stamp] #grain,body[data-lay=card] #mura,body[data-lay=card] #grain, body[data-lay=strip] #mura,body[data-lay=strip] #grain{opacity:0 !important} body[data-lay=band] .plate.fit,body[data-lay=strip] .plate.fit{-webkit-mask-size:cover;mask-size:cover} body[data-lay=stamp][data-form=subtitle] #text,body[data-lay=card][data-form=subtitle] #text,body[data-lay=strip][data-form=subtitle] #text{ left:34px;right:34px;bottom:auto;top:58%;line-height:2.15;letter-spacing:.06em} body[data-lay=card][data-form=subtitle] #text{text-align:left} /* 札・アプリなどの重なり（#ov.act）が出ている間は、型の字の位置を使わず元の位置に戻す */ body[data-lay] #ov.act ~ #text{top:auto;bottom:54px;left:12px;right:12px;line-height:var(--lh);letter-spacing:.04em} /* 字の大きさ（型と一緒に振る） */ body[data-txt=S] #text{font-size:14.5px;line-height:2.1;letter-spacing:.05em} body[data-txt=L] #text{font-size:21px;line-height:2.0;letter-spacing:.04em} /* 色彩を失ったあと（ベンガル 1132）。版・映像・光をまとめて無彩色に。字と札はそのまま */ body.colorless #frame{filter:grayscale(1)} /* 版も字も札も光も、画面ごと無彩色（作者「モノクロになる」） */ body.colorless #bgink{opacity:0 !important} /* 原稿用紙・階段・寄席・マンガ・アプリの型では構図の型を当てない（枠や本文の置き場が別） */ body[data-form=manuscript] #bgbox,body[data-form=stairs] #bgbox,body[data-form=yose] #bgbox,body[data-form=manga] #bgbox,body[data-form=app] #bgbox,body[data-form=hud]:not([data-lay]) #bgbox{ top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;height:auto !important} /* タイトル：看板の一枚（第一夜のインクの二色刷り）。字は大きく、伝票は小さく下へ */ #title{justify-content:flex-start;gap:0;padding-top:9%} #title .print{position:relative;width:84%;height:50%;flex:none;overflow:hidden; --ink-route:#ddd5bb;--ink-lo:#a38c42;--reg-x:2px;--reg-y:1px;isolation:isolate} #title .print .duo .plate.ch{opacity:.42} #title h1{font-size:44px;letter-spacing:.5em;text-indent:.5em;margin-top:26px} #title .kv{width:190px;margin-top:22px;transform:scale(.92)} #title .tap{margin-top:auto;margin-bottom:8px} #title .menu{margin-bottom:34px} /* ---------------------------------------------------------------- 紙の台紙（作者決定 2026-09-17） 紙は余白。版は黒い紙に刷った刷り物のまま台紙に貼る。昼夜・二人一役に関係なく同じ理屈。 ?paper=0 で黒い地（比較用）。型（LAYOUT）が無い画面は上 56% に貼る */ body[data-paper="2"] #frame{background:#efe9db} body[data-paper="2"] #text{color:#17181c;text-shadow:none} body[data-paper="2"] #text .ln.blood{color:#8a1f1f} body[data-paper="2"] #top{color:#6b675e} body[data-paper="2"] #bar i{background:#d6d0c2}body[data-paper="2"] #bar i.read{background:#8b8577}body[data-paper="2"] #bar i.now{background:#17181c} body[data-paper="2"] #skip,body[data-paper="2"] #rewind{color:#6b675e;background:rgba(23,24,28,.06)} body[data-paper="2"] #skip .lbl,body[data-paper="2"] #rewind .lbl{color:#6b675e} body[data-paper="2"] #mura,body[data-paper="2"] #grain,body[data-paper="2"] #pstop{opacity:0 !important} body[data-paper="2"] #bgbox{background:#0a0b0e;box-shadow:0 2px 0 rgba(0,0,0,.25)} body[data-paper="2"]:not([data-lay]) #bgbox{top:0;bottom:44%;left:0;right:0} /* 版が画面いっぱいの型（階段・寄席・HUD・原稿用紙・マンガ・アプリ）では黒い地と明るい字のまま */ body[data-paper="2"][data-form=stairs] #frame,body[data-paper="2"][data-form=yose] #frame,body[data-paper="2"][data-form=hud] #frame, body[data-paper="2"][data-form=manuscript] #frame,body[data-paper="2"][data-form=app] #frame{background:var(--void)} body[data-paper="2"][data-form=stairs] #top,body[data-paper="2"][data-form=yose] #top,body[data-paper="2"][data-form=hud] #top,body[data-paper="2"][data-form=manuscript] #top{color:inherit} body[data-paper="2"][data-form=stairs] #bgbox,body[data-paper="2"][data-form=yose] #bgbox,body[data-paper="2"][data-form=hud] #bgbox, body[data-paper="2"][data-form=manuscript] #bgbox,body[data-paper="2"][data-form=manga] #bgbox,body[data-paper="2"][data-form=app] #bgbox{box-shadow:none} /* タイトル・結末・送り状も紙 */ body[data-paper="2"] .scr{background:#efe9db;color:#17181c} body[data-paper="2"] #title h1{color:#17181c} body[data-paper="2"] #title .tap{color:#8b8577} body[data-paper="2"] #title .menu{color:#6b675e} body[data-paper="2"] #title .print{background:#0a0b0e} /* 立たせる一行・列挙・面なし・字のない画面は版を全面に（紙の上で字が版に掛からないように） */ body[data-paper="2"]:has(#text.solo) #bgbox,body[data-paper="2"]:has(#text.listing) #bgbox,body[data-paper="2"]:has(#text.bare) #bgbox, body[data-paper="2"].notext:not([data-form=hud]) #bgbox{top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;width:auto !important;height:auto !important;box-shadow:none} /* 版のない画面（黒の間・字だけ）は台紙だけ。空の黒い枠を貼らない */ body[data-paper="2"] #bgbox:not(:has(.plate)):not(:has(#px.on)){opacity:0} /* 紙は光らない。スマホの光（#light）は版いっぱいの型でだけ */ body[data-paper="2"]:not([data-form=stairs]):not([data-form=yose]):not([data-form=hud]):not([data-form=manuscript]):not([data-form=app]) #light{opacity:0 !important} /* システムの札（非常階段のルール説明など）。紙の伝票と同じ言葉で、画面の真ん中 */ .sysmsg{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);z-index:36; background:#efe9db;color:#17181c;padding:18px 18px 14px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.5); font-family:"Noto Sans JP",sans-serif;font-size:12px;line-height:1.9;letter-spacing:.04em} .sysmsg .lbl{font-size:9px;letter-spacing:.3em;color:#6b675e;margin-bottom:8px} .sysmsg .tap{margin-top:12px;font-size:9px;letter-spacing:.26em;color:#8b8577;text-align:right} body[data-form=hud][data-lay=win] #bgbox{top:12%;bottom:auto;left:18%;right:18%;height:36%;background:#0a0b0e;z-index:16} #manga .panel.dark{background:#08090c} #manga .panel.dark .plate{background:#d98a3f;mix-blend-mode:normal} /* 柿インク */ body.vidplaying #candles{opacity:0} /* ---------------------------------------------------------------- 狐のマンガ：頁ごとのコマ割り（2026-09-17 夜） */ #manga.pages{justify-content:flex-start;gap:7px;padding:52px 10px 12px} #manga.pages .tobira{font-family:Shippori,serif;font-size:12px;letter-spacing:.2em;color:#1a1a18;text-align:right; padding:0 2px 2px;border-bottom:1.5px solid #141414} #manga.pages .row{display:flex;gap:7px;min-height:0} #manga.pages .panel{flex:1 1 0;min-height:0;min-width:0;border:2.5px solid #141414;background:var(--paper); position:relative;overflow:hidden;animation:none;opacity:1} #manga.pages .panel.col{display:flex;flex-direction:column;gap:7px;border:0;overflow:visible;background:none} #manga.pages .panel.col > .row{flex:1 1 0} #manga.pages .panel.bleed{margin-left:-10px;margin-right:-10px;border-left:0;border-right:0} #manga.pages .panel.dark{background:#08090c} #manga.pages .panel.dark .plate{background:#d98a3f;mix-blend-mode:normal} #manga.pages .panel.last .plate{background:#e8e4da} #manga.pages .panel > .plate{position:absolute;inset:0;opacity:0;transition:opacity 420ms ease} #manga.pages .panel.in > .plate{opacity:1} #manga.pages .panel:not(.in)::after{content:"";position:absolute;inset:0;background:var(--paper)} #manga.pages .panel .shadow{right:10%;bottom:0;width:36%;height:86%;animation:shadowIn 700ms ease both} @keyframes shadowIn{from{opacity:0;transform:translateY(8px)}} #manga.pages .panel.dark .shadow{background:#000;box-shadow:0 0 24px 8px rgba(0,0,0,.9)} #manga.pages .panel:not(.col){display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:6px} #manga.pages .cap{position:relative;max-width:80%;background:var(--paper);border:1.5px solid #141414; padding:4px 7px;font-size:12px;line-height:1.7;z-index:3;animation:panelIn 300ms ease both} #manga.pages .cap:nth-of-type(even){align-self:flex-end} #manga.pages .cap.c{align-self:center;margin:auto 0;max-width:86%;text-align:center} #manga.pages .cap.br{align-self:flex-end;margin-top:auto} #manga.pages .cap.float{position:relative;max-width:none;margin-top:4px} #manga.pages .floatcap{flex:0 0 auto} #manga.pages .bub{position:relative;max-width:78%;z-index:4;font-size:12.5px;padding:8px 12px;margin-bottom:8px;animation:panelIn 260ms ease both} #manga.pages .bub.left{align-self:flex-start}#manga.pages .bub.right{align-self:flex-end} #manga.pages .bub::after{content:"";position:absolute;bottom:-12px;width:0;height:0;border:8px solid transparent;border-top:12px solid #141414} #manga.pages .bub.left::after{left:22px}#manga.pages .bub.right::after{right:22px} #manga.pages .cap{font-size:11.5px;line-height:1.65} #manga.pages .panel:not(.col){overflow:hidden} #manga.pages .panel:not(.col):has(.ono){overflow:visible} #manga.pages .bub.whisper{border-style:dashed;font-weight:500} #manga.pages .bub.whisper::after{display:none} #manga.pages .bub.shout{border-radius:6px;font-size:14px;letter-spacing:.02em; clip-path:polygon(0 8%,6% 0,14% 8%,24% 0,34% 8%,46% 0,58% 8%,70% 0,82% 8%,92% 0,100% 8%,100% 92%,92% 100%,82% 92%,70% 100%,58% 92%,46% 100%,34% 92%,22% 100%,10% 92%,0 100%)} #manga.pages .bub.shout::after{display:none} #manga.pages .bub.thorn::after{display:none} #manga.pages .ono{z-index:5;transform:translate(-50%,-50%) rotate(-8deg);animation:onoIn 220ms cubic-bezier(.2,1.6,.4,1) both} @keyframes onoIn{from{transform:translate(-50%,-50%) rotate(-8deg) scale(.4);opacity:0}} #manga.pages .panel{overflow:visible} #manga.pages .panel > .plate,#manga.pages .panel .focus,#manga.pages .panel .shadow,#manga.pages .panel .smoke{clip-path:inset(0)} #manga.pages .panel.dark .cap{background:var(--paper)} #manga.pages .panel.full{margin:-52px -10px -12px;border:0;padding-top:62px} #manga.pages .cap{z-index:4}#manga.pages .smoke{z-index:1}#manga.pages .ono{z-index:5} #manga.pages .panel.full .ono{font-size:84px} #manga.pages .panel.dark .bub{box-shadow:0 0 0 2px #08090c} /* 瞼が閉じ切る前は字の下がまだ紙で、白い字が紙に沈んでいた（幹 42・作者 2026-09-24）。瞼の間は字の下に黒い座布団 */ body[data-paper="2"].lids #text:not(:empty){background:rgba(8,9,12,.78) !important;padding:12px 14px !important;border-radius:2px} body[data-paper="2"].lids #top{color:inherit} /* SNS の字が本文より強い。少しぼかして沈め、本文の下に黒を敷く（作者 2026-09-19） */ #ov .sns{filter:blur(.7px) brightness(.72)} #ov[data-kind=sns] ~ #text{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.82) 22%);padding-top:34px;left:0;right:0;padding-left:20px;padding-right:20px} /* 結末の一枚は白い点の版。紙の地だと見えない（幹の終わりが白紙に見えていた 2026-09-19）。ここだけ黒地に戻す */ body[data-paper="2"] #end.scr{background:#0a0b0e;color:var(--ink)} /* 送り状：一画面に収める＋紙の上で読める字に（作者 2026-09-19）。 ルートの色は小さな絵（黒地）にだけ使い、題は黒い字。行と日付の間を詰める */ #flow{padding:34px 0 10px;overflow-y:hidden} #flow.on{display:flex;flex-direction:column} #flow h2{margin-bottom:8px} #flow .spine{width:auto;margin:0 22px 0 30px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between} #flow .day{margin-bottom:0} #flow .day>.d{padding:2px 0;font-size:9px} #flow .day>.d::before{top:6px} #flow .row{padding:2px 0 2px 8px;font-size:12px;gap:8px} #flow .row .th{width:28px;height:28px;flex:0 0 28px} #flow .row.pick{min-height:34px} #flow .row .nm{line-height:1.35} #flow .back{margin:6px auto 0;padding:7px 22px;min-height:36px;flex:0 0 auto} body[data-paper="2"] #flow .row .nm{color:#17181c} body[data-paper="2"] #flow .row:not(.got) .nm,body[data-paper="2"] #flow .row .hid{color:#8b8577} body[data-paper="2"] #flow .spine::before{background:#8b8577} body[data-paper="2"] #flow .day>.d{color:#6b675e} body[data-paper="2"] #flow .day>.d::before{background:#6b675e;border-color:#efe9db} body[data-paper="2"] #flow .back{color:#6b675e;border-color:#8b8577} /* 数文字だけ次の行に落ちるのを防ぐ（作者 2026-09-19）。行の長さを揃えて折る。 横書きの本文だけ。原稿用紙（縦書き）とマンガは対象外 */ /* balance は「とこ／ろ」のように語の途中で割って見苦しいので pretty（末尾の数文字だけを防ぐ）に。 語の切れ目で折る本対応は、二行への割り直しの時にビルド側で入れる */ body:not([data-form=manuscript]) #text .ln{text-wrap:pretty;line-break:strict} /* 連続タップの拡大を止める（iOS）。器の外の黒い余白やボタンも含めて */ html,body,button,.scr,#title{touch-action:manipulation} /* トップへ戻る。上の中央に小さく。タイトル・送り状・結末の面が出ている間は隠す */ #home{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:34;display:flex; align-items:center;justify-content:center;min-width:54px;min-height:32px;padding:4px 10px; border:1px solid var(--line);border-radius:4px;background:rgba(10,12,16,.5); font-family:"Noto Sans JP",system-ui,sans-serif;cursor:pointer;-webkit-user-select:none;user-select:none;opacity:.75} #home .lbl{font-size:9px;letter-spacing:.2em;color:var(--ink-2)} #frame:has(.scr.on) #home,#frame:has(#jump) #home,#ov.act ~ #home,#split.on ~ #home,body.rewound #home{display:none} body[data-paper="2"] #home{background:rgba(23,24,28,.06);border-color:#c9c2b2} body[data-paper="2"] #home .lbl{color:#6b675e} #homeAsk{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.55)} #homeAsk .box{width:74%;background:#efe9db;color:#17181c;border:1px solid #17181c;padding:22px 18px 16px;text-align:center; font-family:"Noto Sans JP",system-ui,sans-serif} #homeAsk p{font-size:16px;letter-spacing:.04em} #homeAsk p.sub{font-size:12px;color:#6b675e;margin-top:6px} #homeAsk .btns{display:flex;gap:10px;margin-top:18px} #homeAsk button{flex:1;min-height:44px;background:none;border:1px solid #17181c;color:#17181c;font-size:12px;letter-spacing:.2em;cursor:pointer} #homeAsk button.yes{background:#17181c;color:#efe9db} /* ---- 狐のマンガ：縦スクロール版（試作 ?manga=scroll）。頁めくり版の見た目（#manga.pages）を土台に、積み方だけ変える */ #manga.scrollmode{display:block;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch; overscroll-behavior:contain;padding:64px 10px 0;gap:0;cursor:default;scrollbar-width:none} #manga.scrollmode::-webkit-scrollbar{display:none} #manga.scrollmode .pg{margin-bottom:72px} #manga.scrollmode .tobira{margin-bottom:14px} #manga.scrollmode .row{flex:none;margin-bottom:22px} #manga.scrollmode .panel.col > .row{margin-bottom:0;flex:1 1 0} #manga.scrollmode .row.textrow{margin-bottom:26px} #manga.scrollmode .panel.plain{border:0;background:none;padding:0 6px;overflow:visible} #manga.scrollmode .panel.plain::after{display:none} #manga.scrollmode .panel.plain .cap{border:0;background:none;padding:0;font-size:13px;line-height:1.95;max-width:none;align-self:stretch;text-align:left} #manga.scrollmode .panel.plain .cap.c{text-align:center} #manga.scrollmode .panel.plain .bub{margin-top:6px} #manga.scrollmode .panel.full{margin:0;padding-top:8px} #manga.scrollmode .cap.float{border:0;background:none;padding:0 6px;font-size:13px;line-height:1.95;margin:0 0 26px} /* 暗闇の会話：長い黒い帯。台詞は間をあけて置き、巻くと一つずつ現れる */ #manga.scrollmode .pg.night{background:#08090c;margin:0 -10px 72px;padding:90px 10px 110px} #manga.scrollmode .pg.night .row{height:auto !important;margin-bottom:0} #manga.scrollmode .pg.night .panel{border:0;background:none;gap:120px;padding:60px 6px;overflow:visible} #manga.scrollmode .pg.night .panel::after{display:none} /* 画面に入った時に出す */ #manga.scrollmode .it{opacity:0;transform:translateY(10px);transition:opacity 420ms ease,transform 420ms ease;animation:none} #manga.scrollmode .it.in{opacity:1;transform:none} #manga.scrollmode .ono.it{transform:translate(-50%,-50%) rotate(-6deg) scale(.6)} #manga.scrollmode .ono.it.in{transform:translate(-50%,-50%) rotate(-6deg) scale(1);transition:opacity 160ms ease,transform 260ms cubic-bezier(.2,1.6,.4,1)} #manga.scrollmode .fin{height:46vh;display:grid;place-items:center;color:#8b8577;font-size:12px} #manga.scrollmode .fin span{animation:finBob 1400ms ease-in-out infinite} @keyframes finBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* 巻物の上に日付・時計・進捗が重なって読みにくい。縦スクロール中は隠し、「トップ」だけ紙の札で残す */ #frame:has(#manga.scrollmode) #top,#frame:has(#manga.scrollmode) #bar{display:none} #frame:has(#manga.scrollmode) #home{top:10px;background:#efe9db;opacity:.92} #manga.scrollmode{padding-top:52px} /* 縦スクロール中は、マンガの上に被さる透明な層（#stage ほか）を指が素通りするようにする。 そのままだと指が #stage に当たり、器の touch-action:none が効いて巻けなかった（作者報告 2026-09-19） */ #frame:has(#manga.scrollmode) #stage,#frame:has(#manga.scrollmode) #grad,#frame:has(#manga.scrollmode) #behind, #frame:has(#manga.scrollmode) #light,#frame:has(#manga.scrollmode) #back,#frame:has(#manga.scrollmode) #text{pointer-events:none} #frame:has(#manga.scrollmode){touch-action:pan-y} #manga.scrollmode,#manga.scrollmode *{touch-action:pan-y} /* マンガより上にある層は種類が多い（#stage・#dropL ほか）。縦スクロール中は、巻物と「トップ」以外は全部素通りにする */ #frame:has(#manga.scrollmode) > *:not(#manga):not(#home):not(#homeAsk), #frame:has(#manga.scrollmode) > *:not(#manga):not(#home):not(#homeAsk) *{pointer-events:none !important} /* ---- 縦スクロール専用の絵コンテ（.pg.sb）。地の文は余白に、絵は横幅いっぱい、吹き出しは絵の端から食み出す */ #manga.scrollmode .pg.sb{margin-bottom:40px} #manga.scrollmode .nar{font-family:Shippori,"Shippori Mincho",serif;font-size:14.5px;line-height:2.05;letter-spacing:.05em; color:#17181c;padding:0 16px;margin:0 0 6px;text-wrap:pretty} #manga.scrollmode .nar.c{text-align:center;padding:0 26px} #manga.scrollmode .nar.r{text-align:right} #manga.scrollmode .gap{flex:none} #manga.scrollmode .dots{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px} #manga.scrollmode .dots i{width:4px;height:4px;border-radius:50%;background:#8b8577} #manga.scrollmode .shot{position:relative;margin:0 auto} #manga.scrollmode .shot.bleed{margin-left:-10px;margin-right:-10px} #manga.scrollmode .shot.l{margin-left:4px;margin-right:auto} #manga.scrollmode .shot.r{margin-right:4px;margin-left:auto} #manga.scrollmode .shot .fr{position:absolute;inset:0;display:block;padding:0;border:2.5px solid #141414;overflow:hidden;background:var(--paper)} #manga.scrollmode .shot.bleed .fr{border-left:0;border-right:0} #manga.scrollmode .shot .fr.dark{background:#08090c} #manga.scrollmode .shot.round{z-index:3} #manga.scrollmode .shot.round .fr{border-radius:50%;border-width:3px;box-shadow:0 0 0 5px #efe9db} #manga.scrollmode .shot .cam{position:absolute;inset:0;transform-origin:50% 50%} #manga.scrollmode .shot .cam .plate{position:absolute;inset:0;opacity:0;transition:opacity 520ms ease} #manga.scrollmode .shot .fr.in .cam .plate{opacity:1} #manga.scrollmode .shot .fr:not(.in)::after{display:none} /* 枠を消して紙（や闇）に溶かす */ #manga.scrollmode .shot .fr[class*=fade-]{border:0} #manga.scrollmode .shot .fr.fade-top{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%)} #manga.scrollmode .shot .fr.fade-bottom{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 30%);mask-image:linear-gradient(to top,transparent 0,#000 30%)} #manga.scrollmode .shot .fr.fade-both{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)} /* 吹き出し：大きく、絵の端から外へ食み出す */ #manga.scrollmode .pg.sb .bub{font-size:14.5px;line-height:1.55;padding:11px 15px;max-width:78%;margin:0;box-shadow:3px 3px 0 #141414} #manga.scrollmode .pg.sb .bub.abs{position:absolute;z-index:5} #manga.scrollmode .pg.sb .bub.abs.left{left:-2px} #manga.scrollmode .pg.sb .bub.abs.right{right:-2px} #manga.scrollmode .shot.bleed .bub.abs.left{left:12px} #manga.scrollmode .shot.bleed .bub.abs.right{right:12px} #manga.scrollmode .bubrow{display:flex;padding:0 6px} #manga.scrollmode .bubrow.right{justify-content:flex-end} #manga.scrollmode .pg.sb .bub.shout{font-size:17px;letter-spacing:.03em;border-width:3px} #manga.scrollmode .pg.sb .bub.whisper{box-shadow:none;font-size:14px} /* 描き文字と揺れ */ #manga.scrollmode .shot .ono{position:absolute;left:50%;z-index:6;white-space:nowrap} #manga.scrollmode .shot .ono.it{transform:translate(-50%,-50%) rotate(var(--rot,-6deg)) scale(.4)} #manga.scrollmode .shot .ono.it.in{transform:translate(-50%,-50%) rotate(var(--rot,-6deg)) scale(1);transition:opacity 90ms ease,transform 240ms cubic-bezier(.2,1.8,.4,1)} #manga.scrollmode .shot.shake .fr{animation:sbShake 380ms cubic-bezier(.3,.7,.4,1) both} @keyframes sbShake{0%{transform:translate(0,0)}15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-4px)}45%{transform:translate(-5px,2px)}60%{transform:translate(4px,-2px)}80%{transform:translate(-2px,1px)}100%{transform:none}} /* print＝白い点の版を、黒地に紙の色で刷る（ふつうの白黒の網点写真になる）。紙刷りの版が弱い絵に使う */ #manga.scrollmode .shot .fr.print{background:#141414} #manga.scrollmode .shot .fr.print .plate{background:#efe9db;mix-blend-mode:normal} /* 絵コンテの絵は必ず枠いっぱい（contain 指定の版で横に白い帯が出ていた） */ #manga.scrollmode .shot .cam .plate,#manga.scrollmode .shot .cam .plate.fit{-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center} /* 題は中央に小さく。「トップ」は右上の隅へ寄せて吹き出しに被らないように */ #manga.scrollmode .tobira{text-align:center;font-size:10.5px;letter-spacing:.12em;text-wrap:balance;border-bottom:0;padding:0 30px;color:#6b675e} #frame:has(#manga.scrollmode) #home{left:auto;right:8px;top:8px;transform:none;min-width:0;min-height:28px;padding:3px 9px;opacity:.7} #manga.scrollmode{padding-top:44px} /* ---- 夜の区間：紙から黒へ。中の地の文は明るい字 */ #manga.scrollmode .sky{margin:0 -10px} #manga.scrollmode .sky.down{background:linear-gradient(to bottom,#efe9db 0,#b9b3a4 22%,#4a4841 52%,#15161a 80%,#08090c 100%)} #manga.scrollmode .sec.night{background:#08090c;margin:0 -10px;padding:30px 10px 120px} #manga.scrollmode .sec.night .nar{color:#e8e4da} #manga.scrollmode .sec.night .dots i{background:#6b675e} #manga.scrollmode .sec.night .shot .fr{border-color:#2a2b30} #manga.scrollmode .sec.night .shot .fr:not(.dark):not(.print){border-color:#efe9db} #manga.scrollmode .sec.night .shot.round .fr{box-shadow:0 0 0 5px #08090c;border-color:#d98a3f} #manga.scrollmode .sec.night .bub{box-shadow:3px 3px 0 #d98a3f} #manga.scrollmode .sec.night .bub.whisper{box-shadow:none} #frame:has(#manga.scrollmode) #frame,#manga.scrollmode .fin{background:transparent} #manga.scrollmode .sec.night + .fin,#manga.scrollmode .pg.sb:has(.sec.night:last-child) ~ .fin{background:#08090c;margin:0 -10px;color:#6b675e} #manga.scrollmode .pg.sb:has(.sec.night:last-child){margin-bottom:0} /* 窓を背に立つ影。下へ行くほど濃く、太くなる */ #manga.scrollmode .shot .figure{position:absolute;left:50%;bottom:0;width:46%;height:74%;transform:translateX(-50%); background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.92) 16%,#000 100%); border-radius:46% 46% 0 0 / 14% 14% 0 0;filter:blur(3px)} /* 狐火 */ #manga.scrollmode .trail{position:relative} #manga.scrollmode .trail .fire{position:absolute;border-radius:50%;display:block; background:radial-gradient(circle,#ffd9a0 0,#f0a860 28%,#d98a3f 52%,rgba(217,138,63,0) 72%); -webkit-mask-image:radial-gradient(#000 46%,transparent 50%);mask-image:radial-gradient(#000 46%,transparent 50%); -webkit-mask-size:5px 5px;mask-size:5px 5px} #manga.scrollmode .trail .fire.it{opacity:0;transform:scale(.3)} #manga.scrollmode .trail .fire.it.in{opacity:var(--o,1);transform:scale(1);transition:opacity 300ms ease,transform 420ms cubic-bezier(.2,1.5,.4,1)} /* 立つ影に頭と肩を付ける（四角い板に見えていた） */ #manga.scrollmode .shot .figure{width:42%;height:66%;border-radius:50% 50% 0 0 / 22% 22% 0 0;background:linear-gradient(to bottom,#000 0,#000 100%);filter:blur(2.5px)} #manga.scrollmode .shot .figure::before{content:"";position:absolute;left:50%;top:-17%;width:46%;aspect-ratio:1 / 1.12;transform:translateX(-50%);border-radius:50%;background:#000} /* ---- 小さな動き（fx）。画面に入った時に一度だけ。絵は .shot.in、字は .it.in で始まる（作者 2026-09-19「バタンみたいな動きを増やしたい」） */ #manga.scrollmode .bub.it.in.fx-jitter{animation:fxJitter 460ms cubic-bezier(.3,.7,.4,1) both} @keyframes fxJitter{0%{opacity:0;transform:scale(.8)}18%{opacity:1;transform:scale(1.07) rotate(-1.5deg)}34%{transform:translate(-4px,2px) rotate(1.2deg)}50%{transform:translate(4px,-2px) rotate(-1deg)}66%{transform:translate(-3px,1px)}82%{transform:translate(2px,0)}100%{opacity:1;transform:none}} #manga.scrollmode .bub.it.in.fx-grow{animation:fxGrow 700ms cubic-bezier(.2,1.5,.4,1) both;transform-origin:100% 50%} @keyframes fxGrow{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1.04)}} #manga.scrollmode .bub.it.fx-soft{transition:opacity 1100ms ease,transform 1100ms ease} #manga.scrollmode .nar.it.fx-slow{transition:opacity 1500ms ease,transform 1500ms ease} #manga.scrollmode .nar.it.in.fx-bump{animation:fxBump 620ms ease-out both} @keyframes fxBump{0%{opacity:0;transform:translateY(0)}12%{opacity:1;transform:translateY(7px)}24%{transform:translateY(-3px)}38%{transform:translateY(6px)}52%{transform:translateY(-2px)}68%{transform:translateY(4px)}100%{opacity:1;transform:none}} #manga.scrollmode .nar.it.in.fx-echo{animation:fxEcho 2200ms ease-out both} @keyframes fxEcho{0%{opacity:0;letter-spacing:.05em}35%{opacity:1}100%{opacity:1;letter-spacing:.2em}} #manga.scrollmode .shot.fx-pop,#manga.scrollmode .shot.fx-slideL,#manga.scrollmode .shot.fx-slideR,#manga.scrollmode .shot.fx-wobble{opacity:0} #manga.scrollmode .shot.in.fx-pop{animation:fxPop 420ms cubic-bezier(.2,1.6,.4,1) both} @keyframes fxPop{0%{opacity:0;transform:scale(.72)}100%{opacity:1;transform:none}} #manga.scrollmode .shot.in.fx-slideL{animation:fxSlideL 380ms cubic-bezier(.2,1.3,.4,1) both} @keyframes fxSlideL{0%{opacity:0;transform:translateX(-90px) rotate(-4deg)}100%{opacity:1;transform:none}} #manga.scrollmode .shot.in.fx-slideR{animation:fxSlideR 340ms cubic-bezier(.2,1.3,.4,1) both} @keyframes fxSlideR{0%{opacity:0;transform:translateX(90px) rotate(3deg)}100%{opacity:1;transform:none}} #manga.scrollmode .shot.in.fx-wobble{animation:fxWobble 1100ms ease-out both} @keyframes fxWobble{0%{opacity:0;transform:scale(.6) rotate(-14deg)}22%{opacity:1;transform:scale(1.05) rotate(9deg)}44%{transform:rotate(-6deg)}66%{transform:rotate(4deg)}84%{transform:rotate(-2deg)}100%{opacity:1;transform:none}} /* カメラがゆっくり寄る／寝息／カーテン／コロコロ。cam の transform（切り方）とは別の scale・translate・rotate で動かす */ #manga.scrollmode .shot.in.fx-drift .cam{animation:fxDrift 9s ease-out both} @keyframes fxDrift{from{scale:1}to{scale:1.09}} #manga.scrollmode .shot.in.fx-breathe .cam{animation:fxBreathe 3.6s ease-in-out 3 both} @keyframes fxBreathe{0%,100%{scale:1}50%{scale:1.035}} #manga.scrollmode .shot.in.fx-sway .cam{animation:fxSway 3.2s ease-in-out 2 both} @keyframes fxSway{0%,100%{translate:0 0;rotate:0deg}25%{translate:5px 0;rotate:.5deg}75%{translate:-5px 0;rotate:-.5deg}} #manga.scrollmode .shot.in.fx-roll .cam{animation:fxRoll 1200ms ease-in-out both} @keyframes fxRoll{0%{translate:0 -14px}50%{translate:0 10px}100%{translate:0 0}} /* 立つ影は下から伸びてくる */ #manga.scrollmode .shot .figure{opacity:0} #manga.scrollmode .shot.in .figure{animation:figRise 2000ms cubic-bezier(.2,.7,.2,1) 200ms both} @keyframes figRise{0%{opacity:0;transform:translate(-50%,46%)}100%{opacity:1;transform:translate(-50%,0)}} /* ボンッ：一瞬白く飛んで、煙の玉が広がって消える */ #manga.scrollmode .shot.flash.shake::before{content:"";position:absolute;inset:0;z-index:7;background:#fff;pointer-events:none;animation:fxFlash 320ms ease-out both} @keyframes fxFlash{0%{opacity:.95}100%{opacity:0}} #manga.scrollmode .puffs{position:absolute;inset:0;z-index:6;pointer-events:none} #manga.scrollmode .puffs i{position:absolute;left:50%;top:34%;width:70px;height:70px;margin:-35px;border-radius:50%;background:#efe9db;opacity:0} #manga.scrollmode .shot.shake .puffs i{animation:fxPuff 900ms ease-out both} #manga.scrollmode .puffs i:nth-child(1){--dx:-120px;--dy:-60px}#manga.scrollmode .puffs i:nth-child(2){--dx:110px;--dy:-80px;animation-delay:40ms} #manga.scrollmode .puffs i:nth-child(3){--dx:-90px;--dy:80px;animation-delay:80ms}#manga.scrollmode .puffs i:nth-child(4){--dx:130px;--dy:60px;animation-delay:60ms} #manga.scrollmode .puffs i:nth-child(5){--dx:0px;--dy:-130px;animation-delay:20ms}#manga.scrollmode .puffs i:nth-child(6){--dx:10px;--dy:120px;animation-delay:100ms} @keyframes fxPuff{0%{opacity:.95;transform:translate(0,0) scale(.3)}70%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.7)}} /* 狐火はゆらぐ */ #manga.scrollmode .trail .fire.it.in{animation:fxFlicker 1300ms ease-in-out infinite alternate} #manga.scrollmode .trail .fire:nth-child(2n){animation-delay:-400ms}#manga.scrollmode .trail .fire:nth-child(3n){animation-delay:-800ms} @keyframes fxFlicker{0%{scale:.92;opacity:calc(var(--o,1) * .75)}100%{scale:1.1;opacity:var(--o,1)}} @media (prefers-reduced-motion:reduce){#manga.scrollmode .shot .cam,#manga.scrollmode .trail .fire{animation:none !important}} /* #stage は「触れる物」を置く透明な層で、常に全面に被さっている。空の時も指を受けてしまい、 配達アプリの入力欄と送信ボタンに指が届かず詰んでいた（曾呂利 1409・作者報告 2026-09-19）。 層そのものは素通りにして、中に置いた物だけが指を受ける */ #stage{pointer-events:none} #stage > *{pointer-events:auto} /* 左右のドロップ枠（#dropL / #dropR）はもうどこからも使っていないが、画面の左右を覆って指を受けていた */ .drop{pointer-events:none} /* オルフェウス：失敗の知らせ。黒地に白い字（作者 2026-09-19） */ .failnote{position:absolute;inset:0;z-index:58;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:34px;color:#e8e4da;text-align:center;animation:failIn 500ms ease both;cursor:pointer} .failnote p{font-family:Shippori,"Shippori Mincho",serif;font-size:16px;line-height:2.1;letter-spacing:.08em} .failnote span{font-family:"Noto Sans JP",system-ui,sans-serif;font-size:9px;letter-spacing:.3em;color:#6b675e} @keyframes failIn{from{opacity:0}to{opacity:1}} /* ---- 作者の手描き（線画）。線そのものにインクを乗せる。contain で切らない */ #manga.scrollmode .draws{position:relative} #manga.scrollmode .line{position:absolute;display:block;background:var(--lc,#141414); -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} #manga.scrollmode .sec.night .line{background:var(--lc,#efe9db)} #manga.scrollmode .shot .line{z-index:4} #manga.scrollmode .line.it{opacity:0;transform:var(--tf,none) translateY(10px)} #manga.scrollmode .line.it.in{opacity:1;transform:var(--tf,none);transition:opacity 360ms ease,transform 360ms ease} #manga.scrollmode .line.it.in.fx-pop{animation:lnPop 460ms cubic-bezier(.2,1.6,.4,1) both} @keyframes lnPop{0%{opacity:0;scale:.6}100%{opacity:1;scale:1}} #manga.scrollmode .line.it.in.fx-slideL{animation:lnSlideL 420ms cubic-bezier(.2,1.3,.4,1) both} @keyframes lnSlideL{0%{opacity:0;translate:-110px 0;rotate:-6deg}100%{opacity:1;translate:0 0;rotate:0deg}} #manga.scrollmode .line.it.in.fx-slideR{animation:lnSlideR 420ms cubic-bezier(.2,1.3,.4,1) both} @keyframes lnSlideR{0%{opacity:0;translate:110px 0;rotate:6deg}100%{opacity:1;translate:0 0;rotate:0deg}} #manga.scrollmode .line.it.in.fx-run{animation:lnRun 520ms steps(1) 5 both,lnIn 200ms ease both} @keyframes lnRun{0%{translate:0 0}25%{translate:-5px -7px}50%{translate:0 0}75%{translate:5px -7px}} @keyframes lnIn{from{opacity:0}to{opacity:1}} #manga.scrollmode .line.it.in.fx-breathe{animation:lnBreathe 3.4s ease-in-out 4 both,lnIn 500ms ease both} @keyframes lnBreathe{0%,100%{scale:1}50%{scale:1.03 1.05}} #manga.scrollmode .line.it.in.fx-wobble{animation:lnWobble 1000ms ease-out both} @keyframes lnWobble{0%{opacity:0;rotate:-12deg;scale:.7}25%{opacity:1;rotate:8deg;scale:1.04}50%{rotate:-5deg}75%{rotate:3deg}100%{opacity:1;rotate:0deg;scale:1}} #manga.scrollmode .line.it.in.fx-burst{animation:lnBurst 520ms cubic-bezier(.1,.8,.2,1) both} @keyframes lnBurst{0%{opacity:0;scale:.2}60%{opacity:1}100%{opacity:1;scale:1}} #manga.scrollmode .line.it.in.fx-puff{animation:lnPuff 1400ms ease-out both} @keyframes lnPuff{0%{opacity:0;scale:.5}30%{opacity:1}100%{opacity:1;scale:1.08}} #manga.scrollmode .line.it.in.fx-away{animation:lnAway 900ms cubic-bezier(.3,.1,.3,1) both} @keyframes lnAway{0%{opacity:0;translate:-60px 60px;scale:1.25}30%{opacity:1}100%{opacity:1;translate:0 0;scale:1}} /* 手描きの描き文字 */ #manga.scrollmode .shot .ono.img{aspect-ratio:12 / 5; filter:drop-shadow(2.5px 2.5px 0 #141414) drop-shadow(-1.5px -1.5px 0 #141414) drop-shadow(1.5px -1.5px 0 #141414) drop-shadow(-1.5px 1.5px 0 #141414)} #manga.scrollmode .shot .ono.img i{position:absolute;inset:0;display:block;background:var(--lc,#f0a860);-webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} #manga.scrollmode .draws .ono.img{position:absolute} /* ---- 版いっぱいの型（原稿用紙・階段・寄席・HUD）で、明るい版の上の白い字が読めない（作者 2026-09-19： 永訣 562「白にかぶる文字」／オルフェウス 1674「白い字が読みづらい」／死神 1863「黄色い地に白文字」）。 箱を外した時（刷りを抜く）に、これらの型でも字の下の暗がりが無くなっていた。箱には戻さず、字の下だけ暗がりを敷く */ body[data-form=manuscript] #text{background:linear-gradient(to left,rgba(7,8,11,.86) 0,rgba(7,8,11,.86) 72%,rgba(7,8,11,0) 100%); text-shadow:0 1px 2px rgba(0,0,0,.9)} body[data-form=stairs] #text{left:0;right:0;padding:26px 22px; background:radial-gradient(ellipse 62% 70% at 50% 50%,rgba(0,0,0,.78) 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%); text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.9)} body[data-form=stairs] #text:empty{background:none} /* 寄席・HUD は本文が下にある。紙の台紙でも、この型では下の黒い点（刷りを抜く）を生かす */ body[data-paper="2"][data-form=yose] #pstop{opacity:1 !important} /* HUD は自前のメッセージ欄があるので対象外（被って読めなくなった） */ body[data-form=yose] #text{text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.95)} /* 待受のスマホが本文の上まで下がって、字が読めなかった（西遊記 881・作者 2026-09-19）。 中の絵は固定の大きさで描いてあるので、箱ごと縮めて上へ寄せる（rise の transform と別に scale で縮める） */ .lockscr{top:8%;scale:.74;transform-origin:50% 0} /* HUD のメッセージ欄：いまの画面の行ははっきり、前の画面の行だけ沈める（行ごとの段々の薄さをやめる） */ #hudui .log .ln,#hudui .log .ln:nth-last-child(n){opacity:.28} #hudui .log .ln.now,#hudui .log .ln[data-fresh]{opacity:1 !important} #hudui .log{max-height:46%} /* 配達アプリのやり取りは、LINE のトーク画面のように自分の指で上へ巻いて読み返せる（曾呂利 1290・作者 2026-09-19）。 巻けなかった主因は上に被さっていた透明な層（#stage・#dropL）で、そちらは別途直した。ここでは巻く指定を明示する */ #app .log,#app .log *{touch-action:pan-y} #app .log{-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* 龍の台詞の板が、版（龍の顔）の上に被って顔が見えなかった（西遊記 922・作者 2026-09-19）。紙の台紙では版の下へ */ body[data-paper="2"][data-form=subtitle] .npc{top:58.5%;max-height:34%} /* 選択肢の札から伸びる線は外す（作者 2026-09-19「この線いるか？全部の選択肢から外していいのでは」） */ .choices .lead{display:none !important} /* 開封：箱の蓋。上下から閉じた黒が、まず細く割れ、それから開く */ .flap{position:absolute;left:0;right:0;height:50%;background:#000;z-index:45;pointer-events:none; transition:height 240ms cubic-bezier(.2,.9,.3,1)} .flap.t{top:0;box-shadow:0 1px 0 rgba(239,233,219,.5)} .flap.b{bottom:0;box-shadow:0 -1px 0 rgba(239,233,219,.5)} .flap.open{transition:height 900ms cubic-bezier(.6,0,.2,1)} /* 目をこらす三段階（作者 2026-09-19）：一つ目のタップではまだ全く見えない／二つ目で「何かある」と分かる／三つ目でやっと目だと分かる。 前は最初からうっすら見え、一つ目でもう形が出ていた。ぼかしで「何か」に留め、三つ目でだけ焦点が合う */ .eyereal{opacity:.03;filter:brightness(.3) contrast(1) blur(14px);transform:scale(1.1); transition:opacity 1700ms ease,filter 1900ms ease,transform 2000ms ease} .eyereal[data-k="1"]{opacity:.1;filter:brightness(.4) contrast(1.05) blur(12px);transform:scale(1.3)} .eyereal[data-k="2"]{opacity:.62;filter:brightness(.95) contrast(1.35) blur(6px);transform:scale(1.8)} .eyereal[data-k="3"]{opacity:1;filter:brightness(1.75) contrast(1.7) blur(0);transform:scale(2.5)} /* 字が欠けていく（ベンガルの終わり） */ #text .ln .er{animation:erode 1800ms ease-in forwards} @keyframes erode{0%{opacity:1;filter:blur(0)}60%{opacity:.35;filter:blur(1.2px)}100%{opacity:0;filter:blur(2.5px)}} /* ---- 終幕 A（作者 2026-09-20）：七晩の一文を左右に。壁が降りて二つの部屋に分かれる */ #split.roll.A{display:none;background:#05060a} #split.roll.A.on{display:block} #split.roll.A .rowsA{position:absolute;left:14px;right:14px;top:64px;bottom:40px;display:flex;flex-direction:column;justify-content:space-around} #split.roll.A .rA{width:47%;opacity:0;filter:blur(7px);transition:opacity 900ms ease,filter 900ms ease,transform 900ms cubic-bezier(.2,.8,.2,1)} #split.roll.A .rA.o{align-self:flex-start;text-align:left;transform:translateX(-26px)} #split.roll.A .rA.e{align-self:flex-end;text-align:right;transform:translateX(26px)} #split.roll.A .rA.in{opacity:1;filter:none;transform:none} #split.roll.A .rA.in.past{opacity:.38} #split.roll.A .rA i{display:block;font-style:normal;font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.2em;color:#6f7480;margin-bottom:4px} #split.roll.A .rA p{font-family:Shippori,"Shippori Mincho",serif;font-size:12px;line-height:1.75;letter-spacing:.04em;color:var(--ink,#e8e4da);margin:0;text-wrap:pretty} #split.roll.A .wallA{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#d8d2c4;transform:scaleY(0);transform-origin:50% 0; transition:transform 1100ms cubic-bezier(.7,0,.3,1);box-shadow:0 0 14px rgba(232,228,218,.35)} #split.roll.A.wall .wallA{transform:scaleY(1)} #split.roll.A.apart .rA.o{transform:translateX(-7px)} #split.roll.A.apart .rA.e{transform:translateX(7px)} #split.roll.A.apart .rA.o p{filter:saturate(.75)} #split.roll.A .tags{opacity:0;transition:opacity 900ms ease} #split.roll.A.tag .tags{opacity:1} #split.roll.A.jolt{animation:joltA 240ms ease} @keyframes joltA{0%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}100%{transform:none}} #split.roll.A .pboxA{position:absolute;width:26px;height:20px;margin:-10px 0 0 -13px;background:#efe9db;border:1px solid #141414; box-shadow:0 0 0 1px #efe9db,0 6px 14px rgba(0,0,0,.6);opacity:0;z-index:6;transition:opacity 200ms ease} #split.roll.A .pboxA::after{content:"";position:absolute;left:0;right:0;top:45%;height:3px;background:#c9a95a} #split.roll.A .pboxA.on{opacity:1} #split.roll.A .rA.got i::after{content:"　お届け完了";color:#c8442c;letter-spacing:.2em} /* 左の部屋が沈み、右の部屋（佐藤）の語りが読める大きさで出る */ #split.roll.A .satoA{position:absolute;left:0;right:0;top:0;bottom:0;background:#05060a;opacity:0;pointer-events:none;transition:opacity 1100ms ease; display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px 64px} #split.roll.A.sato .satoA{opacity:1} #split.roll.A.sato .wallA{opacity:0;transition:opacity 900ms ease} #split.roll.A .satoA .hd{position:absolute;top:58px;right:22px;font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.3em;color:#c8442c} #split.roll.A .satoA .tx p{font-family:Shippori,"Shippori Mincho",serif;font-size:16px;line-height:2.0;letter-spacing:.04em;color:#e8e4da;margin:0 0 4px; opacity:0;transform:translateY(6px);animation:rise 620ms ease forwards} #split.roll.A .satoA .tx p.gapline{height:1em} /* 終幕 A：一晩ずつの抜粋（全文）。読み終えてタップすると、決めの一文（b）だけが残る */ #split.roll.A .readA{position:absolute;left:0;right:0;top:0;bottom:0;z-index:8;background:#05060a;display:flex;flex-direction:column;justify-content:center; padding:0 26px;opacity:0;pointer-events:none;transition:opacity 700ms ease} #split.roll.A .readA.in{opacity:1} #split.roll.A .readA.o{align-items:flex-start;text-align:left;padding-right:64px} #split.roll.A .readA.e{align-items:flex-end;text-align:right;padding-left:64px} #split.roll.A .readA i{font-style:normal;font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.36em;color:#6f7480;margin-bottom:16px} #split.roll.A .readA p{font-family:Shippori,"Shippori Mincho",serif;font-size:16px;line-height:2.05;letter-spacing:.04em;margin:0 0 10px; color:color-mix(in srgb,var(--ink,#e8e4da) 62%,#05060a);transition:color 800ms ease} #split.roll.A .readA p b{font-weight:400;color:var(--ink,#e8e4da);transition:color 800ms ease} #split.roll.A .readA.keep p{color:transparent} #split.roll.A .readA.keep p b{color:var(--ink,#e8e4da)} #split.roll.A .readA .tp{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.2em; color:#565961;opacity:0;transition:opacity 600ms ease} #split.roll.A .readA.ready .tp{opacity:1} #split.roll.A .rA p{font-size:12px} /* 偶数夜の抜粋：塊は右に寄せるが、字は左揃え（右揃えの長文は読みにくい） */ #split.roll.A .readA.e{align-items:stretch;text-align:left;padding-left:64px;padding-right:26px} #split.roll.A .readA.e i{text-align:right} /* 決めの文が二つの夜もある。一覧の字を少し詰める */ #split.roll.A .rA p{font-size:12px;line-height:1.7} #split.roll.A .rowsA{top:58px;bottom:30px} /* 「永訣の朝」の引用は左側に。地の文は右の原稿用紙、引用は左の余白に青白い字で立つ（作者 2026-09-19／20） */ body[data-form=manuscript] #text.kanaL{right:auto;left:20px;top:56px;bottom:auto;border-right:0;border-left:1px solid rgba(159,182,196,.4); background:linear-gradient(to right,rgba(7,8,11,.86) 0,rgba(7,8,11,.86) 72%,rgba(7,8,11,0) 100%);padding:16px 18px 16px 12px} body[data-form=manuscript] #text.kanaL .kana{font-size:14px;letter-spacing:.2em;color:#b9cfdc;line-height:2.1} body:not([data-form=manuscript]) #text.kanaL{text-align:left;right:40%} /* 製版済みの環境映像（ambient＋plated）。#vid.amb の screen が #vid.plated の multiply に勝ってしまい、 白い点がインクの面に溶けて映像が見えなかった（素材側の指摘 2026-09-19 夜）。黒地にインクの点で出す */ #vid.amb.plated{mix-blend-mode:multiply;opacity:1} /* 紙の台紙（字幕の型）では、映像も「貼った刷り物」として上 56% の箱に収める。全面に敷くと黒地に黒字になる */ body[data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vid, body[data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vidink{top:0;bottom:auto;height:56%;inset:0 0 auto 0} /* ---- 西遊記のゲーム画面：台詞はキャラの頭上の吹き出しに（作者 2026-09-20） */ #hudui .hbub{position:absolute;top:calc(var(--sky) + 346px);transform:translateY(-100%);max-width:58%;z-index:6; background:rgba(6,12,11,.92);border:1px solid rgba(126,201,181,.75);color:#e4efe9;font-family:"Noto Sans JP",system-ui,sans-serif; font-size:12.5px;line-height:1.6;padding:8px 11px 9px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.55); opacity:0;animation:hbubIn 320ms cubic-bezier(.2,1.4,.4,1) forwards;transition:opacity 500ms ease} #hudui .hbub b{display:block;font-weight:400;font-size:8px;letter-spacing:.24em;color:#7ec9b5;margin-bottom:2px} #hudui .hbub.wei{left:7%} #hudui .hbub.me{right:7%;border-color:rgba(201,169,90,.8)} #hudui .hbub.me b{color:#c9a95a} #hudui .hbub::after{content:"";position:absolute;bottom:-7px;width:10px;height:10px;background:inherit;border:inherit;border-top:0;border-left:0;transform:rotate(45deg)} #hudui .hbub.wei::after{left:26px} #hudui .hbub.me::after{right:40px} #hudui .hbub.old{opacity:.32 !important;animation:none} @keyframes hbubIn{0%{opacity:0;transform:translateY(-100%) translateY(8px) scale(.94)}100%{opacity:1;transform:translateY(-100%)}} /* 台詞が上に出るぶん、下の欄は地の文だけで低く */ #hudui .log{max-height:34%} /* ===================================================================================== 画面の決まり 六つ（素材側 2026-09-19 夜・作者了承「1〜6 全部良い」）。数値の出典は okihai_package/docs/design_mock_20260919/index.html。?rules=0 で前の見た目と比べられる。 対象は字幕の型の紙の画面。版いっぱいの型（階段・寄席・HUD・原稿用紙・アプリ・マンガ）は柱と脚だけ ===================================================================================== */ body[data-rules="1"]{--m:24px} /* ---- 5 柱（上）と脚（下）。操作と日付を版の上から追い出す。箱・枠・地色なし、9px の字だけ */ body[data-rules="1"] #top{top:22px;left:var(--m);right:var(--m);font-size:9px;font-weight:500;letter-spacing:.2em;color:#6b675e} body[data-rules="1"] #rewind,body[data-rules="1"] #home,body[data-rules="1"] #skip{top:auto;bottom:4px;border:0;background:none; min-width:0;min-height:40px;padding:12px 12px;opacity:1;transform:none;box-shadow:none} body[data-rules="1"] #rewind{left:12px} body[data-rules="1"] #home{left:auto;right:12px} body[data-rules="1"] #skip{right:58px} body[data-rules="1"] #skip .hint{display:none} body[data-rules="1"] #rewind .lbl,body[data-rules="1"] #home .lbl,body[data-rules="1"] #skip .lbl{font-family:"Noto Sans JP",system-ui,sans-serif; font-size:9px;font-weight:500;letter-spacing:.2em;color:#a39d8f} body[data-rules="1"] #skip.held .lbl{color:#c8442c} body[data-rules="1"] #skip.held{background:none;border:0} /* 進み具合は一本線。読んだ側は、その夜のインクの濃い側（案 D：一夜一色を紙の上に一か所だけ） */ body[data-rules="1"] #bar{top:auto;bottom:23px;left:84px;right:118px;height:1px;gap:0} body[data-rules="1"] #bar i{background:#d6d0c2;border-radius:0} body[data-rules="1"] #bar i.read,body[data-rules="1"] #bar i.now{background:var(--ink-lo,#17181c)} /* 暗い画面（黒い頁・版いっぱいの型・黒地）では柱と脚を暗い灰に */ body[data-rules="1"].nightpage #top,body[data-rules="1"][data-form=stairs] #top,body[data-rules="1"][data-form=yose] #top, body[data-rules="1"][data-form=hud] #top,body[data-rules="1"][data-form=manuscript] #top,body[data-rules="1"][data-form=app] #top, body[data-rules="1"].lids #top{color:#6f6a73} body[data-rules="1"].nightpage #bar i,body[data-rules="1"][data-form=stairs] #bar i,body[data-rules="1"][data-form=yose] #bar i, body[data-rules="1"][data-form=hud] #bar i,body[data-rules="1"][data-form=manuscript] #bar i,body[data-rules="1"][data-form=app] #bar i{background:#2a2830} body[data-rules="1"].nightpage #bar i.read,body[data-rules="1"].nightpage #bar i.now, body[data-rules="1"][data-form=stairs] #bar i.read,body[data-rules="1"][data-form=yose] #bar i.read,body[data-rules="1"][data-form=hud] #bar i.read, body[data-rules="1"][data-form=manuscript] #bar i.read,body[data-rules="1"][data-form=app] #bar i.read, body[data-rules="1"][data-form=stairs] #bar i.now,body[data-rules="1"][data-form=yose] #bar i.now,body[data-rules="1"][data-form=hud] #bar i.now, body[data-rules="1"][data-form=manuscript] #bar i.now,body[data-rules="1"][data-form=app] #bar i.now{background:var(--ink-route,#8b8577)} body[data-rules="1"].nightpage #rewind .lbl,body[data-rules="1"].nightpage #home .lbl,body[data-rules="1"].nightpage #skip .lbl, body[data-rules="1"][data-form=stairs] .lbl,body[data-rules="1"][data-form=yose] #rewind .lbl,body[data-rules="1"][data-form=yose] #home .lbl, body[data-rules="1"][data-form=hud] #rewind .lbl,body[data-rules="1"][data-form=hud] #home .lbl,body[data-rules="1"][data-form=hud] #skip .lbl, body[data-rules="1"][data-form=manuscript] #rewind .lbl,body[data-rules="1"][data-form=manuscript] #home .lbl,body[data-rules="1"][data-form=manuscript] #skip .lbl, body[data-rules="1"][data-form=app] #home .lbl{color:#6f6a73} /* 縦スクロールのマンガでは「目次」だけ右上に残す（脚の指定を打ち消す） */ body[data-rules="1"] #frame:has(#manga.scrollmode) #home{top:6px;bottom:auto;right:6px;background:#efe9db;padding:6px 9px;min-height:0} /* ---- 1・2 余白は一つ（24px）。版は余白の内側に貼り込む。影なし・角丸なし。柱とは重ねない（上端 48px） */ body[data-rules="1"][data-paper="2"] #bgbox{box-shadow:none;border-radius:0} body[data-rules="1"][data-paper="2"][data-form=subtitle]:not([data-lay]) #bgbox{top:48px;left:var(--m);right:var(--m);bottom:auto;height:51%} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=band] #bgbox{top:48px;left:var(--m);right:var(--m);bottom:auto;height:40%} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=win] #bgbox{top:48px} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=stamp] #bgbox{top:48px;left:var(--m)} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=card] #bgbox{top:48px} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=strip] #bgbox{top:48px;left:var(--m);right:var(--m)} /* 環境映像（夜のカーテン）も同じ箱に */ body[data-rules="1"][data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vid, body[data-rules="1"][data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vidink{inset:48px var(--m) auto var(--m);width:calc(100% - 48px);height:51%} body[data-rules="1"] .npc,body[data-rules="1"] .fuda{box-shadow:none} /* ---- 3 本文の一行目の高さを固定する（上合わせ）。帯・版なしは 62%、上に小さい版が来る型は 47% */ body[data-rules="1"][data-paper="2"][data-form=subtitle] #text:not(.solo):not(.listing):not(.bare){top:62%;bottom:auto;left:var(--m);right:var(--m); padding:0;font-size:16px;line-height:1.85;letter-spacing:.04em;text-align:left} body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=stamp] #text:not(.solo):not(.listing):not(.bare), body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=win] #text:not(.solo):not(.listing):not(.bare), body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=card] #text:not(.solo):not(.listing):not(.bare), body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=strip] #text:not(.solo):not(.listing):not(.bare){top:47%} /* 札・選択肢・アプリなどの重なりが出ている間は、下合わせに戻す（重なりと字がぶつからないように） */ body[data-rules="1"][data-paper="2"][data-form=subtitle] #ov.act ~ #text:not(.solo):not(.listing):not(.bare){top:auto;bottom:64px} /* ---- 4 字の段（まず本文まわり）：本文 16px／大きい本文 21px。小さい本文（S）は二〜三行に割り直したので使わない */ body[data-rules="1"][data-txt=L] #text:not(.solo):not(.listing):not(.bare){font-size:21px;line-height:1.8} body[data-rules="1"][data-txt=S] #text:not(.solo):not(.listing):not(.bare){font-size:16px;line-height:1.85} /* ---- 6 版のない闇の画面は「黒い頁」。字はその夜のインク */ body[data-rules="1"][data-paper="2"] #frame{transition:background-color 600ms ease} body[data-rules="1"][data-paper="2"][data-form=subtitle].nightpage #frame{background:#0a0b0e} /* ---- 案 B 文節で折る。見えない切れ目（U+200B）は UI.wb が入れる。切れ目の表に無い字の並びは、今までどおり字の途中で折れる */ #text .ln,#hudui .hbub,#hudui .log .ln,#manga.scrollmode .nar,#split.roll.A .readA p,#split.roll.A .rA p{word-break:keep-all;overflow-wrap:anywhere;line-break:strict} /* 配達アプリが画面いっぱいに出ている間は、紙用の黒い字が沈む（曾呂利 1274「出方が変」・作者 2026-09-19）。 アプリの上では明るい字に。柱はアプリ自身の時刻表示とぶつかるので隠す */ body[data-rules="1"][data-form=app] #frame:has(#app:not(.small)) #top{display:none} body[data-rules="1"][data-form=app] #frame:has(#app:not(.small)) #rewind .lbl,body[data-rules="1"][data-form=app] #frame:has(#app:not(.small)) #home .lbl, body[data-rules="1"][data-form=app] #frame:has(#app:not(.small)) #skip .lbl{color:#6f6a73} body[data-rules="1"][data-form=app] #frame:has(#app:not(.small)) #bar i{background:#2a2830} /* 窓・札の版が本文の一行目にかぶる（ベンガル 1130）。版の下端は本文の上 24px で止める */ body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=win] #bgbox, body[data-rules="1"][data-paper="2"][data-form=subtitle][data-lay=card] #bgbox{height:auto;max-height:none;bottom:calc(53% + 24px)} /* ===================================================================================== 案C 伝票の見た目・案E 紙の質感（素材側見本 docs/design_mock_20260919/slip.html・作者了承 2026-09-19） 罫は 1px・色はその夜のインクの濃い版（--ink-lo）／欄名 9px ゴシック・値は明朝か等幅数字／ 角丸・影・地色のボタンなし／赤は ✓ と受領印だけ。?slip=0 で前の見た目。 劇中のスマホ（TODOKU の通知・曾呂利のアプリ）と HUD・マンガは対象外 ===================================================================================== */ body[data-slip="1"]{--rule:var(--ink-lo,#6b675e);--han:var(--blood-lit,#a8272c);--paper:#efe9db} #topN{display:none} /* ---- 案E 紙の粒。#frame の地にだけ multiply。黒い頁と版いっぱいの型には掛けない */ body[data-slip="1"][data-paper="2"] #frame::before{content:"";position:absolute;inset:0;pointer-events:none; background:url(assets/paper_grain.webp) 0 0/256px;mix-blend-mode:multiply;opacity:var(--grain,.35)} body[data-slip="1"].nightpage #frame::before,body[data-slip="1"].lids #frame::before{opacity:0} /* ---- 柱を伝票の欄に（配達日｜時刻｜伝票番号）。字幕の型だけ。?head=text で字だけの柱 */ body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #top{top:18px;height:34px;display:grid; grid-template-columns:1.1fr 1fr 1.3fr;border:solid var(--rule);border-width:1px 0; font-family:Shippori,serif;font-size:12px;font-weight:400;letter-spacing:.08em;color:#17181c} body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #top>span{display:block;padding:5px 8px 0; border-left:1px solid var(--rule);line-height:1;white-space:nowrap;overflow:hidden} body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #top>span:first-child{border-left:0;padding-left:0} body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #top>span::before{content:attr(data-k);display:block; margin-bottom:4px;color:var(--rule);font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em} body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #topR, body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle] #topN{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em} /* 黒い頁・目を閉じる暗さでは、罫と字を暗い灰に */ body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle].nightpage #top, body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle].lids #top{--rule:#3a3840;color:#8b8690} body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle].nightpage #top>span::before, body[data-slip="1"][data-head=slip][data-rules="1"][data-form=subtitle].lids #top>span::before{color:#5a5660} /* 柱が 52px まで来るので、版の上端は 48 → 64px */ body[data-slip="1"][data-head=slip][data-rules="1"][data-paper="2"][data-form=subtitle] #bgbox{top:64px} body[data-slip="1"][data-head=slip][data-rules="1"][data-paper="2"][data-form=subtitle]:not([data-lay]) #bgbox{height:calc(51% - 16px)} body[data-slip="1"][data-head=slip][data-rules="1"][data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vid, body[data-slip="1"][data-head=slip][data-rules="1"][data-paper="2"][data-form=subtitle] #frame:has(#vid.amb.plated.on) #vidink{top:64px;height:calc(51% - 16px)} /* ---- 選択肢＝チェック欄。紙の伝票を一枚貼る（版の上・黒い頁の上でも同じ紙） */ body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .rows{ left:var(--m,24px);right:var(--m,24px);gap:0;align-items:stretch;background:var(--paper);border:1px solid var(--rule)} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick{ justify-content:flex-start;text-align:left;gap:12px;min-height:44px;padding:0 12px; background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none; font-family:Shippori,serif;font-size:16px;letter-spacing:.04em;color:#17181c} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick:last-child{border-bottom:0} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick i{ position:relative;flex:0 0 15px;width:15px;height:15px;background:none;border:1px solid #17181c} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick.taken i::after{ content:"";position:absolute;left:3px;top:-6px;width:6px;height:14px;border:solid var(--han);border-width:0 2px 2px 0;transform:rotate(40deg)} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick:active, body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick.taken{ background:transparent;color:var(--han);border-color:var(--rule);opacity:1} /* ---- 伝票の一枚（日付の札・送り状に共通） */ body[data-slip="1"] .sl{border:1px solid var(--rule);color:#17181c;font-family:Shippori,serif} body[data-slip="1"] .sl .hd{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--rule); color:var(--rule);font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em} body[data-slip="1"] .sl .cell{position:relative;padding:16px 10px 8px;border-bottom:1px solid var(--rule);font-size:12px} body[data-slip="1"] .sl .cell:last-child{border-bottom:0} body[data-slip="1"] .sl .cell .k{position:absolute;left:10px;top:5px;color:var(--rule);font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em} body[data-slip="1"] .sl .two{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)} body[data-slip="1"] .sl .two .cell{border-bottom:0} body[data-slip="1"] .sl .two .cell+.cell{border-left:1px solid var(--rule)} body[data-slip="1"] .mishin{border:0;border-top:1px dashed var(--rule);margin:0 0 14px;opacity:.8} body[data-slip="1"] .sl+.mishin{margin:14px 0 0} /* 日付の札。黒地の「Day 2」を紙の送り状一枚に */ #daycard.den{display:block;background:var(--paper)} #daycard.den::after{display:none} #daycard.den::before{content:"";position:absolute;inset:0;pointer-events:none; background:url(assets/paper_grain.webp) 0 0/256px;mix-blend-mode:multiply;opacity:var(--grain,.35)} #daycard.den .w{position:absolute;left:52px;right:52px;top:50%;transform:translateY(-50%)} #daycard.den .cell.big{padding:26px 10px 18px;text-align:center} #daycard.den .cell.big b{font-size:34px;font-weight:600;letter-spacing:.3em;margin-right:-.3em} #daycard.den .bcw{padding:10px} #daycard.den .bc{height:22px;background:repeating-linear-gradient(90deg,#17181c 0 1px,transparent 1px 3px,#17181c 3px 5px,transparent 5px 6px, #17181c 6px 7px,transparent 7px 11px,#17181c 11px 14px,transparent 14px 16px)} #daycard.den .no{margin-top:4px;font:9px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.3em;color:#6b675e} /* 送り状（結末のあと・目次）。配達日／品名／受領の表。夜をまたぐので罫は灰 */ body[data-slip="1"] #flow.slipv{--rule:#6b675e;padding:30px var(--m,24px) 10px} body[data-slip="1"] #flow.slipv h2{display:none} body[data-slip="1"] #flow.slipv .spine{margin:0;padding:0;width:auto;display:block;flex:0 1 auto;overflow-y:auto} body[data-slip="1"] #flow.slipv .spine::before{display:none} body[data-slip="1"] #flow.slipv .tbl{width:100%;border-collapse:collapse;font-size:12px;line-height:1.5} body[data-slip="1"] #flow.slipv .tbl th{font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;color:var(--rule); text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule)} body[data-slip="1"] #flow.slipv .tbl td{padding:7px 8px;border-bottom:1px solid var(--rule);vertical-align:middle;color:#17181c} body[data-slip="1"] #flow.slipv .tbl td+td,body[data-slip="1"] #flow.slipv .tbl th+th{border-left:1px solid var(--rule)} body[data-slip="1"] #flow.slipv .tbl td.day{border-left:0} body[data-slip="1"] #flow.slipv .tbl tr:last-child td{border-bottom:0} body[data-slip="1"] #flow.slipv .tbl .day{white-space:nowrap;width:46px} body[data-slip="1"] #flow.slipv .tbl .rc{width:34px;text-align:center} body[data-slip="1"] #flow.slipv .tbl tr.row{display:table-row;padding:0;min-height:0;background:none} body[data-slip="1"] #flow.slipv .tbl tr.row.pick{cursor:pointer} body[data-slip="1"] #flow.slipv .tbl tr.row.pick:active td.nm{color:var(--han)} body[data-slip="1"] #flow.slipv .blk{display:inline-block;height:9px;background:#17181c;vertical-align:middle} body[data-slip="1"] #flow.slipv .han{display:inline-grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--han);border-radius:50%; color:var(--han);font:600 10px/1 Shippori,serif;transform:rotate(-8deg);opacity:.9} body[data-slip="1"] #flow.slipv .cnt{margin-top:10px;text-align:right;font:9px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.2em;color:#a39d8f} body[data-slip="1"] #flow.slipv .back{margin:14px 0 0;align-self:flex-start;border:0;background:none;padding:12px 0;min-height:40px; font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;color:#a39d8f} body[data-slip="1"] #flow.slipv .back::before{content:"‹ "} body[data-slip="1"] #flow.slipv .tbl td{font-family:Shippori,serif;font-weight:400;font-size:12px;letter-spacing:.04em} body[data-slip="1"] #flow.slipv .spine{overflow:visible} /* タイトルの札も貼り込みに（案C）。影と角丸を外し、罫で欄を切る */ body[data-slip="1"] #title .kv .slip{box-shadow:none;border-radius:0;background:transparent;border:1px solid #6b675e;padding:0;color:#17181c} body[data-slip="1"] #title .kv .slip>div{padding:5px 10px 6px;font-family:Shippori,serif;font-size:12px;letter-spacing:.04em} body[data-slip="1"] #title .kv .slip .lbl{margin:0!important;padding:5px 10px 0;border-top:1px solid #6b675e; font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;color:#6b675e} body[data-slip="1"] #title .kv .slip .lbl:first-child{border-top:0} /* Netlify の「Powered by」の帯が右下に出る試作の置き場では、脚をその上へ逃がす */ body.badge[data-rules="1"] #rewind,body.badge[data-rules="1"] #home,body.badge[data-rules="1"] #skip{bottom:40px} body.badge[data-rules="1"] #bar{bottom:59px} body.badge[data-rules="1"] #frame:has(#manga.scrollmode) #home{top:6px;bottom:auto} body.badge #flow .back,body.badge #jump .back{margin-bottom:44px} /* 本文の下が暗い面になっている画面では、紙用の黒い字をやめて明るい字に（engine の inkGuard が付ける） */ body[data-paper="2"].darkunder #top{color:#8b8690} /* 西遊記の独白（1011〜1013）は盤面を沈めて画面全体で読ませる（作者 2026-09-20） */ body.mono #hudui{opacity:.10;transition:opacity 700ms} body.mono #text,body.mono #text.kanaL{position:absolute;inset:auto var(--m,24px);top:50%;right:var(--m,24px); transform:translateY(-50%);bottom:auto;text-align:center;font-size:21px;line-height:2.1;letter-spacing:.04em; background:none;border:0;box-shadow:none;z-index:30} body.mono #text .kana{font-size:21px;letter-spacing:.04em;color:#17181c;line-height:2.1} body.mono[data-paper="2"] #frame{background:#efe9db} /* ここぞの台詞は吹き出しごと大きく（西遊記 1029〜1030・作者 2026-09-20） */ #hudui .hbub.big{max-width:80%;font-size:16px;line-height:1.75;padding:12px 15px 13px;border-width:1.5px; box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 26px rgba(0,0,0,.6);animation:hbubBig 420ms cubic-bezier(.2,1.5,.35,1) forwards} #hudui .hbub.big b{font-size:9px;margin-bottom:4px} @keyframes hbubBig{0%{opacity:0;transform:translateY(-100%) translateY(14px) scale(.86)} 60%{opacity:1;transform:translateY(-100%) scale(1.04)}100%{opacity:1;transform:translateY(-100%) scale(1)}} /* ここぞの台詞の札は大きく出す（西遊記 1029〜1030・作者 2026-09-20「全然目立ってない」）。 TEXT_SIZE の L を指定した画面だけ */ body[data-txt=L] .fuda{left:20px;right:20px;top:9%;font-size:21px;line-height:1.85;padding:16px 18px; max-height:56%;animation:fudaBig 420ms cubic-bezier(.2,1.5,.35,1) both} @keyframes fudaBig{0%{opacity:0;transform:translateY(10px) scale(.9)} 60%{opacity:1;transform:none;scale:1.03}100%{opacity:1;transform:none}} /* 元ネタの札（作者 2026-09-23）。伝票の一枚に題とあらすじ */ #source{position:absolute;inset:0;z-index:80;background:#efe9db;color:#17181c;animation:srcin 700ms ease both} #source::before{content:"";position:absolute;inset:0;pointer-events:none; background:url(assets/paper_grain.webp) 0 0/256px;mix-blend-mode:multiply;opacity:var(--grain,.35)} #source .w{position:absolute;left:var(--m,24px);right:var(--m,24px);top:50%;transform:translateY(-50%)} #source .sl{--rule:#6b675e} #source .ttl{padding-top:22px} #source .ttl b{display:block;font-family:Shippori,serif;font-size:21px;line-height:1.6;font-weight:600;letter-spacing:.04em} #source p{margin:6px 0 2px;font-family:Shippori,serif;font-size:16px;line-height:1.85;letter-spacing:.04em; word-break:keep-all;overflow-wrap:anywhere} #source .cell{padding-top:22px} #source .tap{margin-top:18px;text-align:center;font:500 9px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;color:#a39d8f; animation:srctap 1600ms ease-in-out 1s infinite alternate both} #source.out{animation:srcout 420ms ease both} @keyframes srcin{from{opacity:0}} @keyframes srcout{to{opacity:0}} @keyframes srctap{from{opacity:.25}to{opacity:1}} /* 括弧の心の声（kana）が小さすぎた（ベンガル 1105・作者 2026-09-23）。本文と同じ 16px */ body:not([data-form=manuscript]) #text .kana{font-size:16px !important;letter-spacing:.04em} /* Netlify の帯で脚を上げたぶん、下から積む本文（寄席・階段・HUD など）も同じだけ上げる。死神の僕の台詞が線に被っていた（作者 2026-09-23） */ body.badge #text{margin-bottom:40px} /* HUD の会話欄が脚（戻る・進み具合の線）と重なって読めなかった（西遊記 983・作者 2026-09-23）。脚の上に置く */ body[data-rules="1"] #hudui .log{bottom:58px} body.badge[data-rules="1"] #hudui .log{bottom:96px} #hudui.shake{animation:evshake 900ms steps(6,end)} @keyframes evshake{0%,100%{transform:none}20%{transform:translate(4px,-2px)}40%{transform:translate(-4px,2px)}60%{transform:translate(3px,1px)}80%{transform:translate(-2px,-1px)}} /* 録音の声は、地の文の場所ではなくレコーダーの絵の上に。座布団を敷き、書体も変える（幹 166・作者 2026-09-23） */ body #ov[data-kind=recorder] ~ #text{position:absolute !important;top:14% !important;bottom:auto !important;left:24px !important;right:24px !important; transform:none !important;z-index:30;background:rgba(239,233,219,.94) !important; padding:16px 18px !important;border:0;box-shadow:0 10px 28px rgba(0,0,0,.45); font-family:"Klee One","Noto Sans JP",sans-serif !important;font-weight:600;font-size:17px !important;line-height:1.95 !important;letter-spacing:.05em} body #ov[data-kind=recorder] ~ #text:empty{display:none} /* 暗い重ね画面（録音・SNS・波形・全面の映像）の上では、柱の伝票欄を暗い灰に（黒地に黒で沈んでいた） */ body #frame:has(#ov[data-kind=recorder]) #top,body #frame:has(#ov[data-kind=sns]) #top,body #frame:has(#ov[data-kind=waveform]) #top, body.darkunder #top{--rule:#3a3840 !important;color:#8b8690 !important} body #frame:has(#ov[data-kind=recorder]) #top>span::before,body #frame:has(#ov[data-kind=sns]) #top>span::before, body #frame:has(#ov[data-kind=waveform]) #top>span::before,body.darkunder #top>span::before{color:#6f6a73 !important} /* 白地に白い字（作者 2026-09-23「何度も白地に白文字で読みづらい」）。 版の上に明るい字を載せる型（立たせる行・列挙・版いっぱいの型）は、字の下に薄い黒の座布団を敷く */ body[data-paper="2"] #text.solo,body[data-paper="2"] #text.listing{background:rgba(8,9,12,.62) !important;padding:14px 16px !important; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} body[data-paper="2"] #text.solo:empty,body[data-paper="2"] #text.listing:empty{display:none} /* 縦書きの原稿は左の列ほど暗がりが薄れて、白い版の上で読めなかった（永訣 562）。字の箱いっぱいに同じ濃さで */ body[data-form=manuscript] #text:not(:empty){background:rgba(7,8,11,.8) !important} /* 非常階段の字も、ぼかしの輪ではなく箱で受ける（オルフェウス 1674「白い字が読みづらい」） */ body[data-form=stairs] #text:not(:empty){background:rgba(0,0,0,.66) !important;left:16px !important;right:16px !important} /* 立たせる行で版を全面に敷いた時、柱の欄が版の上で読めない */ body[data-paper="2"]:has(#text.solo) #top,body[data-paper="2"]:has(#text.listing) #top{color:#c9c4ba !important;--rule:rgba(201,196,186,.5) !important;text-shadow:0 1px 2px #000} body[data-paper="2"]:has(#text.solo) #top>span::before,body[data-paper="2"]:has(#text.listing) #top>span::before{color:#a39d8f !important} /* 縦スクロールのマンガの合図 */ .scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;pointer-events:none; padding:8px 14px;background:rgba(10,11,14,.82);color:#efe9db;border-radius:16px; font:500 12px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;animation:hintbob 1.4s ease-in-out infinite alternate;transition:opacity 600ms ease} .scrollhint.off{opacity:0} body.badge .scrollhint{bottom:64px} @keyframes hintbob{from{transform:translate(-50%,0)}to{transform:translate(-50%,6px)}} /* 背後の悲鳴（曾呂利） */ #app .scream{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;transition:opacity 800ms ease} #app .scream.off{opacity:0} #app .scream .row{position:absolute;left:0;white-space:nowrap;color:#c8442c; font-family:Shippori,serif;font-weight:800;font-size:30px;letter-spacing:.02em;animation:screamrun linear infinite} @keyframes screamrun{from{transform:translateX(0)}to{transform:translateX(-50%)}} #app .log{position:relative;z-index:1;background:transparent} /* 配達アプリの日付の区切り（LINE のように） */ #app .dsep{align-self:center;margin:10px 0 4px;pointer-events:none} #app .dsep span{display:inline-block;padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.08); color:#9aa2b8;font:500 11px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.06em} /* スマホのホーム画面（曾呂利の配達アプリを開く） */ .phonehome{position:absolute;inset:0;z-index:80;background:linear-gradient(160deg,#1b2233,#0b0d12 70%);color:#e8e4da; font-family:"Noto Sans JP",system-ui,sans-serif;animation:srcin 500ms ease both;transition:opacity 500ms ease,transform 560ms ease} .phonehome .sb{display:flex;justify-content:space-between;padding:14px 22px 0;font-size:12px;letter-spacing:.06em;color:#cfd3dc} .phonehome .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;padding:40px 18px 0} .phonehome .ic{display:flex;flex-direction:column;align-items:center;gap:6px} .phonehome .ic i{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-style:normal; font-family:Shippori,serif;font-weight:800;font-size:22px;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.35)} .phonehome .ic b{font-weight:400;font-size:10px;letter-spacing:.02em;color:#cfd3dc;white-space:nowrap} .phonehome .ic.todo i{animation:todopulse 1.3s ease-in-out infinite} .phonehome .ic.todo.nudge i{animation:todonudge 420ms ease} .phonehome .ic.todo.press i{transform:scale(.88);filter:brightness(.8)} .phonehome .tip{position:absolute;left:0;right:0;bottom:90px;text-align:center;font-size:12px;letter-spacing:.2em;color:#9aa2b8} .phonehome.open{opacity:0;transform:scale(1.12)} @keyframes todopulse{0%,100%{box-shadow:0 0 0 0 rgba(200,68,44,.6)}50%{box-shadow:0 0 0 10px rgba(200,68,44,0)}} @keyframes todonudge{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* 永訣の朝「以後ずっと画像が表示されない」（作者 2026-09-23 実機）。縦書きの字の箱の幅が auto だと、 iPhone の Safari は画面いっぱいに取ることがあり、字の下の暗がりが版を丸ごと覆っていた。幅は字の列ぶんだけ */ body[data-form=manuscript] #text{width:max-content !important;max-width:calc(100% - 36px) !important} #source .ttl b{word-break:keep-all;overflow-wrap:anywhere} /* 永訣の朝：見た目は前の暗い原稿用紙のまま（作者 2026-09-23）。上の新しい見た目は ?eplook=1 の時だけ。 間（黒の 10 秒の代わりに白へ溶かす）と原稿用紙へ切り替わる場所（539）は新しい方を使う */ body[data-ep="1"][data-route=eiketsu] #white{z-index:41;background:#f3f4f2} /* 指で開封する：黒い蓋の合わせ目のガムテープ（作者 2026-09-23） */ .ubx{position:absolute;inset:0;z-index:46;touch-action:none;cursor:grab} .ubx .tape{position:absolute;left:8%;right:8%;top:calc(50% - 17px);height:34px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 7px), repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px), linear-gradient(#c29a68,#a97f4e); box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 6px rgba(0,0,0,.6); --a:0%;--c:0%; -webkit-mask:linear-gradient(90deg,#000 var(--a),transparent var(--a),transparent var(--c),#000 var(--c)); mask:linear-gradient(90deg,#000 var(--a),transparent var(--a),transparent var(--c),#000 var(--c)); transition:opacity 320ms ease,transform 420ms ease} .ubx .tape.gone{opacity:0;transform:translateY(-14px) rotate(-2deg)} .ubx .uhint{position:absolute;left:0;right:0;top:calc(50% - 64px);text-align:center;color:#d9d3c7; font:500 12px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;animation:uhint 1.6s ease-in-out infinite alternate;transition:opacity 300ms ease} .ubx .uhint::after{content:"→";display:inline-block;margin-left:10px;animation:uarrow 1.1s ease-in-out infinite} .ubx .uhint.gone{opacity:0;animation:none} @keyframes uhint{from{opacity:.45}to{opacity:1}} @keyframes uarrow{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}} /* ===================================================================================== 指の動作（作者 2026-09-23）。指示の字・目印・手応え ===================================================================================== */ .actpad{position:absolute;inset:0;z-index:47;touch-action:none} .actpad .ahint{position:absolute;left:0;right:0;text-align:center;pointer-events:none; font:500 13px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.16em;color:#efe9db; text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8); animation:ahint 1.4s ease-in-out infinite alternate} @keyframes ahint{from{opacity:.55}to{opacity:1}} .actpad.nudge .ahint{animation:anudge 420ms ease} @keyframes anudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .actpad.done .ahint,.actpad.done .arw{opacity:0;transition:opacity 240ms ease} /* なぞる向きの矢印 */ .actpad .arw{position:absolute;width:0;height:0;pointer-events:none} .actpad .arw::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border:solid #efe9db;border-width:0 3px 3px 0; filter:drop-shadow(0 0 4px rgba(0,0,0,.9));animation:arw 1.2s ease-in-out infinite} .actpad .arw::after{content:"";position:absolute;left:-1.5px;top:-60px;width:3px;height:60px;background:linear-gradient(transparent,#efe9db); filter:drop-shadow(0 0 3px rgba(0,0,0,.9));animation:arwt 1.2s ease-in-out infinite} .actpad .arw.down{transform:rotate(0deg)} .actpad .arw.down::before{transform:rotate(45deg)} .actpad .arw.up{transform:rotate(180deg)} .actpad .arw.up::before{transform:rotate(45deg)} .actpad .arw.left{transform:rotate(90deg)} .actpad .arw.left::before{transform:rotate(45deg)} .actpad .arw.right{transform:rotate(-90deg)} .actpad .arw.right::before{transform:rotate(45deg)} @keyframes arw{0%{translate:0 -24px;opacity:0}40%{opacity:1}100%{translate:0 24px;opacity:0}} @keyframes arwt{0%{translate:0 -24px;opacity:0}40%{opacity:.8}100%{translate:0 24px;opacity:0}} /* 押す所の目印 */ .actpad .tgt{position:absolute;width:0;height:0;transition:transform 220ms ease} .actpad .tgt b{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid #efe9db; box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.7);animation:tgt 1.3s ease-out infinite} @keyframes tgt{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.25);opacity:.15}} .actpad .tgt.rec b{background:#c8442c;border-color:#f0d6d0;animation:none;box-shadow:0 0 0 6px rgba(200,68,44,.25),0 0 18px rgba(0,0,0,.7)} .actpad .tgt.stop b{border-radius:6px;background:#efe9db;animation:none;left:-22px;top:-22px;width:44px;height:44px} .actpad .tgt.play b{animation:none;background:rgba(10,11,14,.6)} .actpad .tgt.play b::after{content:"";position:absolute;left:23px;top:17px;border:solid transparent;border-width:12px 0 12px 20px;border-left-color:#efe9db} .actpad .tgt.hit b{animation:none;transform:scale(.8);opacity:.6;transition:transform 160ms ease,opacity 160ms ease} /* 長押し：輪が満ちていく */ .actpad.act-hold .tgt b{animation:none;background:conic-gradient(rgba(239,233,219,.85) 0deg,rgba(239,233,219,0) 0deg)} .actpad.act-hold .tgt.holding b{animation:holdfill var(--hold,1100ms) linear forwards} @property --hf{syntax:'';inherits:false;initial-value:0deg} @keyframes holdfill{from{--hf:0deg}to{--hf:360deg}} .actpad.act-hold .tgt.holding b{background:conic-gradient(rgba(239,233,219,.85) var(--hf),rgba(239,233,219,.12) var(--hf))} /* 届いた通知の「タップして開く」 */ .card .cardhint{margin-top:8px;text-align:center;font:500 11px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.16em;color:#9fc0ff; animation:ahint 1.4s ease-in-out infinite alternate} .card.pressed{transform:scale(.97);filter:brightness(1.15);transition:transform 120ms ease,filter 120ms ease} /* 指示の字は、どの絵の上でも読めるように暗い座布団を敷く */ .actpad .ahint{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;padding:9px 16px;border-radius:18px;background:rgba(10,11,14,.78); box-shadow:0 4px 16px rgba(0,0,0,.45);text-shadow:none} .actpad.nudge .ahint{animation:anudge2 420ms ease} @keyframes anudge2{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}} /* 句読点だけが次の行に落ちないように（作者 2026-09-24）。一字ずつ出す行は、文節の切れ目の印が無いので keep-all＋anywhere だと任意の所で折れていた。この行だけ普通の日本語の禁則で折る */ #text .ln.speak{word-break:normal !important;overflow-wrap:normal !important;line-break:strict !important} /* ===================================================================================== 本文の字の色は、ここ一か所で決める（2026-09-24 の整理。前は 15 か所に散らばって互いにぶつかっていた）。 どれにするかは engine の toneOf() が画面の状態から一つ選んで body[data-tone] に書く。 sheet＝紙の重ね画面／paper＝紙の黒字（既定は上の body[data-paper="2"] #text）／ink＝明るい字／ink9＝明るい字・影を強く／night＝黒い頁の夜のインク ===================================================================================== */ /* sheet＝紙の重ね画面（伝票の地の mono・レコーダーの紙）。行の中の赤字や色つきの字まで黒に揃える。台紙の設定に関わらず効く */ body[data-tone=sheet] #text,body[data-tone=sheet] #text .ln,body[data-tone=sheet] #text .ln span, body[data-tone=sheet] #text .kana{color:#17181c !important;text-shadow:none !important} body[data-paper="2"][data-tone=paper] #text{color:#17181c;text-shadow:none} body[data-paper="2"][data-tone=ink] #text{color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.7)} body[data-paper="2"][data-tone=ink9] #text{color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.9)} body[data-paper="2"][data-tone=night] #text{color:var(--ink-route,#d4c8de);text-shadow:none} /* ===================================================================================== 中盤から山場へつなぐ演出（作者 2026-09-24）。engine の arcApply が --p（0→1）を書く。字の下の層（字より奥） ===================================================================================== */ #arcfx{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity 1.2s} /* オルフェウス：上から朝日。字の面までは届かせない */ #arcfx.day{opacity:1;mix-blend-mode:screen; background:linear-gradient(to bottom,rgba(255,214,170,calc(.05 + .3 * var(--p,0))) 0%,rgba(255,214,170,calc(.03 + .16 * var(--p,0))) 32%,transparent 58%)} /* 死神：蝋燭の明かりの外が暗い（絵の枠の中だけ）。蝋が減るほど（--p）輪が狭まり、自分の火を消すと（--q）閉じる */ #arcvig{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 1.2s} #arcvig.on{opacity:1; background:radial-gradient(ellipse at 50% 86%,transparent calc((78% - 30% * var(--p,0)) * (1 - var(--q,0))), rgba(0,0,0,calc(.55 + .35 * var(--p,0) + .1 * var(--q,0))) calc((78% - 30% * var(--p,0)) * (1 - var(--q,0)) + 26%))} #arcvig.on.flick{animation:flick 1100ms ease-in-out} @keyframes flick{0%{opacity:1}18%{opacity:.55}34%{opacity:1}52%{opacity:.7}70%{opacity:1}100%{opacity:1}} /* イサク：小蝿。点が紙の上を少しずつ動く */ #arcfx.flies{opacity:calc(.25 + .75 * var(--p,0)); background-image:radial-gradient(circle,rgba(20,20,20,.85) 0 1.1px,transparent 1.4px), radial-gradient(circle,rgba(20,20,20,.7) 0 .9px,transparent 1.2px); background-size:97px 131px,143px 89px;background-position:11px 23px,61px 7px;animation:flies 9s steps(18) infinite} @keyframes flies{50%{background-position:17px 19px,55px 13px}100%{background-position:9px 27px,65px 3px}} /* イサク：不在着信の札。件数が増えると札の束が厚くなる */ #calls{position:absolute;right:14px;top:74px;z-index:26;pointer-events:none;opacity:0;transform:translateY(-6px); transition:opacity .6s,transform .6s} #calls.on{opacity:1;transform:none} #calls .card{background:rgba(250,248,244,.96);color:#17181c;border-radius:10px;padding:8px 12px 8px 14px; font:12px/1.5 "Noto Sans JP",sans-serif;display:flex;gap:10px;align-items:baseline; box-shadow:0 1px 0 #d9d4ca,0 calc(var(--n,1) * 3px) 0 -2px #e9e5dd,0 calc(var(--n,1) * 6px) 0 -4px #dcd7cd,0 8px 18px rgba(0,0,0,.28)} #calls .card b{color:#c8442c;font-weight:700} #calls .card i{font-style:normal;font-weight:700} /* 西遊記：夜明けまで */ /* PING の下に小さく。盤面の真ん中に枠つきで出していて、いろいろなものに被っていた（作者 2026-09-24） */ #hudui .dawn{position:absolute;right:18px;top:92px;font-size:9px;letter-spacing:.18em;color:#c9a95a; z-index:3;font-family:"Noto Sans JP",monospace;pointer-events:none} #hudui.dimmed .dawn,body[data-form]:not([data-form=hud]) #hudui .dawn{display:none} #hudui .dawn.low{color:#e0b36a} /* 曾呂利：お届けまで */ #app .nav .eta{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.06em;color:#5b6fd6;font-weight:700} #app .nav .eta.near{color:#c8442c} /* ===================================================================================== 山場の演出・素材の要らないもの（作者 2026-09-24） ===================================================================================== */ /* 永訣：告白から版の色が抜けて墨一色 */ body.sumi #bgbox{filter:grayscale(1) contrast(1.06);transition:filter 1.8s ease} /* 永訣：涙の染み。字が少し滲む */ #text .stain{position:absolute;transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(8,12,18,.34) 0 44%,rgba(8,12,18,.16) 60%,rgba(170,190,205,.10) 66%,transparent 72%); animation:stain 900ms cubic-bezier(.2,.8,.3,1) forwards} @keyframes stain{to{transform:translate(-50%,-50%) scale(1)}} #text.blot .ln{filter:blur(.55px);transition:filter 1.4s ease} /* 西遊記：回線が切れたら、ゲームの画面がそこで止まる */ #hudui.frozen,#hudui.frozen *{animation-play-state:paused !important;transition:none !important} /* ベンガル：網点が一粒ずつ抜け落ちて紙に戻る */ #bgbox.dotloss{-webkit-mask-image:var(--dlm);mask-image:var(--dlm);-webkit-mask-size:100% 100%;mask-size:100% 100%; } /* ベンガル：最後に上下の欄まで消える */ body.uioff #top,body.uioff #bar,body.uioff #rewind,body.uioff #home,body.uioff #skip{opacity:0 !important;transition:opacity 2.6s ease} /* オルフェウス：振り向いた瞬間、画面ごと奥へ吸い込まれる */ body.suck #bgbox,body.suck #stage,body.suck #vid{animation:suck 900ms cubic-bezier(.55,0,.8,.4) forwards} @keyframes suck{to{transform:scale(.06);opacity:0}} /* イサク：黒い点が下から育って版を埋める */ #bgbox .engulf{position:absolute;left:0;right:0;top:0;height:calc(100% + 280px);z-index:6;pointer-events:none; transform:translateY(100%);animation:engulf 1700ms cubic-bezier(.4,0,.6,1) 250ms forwards} @keyframes engulf{to{transform:translateY(-280px)}} /* 永訣の朝は暗い原稿用紙なので、染みは濡れた光沢（明るい縁）で見せ、滲みも少し強く */ body[data-form=manuscript] #text .stain{background:radial-gradient(circle,rgba(205,222,235,.08) 0 40%,rgba(205,222,235,.24) 57%,rgba(205,222,235,.06) 64%,transparent 70%)} body[data-form=manuscript] #text.blot .ln{filter:blur(.8px)} /* ===================================================================================== 狐の回の紙芝居（作者 2026-09-24。見本 kamishibai.html の見た目をそのまま移した） ===================================================================================== */ #kami{position:absolute;inset:0;z-index:33;background:#0e0f12;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:pointer; --paper:#efe6d0;--ink:#1f1a15;--kaki:#d9722b;font-family:Shippori,serif} body.kami #top,body.kami #bar,body.kami #rewind,body.kami #skip,body.kami #text{display:none} #kami .stg{position:absolute;left:14px;right:14px;top:64px;aspect-ratio:1.414;background:#2a1a0e;border:12px solid #6b4526;border-radius:3px; box-shadow:inset 0 0 0 2px #4a2f19,0 18px 30px rgba(0,0,0,.5);overflow:hidden} #kami .card{position:absolute;inset:0;background:var(--paper);transition:transform 620ms cubic-bezier(.5,0,.2,1);overflow:hidden} #kami .card.night{background:#46507a} #kami .card::after{content:"";position:absolute;inset:0;background:url(assets/paper_grain.webp) 0 0/256px;mix-blend-mode:multiply;opacity:.45;pointer-events:none} #kami .card.out{transform:translateX(106%)} #kami .card.half{transform:translateX(52%)} #kami .card.shake .in{animation:kmsh 380ms ease} @keyframes kmsh{20%{translate:-6px 0;rotate:-.6deg}50%{translate:5px 0;rotate:.5deg}80%{translate:-3px 0}} #kami .in{position:absolute;inset:0;transition:transform 700ms cubic-bezier(.4,0,.2,1)} #kami .L{position:absolute;opacity:0;transition:opacity 500ms ease,transform 520ms cubic-bezier(.3,1.3,.5,1)} #kami .L.on{opacity:1} #kami .L.img{background:var(--u) center/contain no-repeat} #kami .L.a-left{transform:translateX(-40px)} #kami .L.a-right{transform:translateX(40px)} #kami .L.a-up{transform:translateY(30px)} #kami .L.a-pop,#kami .L.a-stamp{transform:scale(.4)} #kami .L.on.a-left,#kami .L.on.a-right,#kami .L.on.a-up,#kami .L.on.a-pop,#kami .L.on.a-stamp{transform:none} #kami .L.off{opacity:0 !important} #kami .L.off.drift{transform:scale(1.25) translateY(-12px)} #kami .W{position:absolute;font:700 28px/1.1 "Zen Maru Gothic",sans-serif;color:var(--kaki);text-shadow:2px 2px 0 rgba(255,255,255,.6);white-space:nowrap} #kami .phone{position:absolute;left:30%;right:30%;top:5%;bottom:-6%;border:3px solid var(--ink);border-radius:18px;background:#b9c8dc;overflow:hidden} #kami .phone .bar{height:14%;border-bottom:2px solid var(--ink);background:#e9e2cf} #kami .phone .msgs{position:absolute;left:6px;right:6px;bottom:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start} #kami .phone .m{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:2px 8px;font:700 13px/1.3 "Zen Maru Gothic",sans-serif;color:var(--ink); opacity:0;transform:translateY(8px);transition:all 300ms} #kami .phone .m.on{opacity:1;transform:none} #kami .tx{position:absolute;left:22px;right:22px;top:330px;color:#e9e3d6;font:400 16px/1.9 Shippori,serif;letter-spacing:.04em;white-space:pre-wrap; word-break:keep-all;overflow-wrap:anywhere;line-break:strict} #kami .tx .ln{animation:kmrise 480ms ease both} @keyframes kmrise{from{opacity:0;transform:translateY(5px)}} #kami .puff{background:radial-gradient(circle at 50% 48%,#f8f3e7 0 24%,transparent 30%),radial-gradient(circle at 30% 58%,#f8f3e7 0 20%,transparent 26%),radial-gradient(circle at 70% 58%,#f8f3e7 0 21%,transparent 27%),radial-gradient(circle at 40% 34%,#f8f3e7 0 17%,transparent 23%),radial-gradient(circle at 62% 34%,#f8f3e7 0 16%,transparent 22%),radial-gradient(circle at 50% 70%,#f8f3e7 0 20%,transparent 26%),radial-gradient(circle at 20% 44%,#f8f3e7 0 12%,transparent 18%),radial-gradient(circle at 82% 44%,#f8f3e7 0 12%,transparent 18%),radial-gradient(circle at 34% 72%,#ddd5c4 0 18%,transparent 24%),radial-gradient(circle at 66% 74%,#ddd5c4 0 18%,transparent 24%),radial-gradient(circle at 50% 80%,#ddd5c4 0 16%,transparent 22%)} #kami .in.rumble{animation:kmrum 120ms linear infinite} #kami .in.rumble2{animation:kmrum2 90ms linear infinite} @keyframes kmrum{25%{translate:1px 0}50%{translate:-1px 1px}75%{translate:1px -1px}} @keyframes kmrum2{25%{translate:3px -1px}50%{translate:-3px 2px}75%{translate:2px -2px}} #kami .fl{position:absolute;inset:0;background:#fffdf5;opacity:0;pointer-events:none;z-index:5} #kami .fl.go{animation:kmfl 700ms ease-out} @keyframes kmfl{0%{opacity:1}100%{opacity:0}} #kami .hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:500 10px/1 "Noto Sans JP",sans-serif;letter-spacing:.3em;color:#5b5e66} #kami .no{position:absolute;top:30px;right:18px;font:500 10px/1 "Noto Sans JP",sans-serif;letter-spacing:.2em;color:#5b5e66} /* 永訣の朝の断片（作者 2026-09-24）。永訣の朝の画面をそのまま使い、タップは #fragtap が受ける。進みの目盛りと戻る・SKIP は隠す */ #fragtap{position:absolute;inset:0;z-index:33;cursor:pointer} body.fragon #bar,body.fragon #rewind,body.fragon #skip{visibility:hidden} /* 一行を立てる画面の、最後の読点より後ろは折り返さない */ #text .ln.pr .nw{white-space:nowrap} /* ご依頼主の欄の猫の落書き（公園を読み終えた後） */ #kvFrom .kvcat{display:block;height:58px;width:auto;margin:2px 0 0 -2px;opacity:.92} /* チャットの吹き出しも、小さい「っ」「ゃ」などを行頭に置かない（厳しい禁則・2026-09-24） */ #app .bub,.bub{line-break:strict} /* 二列の画面の文も、切れ目でだけ折る（切れ目は UI.wb が禁則を守って入れる） */ #split .readA p,#split .rA p{word-break:keep-all;line-break:strict} /* オープニングの間は伝票の欄も操作の脚も出さない（冒頭で流していた時と同じ全面） */ body.opening #top,body.opening #bar,body.opening #rewind,body.opening #skip,body.opening #home{visibility:hidden} /* ルートに入る時の扉（2026-09-24）。手前で物語の画面を紙の色へ溶かす幕と、題を大きく出す札 */ #veil{position:absolute;inset:0;z-index:79;background:#efe9db;opacity:0;pointer-events:none;transition:opacity 950ms ease-in-out} #veil.on{opacity:1} #source.door .rt{padding-top:26px;padding-bottom:6px} #source.door .rt b{display:block;font-family:Shippori,serif;font-size:28px;line-height:1.5;font-weight:600;letter-spacing:.08em; word-break:keep-all;overflow-wrap:anywhere} #source.door .src{display:block;margin-top:6px;font-style:normal;font-family:Shippori,serif;font-size:13px;line-height:1.7;color:#4a4740; word-break:keep-all;overflow-wrap:anywhere} #source.door p{font-size:15px} /* 西遊記：回線切れの黒い幕はゲームの画面だけに。下のメッセージ欄は幕の上に出す（幕の下に沈んで読めなかった・作者 2026-09-24） */ #hudui .cut{z-index:4} #hudui .log{z-index:5} /* 曾呂利：チャットの上に出た置き配の通知は、少し見せたら上へ引っ込める（作者 2026-09-24） */ #ov .card.away{opacity:0 !important;transform:translateY(-28px) !important;transition:opacity .6s ease,transform .6s ease !important;pointer-events:none} /* 遡りの案内：タップされたら揺らして、スクロールを促す */ #app .hint.nudge{animation:hintNudge 520ms ease} @keyframes hintNudge{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}} /* 控えめな独白（西遊記 1012・1013）：画面の真ん中に、帯なし・普通の字の大きさで（作者 2026-09-24） */ body #frame #text.plainmid{top:50% !important;bottom:auto !important;transform:translateY(-50%) !important; background:none !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important; text-align:center !important;font-size:16px !important;padding:0 !important} body #frame #text.plainmid .ln{font-size:16px !important;text-shadow:none !important} /* 曾呂利：送信欄が出ている間は、下の操作を送信欄（46px）の上へ（作者 2026-09-24「送信ボタンと目次ボタンが被っている」） */ body.sendrow[data-form=app] #rewind,body.sendrow[data-form=app] #home,body.sendrow[data-form=app] #skip{bottom:50px !important} /* 送り状：断片の行が増えると画面より長くなり、「もどる」が画面の外に出て押せなかった（作者 2026-09-24）。 送り状は画面の中でスクロールし、「もどる」は画面の下に固定して大きく。断片の行は詰める */ #flow.on{overflow-y:auto !important;-webkit-overflow-scrolling:touch} #flow .spine{flex:0 0 auto !important} #flow .back{position:sticky;bottom:10px;z-index:6;margin:14px auto 10px !important;min-height:48px !important; padding:12px 40px !important;font-size:15px !important;letter-spacing:.12em;border-radius:3px; background:#efe9db !important;border:1.5px solid #6b675e !important;color:#17181c !important;opacity:1 !important; box-shadow:0 4px 14px rgba(0,0,0,.18)} body[data-slip="1"] #flow.slipv .tbl tr.frg td{padding-top:3px;padding-bottom:3px} body[data-slip="1"] #flow.slipv .tbl tr.frg .han{width:20px;height:20px;font-size:10px} /* 送り状：残り一つの行に薄い印（受領の欄に朱の点がゆっくり明滅）。説明の文は出さない */ body[data-slip="1"] #flow.slipv .tbl tr.last .rc::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%; background:#c8442c;opacity:.5;animation:lastDot 1.8s ease-in-out infinite alternate} @keyframes lastDot{from{opacity:.18}to{opacity:.6}} /* ===== オルフェウス：非常階段は引っ張って更新（作者 2026-09-25 docs/orpheus_pull_handoff_20260925.md） ===== */ html,body{overscroll-behavior:none} body[data-form=stairs] #frame{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 更新の輪：引く距離に合わせて描かれ、しきい値を越えると矢印が消えて輪が閉じる。離すと回る */ #ptr{position:absolute;left:50%;top:78px;width:34px;height:34px;margin-top:-34px;z-index:36;pointer-events:none; opacity:0;transform:translate(-50%,0);transition:opacity 160ms ease;border-radius:50%;background:rgba(10,11,14,.72); box-shadow:0 2px 10px rgba(0,0,0,.35);--k:0} #ptr.on{opacity:1} #ptr svg{width:100%;height:100%;display:block} #ptr .bgc{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2.4} #ptr .arc{fill:none;stroke:#2fb37a;stroke-width:2.4;stroke-linecap:round;transform-origin:16px 16px;transform:rotate(-90deg); stroke-dasharray:69.1;stroke-dashoffset:calc(69.1 * (1 - var(--k)))} #ptr .arw{fill:none;stroke:#e4efe9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:16px 16px; transform:rotate(calc(var(--k) * 180deg));transition:opacity 120ms} #ptr.ready .arw{opacity:0} #ptr.ready .arc{stroke:#6fe0b0} #ptr.spin svg{animation:ptrSpin 520ms linear infinite} #ptr.spin .arc{stroke-dasharray:44 69.1;stroke-dashoffset:0} @keyframes ptrSpin{to{transform:rotate(360deg)}} /* 新しい一行は上から降りてくる */ #text.pullin{animation:pullIn 460ms cubic-bezier(.2,.8,.3,1) both} @keyframes pullIn{from{transform:translateY(-46px);opacity:0}to{transform:none;opacity:1}} /* 階段の間は読み返しを使えない */ body[data-form=stairs][data-route=orpheus] #rewind,body[data-form=stairs][data-route=orpheus] #back{display:none !important} /* 猫の写真の束は画面の下に一部だけ見えている */ body[data-form=stairs] #ov .card.peek{top:auto !important;bottom:-34% !important;animation:cardPeek 900ms cubic-bezier(.2,.85,.25,1) both} @keyframes cardPeek{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}} /* 肩をトントン：画面を軽く二度揺らす */ #frame.shoulder{animation:shoulder 820ms ease} @keyframes shoulder{0%,100%{transform:none}8%{transform:translate(2px,1px)}16%{transform:none}42%{transform:translate(2px,1px)}50%{transform:none}} /* ===== ベンガル：届いた物は、払って削除（作者 2026-09-25） ===== */ #rcvlist{position:absolute;left:0;right:0;top:0;bottom:0;z-index:62;background:#0d0f14;color:#e6e8ee; font-family:"Noto Sans JP",system-ui,sans-serif;opacity:0;transition:opacity 360ms ease;touch-action:pan-y; -webkit-user-select:none;user-select:none} #rcvlist.on{opacity:1} #rcvlist .hd{display:flex;justify-content:space-between;align-items:baseline;padding:58px 18px 12px;border-bottom:1px solid #232734} #rcvlist .hd b{font-size:12px;letter-spacing:.14em;color:#c8442c;font-weight:700} #rcvlist .hd span{font-size:12px;color:#8a90a0;letter-spacing:.08em} #rcvlist .rw{position:relative;overflow:hidden;border-bottom:1px solid #1c2029;height:76px;transition:height 300ms ease} #rcvlist .rw.shrink{height:0 !important;border-bottom-color:transparent} #rcvlist .del{position:absolute;right:0;top:0;bottom:0;width:88px;border:0;background:#e5484d;color:#fff; font:600 14px "Noto Sans JP",system-ui,sans-serif;letter-spacing:.06em} #rcvlist .row{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 16px;background:#141821;touch-action:pan-y} #rcvlist .th{position:relative;flex:0 0 52px;height:52px;border-radius:6px;overflow:hidden;background:#000} #rcvlist .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} #rcvlist .tx b{font-size:15px;font-weight:600;letter-spacing:.04em} #rcvlist .tx i{font-style:normal;font-size:11px;color:#7ec9a0} #rcvlist em{font-style:normal;font-size:11px;color:#6f7686} #rcvlist.gray{filter:grayscale(1)} #rcvlist .row.nudge{animation:rowNudge 560ms ease} @keyframes rowNudge{0%,100%{transform:none}30%{transform:translateX(-34px)}60%{transform:translateX(-8px)}} .undotoast{position:absolute;left:50%;bottom:74px;z-index:64;transform:translate(-50%,20px);opacity:0; display:flex;align-items:center;gap:18px;padding:12px 16px 12px 18px;border-radius:10px;background:rgba(38,41,50,.96); color:#e8e9ee;font:13px/1 "Noto Sans JP",system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35); transition:opacity 260ms ease,transform 260ms ease;white-space:nowrap} .undotoast.on{opacity:1;transform:translate(-50%,0)} .undotoast button{border:0;background:none;color:#7ab8ff;font:600 13px "Noto Sans JP",system-ui,sans-serif;padding:6px 4px} .undotoast button:disabled{color:#6f7686} /* 非常階段：階の切れ目でタップした時の案内（2026-09-25） */ #ptrtip{position:absolute;left:50%;top:104px;transform:translate(-50%,-6px);z-index:40;font-size:12px;letter-spacing:.12em;color:#ece8de;background:rgba(8,10,14,.72);padding:6px 12px;border-radius:14px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap} #ptrtip.on{opacity:1;transform:translate(-50%,0)} /* イサク：同僚からの着信（2026-09-25）。上から降りる通知。言葉のボタンは無い。上へ払って消す */ #incall{position:absolute;left:24px;right:0;top:0;bottom:0;z-index:60;touch-action:none;user-select:none;-webkit-user-select:none} #incall .bn{position:absolute;left:-12px;right:12px;top:14px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px; background:rgba(28,30,36,.94);color:#f2efe8;box-shadow:0 10px 30px rgba(0,0,0,.45); transform:translateY(-140%);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.3,1),opacity .3s} #incall.on .bn{transform:none;opacity:1} #incall .bn b{font-size:17px;font-weight:600;letter-spacing:.08em} #incall .ic{width:38px;height:38px;border-radius:50%;background:#34c759;display:grid;place-items:center;flex:none;animation:ringIc 2.2s infinite} #incall .ic svg{width:20px;height:20px;fill:#fff} @keyframes ringIc{0%,40%,100%{transform:rotate(0)}4%,12%,20%,28%{transform:rotate(-14deg)}8%,16%,24%,32%{transform:rotate(14deg)}} #incall.on .bn::after{content:"";position:absolute;left:50%;bottom:6px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.28)} #incall .bn.nudge{animation:callNudge .36s} @keyframes callNudge{0%,100%{translate:0 0}30%{translate:0 -10px}60%{translate:0 3px}} #frame.calling{touch-action:none;overscroll-behavior:none} body.rewound #incall .bn{opacity:.15} /* 西遊記の龍（ドット絵・2026-09-25）。版の枠の中の別の層。網点を通さず、角をぼかさない */ #px{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s} #px.on{opacity:1} #px img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;image-rendering:crisp-edges;max-width:none} .pxim{image-rendering:pixelated;image-rendering:crisp-edges;display:block} #end .pic .pxim{position:absolute;left:50%;top:50%;width:320px;transform:translate(-50%,-50%)} #flow .th .pxim{width:100%;height:100%;object-fit:contain} /* 分岐表（送り状の改造・作者 2026-09-25 依頼書 §3） */ body[data-slip="1"] #flow.slipv .tbl tr.none td{padding-top:4px;padding-bottom:4px;color:#a39d8f} body[data-slip="1"] #flow.slipv .tbl tr.br td.nm{font:500 11px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.06em;background:rgba(23,24,28,.05)} body[data-slip="1"] #flow.slipv .tbl tr.br .mk{font-style:normal;color:var(--han);margin-right:6px} body[data-slip="1"] #flow.slipv .tbl tr.br.locked .mk{color:#a39d8f} body[data-slip="1"] #flow.slipv .tbl tr.br .go{float:right;font-weight:500;font-size:9px;letter-spacing:.2em;color:var(--han);border:1px solid var(--han);border-radius:10px;padding:2px 8px} body[data-slip="1"] #flow.slipv .tbl tr.br.pick:active td.nm{background:rgba(23,24,28,.14)} body[data-slip="1"] #flow.slipv .tbl tr.end td.nm{padding-left:14px} body[data-slip="1"] #flow.slipv .tth{display:inline-block;position:relative;width:24px;height:24px;margin-right:8px;vertical-align:middle;background:#0a0b0e;overflow:hidden} body[data-slip="1"] #flow.slipv .tth.none{background:transparent;border:1px dashed #c9c3b5;box-sizing:border-box} body[data-slip="1"] #flow.slipv .tth .plate{position:absolute;inset:0} body[data-slip="1"] #flow.slipv .tth .pxim{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} /* 題の画面：「画面をタップ」は「はじめから」のボタンに置き換えた */ #title #titleTap{display:none} /* 分かれ道の札：前に選んだ札は字を沈めて右に「済」。まだの札はいつもの濃さ（作者 2026-09-25） */ .choices .pick .wasmk{margin-left:auto;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%; font:700 11px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:0;opacity:.75;transform:rotate(-8deg)} .choices .pick.was span{opacity:.5} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick .wasmk{color:var(--han,#b8322a)} body[data-slip="1"]:not([data-form=hud]):not([data-form=manga]):not([data-form=app]) .choices .pick.was i{border-color:#a39d8f} /* 西遊記：文字の欄が伸びて、地面に立つ王様たち（太宗・魏徴）を覆っていた（作者 2026-09-26「テキストのせいで後半の王様たちがあんまり見えない」）。 欄の上端を王様の足元（--sky + 408px）より下で止める。古い行は上へ押し出されて消える */ body[data-rules="1"] #hudui .log{max-height:max(72px, calc(100% - 58px - var(--sky) - 414px))} body.badge[data-rules="1"] #hudui .log{max-height:max(72px, calc(100% - 96px - var(--sky) - 414px))} /* ===================== 悪夢の遊び三本（2026-09-26 games7.js） ===================== */ .game7{position:absolute;inset:0;z-index:58;opacity:0;transition:opacity .35s;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none} .game7.on{opacity:1} body.gaming #text{opacity:0 !important} body.gaming #frame{touch-action:none} .game7msg{z-index:70} /* ---- 死神：火を守る ---- */ .rh{background:radial-gradient(ellipse at 50% 64%,rgba(34,20,9,.93),rgba(4,3,2,.985) 68%)} .rh{--life:1} .rh-hand{position:absolute;left:50%;bottom:22%;width:0;height:0} .rh-finger{position:absolute;left:-15px;top:-4px;width:30px;height:180px;border-radius:15px 15px 6px 6px;background:linear-gradient(90deg,#b49a86,#d8c1ad 45%,#a88e7a);box-shadow:0 0 30px rgba(255,170,80,.18)} .rh-wax{position:absolute;left:-8px;width:16px;height:calc(26px * var(--life));bottom:4px;transform:translateY(0);background:linear-gradient(90deg,#e9e0cc,#fbf6ea 50%,#d9cfbb);border-radius:3px 3px 1px 1px} .rh .rh-wax{top:auto;bottom:auto;margin-top:calc(-4px - 26px * var(--life));height:calc(26px * var(--life))} .rh-flame{position:absolute;left:-14px;width:28px;height:44px;top:calc(-48px - 26px * var(--life));transform-origin:50% 100%;transform:scale(var(--life));transition:transform .5s} .rh-flame i{position:absolute;inset:0;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#fff8d8 0 18%,#ffd36a 34%,#ff8a2a 58%,rgba(255,90,20,0) 72%); filter:blur(.4px);animation:rhFlick 1.3s ease-in-out infinite alternate;box-shadow:0 0 38px 14px rgba(255,150,60,.25)} @keyframes rhFlick{0%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(1.06) skewX(2deg)}100%{transform:scaleY(.95) skewX(-2deg)}} .rh-flame.gustL i{animation:rhGustL .9s ease-out} .rh-flame.gustR i{animation:rhGustR .9s ease-out} @keyframes rhGustL{0%{transform:skewX(0) scale(1)}25%{transform:skewX(-38deg) scale(.45,.6);opacity:.45}100%{transform:skewX(0) scale(1)}} @keyframes rhGustR{0%{transform:skewX(0) scale(1)}25%{transform:skewX(38deg) scale(.45,.6);opacity:.45}100%{transform:skewX(0) scale(1)}} .rh-ring{position:absolute;bottom:calc(22% + 56px);width:54px;height:54px;margin-bottom:-27px;border:2px solid rgba(240,225,200,.55);border-radius:50%} .rh-ring.L{left:calc(50% - 118px)} .rh-ring.R{left:calc(50% + 64px)} .rh-ring.pulse{animation:rhPulse .8s ease-in-out infinite} @keyframes rhPulse{50%{transform:scale(1.18);border-color:#ffe2a8;box-shadow:0 0 16px rgba(255,210,140,.5)}} .rh-ring.ok{animation:rhOk .45s ease-out} @keyframes rhOk{30%{transform:scale(1.25);border-color:#fff;background:rgba(255,236,200,.18)}} .rh-breath{position:absolute;bottom:calc(22% + 44px);width:110px;height:26px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(170,200,230,.55),rgba(170,200,230,0) 70%);filter:blur(3px)} /* 行き先（○の真ん中）までの距離は、遊びが○の位置を測って --tx に入れる（幅 500px 未満で○に届いていなかった・作者 2026-09-26） */ .rh-breath.L{left:-120px} .rh-breath.R{right:-120px} .rh-breath.blocked{opacity:0;transition:opacity .25s} .rh-breath.through{opacity:0;transition:opacity .6s} .rh-palm{position:absolute;bottom:calc(22% + 6px);width:46px;height:84px;border-radius:24px 24px 18px 18px;background:linear-gradient(180deg,rgba(214,190,170,.95),rgba(170,140,120,.9));opacity:0;pointer-events:none} .rh-palm.L{left:calc(50% - 76px)} .rh-palm.R{left:calc(50% + 30px)} .rh-palm.go{animation:rhPalm .42s ease-out} @keyframes rhPalm{0%{opacity:0;transform:translateY(16px)}30%{opacity:.95;transform:none}100%{opacity:0}} /* ---- 死神：火を継ぐ ---- */ .cr{background:radial-gradient(ellipse at 50% 58%,rgba(20,12,6,.9),rgba(0,0,0,.985) 62%)} .cr-her{position:absolute;left:28%;bottom:20%;width:0;height:0} .cr-her .rh-finger{height:150px} .cr-her .rh-wax.short{position:absolute;left:-7px;top:-9px;width:14px;height:5px;background:#efe6d2;border-radius:2px} .cr-mine{position:absolute;left:70%;bottom:20%;width:0;height:0} .cr-candle{position:absolute;left:-10px;top:-190px;width:20px;height:190px;background:linear-gradient(90deg,#e7decb,#fbf5e8 50%,#d4c9b3);border-radius:3px} .cr-wick{position:absolute;left:-1px;top:-199px;width:2px;height:9px;background:#2a211b} .cr-flame{position:absolute;left:0;top:0;width:14px;height:22px;margin:-22px 0 0 -7px} .cr-flame i{position:absolute;inset:0;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#fff4cc 0 18%,#ffc458 38%,rgba(255,110,30,0) 72%);animation:rhFlick 1.6s ease-in-out infinite alternate} .cr.held{pointer-events:none} .cr.out .cr-flame{opacity:0;transition:opacity .3s} /* ---- 西遊記：弓で援護 ---- */ #battle{position:absolute;left:50%;transform:translateX(-50%);z-index:2;image-rendering:pixelated;image-rendering:crisp-edges;transition:filter .5s} #battle.idle{filter:brightness(.42) saturate(.7)} body.battling #hudui .log,body.battling #hudui .hbub{opacity:0 !important;transition:opacity .3s} .bt-cap{position:absolute;inset:0;z-index:57;touch-action:none} /* ---- 曾呂利：迫ってくる配達員（何をしても効かない） ---- */ .ch{background:#0b0d12} .ch-app{position:absolute;inset:0;display:flex;flex-direction:column;color:#e8ebf0;font-family:"Noto Sans JP",system-ui,sans-serif;transition:transform .4s cubic-bezier(.3,.7,.2,1),opacity .35s} .ch-app.closing{transform:scale(.72) translateY(40%);opacity:0} .ch-app.reopen{animation:chReopen .4s cubic-bezier(.2,.8,.3,1)} @keyframes chReopen{from{transform:scale(.8);opacity:.2}} .ch-bar{display:flex;align-items:center;gap:10px;padding:14px 14px 8px;font-size:12px;letter-spacing:.08em;color:#9aa3b2} .ch-bar b{color:#e8ebf0;font-weight:700;letter-spacing:.14em} .ch-x{width:32px;height:32px;border-radius:50%;border:1px solid #3a4150;background:#161a22;color:#c9ced8;font-size:18px;line-height:1;cursor:pointer} .ch-eta{padding:4px 16px 10px;display:flex;align-items:baseline;gap:10px} .ch-eta small{font-size:11px;color:#9aa3b2;letter-spacing:.1em} .ch-eta em{font-style:normal;font-size:26px;font-weight:700;letter-spacing:.04em} .ch-eta.near em{color:#e5484d} .ch-map{position:relative;flex:1;margin:0 12px;border-radius:12px;overflow:hidden;background:#1a2230} .ch-map svg{position:absolute;inset:0;width:100%;height:100%} .ch-map .rd{stroke:#2c384b;stroke-width:3;fill:none;vector-effect:non-scaling-stroke} .ch-home{position:absolute;left:50%;top:12%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#e8ebf0;color:#0b0d12;display:grid;place-items:center;font-size:18px;box-shadow:0 0 0 6px rgba(232,235,240,.12)} .ch-rider{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px} .ch-rider i{position:absolute;inset:0;border-radius:50% 50% 40% 40%;background:rgba(200,215,235,.8);box-shadow:0 0 14px rgba(200,215,235,.6);animation:chGhost 1.6s ease-in-out infinite} @keyframes chGhost{50%{opacity:.45;transform:translateY(-2px)}} .ch-rider.arrived i{background:#e5484d;box-shadow:0 0 18px #e5484d} .ch-dist{position:absolute;right:10px;bottom:10px;font:600 11px/1 ui-monospace,Menlo,monospace;color:#9aa3b2;letter-spacing:.08em} .ch-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 8px} .ch-acts button{min-height:44px;border-radius:10px;border:1px solid #2c3444;background:#141922;color:#e8ebf0;font:500 13px/1.3 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px} .ch-acts button:active{background:#1d2430} .ch-acts button[disabled]{opacity:.7} .ch-acts .spin{width:12px;height:12px;border:2px solid #6b7485;border-top-color:#e8ebf0;border-radius:50%;animation:ptrSpin .9s linear infinite} .ch-msg{position:absolute;left:16px;right:16px;bottom:150px;padding:12px 14px;border-radius:12px;background:rgba(30,34,44,.96);font-size:13px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none} .ch-msg.on{opacity:1;transform:none} .ch-home-bar{height:30px;display:grid;place-items:center} .ch-home-bar::after{content:"";width:110px;height:4px;border-radius:2px;background:#4a5263} /* イサクの「不在着信」：通知カードの .card（position:absolute）が当たって、器の幅が 0 になり、札が画面の右の外へ出ていた（作者 2026-09-26） */ #calls .card{position:static;width:max-content;max-width:none;white-space:nowrap;transform:none;left:auto;top:auto} .game7msg .body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict} /* ---- 死神（作り直し）：会話の最中のため息。火は画面の下に小さく ---- */ .brth{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .5s;--life:1} .brth.on{opacity:1} .brth .br-candle{position:absolute;left:50%;bottom:84px;width:0;height:0} .brth .rh-finger{left:-9px;top:-2px;width:18px;height:74px;border-radius:9px 9px 4px 4px} .brth .rh-wax{top:auto;bottom:auto;left:-5px;width:10px;height:calc(14px * var(--life));margin-top:calc(-2px - 14px * var(--life))} .brth .rh-flame{left:-10px;width:20px;height:30px;top:calc(-32px - 14px * var(--life))} .brth .rh-flame i{box-shadow:0 0 24px 8px rgba(255,150,60,.22)} .brth .rh-ring{bottom:calc(84px + 22px);width:40px;height:40px;margin-bottom:-20px;border-color:rgba(240,225,200,.35)} .brth .rh-ring.L{left:calc(50% - 92px)} .brth .rh-ring.R{left:calc(50% + 52px)} .brth .rh-ring.pulse{border-color:rgba(255,226,168,.9)} .brth .rh-breath{bottom:calc(84px + 9px)} .brth .rh-palm{bottom:78px;width:30px;height:56px} .brth .rh-palm.L{left:calc(50% - 56px)} .brth .rh-palm.R{left:calc(50% + 26px)} .brth .rh-ring{box-shadow:0 0 0 1px rgba(60,38,20,.45),inset 0 0 0 1px rgba(60,38,20,.25)} .brth .rh-finger{height:50px} /* 西遊記：戦場が出ている時の吹き出しは、話し手の頭の上（付け根の位置は --tail） */ #hudui .hbub.anch{margin-top:-8px} #hudui .hbub.anch::after{left:var(--tail) !important;right:auto !important} /* ===================== 彼女の本棚（奇数日の夜・2026-09-27） ===================== */ .books{position:absolute;left:0;right:0;top:13%;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:30;pointer-events:none} .books .shelf{display:flex;gap:12px;align-items:flex-end;padding:12px 22px 6px;background:linear-gradient(#2d231a,#1d1610); border-bottom:9px solid #43321f;border-radius:2px;box-shadow:0 10px 24px rgba(0,0,0,.45);pointer-events:auto} .books .spine{writing-mode:vertical-rl;width:50px;border:0;border-radius:3px 3px 1px 1px;padding:16px 0 14px;cursor:pointer; font:600 13px/1 "Shippori Mincho",serif;letter-spacing:.06em;color:#f5ecd9; box-shadow:inset -5px 0 0 rgba(0,0,0,.22),inset 5px 0 0 rgba(255,255,255,.07),0 2px 0 rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.2,.8,.3,1);animation:pickin 460ms ease both} .books .spine span{display:block;border-top:1px solid rgba(245,236,217,.35);border-bottom:1px solid rgba(245,236,217,.35);padding:10px 0} .books .spine.s0{background:#7b2f2a;height:244px} .books .spine.s1{background:#26405b;height:232px;animation-delay:90ms} .books .spine:active,.books .spine.taken{transform:translateY(-14px)} .books .none{pointer-events:auto;border:0;background:rgba(10,12,16,.74);color:#efe9db;padding:11px 18px;border-radius:2px;cursor:pointer; font:500 15px/1.4 "Shippori Mincho",serif;letter-spacing:.06em;animation:pickin 460ms ease 180ms both} .books .none.taken{background:rgba(40,14,16,.95)} .books .spine{position:relative} .books .spine .wasmk{position:absolute;left:50%;bottom:-12px;margin-left:-13px;writing-mode:horizontal-tb;display:grid;place-items:center;width:26px;height:26px; border:1.5px solid #b8322a;border-radius:50%;background:rgba(245,236,217,.92);color:#b8322a;font:700 12px/1 "Noto Sans JP",system-ui,sans-serif;transform:rotate(-8deg)} .books .spine.was span{opacity:.6} .books .pick[disabled]{opacity:.55} .books .pick.taken{opacity:1} /* ===================== 分岐表（2026-09-27 構造の組み替え） ===================== */ body[data-slip="1"] #flow.slipv .tbl td.morn{font:500 11px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.08em;color:#6b675e} body[data-slip="1"] #flow.slipv .tbl td.morn .dim{color:#bdb6a6} body[data-slip="1"] #flow.slipv .tbl td.fork{font:500 11px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.06em;background:rgba(23,24,28,.05)} body[data-slip="1"] #flow.slipv .tbl td.fork .mk{font-style:normal;color:var(--han);margin-right:6px} body[data-slip="1"] #flow.slipv .tbl td.fork.locked .mk{color:#a39d8f} body[data-slip="1"] #flow.slipv .tbl .go{float:right;font-weight:500;font-size:9px;letter-spacing:.2em;color:var(--han);border:1px solid var(--han);border-radius:10px;padding:2px 8px} body[data-slip="1"] #flow.slipv .tbl td.item{padding-left:14px} body[data-slip="1"] #flow.slipv .tbl tr.frg small{display:block;font-size:10px;color:#8b8577;letter-spacing:.04em} body[data-slip="1"] #flow.slipv .badend{margin:10px 0 6px;padding:8px 10px;border:1.5px solid var(--han);color:var(--han);font:700 13px/1.4 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.12em;text-align:center} body[data-slip="1"] #flow.slipv .doorback{display:block;margin:14px auto 0;padding:12px 22px;border:0;border-radius:2px;background:#17181c;color:#efe9db;font:500 14px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.12em;cursor:pointer} /* 西遊記：櫓に敵が届いた時に画面が揺れる（2026-09-27 調整） */ #battle.hurt{animation:btHurt .28s} @keyframes btHurt{25%{translate:-4px 1px}50%{translate:3px -1px}75%{translate:-2px 0}} /* 狐：封を指で切る（traceAct・2026-09-27）。点線の上を、なぞった所だけ細い切れ目が走る */ .trpad{position:absolute;inset:0;z-index:46;touch-action:none;cursor:grab} .trline{position:absolute;height:0;border-top:1.5px dashed rgba(233,227,214,.7);--a:0%;--c:0%} .trline i{position:absolute;left:0;right:0;top:-2px;height:3px;background:#f6f1e4;box-shadow:0 0 6px rgba(255,248,230,.9); -webkit-mask:linear-gradient(90deg,transparent var(--a),#000 var(--a),#000 var(--c),transparent var(--c)); mask:linear-gradient(90deg,transparent var(--a),#000 var(--a),#000 var(--c),transparent var(--c))} .trline.cut{border-top-color:transparent} .trline.cut i{transition:opacity 500ms ease 200ms;opacity:0} .trpad .trhint{position:absolute;left:0;right:0;text-align:center;color:#e9e3d6; font:500 12px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;animation:uhint 1.6s ease-in-out infinite alternate;transition:opacity 300ms ease} .trpad .trhint::after{content:"→";display:inline-block;margin-left:10px;animation:uarrow 1.1s ease-in-out infinite} .trpad .trhint.gone{opacity:0;animation:none} /* 狐の紙芝居：最後に玄関の鍵（サムターン）を指で回して開ける札（2026-09-27） */ #kami .lockg{position:absolute;inset:0;touch-action:none;cursor:grab} #kami .lockg .door{position:absolute;left:22%;right:22%;top:-4%;bottom:-4%;border-left:3px solid var(--ink);border-right:3px solid var(--ink); background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(31,26,21,.06) 22px 23px)} #kami .lockg .esc{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--ink);border-radius:50%; background:#e9dfc8;box-shadow:inset 0 0 0 7px #e9dfc8,inset 0 0 0 9px rgba(31,26,21,.55)} #kami .lockg .knob{position:absolute;left:50%;top:50%;width:24%;height:70%;border:3px solid var(--ink);border-radius:46%/16%;background:#d8c9a6; transform:translate(-50%,-50%) rotate(var(--r,0deg));transition:transform 90ms linear} #kami .lockg .knob.back{transition:transform 360ms cubic-bezier(.3,1.4,.5,1)} #kami .lockg .arc{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none; animation:uhint 1.6s ease-in-out infinite alternate} #kami .lockg.open .arc{opacity:0;animation:none;transition:opacity 300ms ease} #kami .lockg.open .esc{animation:kmsh 380ms ease} #kami .tx .hintln{text-align:center;font:500 13px/1.9 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.2em;color:#d9d3c7;animation:uhint 1.6s ease-in-out infinite alternate} /* イサク：置き配の通知で手が止まる（stayHand・2026-09-27）。止まった画面は色が抜け、問いの札が出る */ body.stilled #bgbox,body.stilled #text{filter:grayscale(.75) contrast(1.05);transition:filter 240ms ease} .stayask{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(6,7,9,.42);animation:kmrise 420ms ease both} .stayask .w{width:78%;max-width:320px;background:#efe9db;color:#1a1a1c;border-radius:3px;padding:22px 18px 16px;box-shadow:0 12px 30px rgba(0,0,0,.5);text-align:center} .stayask p{margin:0 0 16px;font:500 17px/1.7 Shippori,serif;letter-spacing:.06em} .stayask .pk{display:block;width:100%;margin-top:10px;padding:12px 10px;border:1px solid #1a1a1c;background:transparent;color:#1a1a1c; font:500 15px/1.2 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.14em;cursor:pointer;border-radius:2px} .stayask .pk.taken{background:#1a1a1c;color:#efe9db} .stayask .pk[disabled]:not(.taken){opacity:.45} /* ---- 改行の位置（作者 2026-09-28） 「真ん中近くで改行して気持ち悪い」→ 一度は字で端まで詰める形にしたが、作者「やっぱり文節で改行したい」。 文節で折る（keep-all＋ビルドの文節の切れ目）に戻し、途中で早く折らせていた text-wrap:pretty を外す。 全ルートで測ると、最終行以外の行はほとんど 15〜19 字（欄をほぼ埋める）。?wrap=char で字で詰める形と比べられる */ #text .ln,#hudui .hbub,#hudui .log .ln,#kami .tx .ln,#source p{text-wrap:wrap !important} body[data-wrap=char] #text .ln, body[data-wrap=char] #hudui .hbub, body[data-wrap=char] #hudui .log .ln, body[data-wrap=char] #kami .tx .ln, body[data-wrap=char] #manga.scrollmode .nar, body[data-wrap=char] #split.roll.A .readA p, body[data-wrap=char] #split.roll.A .rA p, body[data-wrap=char] #split .readA p, body[data-wrap=char] #split .rA p, body[data-wrap=char] #source p, body[data-wrap=char] #app .bub, body[data-wrap=char] .game7msg .body{word-break:normal !important;overflow-wrap:normal !important;line-break:strict !important} /* 配達アプリが全画面で開いている間は、伝票の欄を隠す（アプリの上の欄と重なっていた・曾呂利・作者 2026-09-28） */ body[data-form=app] #top{opacity:0 !important;pointer-events:none} /* 振動の代わりの、画面のごく小さな揺れ（数 px・0.16 秒・2026-09-28） */ #frame.buzz{animation:buzz7 .16s linear} @keyframes buzz7{0%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px 0}100%{translate:0 0}} /* LINE の画面（作者 2026-09-28「本物らしく」）。幹の第一夜と西遊記の夢で同じ見た目 */ .msgpanel.lineapp{padding:0;gap:0;background:#8da4c8;border:0;overflow:hidden;border-radius:14px} .lineapp .lh{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#243248;color:#e9eef7;font-size:13px} .lineapp .lh b{font-weight:400;font-size:18px;line-height:1;opacity:.8} .lineapp .lh .lav{width:22px;height:22px} .lineapp .lbody{display:flex;flex-direction:column;gap:8px;padding:12px 10px 14px} .lineapp .lrow{display:flex;align-items:flex-end;gap:6px} .lineapp .lrow.me{justify-content:flex-end} .lineapp .lav{display:inline-block;width:26px;height:26px;border-radius:50%;background:#c9d2e0;flex:0 0 auto} .lineapp .lbub{max-width:70%;padding:7px 11px;border-radius:16px;font-size:13px;line-height:1.55;color:#111;background:#fff; word-break:keep-all;overflow-wrap:anywhere;line-break:strict} .lineapp .lrow.me .lbub{background:#8de055} .lineapp .lmeta{font-size:9px;line-height:1.3;color:#f4f7fb;opacity:.85;text-align:right;white-space:nowrap} .lineapp .lrow.them .lmeta{text-align:left} /* 思い出の場面（作者 2026-09-28 §5）：インクは暖色（engine の WARM_INK）、網点を軽く */ body.warm #bgbox{transition:filter 900ms ease,opacity 900ms ease;filter:brightness(1.08) saturate(1.05);opacity:.86} /* 死神の札にも禁則（「ち｜ゃ」と小さい仮名が行頭に来ていた・2026-09-28） */ .fuda{line-break:strict;word-break:normal;overflow-wrap:normal} /* 覗き穴の視界（第五夜・作者 2026-09-28）：廊下の版を丸く切り抜き、少し寄せる（魚眼）。周りは黒い頁で真っ暗 */ body.peep #bgbox{-webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 78%,transparent 100%); mask-image:radial-gradient(circle closest-side at 50% 50%,#000 78%,transparent 100%);background:transparent !important;box-shadow:none !important} body.peep #bgbox .plate{transform:scale(1.18)} /* 七日目の断片の紙の上に出す封筒（本物の手紙の封を切る） */ .fenv{position:absolute;left:11%;width:78%;top:15%;aspect-ratio:760/1013;z-index:45;background:#0b0c10;border-radius:2px; box-shadow:0 14px 34px rgba(0,0,0,.45);overflow:hidden;animation:cardIn 420ms ease both} .fenv .plate{position:absolute;inset:0} /* ---- 2026-09-29 作者の依頼 ---- */ /* 過去ログ：ボタンは「戻る」の右。紙に、画面に出た字だけを並べる */ #logbtn{position:absolute;z-index:34;display:none;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none; top:auto;bottom:4px;left:66px;min-height:40px;padding:12px 10px;font-family:"Noto Sans JP",system-ui,sans-serif} #logbtn.on{display:flex} #logbtn .lbl{font-size:9px;font-weight:500;letter-spacing:.2em;color:#a39d8f} body[data-rules="1"] #bar{left:112px} #ov.act ~ #logbtn,body.rewound #logbtn,body[data-form=app] #logbtn,body.kami #logbtn,body.fragon #logbtn{display:none} #logview{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;background:#efe9db;color:#17181c} #logview .lvh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #c9c2b2; font:500 11px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.3em;color:#6b675e} #logview .x{background:none;border:1px solid #c9c2b2;border-radius:3px;padding:8px 12px;font:500 11px/1 "Noto Sans JP",system-ui,sans-serif; letter-spacing:.2em;color:#17181c;cursor:pointer} #logview .lvb{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 22px 40px} #logview h4{margin:22px 0 8px;font:500 10px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.3em;color:#a39d8f} #logview .lg{padding:9px 0;border-bottom:1px dashed #d8d1c1} #logview .lg p{margin:0;font:400 15px/1.85 Shippori,serif;letter-spacing:.03em;word-break:keep-all;overflow-wrap:anywhere;line-break:strict} /* 読み返しの帯の中の「ひとつ戻る」 */ #rewbar #rewprev{margin-right:auto} #rewbar #rewpos{flex:1;text-align:center} /* 夢の柱：伝票の欄の上に「夢：（本の題）」。下に置くと絵の上端に半分隠れていた（作者 2026-09-29） */ #topD{display:none} body.dreamhd #topD{display:block;position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 5px);font:500 9px/1.3 "Noto Sans JP",system-ui,sans-serif; letter-spacing:.14em;color:#8e887b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding:0} body.dreamhd.nightpage #topD,body.dreamhd[data-form=stairs] #topD,body.dreamhd[data-form=yose] #topD,body.dreamhd[data-form=hud] #topD{color:#8b8690} /* 長押しのメニュー・選択・保存を止める（作者 2026-09-29）。曾呂利の返信欄（文字を打つ所）だけは除く */ #frame,#frame *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} #frame img,#frame video,#frame canvas{-webkit-user-drag:none;user-drag:none;pointer-events:none} #frame input,#frame textarea{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text} /* アプリ内ブラウザで開かれた時の一枚（作者 2026-09-29） */ #inapp{position:absolute;inset:0;z-index:90;display:grid;place-items:center;background:#0b0c10} #inapp .box{width:80%;max-width:320px;background:#efe9db;color:#17181c;padding:24px 20px 18px;border-radius:3px;text-align:center} #inapp h3{margin:0 0 14px;font:600 17px/1.5 Shippori,serif;letter-spacing:.08em} #inapp p{margin:0 0 12px;font:400 12.5px/1.8 "Noto Sans JP",system-ui,sans-serif;color:#3a3833} #inapp p.how{font-weight:500;color:#17181c} #inapp button{display:block;width:100%;margin-top:10px;padding:12px;border:1px solid #17181c;border-radius:2px;background:#17181c;color:#efe9db; font:500 13px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.14em;cursor:pointer} #inapp button.go{background:transparent;color:#6b675e;border-color:#c9c2b2;font-size:11px} /* 起動画面の但し書き（作者 2026-09-29）。黒地に字だけ。3 秒ほどで消える／タップで飛ばせる */ #bootnote{position:absolute;inset:0;z-index:90;display:none;align-items:center;justify-content:center; background:#0a0a0b;color:#d9d4c8;opacity:0;transition:opacity 500ms ease} #bootnote.on{display:flex} #bootnote.in{opacity:1} #bootnote p{margin:0 20px;font-family:Shippori,serif;font-size:12px;line-height:2.2;letter-spacing:.03em;white-space:nowrap; text-align:center;line-break:strict} @media (max-width:360px){#bootnote p{font-size:10.5px;margin:0 14px}} /* エンドロールのアカウント名と、シェアのボタン（公開の準備 2026-09-29）。伝票の欄と同じ細い罫・小さいゴシック */ #credits .acct{font-size:10px;letter-spacing:.08em;color:#6b675e;margin-top:-4px} #credits .share{display:block;margin:44px auto 0;padding:10px 22px;min-height:44px;background:none;color:#141414; border:1px solid #141414;border-radius:0;font:500 11px/1 "Noto Sans JP",sans-serif;letter-spacing:.24em;text-indent:.24em;cursor:pointer} #credits .share:active{background:#141414;color:#fff} /* 「タップで進む」を脚（ログ・SKIP・目次）の上へ。右下で「目次」と重なっていた（作者 2026-09-29） */ #taphint{bottom:54px;right:24px}