*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;color:#ddd;overflow:hidden;font-family:"Shippori Mincho",serif;user-select:none;-webkit-user-select:none;touch-action:none}
body.nocursor #stage,body.nocursor #stage *,body.nocursor #cho,body.nocursor #cho *,body.nocursor #pocket{cursor:none}
#stage{position:fixed;inset:0;overflow:hidden;background:#000}
#bg,#bg2{position:absolute;left:50%;top:50%;width:100vw;height:42.86vw;min-height:100vh;min-width:233.3vh;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));object-fit:cover;transition:opacity 1.6s ease,filter .4s}
#bg2{opacity:0}
#stage.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-6px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,5px)}}
#spots{position:absolute;left:50%;top:50%;width:100vw;height:42.86vw;min-height:100vh;min-width:233.3vh;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));z-index:5}
.spot{position:absolute;cursor:pointer;border-radius:50%}
.spot::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,240,200,.85);box-shadow:0 0 14px 4px rgba(255,220,160,.5);opacity:var(--v,0);transition:opacity .25s}
.spot.seen::after{background:rgba(160,160,160,.5);box-shadow:none}
#dark{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#grain{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:.09;mix-blend-mode:overlay}
#vignette{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
#flash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:30;opacity:0;pointer-events:none;filter:url(#rgb) contrast(1.5) brightness(1.2)}
#flash.on{opacity:1}
.hidden{display:none!important}

.ring-btns button{font-family:inherit;background:rgba(10,8,8,.7);color:#cbbfb0;border:1px solid #4a3a30;padding:8px 14px;font-size:15px;cursor:pointer;letter-spacing:.1em}

#box{position:fixed;left:0;right:0;bottom:0;padding:110px 0 6vh;z-index:25;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.7) 55%,rgba(0,0,0,.9));font-size:calc(clamp(17px,2.2vw,23px)*var(--fs,1));line-height:2;letter-spacing:.08em;text-align:left;text-shadow:0 0 8px #000,0 0 2px #000}
#text .v{color:#e8c9a8}
#text .w{color:#a33;font-weight:700}
#text .g{display:inline-block;animation:jit .12s infinite}
@keyframes jit{50%{transform:translate(1px,-1px);opacity:.6}}
#text{max-width:min(860px,calc(100% - 48px));margin:0 auto;min-height:4em}
#next{display:block;max-width:min(860px,calc(100% - 48px));margin:8px auto 0;font-size:11px;letter-spacing:.5em;opacity:.45;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:0}}

#paper{position:fixed;inset:0;z-index:28;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.75);cursor:pointer}
#paperText{writing-mode:vertical-rl;background:#d8cfbf;color:#2a2018;padding:36px 30px;max-height:78vh;max-width:92vw;overflow:auto;font-size:clamp(15px,2vw,19px);line-height:2.1;letter-spacing:.12em;box-shadow:0 0 60px #000;filter:sepia(.4)}
#paperText .blot{color:#000;background:#111;border-radius:40%}
.hint{margin-top:14px;font-size:12px;opacity:.5}

#phone{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:470px;border-radius:30px;background:#050608;border:2px solid #333;z-index:28;padding:18px;display:flex;flex-direction:column;align-items:center;font-family:system-ui,sans-serif;cursor:pointer;box-shadow:0 0 80px rgba(120,160,255,.15)}
.ph-top{width:100%;display:flex;justify-content:space-between;font-size:12px;opacity:.7}
.ph-clock{font-size:64px;font-weight:200;margin-top:40px;color:#e6eefc}
.ph-date{font-size:14px;opacity:.7}
.ph-missed{margin-top:auto;background:rgba(255,255,255,.07);border-radius:12px;padding:12px;width:100%;text-align:center;font-size:13px;line-height:1.7}
#ring{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:29;width:250px;padding:40px 18px;border-radius:30px;background:#06080c;border:2px solid #333;text-align:center;font-family:system-ui,sans-serif;animation:buzz .15s infinite}
@keyframes buzz{50%{transform:translate(calc(-50% + 1px),calc(-50% - 1px))}}
.ring-name{font-size:24px;color:#eee}.ring-sub{opacity:.6;margin:8px 0 60px}
.ring-btns{display:flex;justify-content:space-around}
.ring-btns button{border-radius:30px;font-family:system-ui,sans-serif!important}
#ringYes{background:#1d5a2a!important;color:#fff!important}#ringNo{background:#6a1a1a!important;color:#fff!important}

#toast{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:40;font-size:22px;color:#b33;letter-spacing:.3em;opacity:0;transition:opacity 1.5s;pointer-events:none;text-shadow:0 0 10px #000}
#toast.on{opacity:1}
#endcard{position:fixed;inset:0;z-index:45;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;transition:opacity 4s}
#endcard.on{opacity:1}
#endcard h2{font-weight:400;letter-spacing:.5em;font-size:32px}
#endcard p{opacity:.6;letter-spacing:.2em}
#endcard button{font-family:inherit;background:none;color:#aaa;border:1px solid #444;padding:8px 18px;cursor:pointer;margin-top:30px}

/* ===== 最終選択 ===== */
#fc{position:fixed;inset:0;z-index:35;display:grid;grid-template-columns:1fr minmax(180px,22vw) 1fr;align-items:center;opacity:0;transition:opacity 1.6s;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,.92) 75%);backdrop-filter:blur(3px) saturate(.6);-webkit-backdrop-filter:blur(3px) saturate(.6)}
#fc.on{opacity:1}
.fc-side{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;cursor:pointer;overflow:hidden;--p:0;touch-action:none}
.fc-ink{position:absolute;inset:0;pointer-events:none;opacity:calc(.25 + var(--p)*.75);transition:opacity .6s}
.fc-a .fc-ink{background:radial-gradient(circle at 70% 50%,rgba(140,10,20,calc(.15 + var(--p)*.6)) 0,transparent calc(30% + var(--p)*60%));filter:url(#rgb)}
.fc-b .fc-ink{background:radial-gradient(circle at 30% 50%,rgba(120,170,255,calc(.08 + var(--p)*.45)) 0,transparent calc(30% + var(--p)*60%))}
.fc-word{writing-mode:vertical-rl;font-size:clamp(30px,min(6vw,10vh),88px);letter-spacing:.25em;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(230,220,210,.55);transition:color .8s,text-shadow .8s,letter-spacing 1.2s,filter .8s;filter:blur(1.2px)}
.fc-sub{font-size:13px;letter-spacing:.5em;opacity:0;transform:translateY(8px);transition:all .8s;color:#bba}
.fc-side:hover .fc-word,.fc-side.holding .fc-word{filter:none;letter-spacing:.38em}
.fc-side:hover .fc-sub,.fc-side.holding .fc-sub{opacity:.75;transform:none}
.fc-a:hover .fc-word,.fc-a.holding .fc-word{color:#e8d6cc;-webkit-text-stroke:0;text-shadow:0 0 18px rgba(200,20,30,.9),0 0 60px rgba(120,0,0,.8)}
.fc-b:hover .fc-word,.fc-b.holding .fc-word{color:#eef4ff;-webkit-text-stroke:0;text-shadow:0 0 18px rgba(140,190,255,.9),0 0 60px rgba(60,110,220,.7)}
.fc-side.holding .fc-word{animation:tremble .07s infinite}
@keyframes tremble{50%{transform:translate(calc(var(--p)*2px),calc(var(--p)*-2px))}}
.fc-phone{position:relative;display:flex;align-items:center;justify-content:center;height:100%}
.fc-dev{position:relative;width:min(150px,18vw);aspect-ratio:9/19;border-radius:22px;background:linear-gradient(160deg,#141a24,#05070a 60%);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 60px rgba(120,160,255,.35),inset 0 0 30px rgba(120,160,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:system-ui,sans-serif;animation:buzz .12s infinite}
.fc-cap{font-size:11px;letter-spacing:.3em;opacity:.55}
.fc-name{font-size:clamp(13px,1.4vw,17px);color:#fff}
.fc-time{font-size:clamp(26px,3vw,38px);font-weight:200;color:#cfe0ff;margin-top:14px}
.fc-wave{position:absolute;width:min(150px,18vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(150,190,255,.5);animation:wave 2.4s ease-out infinite}
.fc-wave:nth-child(2){animation-delay:.8s}.fc-wave:nth-child(3){animation-delay:1.6s}
@keyframes wave{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.fc-hint{position:absolute;left:0;right:0;bottom:6vh;text-align:center;font-size:12px;letter-spacing:.6em;opacity:.45;animation:blink 2.4s infinite}
.fc-ring{position:fixed;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;opacity:0;transform:rotate(-90deg);transition:opacity .2s}
.fc-ring.on{opacity:1}
.fc-ring circle{fill:none;stroke:#e9e1d6;stroke-width:2;filter:drop-shadow(0 0 6px #fff)}
#fc.done .fc-side:not(.chosen),#fc.done .fc-phone,#fc.done .fc-hint{opacity:0;transition:opacity 1s}
#fc.done .chosen .fc-word{letter-spacing:.55em;filter:blur(0);transition:letter-spacing 1.8s}
#fc.done .chosen .fc-ink{opacity:1}

/* ===== 通常の選択肢 ===== */

/* ===== 光で完結する操作系 ===== */
#spots{transition:opacity .5s}
body.busy #spots,body.busy #pocket{opacity:0;pointer-events:none}
.dw{position:absolute;cursor:pointer;--v:0}
.dw .lbl{pointer-events:none}
.exit{display:flex;align-items:center;justify-content:center}
.exit::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(var(--v)*.8);background:radial-gradient(ellipse at 50% 50%,rgba(255,232,190,.22),rgba(255,232,190,0) 68%);transition:opacity .3s}
.exit .lbl{position:relative;display:flex;align-items:center;gap:.5em;font-size:clamp(15px,1.7vw,22px);letter-spacing:.35em;white-space:nowrap;color:#f6ead6;text-shadow:0 0 14px rgba(255,190,110,.85),0 0 2px #000;opacity:var(--v);filter:blur(calc((1 - var(--v))*4px));transition:letter-spacing .7s,text-shadow .5s}
.exit.d-l .lbl,.exit.d-r .lbl{writing-mode:vertical-rl;font-size:clamp(17px,2vw,26px)}
.exit .lbl i{font-style:normal;opacity:.75;letter-spacing:0}
.exit.dwelling .lbl{letter-spacing:.55em;text-shadow:0 0 24px rgba(255,160,60,1),0 0 2px #000}
.exit.dwelling::before{opacity:1}
#pocket{position:fixed;right:2vw;bottom:3.5vh;width:170px;height:120px;z-index:22;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 12px 0;transition:opacity .5s}
#pocket .lbl{display:flex;align-items:center;gap:.8em;font-size:13px;letter-spacing:.4em;color:#cfe0ff;text-shadow:0 0 12px rgba(120,160,255,.9);opacity:var(--v);filter:blur(calc((1 - var(--v))*3px));transition:letter-spacing .6s}
#pocket .lbl::before{content:"";width:12px;height:20px;border:1px solid currentColor;border-radius:3px;box-shadow:0 0 10px rgba(120,160,255,.7)}
#pocket.dwelling .lbl{letter-spacing:.7em}
#cho{position:fixed;inset:0;z-index:27;pointer-events:none}
.choice{position:absolute;top:50%;width:40vw;height:46vh;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.choice::before{content:"";position:absolute;inset:0;opacity:calc(var(--v)*.9);background:radial-gradient(ellipse at center,rgba(0,0,0,.65),rgba(0,0,0,0) 70%)}
.choice .lbl{position:relative;font-size:calc(clamp(22px,3.2vw,44px)*var(--fs,1));letter-spacing:.35em;text-align:center;color:#f4ead8;text-shadow:0 0 18px rgba(255,200,140,.9),0 0 3px #000;opacity:var(--v);filter:blur(calc((1 - var(--v))*7px));transition:letter-spacing .8s,text-shadow .6s}
.choice.dwelling .lbl{letter-spacing:.55em;text-shadow:0 0 30px rgba(255,120,60,1),0 0 3px #000}
.cho-hint{position:absolute;left:0;right:0;top:12vh;text-align:center;font-size:12px;letter-spacing:.6em;opacity:.5;animation:blink 2.4s infinite}
#dwell{position:fixed;width:84px;height:84px;margin:-42px 0 0 -42px;z-index:31;pointer-events:none;opacity:0;transform:rotate(-90deg);transition:opacity .25s}
#dwell.on{opacity:1}
#dwell circle{fill:none;stroke-width:2.2}
#dwell .trk{stroke:rgba(255,255,255,.12)}
#dwell .prog{stroke:#f3e6d0;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,220,170,.9))}

/* 視認性：明るい壁の上でも読める縁取り */
.exit .lbl,.choice .lbl{text-shadow:0 0 2px #000,0 0 6px #000,0 0 14px #000,0 0 26px rgba(255,190,110,.65)}
.exit .lbl{font-size:calc(clamp(18px,2.1vw,28px)*var(--fs,1));padding:16px 12px;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0))}
.exit.d-l .lbl,.exit.d-r .lbl{font-size:clamp(20px,2.4vw,32px)}
.exit.dwelling .lbl,.choice.dwelling .lbl{text-shadow:0 0 2px #000,0 0 8px #000,0 0 26px rgba(255,150,50,1)}
#pocket .lbl{text-shadow:0 0 2px #000,0 0 8px #000,0 0 14px rgba(120,160,255,.9)}

/* ===== タイトル ===== */
#title{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden;cursor:none;transition:opacity 2.4s}
.t-bgwrap{position:absolute;inset:-6%;transition:transform .2s linear}
.t-bg{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.6) contrast(1.1);animation:tzoom 50s ease-in-out infinite alternate}
@keyframes tzoom{from{transform:scale(1)}to{transform:scale(1.14)}}
.t-fog{position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(60% 40% at 20% 70%,rgba(160,170,180,.18),transparent 70%),radial-gradient(50% 35% at 80% 80%,rgba(160,170,180,.15),transparent 70%);animation:tfog 24s ease-in-out infinite alternate}
@keyframes tfog{to{transform:translateX(6vw) scale(1.12);opacity:.28}}
#tdark,#tfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.t-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.9) 100%)}
#tTitle{position:absolute;left:11vw;top:9vh;display:flex;gap:2.2vh;z-index:9;pointer-events:none}
#tTitle h1{writing-mode:vertical-rl;font-weight:400;font-size:clamp(64px,14vh,170px);line-height:1.12;letter-spacing:.14em;color:#d6cbbb;text-shadow:0 0 34px rgba(150,20,25,.6),0 0 2px #000;animation:tbreath 7s ease-in-out infinite}
#tTitle h1 span:nth-child(2){animation:tflick 9s infinite}
@keyframes tbreath{50%{opacity:.72;text-shadow:0 0 56px rgba(180,20,25,.8),0 0 2px #000}}
@keyframes tflick{0%,91%,100%{opacity:1}92%{opacity:.12}93%{opacity:.95}95%{opacity:.08}97%{opacity:.8}}
.t-sub{writing-mode:vertical-rl;font-size:clamp(12px,1.9vh,18px);letter-spacing:.7em;color:#bbb;opacity:.55;margin-top:1.5vh}
#tTitle.glitch{filter:url(#rgb);transform:translateX(4px) skewX(-4deg)}
#sotoba{position:absolute;right:15vw;bottom:-4vh;height:82vh;width:min(15.5vh,17vw);transform:rotate(1.8deg);transform-origin:50% 100%;z-index:2;cursor:text;font-family:"Yuji Syuku","Shippori Mincho",serif;color:#150d07}
.tb-plank{position:absolute;inset:0;clip-path:polygon(50% 0,100% 5.5%,100% 100%,0 100%,0 5.5%);background:
 linear-gradient(transparent 10.4%,rgba(25,14,6,.7) 10.4% 11.1%,transparent 11.1%),
 linear-gradient(transparent 31.4%,rgba(25,14,6,.7) 31.4% 32.1%,transparent 32.1%),
 repeating-linear-gradient(90deg,transparent 0 6px,rgba(45,28,12,.2) 6px 7px,transparent 7px 15px),
 linear-gradient(90deg,#5f4c35,#9b8360 20%,#ad9570 50%,#8f7856 80%,#54432e);box-shadow:inset 0 0 40px rgba(0,0,0,.5);filter:contrast(1.1) brightness(.68) sepia(.25)}
.tb-gorin{position:absolute;left:50%;top:12.2%;transform:translateX(-50%);writing-mode:vertical-rl;text-orientation:upright;font-size:2.4vh;letter-spacing:.1em;opacity:.88}
.tb-main{position:absolute;left:50%;top:35%;transform:translateX(-50%);writing-mode:vertical-rl;font-size:3vh;letter-spacing:.14em;white-space:nowrap;opacity:.9}
.tb-date{position:absolute;left:81%;top:45%;transform:translateX(-50%);writing-mode:vertical-rl;font-size:2vh;letter-spacing:.1em;white-space:nowrap;opacity:.8}
.tb-sponsor{position:absolute;left:22%;top:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1.2vh}
.tb-sponsor .lab{writing-mode:vertical-rl;font-size:2.2vh;letter-spacing:.2em;opacity:.8}
#tbName{writing-mode:vertical-rl;font-size:3.6vh;min-height:3.6vh;line-height:1.1;letter-spacing:.06em;color:#0a0503;text-shadow:0 0 1px rgba(0,0,0,.9),0 0 5px rgba(0,0,0,.45);display:block}
#tbName span{display:inline-block}
#tbName span.new{animation:tink 1s ease-out both}
#tbName .ghost{color:rgba(40,25,10,.42);font-size:2.6vh;text-shadow:none;letter-spacing:.2em}
#tbName .caret{width:2px;height:2.6vh;background:#0a0503;display:inline-block;margin-top:.6vh;animation:blink 1s steps(2) infinite;writing-mode:horizontal-tb}
@keyframes tink{0%{opacity:0;filter:blur(6px);transform:scale(1.5)}55%{opacity:1;filter:blur(2px)}100%{opacity:1;filter:blur(.3px);transform:none}}
#tHint{position:absolute;left:0;right:0;bottom:15vh;text-align:center;z-index:9;font-size:clamp(12px,1.5vh,15px);line-height:2.1;letter-spacing:.5em;color:#cbbfae;opacity:.6;animation:blink 3.2s ease-in-out infinite;pointer-events:none;text-shadow:0 0 8px #000}
#startBtn{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:9;font-family:inherit;background:none;border:none;color:#cbbfae;letter-spacing:.9em;margin-right:-.9em;font-size:clamp(15px,2vh,21px);padding:12px 20px;opacity:.6;cursor:pointer;text-shadow:0 0 12px #000;transition:letter-spacing .9s,opacity .5s,color .5s,text-shadow .6s}
#startBtn::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:4vh;background:linear-gradient(transparent,rgba(210,190,160,.6));transition:height .8s}
#startBtn:hover{letter-spacing:1.3em;opacity:1;color:#fff;text-shadow:0 0 18px rgba(200,30,30,.95),0 0 3px #000}
#startBtn:hover::before{height:9vh}
.t-help{position:absolute;left:2vw;bottom:2vh;z-index:9;font-size:11px;line-height:1.9;letter-spacing:.12em;opacity:.32;pointer-events:none}
#tflash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:12;opacity:0;pointer-events:none;filter:url(#rgb) contrast(1.6) brightness(1.1)}
#tflash.on{opacity:.6}
#nameIn{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
#paperText.wood{background:linear-gradient(90deg,#5f4c35,#a68d68 30%,#b49c76 55%,#8f7856);color:#120a05;font-family:"Yuji Syuku","Shippori Mincho",serif;filter:contrast(1.05) brightness(.9);font-size:clamp(20px,3.4vh,32px);line-height:2.2;padding:44px 40px}

/* ===== 夜の繰り返し／設定 ===== */
#over{position:fixed;inset:0;z-index:24;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6vh;opacity:0;transition:opacity .9s;pointer-events:none}
#over.on{opacity:1}
#over>*{opacity:0;transition:opacity 1.8s}
#over.card>*{opacity:1}
#overMemo{font-size:clamp(14px,2vh,20px);letter-spacing:.45em;margin-right:-.45em;color:#b03a3a}
#overHint{font-size:clamp(14px,2vh,19px);letter-spacing:.25em;color:#c9c0b3;min-height:1.4em}
#overNight{font-size:clamp(40px,8vh,92px);letter-spacing:.5em;margin-right:-.5em;color:#cfc6b8;text-shadow:0 0 30px rgba(160,20,25,.7)}
.ph-set{width:100%;margin-top:14px;font-size:12px;display:flex;flex-direction:column;gap:9px;color:#aab}
.ph-row{display:flex;justify-content:space-between;align-items:center}
.spd-btns button{background:rgba(255,255,255,.07);color:#aab;border:none;border-radius:6px;padding:4px 7px;margin-left:3px;font-size:11px;font-family:system-ui,sans-serif;cursor:pointer}
.spd-btns button.on{background:#2a4a7a;color:#fff}
#phMem{letter-spacing:.2em;color:#9bd}
#tSpeed{position:absolute;right:2vw;bottom:2vh;z-index:9;font-size:11px;letter-spacing:.2em;opacity:.55;display:flex;gap:6px;align-items:center;transition:opacity .4s}
#tSpeed:hover{opacity:1}
#tSpeed .spd-btns button{background:none;border:1px solid rgba(200,190,170,.28);border-radius:0;color:#cbbfae;font-family:inherit;padding:3px 8px;margin-left:4px}
#tSpeed .spd-btns button.on{background:rgba(160,30,30,.55);color:#fff}
#tReset{position:absolute;right:2vw;top:2vh;z-index:9;background:none;border:none;color:#998;font-family:inherit;font-size:11px;letter-spacing:.2em;cursor:pointer;opacity:.5;transition:opacity .4s}
#tReset:hover{opacity:1;color:#d66}
.t-night{position:absolute;left:11vw;bottom:15vh;z-index:9;font-size:clamp(14px,2vh,20px);letter-spacing:.6em;color:#b03a3a;text-shadow:0 0 12px #000;pointer-events:none}

.clipv{position:absolute;left:50%;top:50%;width:100vw;height:42.86vw;min-height:100vh;min-width:233.3vh;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));object-fit:cover;opacity:0;pointer-events:none;background:#000}

#fxlow,#fxhigh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fxlow{z-index:3}
#fxhigh{z-index:5}

#tRec{position:absolute;right:2vw;top:5vh;z-index:9;background:none;border:none;color:#998;font-family:inherit;font-size:11px;letter-spacing:.2em;cursor:pointer;opacity:.5;transition:opacity .4s}
#tRec:hover{opacity:1;color:#dcc}
#phRec{background:none;border:1px solid #445;color:#aab;font-size:11px;padding:2px 10px;cursor:pointer}
#rec{position:fixed;inset:0;z-index:60;background:rgba(5,4,6,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#d9d2c3;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
#rec.hidden{display:none}
#rec .rc-t{font-size:26px;letter-spacing:.5em;text-shadow:0 0 20px rgba(180,68,58,.5)}#rec .rc-s{color:#998;font-size:13px;letter-spacing:.2em;margin:6px 0 10px}
#rec svg{width:min(92vw,150vh);max-height:76vh}#rec .rc-h{color:#665;font-size:11px;letter-spacing:.2em;margin-top:8px}
#rec .re{fill:none;stroke:#2c2a2a;stroke-width:1.2}#rec .re.on{stroke:#9a8f7a}
#rec .rn rect{fill:#0d0c0e;stroke:#2c2a2a}#rec .rn text{fill:#4a4743;font-size:14px;letter-spacing:.15em}
#rec .rn.on rect{stroke:#86c3a4;fill:#101614}#rec .rn.on text{fill:#e8e0d0}
#rec .rn.d.on rect{stroke:#b4443a}#rec .rn.e.on rect{stroke:#e0ae62}

.set-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.set-row input{width:96px;accent-color:#7a2a2a}
#tSet{position:absolute;right:2vw;bottom:calc(2vh + 30px);z-index:9;font-size:11px;letter-spacing:.2em;opacity:.55;display:flex;flex-direction:column;gap:4px;transition:opacity .4s}#tSet:hover{opacity:1}
#tSet .spd-btns button{background:none;border:1px solid rgba(200,190,170,.28);border-radius:0;color:#cbbfae;font-family:inherit;padding:3px 8px;margin-left:4px}#tSet .spd-btns button.on{background:rgba(160,30,30,.55);color:#fff}
#gate{position:fixed;inset:0;z-index:80;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:opacity 1.5s;color:#cbbfae;letter-spacing:.4em}
#gate.off{opacity:0;pointer-events:none}.g1{font-size:clamp(20px,3vw,32px)}.g2{font-size:13px;opacity:.6;margin:14px 0 46px}.g3{font-size:14px;color:#a33;animation:blink 2.4s infinite}
#rec .rc-m{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-top:10px;font-size:13px;color:#c9bca4;letter-spacing:.15em}
body.creep #vignette{animation:vpulse 3.4s ease-in-out infinite}body.creep #grain{opacity:.2}
@keyframes vpulse{50%{background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.92) 92%)}}
#credits{position:fixed;inset:0;z-index:70;background:#000;overflow:hidden;cursor:pointer;color:#cbbfae;text-align:center;font-family:"Yu Mincho","Shippori Mincho",serif}
.cr-in{position:absolute;left:0;right:0;top:100%;animation:crroll 38s linear forwards}.cr-r{margin:0 0 9vh}.cr-r small{display:block;font-size:12px;letter-spacing:.5em;opacity:.55;margin-bottom:8px}.cr-r b{font-weight:400;font-size:clamp(16px,2.2vw,24px);letter-spacing:.3em}
@keyframes crroll{to{transform:translateY(-135%)}}

#namePop{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);opacity:0;transition:opacity .4s;backdrop-filter:blur(3px)}
#namePop.on{opacity:1}#namePop.hidden{display:none}
.np-card{width:min(86vw,360px);padding:34px 30px 26px;text-align:center;color:#2a2018;font-family:"Yu Mincho","Shippori Mincho",serif;background:linear-gradient(180deg,#d8cfbf,#c9bda8);border:1px solid #6b5a44;box-shadow:0 0 0 6px #14100d,0 0 0 7px #6b5a44,0 0 90px rgba(150,20,25,.35);transform:translateY(14px);transition:transform .5s}
#namePop.on .np-card{transform:none}
.np-top{font-size:13px;letter-spacing:1em;color:#7a2a24;margin-bottom:14px}
.np-q{font-size:20px;line-height:1.9;letter-spacing:.25em;margin:0 0 20px}
#npIn{width:100%;padding:12px 10px;font:inherit;font-size:24px;letter-spacing:.35em;text-align:center;color:#17110c;background:rgba(255,255,255,.35);border:none;border-bottom:2px solid #3a2a1c;outline:none;border-radius:0}
#npIn:focus{background:rgba(255,255,255,.55);border-bottom-color:#8a2a24}#npIn::placeholder{font-size:14px;letter-spacing:.2em;color:#8a7a66}
.np-note{margin:12px 0 22px;font-size:12px;letter-spacing:.2em;color:#6b5a44}
.np-btns{display:flex;gap:12px;justify-content:center}.np-btns button{font:inherit;font-size:15px;letter-spacing:.4em;padding:9px 22px;cursor:pointer;border:1px solid #3a2a1c;background:transparent;color:#2a2018}
.np-btns #npOk{background:#7a2a24;color:#f2e8d6;border-color:#7a2a24}.np-btns button:hover{filter:brightness(1.15)}

@media(max-width:700px){.t-help{display:none}}
.fs-btns button{background:rgba(255,255,255,.07);color:#aab;border:none;border-radius:6px;padding:4px 7px;margin-left:3px;font-size:11px;font-family:system-ui,sans-serif;cursor:pointer}
.fs-btns button.on{background:#2a4a7a;color:#fff}
#tSet .fs-btns button{background:none;border:1px solid rgba(200,190,170,.28);border-radius:0;color:#cbbfae;font-family:inherit;padding:3px 8px;margin-left:4px}#tSet .fs-btns button.on{background:rgba(160,30,30,.55);color:#fff}
/* 名前入力：暗いガラスの札 */
#namePop{background:radial-gradient(ellipse at center,rgba(40,6,8,.55),rgba(0,0,0,.88));backdrop-filter:blur(10px)}
.np-card{width:min(88vw,420px);padding:44px 40px 32px;color:#e8e0d0;background:linear-gradient(160deg,rgba(34,30,32,.82),rgba(14,12,14,.9));border:1px solid rgba(217,210,195,.16);border-radius:3px;box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06),0 0 80px -20px rgba(180,50,50,.5);position:relative;overflow:hidden}
.np-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#b4443a,transparent)}
.np-top{font-size:11px;letter-spacing:.9em;color:#b4443a;margin-bottom:18px;text-indent:.9em}
.np-q{font-size:19px;letter-spacing:.3em;color:#e8e0d0}
#npIn{font-size:30px;letter-spacing:.4em;text-indent:.4em;color:#fff;background:transparent;border:none;border-bottom:1px solid rgba(217,210,195,.35);padding:14px 4px;transition:border-color .3s,box-shadow .3s;caret-color:#d66}
#npIn:focus{background:transparent;border-bottom-color:#d66;box-shadow:0 14px 24px -16px rgba(220,80,80,.7)}#npIn::placeholder{color:rgba(217,210,195,.3);font-size:14px;letter-spacing:.25em}
#npIn::selection{background:rgba(180,68,58,.55);color:#fff}
.np-note{color:rgba(217,210,195,.45);margin:14px 0 28px}
.np-btns button{border:1px solid rgba(217,210,195,.25);color:#cfc6b6;border-radius:2px;transition:.25s}
.np-btns button:hover{border-color:#d9d2c3;color:#fff;filter:none}
.np-btns #npOk{background:linear-gradient(180deg,#8a2e28,#6a1f1b);border-color:#a8443a;color:#fff;box-shadow:0 0 22px -6px #c0443a}.np-btns #npOk:hover{box-shadow:0 0 30px -2px #d0544a}

#tRec{display:none}#tReset{top:9vh}
#menuBtn{position:fixed;top:14px;right:14px;z-index:66;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:rgba(10,8,10,.55);border:1px solid rgba(217,210,195,.22);border-radius:2px;cursor:pointer;backdrop-filter:blur(4px);opacity:.6;transition:.3s}
#menuBtn:hover{opacity:1;border-color:rgba(217,210,195,.6);box-shadow:0 0 18px -4px rgba(220,90,80,.6)}
#menuBtn i{display:block;width:18px;height:1px;background:#d9d2c3}
#menu{position:fixed;inset:0;z-index:64;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
#menu.on{opacity:1}#menu.hidden{display:none}
.mn-card{width:min(88vw,360px);padding:30px 30px 24px;color:#e8e0d0;font-family:"Yu Mincho","Shippori Mincho",serif;background:linear-gradient(160deg,rgba(34,30,32,.9),rgba(14,12,14,.95));border:1px solid rgba(217,210,195,.16);border-left:3px solid #b4443a;box-shadow:0 30px 90px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:14px;font-size:13px;letter-spacing:.15em}
.mn-t{font-size:12px;letter-spacing:.9em;color:#b4443a}
.mn-card .set-ui{display:flex;flex-direction:column;gap:14px}
.mn-card .set-row input{width:140px}
.mn-card button:not(.spd-btns button):not(.fs-btns button){font:inherit;letter-spacing:.3em;padding:10px;background:transparent;color:#d9d2c3;border:1px solid rgba(217,210,195,.25);cursor:pointer;transition:.25s}
.mn-card button:not(.spd-btns button):not(.fs-btns button):hover{border-color:#d9d2c3;color:#fff}
.mn-card .spd-btns button,.mn-card .fs-btns button{background:none;border:1px solid rgba(200,190,170,.28);border-radius:0;color:#cbbfae;font-family:inherit;padding:3px 8px;margin-left:4px;cursor:pointer}
.mn-card .spd-btns button.on,.mn-card .fs-btns button.on{background:rgba(160,30,30,.55);color:#fff}
#mnRec{margin-top:6px}


#crView{position:fixed;inset:0;z-index:68;background:rgba(0,0,0,.94);overflow:auto;cursor:pointer;color:#cbbfae;text-align:center;font-family:"Yu Mincho","Shippori Mincho",serif}
#crView.hidden{display:none}.cv-in{max-width:560px;margin:0 auto;padding:9vh 20px 8vh}.cv-t{font-size:22px;letter-spacing:.6em;margin-bottom:18px;text-shadow:0 0 18px rgba(180,68,58,.5)}
.cv-ai{font-size:13px;letter-spacing:.2em;color:#b4443a;margin:0 0 6vh}.cv-n{font-size:11px;letter-spacing:.12em;line-height:1.9;color:#8a8478;margin-top:5vh}.cv-h{font-size:11px;letter-spacing:.3em;color:#665;margin-top:4vh}
#crView .cr-r{margin:0 0 4.5vh}#crView .cr-r small{display:block;font-size:11px;letter-spacing:.5em;opacity:.55;margin-bottom:6px}#crView .cr-r b{font-weight:400;font-size:16px;letter-spacing:.2em}
html,body{overscroll-behavior:none}

.g-m{display:none;margin-top:-30px}@media(pointer:coarse){.g-m{display:block}}

#howto{position:fixed;left:50%;top:9vh;transform:translateX(-50%);z-index:30;width:min(88vw,420px);text-align:center;color:#e8e0d0;font-family:"Yu Mincho","Shippori Mincho",serif;pointer-events:none;opacity:0;transition:opacity 1.2s;padding:18px 20px;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),rgba(0,0,0,0) 80%)}
#howto.on{opacity:1}#howto.hidden{display:none}
.ht-orb{width:34px;height:34px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,170,.95),rgba(255,200,120,.25) 60%,transparent 72%);animation:htmove 3.2s ease-in-out infinite}
@keyframes htmove{0%,100%{transform:translateX(-70px)}50%{transform:translateX(70px)}}
.ht-t{font-size:17px;letter-spacing:.22em;margin-bottom:12px;text-shadow:0 0 12px #000}.ht-l{font-size:12px;letter-spacing:.15em;line-height:2;opacity:.75;text-shadow:0 0 8px #000}