:root{--ink:#f4ead8;--muted:#b9b0a0;--bg:#16201c;--glass:rgba(18,24,22,.62);--line:rgba(244,234,216,.16);--red:#d9412b;--gold:#e8c67a;--paper:#fbf6ea;--paper-ink:#2b2620}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);transition:opacity .8s}
#loading.done{opacity:0;pointer-events:none}
.lg-in{text-align:center}.lg-torii{font-size:2rem;opacity:.7}.lg-in h1{margin:.4rem 0;font-size:1.6rem;letter-spacing:.3em}.lg-in p{color:var(--muted);font-size:.85rem}
#hud-top{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;z-index:10;pointer-events:none}
.pill,.pill-right{pointer-events:auto;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;font-size:.85rem}
.pill b{letter-spacing:.15em;margin-right:.3rem}.pill-right{display:flex;gap:.2rem;padding:.25rem}
.ibtn{background:none;border:0;width:34px;height:34px;border-radius:50%;font-size:1rem}.ibtn:hover{background:rgba(255,255,255,.08)}
#hint{position:fixed;top:64px;left:50%;transform:translateX(-50%);font-size:.75rem;color:var(--muted);background:var(--glass);padding:.25rem .7rem;border-radius:999px;z-index:5;pointer-events:none;transition:opacity 1s;white-space:nowrap}
#me-tag{position:fixed;z-index:6;pointer-events:none;font-size:.72rem;background:rgba(250,246,234,.92);color:#2b2620;border-radius:999px;padding:.15rem .55rem;transform:translate(-50%,-100%);white-space:nowrap}
.tag{position:fixed;z-index:5;pointer-events:none;font-size:.66rem;background:rgba(18,24,22,.55);color:var(--ink);border-radius:999px;padding:.1rem .45rem;transform:translate(-50%,-100%);white-space:nowrap}
#step{position:fixed;top:20%;left:50%;transform:translate(-50%,-50%);font-size:2.2rem;letter-spacing:.4em;text-shadow:0 2px 18px rgba(0,0,0,.6);opacity:0;transition:opacity .4s;pointer-events:none;z-index:8}
#step.on{opacity:1}
#toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:.6rem 1rem;font-size:.85rem;opacity:0;visibility:hidden;transition:.3s;z-index:20;max-width:90vw;text-align:center}
#toast.on{opacity:1;visibility:visible;transform:translateX(-50%)}
#actions{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:.3rem;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;padding:.35rem;z-index:10}
#actions button{background:none;border:0;border-radius:16px;width:74px;padding:.45rem 0;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:.15rem}
#actions button span{font-size:1.25rem}#actions button:hover,#actions button.on{background:rgba(255,255,255,.1)}
#actions button:disabled{opacity:.4}
#note{position:fixed;bottom:2px;left:0;right:0;text-align:center;font-size:.55rem;color:rgba(244,234,216,.35);pointer-events:none;padding:0 1rem;font-family:system-ui,sans-serif}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(8,10,9,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
.modal[hidden]{display:none}
.sheet{position:relative;width:min(440px,100%);max-height:calc(100vh - 40px);overflow:auto;background:rgba(24,30,27,.96);border:1px solid var(--line);border-radius:20px;padding:1.4rem 1.2rem}
.sheet h2{margin:.2rem 0 .4rem;font-size:1.15rem;letter-spacing:.1em}.sheet h3{font-size:.9rem;margin:1.2rem 0 .5rem;color:var(--gold)}
.x{position:absolute;top:10px;right:10px;background:none;border:0;font-size:1rem;color:var(--muted);width:32px;height:32px}
.sub{color:var(--muted);font-size:.78rem;line-height:1.6;margin:.4rem 0}
.row{display:flex;gap:.6rem;justify-content:space-between;align-items:center;margin-top:.8rem}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:12px;padding:.6rem 1rem;font-size:.85rem}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
#kuji-stage{text-align:center;padding:1rem 0}
#kuji-box{position:relative;margin:1rem auto;width:84px;height:170px;cursor:pointer}
#kuji-box .kb-body{position:absolute;inset:14px 0 0;background:linear-gradient(90deg,#8e5a2b,#b97a3e 45%,#8e5a2b);border-radius:6px;color:#fff;font-size:1rem;line-height:1.3;padding-top:30px;letter-spacing:.1em;box-shadow:inset 0 0 0 3px rgba(0,0,0,.15)}
#kuji-box .kb-top{position:absolute;top:0;left:-4px;right:-4px;height:18px;background:#6d4421;border-radius:6px}
#kuji-stick{position:absolute;left:50%;top:6px;width:8px;height:0;margin-left:-4px;background:#efe2c2;border-radius:3px;transition:height .5s .2s,top .5s .2s}
#kuji-box.shake{animation:shake .5s ease-in-out 3}
#kuji-box.out #kuji-stick{height:70px;top:-60px}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}
.paper{background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:1.2rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:unfold .6s ease-out}
@keyframes unfold{from{transform:scaleY(.1);opacity:0}to{transform:none;opacity:1}}
.p-head{font-size:.72rem;color:#8a7f70;text-align:center;letter-spacing:.2em}
.p-rank{font-size:3rem;text-align:center;margin:.3rem 0;color:#b8321e;letter-spacing:.2em;font-weight:700}
.p-luck{text-align:center;font-size:.85rem;margin-bottom:.6rem}
.p-msg{font-size:.92rem;line-height:1.9;margin:.6rem 0;white-space:pre-line}
.p-items{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.82rem;margin:.8rem 0 0;border-top:1px dashed #d6ccb8;padding-top:.7rem}
.p-items dt{color:#8a7f70}.p-items dd{margin:0}
.ema-cats{display:flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0}
.ema-cats button{border:1px solid var(--line);background:none;border-radius:999px;padding:.3rem .7rem;font-size:.78rem}
.ema-cats button.on{background:var(--gold);color:#2b2620;border-color:var(--gold)}
#ema-text{width:100%;height:84px;border-radius:12px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.7rem;font:inherit;font-size:.95rem;resize:none}
#ema-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.ema{position:relative;background:linear-gradient(#e9cf9c,#dcb878);color:#3a2a14;border-radius:8px 8px 10px 10px;padding:1.3rem .6rem .5rem;font-size:.78rem;line-height:1.5;clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%);min-height:96px}
.ema .cat{font-size:.62rem;opacity:.75}.ema .pray{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem;font-size:.68rem}
.ema .pray button{border:0;background:rgba(255,255,255,.5);border-radius:999px;padding:.15rem .5rem;font-size:.68rem;color:#3a2a14}
.ema .pray button.on{background:#b8321e;color:#fff}
.story{line-height:2;font-size:.92rem}.story h2{text-align:center}.story .lead{color:var(--gold);text-align:center;font-size:.85rem}
.story p{margin:.8rem 0}.story .moral{border-left:3px solid var(--red);padding-left:.8rem;color:var(--ink)}
@media (max-width:520px){#actions button{width:66px}.p-rank{font-size:2.5rem}#hint{font-size:.68rem}}
.tag.bub{background:rgba(250,246,234,.95);color:#2b2620;font-size:.72rem}.x{z-index:3}

#room small{font-size:.66rem;color:var(--gold);letter-spacing:.05em}#room small b{letter-spacing:0;margin:0}
#title-card{position:fixed;inset:0;z-index:40;display:grid;place-items:center;pointer-events:auto;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(0,0,0,.55));transition:opacity 1.2s}
#title-card.out{opacity:0}
.tc-in{text-align:center;animation:tcIn 2.4s ease-out both}
.tc-in h1{font-size:clamp(2.4rem,8vw,4.4rem);letter-spacing:.35em;margin:.3em 0 .2em .35em;text-shadow:0 0 24px rgba(255,190,110,.6)}
.tc-sub{letter-spacing:.3em;font-size:.95rem;opacity:.85}.tc-hall{color:var(--gold);letter-spacing:.4em}.tc-skip{font-size:.7rem;opacity:.5;margin-top:2.5rem;font-family:system-ui}
@keyframes tcIn{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#loading{background:#16201c url(img/og.jpg) center/cover}#loading::before{content:"";position:absolute;inset:0;background:rgba(10,12,20,.55)}.lg-in{position:relative}
#title-card[hidden]{display:none}

#actions button.main{width:auto;min-width:150px;padding:.55rem 1rem;font-size:.95rem;font-weight:700;background:rgba(217,65,43,.85);color:#fff;flex-direction:row;justify-content:center}
#actions button.main.glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,190,110,.0)}50%{box-shadow:0 0 18px 2px rgba(255,190,110,.65)}}
#place{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:.4rem .9rem;font-size:1rem;letter-spacing:.15em;opacity:0;white-space:nowrap}
#place b{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--red);font-size:.75rem;letter-spacing:0;margin-right:.3em}
#place small{display:block;font-size:.66rem;letter-spacing:.05em;color:var(--muted);text-align:center;font-family:system-ui}
#place.on{animation:placeIn 3.2s ease forwards}
@keyframes placeIn{0%{opacity:0;transform:translate(-50%,-8px)}12%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.map-sheet{width:min(960px,100%)}.map-wrap{position:relative;border-radius:12px;overflow:hidden}.map-wrap img{display:block;width:100%}
.pin{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;display:flex;align-items:center;gap:.3rem}
.pin b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;border:2px solid #fbefd8;font-size:.8rem;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pin span{background:rgba(18,20,24,.82);color:#f4ead8;border-radius:8px;padding:.15rem .45rem;font-size:.72rem;white-space:nowrap;display:none;flex-direction:column}
.pin span small{font-size:.6rem;color:#b9b0a0;font-family:system-ui}.pin:hover span,.pin:focus span{display:flex}
@media (min-width:760px){.pin span{display:flex}}
@media (max-width:520px){#actions button.main{min-width:120px;font-size:.85rem}.pin b{width:22px;height:22px;font-size:.66rem}}

#hold{position:fixed;inset:0;z-index:35;display:grid;place-items:end center;padding-bottom:calc(120px + env(safe-area-inset-bottom));pointer-events:none}
#hold[hidden]{display:none}.hold-in{pointer-events:auto;text-align:center;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:1rem 1.4rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:92vw}
.hold-in h3{margin:.1rem 0 .2rem;letter-spacing:.2em}.hold-in p{margin:0 0 .7rem;font-size:.8rem;color:var(--muted)}
#hold-btn{position:relative;width:92px;height:92px;border-radius:50%;border:0;background:rgba(111,167,201,.25);color:#fff;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}
#hold-btn b{position:relative;z-index:1}#hold-btn.on{background:rgba(111,167,201,.45)}
#hold-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#9fd4ff calc(var(--k,0)*360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
#hold-skip{display:block;margin:.5rem auto 0;background:none;border:0;color:var(--muted);font-size:.72rem}
#coin-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem}
#coin-list button{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:14px;padding:.7rem .3rem;display:flex;flex-direction:column;gap:.2rem;align-items:center}
#coin-list b{font-size:1.1rem;color:var(--gold)}#coin-list small{font-size:.66rem;color:var(--muted);line-height:1.3}
#coin-list button:hover{border-color:var(--gold)}

.btn.wide{width:100%;margin:.6rem 0}.sheet.center{text-align:center}.wide-sheet{width:min(720px,100%)}
.juyo-list{display:grid;gap:.4rem}.juyo-list button{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px;padding:.6rem;text-align:left}
.mamori-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.mamori-list button{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;padding:.5rem .3rem;font-size:.8rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.mamori-list button span{width:22px;height:30px;border-radius:5px 5px 3px 3px;display:block}.mamori-list button small{font-size:.6rem;color:var(--gold)}.mamori-list button.have{border-color:var(--gold)}
#stamp-view canvas{max-width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#stamp-view.in canvas{animation:stampIn .9s cubic-bezier(.2,1.4,.4,1) both}@keyframes stampIn{0%{transform:scale(1.25) rotate(-3deg);opacity:0;filter:blur(3px)}60%{transform:scale(.97)}100%{transform:none;opacity:1;filter:none}}
#mamori-view canvas{width:160px;height:auto}
.btabs{display:flex;gap:.4rem;margin:.6rem 0}.btab{flex:1;border:1px solid var(--line);background:none;border-radius:10px;padding:.5rem}.btab.on{background:var(--gold);color:#2b2620;border-color:var(--gold)}
#book-shuin{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}
#book-shuin .page{width:100%;height:auto;aspect-ratio:180/260;border-radius:6px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
#book-shuin .page.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--line);color:var(--muted);font-size:.8rem;cursor:default;box-shadow:none}
#book-shuin .page.empty small{font-size:.62rem}
#book-mamori{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}.mamori-card{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.8rem;text-align:center}
.mamori-card canvas{width:90px;height:auto}.mamori-card small{color:var(--muted);font-size:.66rem}.mamori-card button{border:1px solid var(--line);background:none;border-radius:8px;font-size:.7rem;padding:.2rem .5rem}
#book-mamori[hidden],#book-shuin-wrap[hidden]{display:none}

.ema-date{display:grid;gap:.4rem;margin:.5rem 0;font-size:.78rem;color:var(--muted)}.ema-date input[type=date]{display:block;margin-top:.25rem;width:100%;border-radius:10px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.45rem;font:inherit}
.ema-date .chk{display:flex;gap:.4rem;align-items:center}

.gbar-wrap{display:flex;align-items:center;gap:.35rem;margin-top:.25rem;font-size:.62rem;color:var(--muted)}.gbar{width:90px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.gbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8c67a,#ff7a4a);transition:width 1s}.gbar-wrap b{color:var(--gold);font-size:.62rem}
body.fest .gbar i{background:linear-gradient(90deg,#ff7ab0,#ffd36b,#7ad0ff)}
#q-list{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.4rem}#q-list li{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;font-size:.85rem}
#q-list li.done{border-color:var(--gold);color:var(--gold)}
.toku-fly{position:fixed;left:50%;top:40%;transform:translate(-50%,0);color:var(--gold);font-weight:700;font-size:1.3rem;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;z-index:25;animation:tokuFly 1.6s ease-out forwards}
@keyframes tokuFly{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-60px)}}
.ibtn small{display:none}
/* ---------------- 御祈祷 ---------------- */
body.cine #hud-top,body.cine #actions,body.cine #me-tag,body.cine .tag,body.cine #hint,body.cine #place,body.cine #note,body.cine #toast{opacity:0!important;pointer-events:none!important;transition:opacity .8s}
#kito{position:fixed;inset:0;z-index:20;pointer-events:none}
#kito[hidden]{display:none}
.kt-bar{position:absolute;left:0;right:0;height:11vh;background:#050605;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.kt-top{top:0;transform:translateY(-100%);animation:kt-in-top 1.2s .1s forwards}
.kt-bot{bottom:0;transform:translateY(100%);animation:kt-in-bot 1.2s .1s forwards}
#kito.leaving .kt-top{animation:none;transform:translateY(-100%)}#kito.leaving .kt-bot{animation:none;transform:translateY(100%)}
@keyframes kt-in-top{to{transform:none}}@keyframes kt-in-bot{to{transform:none}}
.kt-phase{position:absolute;left:max(20px,env(safe-area-inset-left));top:calc(11vh + 18px);display:grid;gap:.25rem;opacity:0}
.kt-phase.on{animation:kt-phase 1.6s ease forwards}
.kt-phase small{font:600 .7rem/1 system-ui,sans-serif;letter-spacing:.32em;color:var(--gold);opacity:.8}
.kt-phase b{font-size:clamp(1.6rem,4.2vh,2.4rem);letter-spacing:.35em;font-weight:700;text-shadow:0 2px 20px rgba(0,0,0,.7)}
@keyframes kt-phase{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kt-text{position:absolute;right:max(22px,env(safe-area-inset-right));top:calc(11vh + 14px);bottom:calc(11vh + 14px);writing-mode:vertical-rl;font-size:clamp(1rem,2.4vh,1.35rem);line-height:2.1;letter-spacing:.18em;max-width:58vw;overflow:hidden;opacity:0;transition:opacity 1s;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.kt-text.on{opacity:1}
.kt-text span{color:rgba(244,234,216,.22);transition:color .35s,text-shadow .35s}
.kt-text span.lit{color:#f4ead8}
.kt-text span.gold{color:rgba(232,198,122,.35)}
.kt-text span.gold.lit{color:#ffd77a;text-shadow:0 0 14px rgba(255,190,90,.9),0 0 30px rgba(255,170,60,.55)}
.kt-cue{position:absolute;left:50%;bottom:calc(11vh + 40px);transform:translateX(-50%);display:grid;justify-items:center;gap:.5rem;pointer-events:auto}
.kt-cue[hidden]{display:none}
.kt-cue button{width:128px;height:128px;white-space:nowrap;padding:0 .4rem;border-radius:50%;border:1px solid rgba(232,198,122,.7);background:radial-gradient(circle,rgba(217,65,43,.85),rgba(120,24,14,.9));color:#fff;font-size:1rem;letter-spacing:.12em;box-shadow:0 0 0 0 rgba(232,198,122,.6);animation:kt-pulse 1.6s infinite}
.kt-cue button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.kt-cue small{font-size:.78rem;color:var(--ink);text-shadow:0 1px 8px #000}
@keyframes kt-pulse{0%{box-shadow:0 0 0 0 rgba(232,198,122,.55)}70%{box-shadow:0 0 0 22px rgba(232,198,122,0)}100%{box-shadow:0 0 0 0 rgba(232,198,122,0)}}
.kt-stop{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(11vh - 44px);pointer-events:auto;background:none;border:1px solid rgba(244,234,216,.25);border-radius:999px;color:var(--muted);font-size:.72rem;padding:.35rem .8rem}
@media (prefers-reduced-motion:reduce){.kt-bar,.kt-phase.on,.kt-cue button{animation:none!important;transform:none!important;opacity:1}}
.kicker{margin:0;font:600 .62rem/1 system-ui,sans-serif;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.kito-sheet input{width:100%;border-radius:12px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.6rem .7rem;font:inherit;font-size:.95rem}
.kito-sheet h3 small{color:var(--muted);font-weight:400;font-size:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chips button{border:1px solid var(--line);background:none;border-radius:999px;padding:.35rem .75rem;font-size:.8rem}
.chips button.on{background:var(--gold);color:#2b2620;border-color:var(--gold)}
.ofuda-wrap{display:grid;place-items:center;margin:.8rem 0}
.ofuda-wrap img{height:min(52vh,460px);width:auto;max-width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
.juyo-kito{width:100%;margin-top:.4rem}
.kt-shade{position:absolute;top:0;bottom:0;right:0;width:min(62vw,560px);background:linear-gradient(270deg,rgba(5,6,5,.72),rgba(5,6,5,.35) 55%,transparent)}
/* ---------------- 身支度 ---------------- */
.modal.side{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;place-items:end;pointer-events:none}
.modal.side .sheet{pointer-events:auto;width:min(380px,100%);max-height:min(88vh,720px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
@media (max-aspect-ratio:1/1){.modal.side{place-items:end center;padding:0}.modal.side .sheet{width:100%;max-height:56vh;border-radius:20px 20px 0 0;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}}
.pf-label{margin:.9rem 0 .4rem;font-size:.82rem;color:var(--gold);display:flex;gap:.5rem;align-items:baseline}
.pf-label small{color:var(--muted);font-size:.68rem}
.pf-name{display:flex;gap:.4rem}.pf-name input{flex:1;min-width:0;border-radius:12px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.55rem .7rem;font:inherit;font-size:1rem}
.swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.18);padding:0}
.sw.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,198,122,.35)}
.sw:focus-visible,.chips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chips button.lock{opacity:.6;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.chips button.lock small{font-size:.6rem;color:var(--muted)}
.pf-err{color:#f0a08a;min-height:1.2em}
/* ---------------- ことば・縁 ---------------- */
#actions button{width:66px}
.streak{color:#ffb070;font-weight:600;letter-spacing:.02em}
.ibtn.dot{position:relative}.ibtn.dot::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px rgba(18,24,22,.8)}
#say-pop{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12;width:min(420px,calc(100% - 24px));background:rgba(24,30,27,.96);border:1px solid var(--line);border-radius:18px;padding:.7rem;box-shadow:0 14px 40px rgba(0,0,0,.45)}
#say-pop[hidden]{display:none}
.say-emo{display:flex;justify-content:space-between;gap:.2rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);margin-bottom:.55rem}
.say-emo button{background:none;border:0;font-size:1.35rem;width:40px;height:40px;border-radius:12px}.say-emo button:hover{background:rgba(255,255,255,.08)}
.say-list{display:flex;flex-wrap:wrap;gap:.35rem;max-height:32vh;overflow:auto}
.say-list button{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:.35rem .7rem;font-size:.8rem}
.say-list button:hover{background:rgba(232,198,122,.18)}
.tag.bub.mine{background:rgba(250,246,234,.95);color:#2b2620}
#en-card{position:fixed;left:50%;top:max(84px,calc(env(safe-area-inset-top) + 72px));transform:translateX(-50%);z-index:12;width:min(340px,calc(100% - 24px));background:rgba(24,30,27,.96);border:1px solid rgba(232,198,122,.35);border-radius:16px;padding:.9rem 1rem;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.45);animation:en-in .35s ease}
#en-card[hidden]{display:none}
@keyframes en-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
.en-name{margin:0 0 .6rem;font-size:1.05rem;line-height:1.5}.en-name small{display:block;font-size:.7rem;color:var(--gold)}
.en-btns{display:flex;justify-content:center;gap:.5rem}
.en-list{display:grid;gap:.5rem;margin-top:.8rem}
.en-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.en-row div{min-width:0;display:grid}.en-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.en-row small{color:var(--muted);font-size:.7rem}
.en-row .btn{flex:none;font-size:.78rem;padding:.45rem .7rem}
.en-empty{text-align:center;padding:1rem 0}.en-empty p{margin:.3rem 0}
.en-inbox{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.85rem}.en-inbox small{color:var(--muted);margin-left:.3rem}
@media (prefers-reduced-motion:reduce){#en-card{animation:none}}
#lamp-card{position:fixed;left:50%;top:max(84px,calc(env(safe-area-inset-top) + 72px));transform:translateX(-50%);z-index:12;width:min(300px,calc(100% - 24px));background:rgba(24,30,27,.96);border:1px solid rgba(255,198,90,.4);border-radius:16px;padding:.9rem 1rem;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.45)}
#lamp-card[hidden]{display:none}
.lamp-name{margin:.35rem 0 .2rem;font-size:1.1rem}.lamp-name small{display:block;font-size:.68rem;color:#ffc65a}
.lamp-gan{margin:0;color:var(--gold);font-size:.8rem;letter-spacing:.15em}.lamp-text{margin:.35rem 0;font-size:.95rem}
/* ---------------- 今日の参拝 ---------------- */
#guide{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 52px);left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:.6rem;max-width:calc(100% - 24px);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,198,122,.35);border-radius:999px;padding:.4rem .5rem .4rem .8rem;font-size:.8rem;text-align:left}
#guide:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gd-dots{display:flex;gap:4px;flex:none}.gd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(244,234,216,.22)}
.gd-dots i.on{background:var(--gold)}.gd-dots i.now{background:none;box-shadow:inset 0 0 0 1.5px var(--gold)}
.gd-txt{display:grid;min-width:0;line-height:1.25}.gd-txt small{font-size:.6rem;color:var(--gold);letter-spacing:.12em}
.gd-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-go{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(232,198,122,.2);color:var(--gold)}
#guide.all{border-color:rgba(255,190,200,.4)}#guide.all .gd-go{display:none}
#guide.flash{animation:gd-flash 1.2s ease}
@keyframes gd-flash{0%{box-shadow:0 0 0 0 rgba(232,198,122,.7)}100%{box-shadow:0 0 0 18px rgba(232,198,122,0)}}
body.cine #guide{opacity:0;pointer-events:none}
#hint{top:calc(max(12px,env(safe-area-inset-top)) + 100px)}
#q-list{list-style:none;padding:0;margin:.8rem 0;display:grid;gap:.45rem}
#q-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:12px;font-size:.88rem}
#q-list li.done{opacity:.6}.q-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:.7rem;margin-right:.2rem}
.q-go{flex:none;padding:.35rem .8rem;font-size:.78rem}
/* ---------------- 仕上げ：周辺減光と粒子 ---------------- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(6,8,7,.38) 100%)}
#grain{position:fixed;inset:-50%;pointer-events:none;z-index:4;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){#grain{animation:none}}
/* ---------------- 合同祈祷 ---------------- */
#gokito{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 100px);left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:.7rem;background:rgba(40,18,14,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(217,65,43,.6);border-radius:999px;padding:.35rem .4rem .35rem .9rem;font-size:.82rem;max-width:calc(100% - 24px)}
#gokito[hidden]{display:none}
#gokito .gk-t{display:grid;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}#gokito small{font-size:.6rem;color:var(--gold);letter-spacing:.12em}
#gokito .btn{padding:.4rem .9rem;font-size:.78rem;border-radius:999px}#gokito .btn:disabled{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--muted)}
body.cine #gokito{opacity:0;pointer-events:none}
#hint{top:calc(max(12px,env(safe-area-inset-top)) + 146px)}
/* ---------------- 画面の配置（スマホで隠れないように） ---------------- */
#hud-top{align-items:flex-start;gap:.5rem}
#hud-top .pill{min-width:0;flex:0 1 auto;border-radius:18px}
#hud-top .pill-right{flex:none;align-self:flex-start}
.pill .sm{display:none}
#step{top:34%}
/* 今日の参拝・合同祈祷・お知らせは、下の操作帯のすぐ上に積む */
#guide{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 82px)}
#gokito{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 128px)}
#toast{bottom:calc(174px + env(safe-area-inset-bottom))}
#hint{top:calc(max(12px,env(safe-area-inset-top)) + 64px)}
#place{top:calc(max(12px,env(safe-area-inset-top)) + 96px)}
#actions button.main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  #hud-top{left:8px;right:8px}
  #hud-top .pill{font-size:.68rem;padding:.4rem .7rem;line-height:1.45}
  #hud-top .pill b{letter-spacing:.06em}
  .pill .lg{display:none}.pill .sm{display:inline}
  .gbar-wrap span{display:none}
  #hud-top .pill-right{padding:.15rem}
  .ibtn{width:30px;height:30px;font-size:.92rem}
  #actions{gap:.15rem;padding:.25rem}
  #actions button{width:58px;font-size:.66rem}
  #actions button.main{min-width:0;max-width:40vw;font-size:.8rem;padding:.5rem .7rem}
  #guide{font-size:.74rem}
  #hint{display:none}
  #place{font-size:.85rem}
}
/* ---------------- 境内図の現在地 ---------------- */
.map-me{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3;display:grid;justify-items:center}
.map-me i{width:16px;height:16px;border-radius:50%;background:#ff3b2f;border:2px solid #fff;box-shadow:0 0 0 0 rgba(255,59,47,.7);animation:me-pulse 1.4s infinite}
.map-me span{margin-top:3px;font-size:.66rem;background:#ff3b2f;color:#fff;border-radius:999px;padding:.05rem .45rem;white-space:nowrap;font-family:system-ui,sans-serif;font-weight:600}
@keyframes me-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,47,.7)}70%{box-shadow:0 0 0 14px rgba(255,59,47,0)}100%{box-shadow:0 0 0 0 rgba(255,59,47,0)}}
.map-others b{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#4aa3ff;border:1.5px solid #fff;pointer-events:none}
@media (prefers-reduced-motion:reduce){.map-me i{animation:none}}
/* ---------------- 和紙と金：ダイアログ・帯・カード ---------------- */
:root{--washi:url("img/gen/washi.jpg");--gold-line:linear-gradient(90deg,transparent,rgba(232,198,122,.85) 18%,#f3d999 50%,rgba(232,198,122,.85) 82%,transparent)}
.sheet,#say-pop,#en-card,#lamp-card{background:linear-gradient(180deg,rgba(14,19,33,.78),rgba(9,12,22,.9)),var(--washi) center/520px auto repeat,#121826;border:1px solid rgba(232,198,122,.38);box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03)}
.sheet::before,#en-card::before,#lamp-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:var(--gold-line);border-radius:2px}
#en-card,#lamp-card{position:fixed}
.sheet h2{font-size:1.25rem;letter-spacing:.14em;padding-bottom:.55rem;margin-bottom:.6rem;background:linear-gradient(90deg,rgba(232,198,122,.6),transparent) bottom left/60% 1px no-repeat}
.sheet h3{letter-spacing:.12em}
.btn{transition:transform .15s ease,background .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#e2523a,#b8321e);border-color:#e8836f;box-shadow:0 6px 18px rgba(184,50,30,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 8px 24px rgba(184,50,30,.5),inset 0 1px 0 rgba(255,255,255,.3)}
#actions{background:linear-gradient(180deg,rgba(14,19,33,.72),rgba(9,12,22,.86)),var(--washi) center/420px auto repeat;border:1px solid rgba(232,198,122,.3);box-shadow:0 12px 34px rgba(0,0,0,.45)}
#actions button.main{background:linear-gradient(180deg,#e2523a,#b8321e);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
#hud-top .pill,#hud-top .pill-right,#guide,#gokito{box-shadow:0 8px 24px rgba(0,0,0,.35)}
#hud-top .pill{background:linear-gradient(180deg,rgba(14,19,33,.7),rgba(9,12,22,.82)),var(--washi) center/420px auto repeat;border-color:rgba(232,198,122,.28)}
.modal{background:radial-gradient(ellipse at 50% 40%,rgba(10,12,20,.35),rgba(4,5,9,.72))}
.modal:not([hidden]) .sheet{animation:sheet-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#toast{background:linear-gradient(180deg,rgba(14,19,33,.86),rgba(9,12,22,.92)),var(--washi) center/420px auto repeat;border-color:rgba(232,198,122,.35)}
@media (prefers-reduced-motion:reduce){.modal:not([hidden]) .sheet{animation:none}}
/* ---------------- 掃く（たたく遊び） ---------------- */
/* ---------------- 音の設定 ---------------- */
#snd-pop{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 50px);right:12px;z-index:14;width:min(280px,calc(100% - 24px));padding:.9rem 1rem;border-radius:16px;background:linear-gradient(180deg,rgba(14,19,33,.86),rgba(9,12,22,.94)),var(--washi) center/420px auto repeat;border:1px solid rgba(232,198,122,.38);box-shadow:0 18px 50px rgba(0,0,0,.55);display:grid;gap:.6rem}
#snd-pop[hidden]{display:none}
.snd-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.88rem;cursor:pointer}
.snd-row span{display:grid}.snd-row small{font-size:.68rem;color:var(--muted)}
.snd-row input{width:44px;height:24px;appearance:none;-webkit-appearance:none;border-radius:999px;background:rgba(255,255,255,.18);position:relative;cursor:pointer;transition:background .2s}
.snd-row input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.snd-row input:checked{background:var(--red)}.snd-row input:checked::after{transform:translateX(20px)}
.snd-row input:focus-visible,.snd-vol input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.snd-vol{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--muted)}.snd-vol input{flex:1;accent-color:var(--gold)}
/* ---------------- ひとこと ---------------- */
.tag-st{display:block;max-width:180px;margin:0 auto 2px;padding:.12rem .5rem;border-radius:8px;background:rgba(251,246,234,.95);color:#2b2620;font-size:.7rem;white-space:normal;line-height:1.35;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#me-tag .tag-st{background:#fff4d6}
.tag,#me-tag{text-align:center}
.say-free{display:grid;gap:.45rem;padding-bottom:.6rem;margin-bottom:.55rem;border-bottom:1px solid var(--line)}
.say-free input{width:100%;border-radius:12px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.55rem .7rem;font:inherit;font-size:.95rem}
.say-free-btns{display:flex;gap:.4rem;justify-content:flex-end}.say-free-btns .btn{padding:.4rem .8rem;font-size:.78rem}
.say-note{margin:0;min-height:1em;font-size:.7rem;color:var(--gold)}
/* ---------------- ひとこと ---------------- */
.tag-st{display:block;max-width:180px;margin:0 auto 2px;padding:.12rem .5rem;border-radius:8px;background:rgba(251,246,234,.95);color:#2b2620;font-size:.7rem;white-space:normal;line-height:1.35;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#me-tag .tag-st{background:#fff4d6}
.tag,#me-tag{text-align:center}
.say-free{display:grid;gap:.45rem;padding-bottom:.6rem;margin-bottom:.55rem;border-bottom:1px solid var(--line)}
.say-free input{width:100%;border-radius:12px;border:1px solid var(--line);background:#f4e6c8;color:#2b2620;padding:.55rem .7rem;font:inherit;font-size:.95rem}
.say-free-btns{display:flex;gap:.4rem;justify-content:flex-end}.say-free-btns .btn{padding:.4rem .8rem;font-size:.78rem}
.say-note{margin:0;min-height:1em;font-size:.7rem;color:var(--gold)}
/* ---------------- 境内図（真上から） ---------------- */
.map-sheet{width:auto;max-width:min(560px,100%)}
.map-wrap{width:fit-content;max-width:100%;margin:0 auto;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.map-wrap img{display:block;width:auto;max-width:100%;height:auto;max-height:min(68vh,760px)}
.map-me i{position:relative}
.map-me i::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #ff3b2f;transform:translate(-50%,-50%) rotate(var(--ry,0rad)) translateY(-14px)}
.pin span{background:rgba(251,246,234,.94);color:#2b2016}
.pin span{display:none}
.pin:hover span,.pin:focus-visible span{display:block;position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;padding:.15rem .45rem;border-radius:6px;font-size:.72rem;z-index:2}
.pin.up b{background:#2b2016}
.map-legend{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.3rem}
.map-legend button{width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:.45rem;align-items:center;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:.35rem .5rem;font-size:.8rem}
.map-legend button:hover{background:rgba(232,198,122,.14)}
.map-legend b{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:.68rem}
.map-legend small{color:var(--muted);font-size:.62rem;font-family:system-ui,sans-serif}
.map-wrap img{max-height:min(56vh,640px)}
/* ---------------- 読みこみ画面 ---------------- */
#loading{background:#0b0f18;overflow:hidden;transition:opacity 1s ease}
.lg-art{position:absolute;inset:-4%;background:url("img/gen/keyart_s.jpg") center/cover;transform:scale(1.04)}
.lg-art::after{content:"";position:absolute;inset:0;z-index:0;background:url("img/gen/keyart.jpg") center/cover}
#loading .lg-art{animation:lg-zoom 14s ease-out forwards}
.lg-art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,10,20,.35),rgba(6,10,20,.05) 35%,rgba(6,10,20,.2) 60%,rgba(6,10,20,.85))}
@keyframes lg-zoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
#loading .lg-in{position:relative;z-index:2;text-align:center;padding:0 max(16px,env(safe-area-inset-left))}
#loading .lg-in h1{font-size:clamp(2.4rem,9vw,4.6rem);letter-spacing:.35em;margin:.2em 0 .15em .35em;text-shadow:0 0 30px rgba(255,190,110,.65),0 2px 12px rgba(0,0,0,.6)}
.lg-sub{letter-spacing:.3em;font-size:.95rem;text-shadow:0 1px 8px rgba(0,0,0,.7)}.lg-hall{color:var(--gold);letter-spacing:.4em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.lg-bar{width:min(240px,60vw);height:3px;margin:1.6rem auto .8rem;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.lg-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,#f3d999,transparent);animation:lg-bar 1.4s ease-in-out infinite}
#loading.ready .lg-bar i{width:100%;animation:none;background:#f3d999;transition:width .3s}
@keyframes lg-bar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.lg-tip{min-height:2.6em;max-width:30em;margin:0 auto;font-size:.82rem;color:#f4ead8;text-shadow:0 1px 8px rgba(0,0,0,.8);transition:opacity .3s}
@media (prefers-reduced-motion:reduce){#loading .lg-art,.lg-bar i{animation:none}}
#loading .lg-in::before{content:"";position:absolute;inset:-30% -20%;z-index:-1;background:radial-gradient(ellipse at center,rgba(6,10,20,.55),transparent 65%)}
#note a{pointer-events:auto;color:rgba(244,234,216,.6);text-underline-offset:2px}
.sheet .about-link{display:block;margin-top:.8rem;font-size:.75rem;color:var(--muted)}
/* チャット（境内のことば） */
#chat-btn{position:fixed;left:12px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:11;width:46px;height:46px;border-radius:50%;border:1px solid rgba(232,198,122,.45);background:rgba(14,19,33,.82);color:var(--ink);font-size:1.25rem;box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer}
#chat-btn.on{background:var(--gold);color:#2b2620}
#chat-btn i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font:700 .66rem/18px system-ui;font-style:normal}
#chat-btn i[hidden]{display:none}
#chat-tick{position:fixed;left:66px;bottom:calc(158px + env(safe-area-inset-bottom));z-index:11;max-width:min(300px,calc(100vw - 84px));padding:.4rem .7rem;border-radius:12px;background:rgba(14,19,33,.82);border:1px solid var(--line);color:var(--ink);font-size:.78rem;line-height:1.35;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-tick b{color:var(--gold);margin-right:.3rem}
#chat-tick[hidden]{display:none}
#chat-tick.on{animation:tick-in .3s ease}
@keyframes tick-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#chat{position:fixed;left:10px;bottom:calc(206px + env(safe-area-inset-bottom));z-index:30;width:min(360px,calc(100vw - 20px));height:min(44vh,380px);display:flex;flex-direction:column;border-radius:16px;padding:.55rem .6rem;background:linear-gradient(180deg,rgba(14,19,33,.8),rgba(9,12,22,.92)),var(--washi) center/520px auto repeat,#121826;border:1px solid rgba(232,198,122,.38);box-shadow:0 18px 50px rgba(0,0,0,.55)}
#chat[hidden]{display:none}
.ch-head{display:flex;align-items:center;gap:.5rem;padding:0 .2rem .35rem;border-bottom:1px solid var(--line)}
.ch-head b{font-size:.86rem;color:var(--gold)}.ch-head small{color:var(--muted);font-size:.68rem;flex:1}
.ch-x{border:0;background:none;color:var(--muted);font-size:1rem;cursor:pointer}
.ch-log{flex:1;overflow-y:auto;padding:.4rem .15rem;display:flex;flex-direction:column;gap:.3rem;overscroll-behavior:contain}
.ch-l{font-size:.8rem;line-height:1.4;color:var(--ink);word-break:break-word;padding:.15rem .35rem;border-radius:8px}
.ch-l b{color:var(--gold);margin-right:.4rem;font-weight:600}
.ch-l time{color:var(--muted);font-size:.62rem;margin-left:.4rem}
.ch-l.me b{color:#f2a6b6}
.ch-l.other{cursor:pointer}.ch-l.other:hover,.ch-l.other:focus{background:rgba(255,255,255,.05);outline:none}
.ch-l.sys{color:var(--muted);font-size:.72rem;text-align:center}
.ch-menu{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;padding:.4rem;border-radius:10px;background:rgba(0,0,0,.3);margin-bottom:.35rem}
.ch-menu[hidden]{display:none}
.ch-menu span{font-size:.72rem;color:var(--muted);flex-basis:100%}
.ch-menu button{border:1px solid var(--line);background:none;color:var(--ink);border-radius:8px;font-size:.74rem;padding:.25rem .55rem;cursor:pointer}
.ch-form{display:flex;gap:.4rem}
.ch-form input{flex:1;min-width:0;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);padding:.5rem .6rem;font-size:16px}
.ch-note{margin:.3rem .1rem 0;font-size:.64rem;color:var(--muted)}.ch-note.warn{color:#ffb4a4}

/* 御札・宝物 */
#book-takara[hidden]{display:none}
#book-takara h3{font-size:.9rem;color:var(--gold);margin:.6rem 0 .4rem}#book-takara h3 small{color:var(--muted);font-weight:400;margin-left:.3rem}
.ofuda-row{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem}
.ofuda-thumb{width:64px;height:auto;flex:none;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.4);cursor:pointer}
.finds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem}
.find{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .3rem;border:1px solid var(--line);border-radius:12px;text-align:center}
.find span{font-size:1.6rem}.find b{font-size:.74rem;font-weight:600}.find small{font-size:.66rem;color:var(--gold)}
.find.no{opacity:.45}.find.no span{color:var(--muted)}
#ofuda-view{position:fixed;inset:0;z-index:40;background:rgba(5,8,12,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
#ofuda-view[hidden]{display:none}#ofuda-view canvas{height:min(76vh,640px);width:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}#ofuda-view small{color:var(--muted)}

/* 静のひととき */
#m-zen .zen-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin:.7rem 0}
#m-zen .zen-cards button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;padding:.75rem .8rem;border-radius:14px;border:1px solid rgba(232,198,122,.3);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer}
#m-zen .zen-cards button:hover{background:rgba(232,198,122,.12)}#m-zen .zen-cards span{font-size:1.4rem}#m-zen .zen-cards b{font-size:.9rem}#m-zen .zen-cards small{font-size:.68rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .5rem}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.chip small{font-size:.62rem;color:var(--muted)}.chip.on{background:var(--gold);color:#2b2620;border-color:var(--gold)}.chip.on small{color:#5a4a2a}
#m-focus h3,#m-mix h3{font-size:.8rem;color:var(--gold);margin:.5rem 0 .2rem}
#m-focus .chk{display:flex;gap:.4rem;align-items:center;font-size:.8rem;margin:.3rem 0}
#breath{position:fixed;inset:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:radial-gradient(circle at 50% 45%,rgba(10,14,24,.35),rgba(6,8,14,.82));pointer-events:auto}
#breath[hidden]{display:none}
.br-ring{width:min(56vw,240px);height:min(56vw,240px);border-radius:50%;border:1px solid rgba(232,198,122,.35);display:flex;align-items:center;justify-content:center}
.br-dot{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.55),rgba(232,198,122,.12) 60%,transparent 72%);transform:scale(.35)}
.br-say{font-size:1.15rem;color:var(--ink);letter-spacing:.15em;margin:0}.br-n{color:var(--muted)}
.br-skip{border:1px solid var(--line);background:none;color:var(--muted);border-radius:999px;padding:.3rem .9rem;cursor:pointer}
#focus-hud{position:fixed;top:max(70px,calc(env(safe-area-inset-top) + 62px));left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:.6rem;padding:.45rem .7rem .45rem .5rem;border-radius:999px;background:rgba(14,19,33,.78);border:1px solid rgba(232,198,122,.38);box-shadow:0 10px 30px rgba(0,0,0,.4)}
#focus-hud[hidden]{display:none}
#focus-hud svg{width:40px;height:40px;transform:rotate(-90deg)}
.fr-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3}.fr-fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.fh-t{display:flex;flex-direction:column;line-height:1.1}.fh-time{font:600 1.1rem/1.1 ui-monospace,monospace;color:var(--ink)}.fh-sub{font-size:.66rem;color:var(--gold)}
.fh-q,.fh-end{border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:.3rem .7rem;font-size:.76rem;cursor:pointer}
body.focus-quiet #hud-top,body.focus-quiet #actions,body.focus-quiet #guide,body.focus-quiet #chat-btn,body.focus-quiet #chat-tick,body.focus-quiet #place,body.focus-quiet #hint,body.focus-quiet #gokito{opacity:0;pointer-events:none;transition:opacity 1.2s}
body.focus-quiet #focus-hud{opacity:.55}body.focus-quiet #focus-hud:hover{opacity:1}
/* 境内の音 */
.mx-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.mx-rows{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.6rem}
.mx-row{display:grid;grid-template-columns:1.8rem 1fr minmax(90px,40%) auto;align-items:center;gap:.5rem}
.mx-ic{font-size:1.2rem;text-align:center}.mx-nm{display:flex;flex-direction:column;line-height:1.2}.mx-nm b{font-size:.82rem}.mx-nm small{font-size:.64rem;color:var(--muted)}
.mx-row input[type=range]{width:100%;accent-color:var(--gold)}.mx-row select{background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:.72rem}
/* 写経 */
.sk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.45rem;margin:.6rem 0}
.sk-list button{display:flex;flex-direction:column;align-items:flex-start;padding:.6rem .7rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;text-align:left}
.sk-list b{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:.95rem}.sk-list small{font-size:.66rem;color:var(--muted)}
.sk-write[hidden],.sk-pick[hidden]{display:none}
.sk-paper{position:relative;background:radial-gradient(ellipse at 30% 20%,#fbf6ea,#f1e6cf 70%,#e8d9ba);border-radius:6px;padding:1.2rem 1rem;height:min(52vh,420px);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 0 40px rgba(120,90,40,.25);direction:rtl}
.sk-text{writing-mode:vertical-rl;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:1.65rem;line-height:2.1;letter-spacing:.12em;height:100%;direction:ltr}
.sk-text span{color:rgba(60,45,30,.18);transition:color .5s ease,text-shadow .5s ease}
.sk-text span.ink{color:#17120d;text-shadow:0 0 1px rgba(0,0,0,.35)}
.sk-text span.ok{color:#17120d}
.sk-text i.gap{display:inline-block;block-size:.9em}
.sk-text .sk-by{font-style:normal;font-size:.9rem;color:rgba(60,45,30,.55);margin-top:1.2em}
.sk-seal{position:absolute;left:1rem;bottom:1rem;width:84px;height:84px;border:4px solid #c8321e;color:#c8321e;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);direction:ltr;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;animation:seal .5s cubic-bezier(.2,1.6,.4,1)}
.sk-seal b{font-size:1.5rem;line-height:1}.sk-seal small{font-size:.5rem;margin-top:.2rem}
.sk-seal[hidden]{display:none}
@keyframes seal{from{transform:rotate(-8deg) scale(2.2);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}
.sk-ctl{display:flex;gap:.5rem;margin:.6rem 0 .3rem}.sk-ctl input{flex:1;min-width:0;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);padding:.55rem .7rem;font-size:16px}
.sk-trace{touch-action:none;user-select:none;-webkit-user-select:none}
.sk-done{display:flex;flex-wrap:wrap;gap:.4rem}.sk-done span{display:flex;flex-direction:column;padding:.4rem .6rem;border:1px solid var(--line);border-radius:10px;font-size:.75rem}.sk-done small{color:var(--muted);font-size:.62rem}
.my-ema{display:flex;flex-wrap:wrap;gap:.5rem}.my-ema img{width:96px;height:auto}
/* 絵馬を描く */
.ed-cv{width:100%;max-width:420px;display:block;margin:.6rem auto;touch-action:none;cursor:crosshair}
.ed-tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin-bottom:.6rem}
.ed-cols{display:flex;gap:.3rem}.ed-cols button{width:26px;height:26px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.25);cursor:pointer}.ed-cols button.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,198,122,.4)}
.ed-size{display:flex;gap:.25rem}.ed-size button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}.ed-size button.on{border-color:var(--gold)}.ed-size i{display:block;border-radius:50%;background:var(--ink)}
.ema-draw{margin-top:.6rem}
/* 眺める */
#tour-fade{position:fixed;inset:0;z-index:33;background:#05070b;opacity:0;pointer-events:none;transition:opacity 1s ease}#tour-fade.on{opacity:1}
#tour-cap{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));z-index:34;color:#f4ead8;text-shadow:0 2px 12px rgba(0,0,0,.7);pointer-events:none}
#tour-cap[hidden]{display:none}#tour-cap small{display:block;font-size:.7rem;letter-spacing:.2em;color:var(--gold)}#tour-cap b{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:1.6rem;letter-spacing:.12em}
#tour-cap.on{animation:cap-in 2.4s ease}@keyframes cap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#tour-exit{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:34;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);color:rgba(255,255,255,.75);border-radius:999px;padding:.35rem .8rem;font-size:.72rem;cursor:pointer}
#tour-exit[hidden]{display:none}
body.touring #chat-btn,body.touring #chat-tick,body.touring #focus-hud{opacity:0;pointer-events:none}

/* おつかれさまカード */
.zd-card{display:flex;justify-content:center;margin:.6rem 0}.zd-cv{width:min(260px,70vw);height:auto;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
/* ことば：いつも一番上に、長いときは中でスクロール。開いている間は、お知らせを上へ逃がす */
#say-pop{z-index:26;max-height:calc(100dvh - 120px - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 90px);overflow-y:auto;overscroll-behavior:contain}
body:has(#say-pop:not([hidden])) #toast{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 64px)}
body:has(#say-pop:not([hidden])) #chat-tick,body:has(#say-pop:not([hidden])) #guide{opacity:0;pointer-events:none}

/* えにし作業室 */
#m-zen .zen-cards .wide-card{grid-column:1/-1;background:linear-gradient(135deg,rgba(232,198,122,.16),rgba(255,255,255,.03))}
#room-hud{position:fixed;top:max(66px,calc(env(safe-area-inset-top) + 58px));left:50%;transform:translateX(-50%);z-index:20;width:min(380px,calc(100vw - 20px));display:flex;flex-direction:column;gap:.4rem;padding:.6rem .75rem;border-radius:16px;background:linear-gradient(180deg,rgba(14,19,33,.82),rgba(9,12,22,.9));border:1px solid rgba(232,198,122,.38);box-shadow:0 12px 34px rgba(0,0,0,.45)}
#room-hud[hidden]{display:none}
.rh-row{display:flex;align-items:center;gap:.5rem}.rh-name{font-size:.86rem;color:var(--gold);flex:1}.rh-ppl{font-size:.72rem;color:var(--muted)}
.rh-main svg{width:46px;height:46px;transform:rotate(-90deg);flex:none}
.rh-t{display:flex;flex-direction:column;flex:1;line-height:1.1}.rh-ph{font-size:.7rem;color:var(--gold);letter-spacing:.2em}.rh-left{font:600 1.6rem/1.1 ui-monospace,monospace;color:var(--ink)}
#room-hud.brk .rh-ph{color:#9fd8c8}#room-hud.brk .fr-fg{stroke:#9fd8c8}
.rh-me{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}.rh-me small{font-size:.62rem;color:var(--muted)}.rh-me b{font-size:.8rem}
.rh-ch{gap:.3rem}.rh-ch button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:.3rem .2rem;font-size:.7rem;cursor:pointer;white-space:nowrap}
.rh-ch button.on{background:var(--gold);color:#2b2620;border-color:var(--gold)}
.rh-btns{justify-content:flex-end}.rh-btns button{border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:.3rem .8rem;font-size:.74rem;cursor:pointer}
body.focus-quiet #room-hud{opacity:.5}body.focus-quiet #room-hud:hover{opacity:1}
/* ことばの吹き出し：名札より手前に。長い言葉は折り返す */
.tag.bub{z-index:7;white-space:normal;max-width:min(240px,70vw);line-height:1.35;text-align:center;padding:.25rem .6rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* はじめての案内 */
.wl{text-align:center;max-width:380px}
.wl-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-height:230px;padding-top:.6rem}
.wl-card.in{animation:wl-in .45s ease}@keyframes wl-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wl-ic{font-size:3rem;line-height:1.1}.wl-t{margin:.2rem 0;font-size:1.15rem}.wl-d{font-size:.86rem;line-height:1.75;color:var(--ink);opacity:.9;margin:0 .2rem}
.wl-go{margin-top:.5rem}
.wl-dots{display:flex;gap:.4rem;justify-content:center;margin:.6rem 0}.wl-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer}.wl-dots i.on{background:var(--gold)}
/* いま作業している部屋 */
#room-live{position:fixed;left:12px;top:calc(max(12px,env(safe-area-inset-top)) + 104px);z-index:9;border:1px solid rgba(232,198,122,.45);background:rgba(14,19,33,.82);color:var(--ink);border-radius:999px;padding:.35rem .8rem;font-size:.74rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);max-width:calc(100vw - 24px);text-align:left}
#room-live b{color:var(--gold)}#room-live small{color:var(--muted);margin-left:.3rem}
#room-live[hidden]{display:none}
body.cine #room-live,body.focus-quiet #room-live{opacity:0;pointer-events:none}
.rh-btns .rh-n.on{border-color:var(--gold);color:var(--gold)}

/* 年越：人形・除夜の鐘・年越しの数字 */
.ht{text-align:center}.ht-cv{width:min(300px,76vw);height:auto;border-radius:12px;display:block;margin:.4rem auto;touch-action:none}
.ht-row{gap:.5rem}.ht-name{flex:1;min-width:0;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);padding:.5rem .6rem;font-size:16px}
#joya{position:fixed;left:50%;transform:translateX(-50%);top:max(12px,env(safe-area-inset-top));z-index:11;padding:.35rem .9rem;border-radius:999px;background:rgba(14,19,33,.8);border:1px solid rgba(232,198,122,.45);color:var(--ink);font-size:.78rem;white-space:nowrap}
#joya b{color:var(--gold);font-size:1rem}#joya small{color:var(--muted);margin-left:.3rem}
#joya-cd{position:fixed;inset:0;z-index:36;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#fff8e6;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;text-shadow:0 4px 30px rgba(255,200,120,.6)}
#joya-cd[hidden]{display:none}
#joya-cd.tick{font-size:min(30vw,220px);animation:cd 1s ease-out}@keyframes cd{from{transform:scale(1.4);opacity:0}30%{opacity:1}to{transform:scale(.9);opacity:.2}}
#joya-cd.new{font-size:min(9vw,64px);line-height:1.3;text-align:center;animation:ny 1.6s ease-out}#joya-cd.new small{font-size:.5em;letter-spacing:.3em;color:var(--gold)}
@keyframes ny{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* お手伝いのミニゲーム：画面に収める・指でなぞっても画面が動かない */
.mg .sheet{max-width:min(440px,calc(100vw - 16px));overflow:hidden;overscroll-behavior:contain;touch-action:none}
.mg-stage{position:relative;width:min(400px,calc(100vw - 48px),calc(100dvh - 260px));aspect-ratio:1;margin:.4rem auto}
.mg-stage canvas{width:100%;height:100%;display:block;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.mg-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mg-pop{position:absolute;transform:translate(-10%,-50%);font-weight:700;color:#fff8e6;text-shadow:0 2px 8px rgba(0,0,0,.6);font-size:.95rem;animation:mgpop 1.1s ease-out forwards;white-space:nowrap}
.mg-pop.big{font-size:1.4rem;color:#f3d999}.mg-pop.soft{font-size:.8rem;opacity:.85}
@keyframes mgpop{from{opacity:0;transform:translate(-10%,-30%) scale(.8)}20%{opacity:1;transform:translate(-10%,-60%) scale(1.05)}to{opacity:0;transform:translate(-10%,-140%)}}
.mg-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin:.3rem 0}.mg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8c67a,#f3d999);transition:width .3s}
body:has(.mg:not([hidden])){overscroll-behavior:none}
/* スティック */
#joy{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:calc(150px + env(safe-area-inset-bottom));z-index:10;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle,rgba(14,19,33,.35),rgba(14,19,33,.55));border:1px solid rgba(232,198,122,.35);touch-action:none;display:flex;align-items:center;justify-content:center}
#joy i{width:46px;height:46px;border-radius:50%;background:rgba(243,217,153,.85);box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .08s}
#joy.on{border-color:var(--gold)}#joy.on i{transition:none}
body.cine #joy,body.focus-quiet #joy,body.touring #joy{opacity:0;pointer-events:none}
@media (pointer:coarse){#chat-btn{left:auto;right:12px}#chat-tick{left:auto;right:66px}}

/* 見渡しから自分の場所へ戻る */
#cam-home{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(136px + env(safe-area-inset-bottom));z-index:11;border:1px solid rgba(232,198,122,.5);background:rgba(14,19,33,.86);color:var(--ink);border-radius:999px;padding:.45rem 1rem;font-size:.82rem;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.45)}
#cam-home[hidden]{display:none}
body.cine #cam-home{display:none}
.mg,.mg *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* 合同祈祷の帯：スマホでも一行に収める（「参列する」が縦に割れない） */
#gokito .btn{white-space:nowrap;flex:none}
#gokito .gk-t{min-width:0}
@media (max-width:520px){#gokito{top:calc(max(12px,env(safe-area-inset-top)) + 96px);bottom:auto;gap:.5rem;padding:.4rem .5rem .4rem .8rem;max-width:calc(100vw - 24px)}
  #gokito .gk-t{font-size:.8rem}#gokito .btn{padding:.35rem .7rem;font-size:.74rem}
  #room-live{top:calc(max(12px,env(safe-area-inset-top)) + 150px)}}
/* 回すボタン（スマホ） */
#cam-rot{position:fixed;right:12px;bottom:calc(206px + env(safe-area-inset-bottom));z-index:10;display:flex;gap:.4rem}
#cam-rot button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(232,198,122,.4);background:rgba(14,19,33,.72);color:var(--ink);font-size:1.25rem;line-height:1;touch-action:manipulation}
body.cine #cam-rot,body.focus-quiet #cam-rot,body.touring #cam-rot{opacity:0;pointer-events:none}

/* 作業室の中：座っている間は、歩くための道具やボタンを消して景色を広く */
body.in-room #joy,body.in-room #cam-rot,body.in-room #guide,body.in-room #actions,body.in-room #hint,body.in-room #room-live,body.in-room #me-tag,body.in-room #cam-home{display:none!important}
body.in-room .tag .tag-st{display:none}
body.in-room #chat-btn{bottom:calc(24px + env(safe-area-inset-bottom))}
body.in-room #chat-tick{bottom:calc(32px + env(safe-area-inset-bottom))}
#room-hud.mini{width:auto;min-width:0;padding:.4rem .7rem;gap:.2rem;cursor:pointer}
#room-hud.mini .rh-ch,#room-hud.mini .rh-btns,#room-hud.mini .rh-me{display:none}
#room-hud.mini .rh-main svg{width:30px;height:30px}#room-hud.mini .rh-left{font-size:1.1rem}
#room-hud.mini .rh-row:first-child{gap:.6rem}#room-hud.mini .rh-name{font-size:.78rem}
#room-hud.mini::after{content:"▾ ひらく";font-size:.6rem;color:var(--muted);text-align:center}
#room-hud:not(.mini) .rh-row:first-child{cursor:pointer}

/* 写経：なぞり書き */
.sk-paper{height:min(30vh,240px)!important}
.sk-pad{display:flex;gap:.7rem;align-items:center;justify-content:center;margin:.6rem 0 .3rem}
.sk-pad canvas{width:min(260px,58vw);height:auto;aspect-ratio:1;border-radius:8px;box-shadow:inset 0 0 20px rgba(120,90,40,.25),0 4px 14px rgba(0,0,0,.35);touch-action:none;cursor:crosshair}
.sk-padside{display:flex;flex-direction:column;gap:.5rem;max-width:120px}.sk-next{font-size:.8rem;color:var(--gold)}.sk-tip{font-size:.7rem;color:var(--muted);line-height:1.4}
.sk-tip.warn{color:#ffb4a4;animation:skw .4s}@keyframes skw{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* 読みこみの見守り */
#lg-help{margin-top:1rem;text-align:center}
.lg-err{font-size:.8rem;color:#ffd9c8;max-width:80vw;margin:.4rem auto;word-break:break-all}
.lg-btns{display:flex;gap:.6rem;justify-content:center;margin-top:.5rem}
.lg-btns button{border:1px solid rgba(232,198,122,.5);background:rgba(0,0,0,.35);color:#f4ead8;border-radius:999px;padding:.5rem 1rem;font-size:.85rem}

.sk-meter{position:relative;width:18px;height:120px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden;align-self:flex-start}
.sk-meter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#c8321e,#f3d999);transition:height .15s}
.sk-meter.bad i{background:#8a7f70}
.sk-meter span{position:absolute;left:-2px;right:-2px;top:0;border-top:2px dashed var(--gold)}