/* muted 系は本文が乗る — #141414 上で WCAG AA(4.5:1) を割らない下限 (.42/.48 は ~3.5-4:1 で未達だった)。 闇の演出は背景・ボーダー側でやり、文字は読める明るさを守る。 */ :root{--ink:#0d0d0d;--ink2:#141414;--paper:#fffdf6;--red:#e63946;--yellow:#f4c430;--green:#6dcc6d;--muted:rgba(255,253,246,.52);--muted-text:rgba(255,253,246,.58);--muted2:rgba(255,253,246,.7);--border:rgba(255,253,246,.08);--border2:rgba(255,253,246,.12);--code-bg:rgba(255,253,246,.05)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100vh;height:100dvh;overflow:hidden} body{background:var(--ink);color:var(--paper);font-family:'Helvetica Neue',Arial,sans-serif;line-height:1.5;display:grid;grid-template-rows:1fr 30px} a{color:var(--yellow);text-decoration:none} .mono{font-family:'JetBrains Mono','Fira Code',monospace;font-variant-numeric:tabular-nums} /* キーボード操作: フォーカスは焚き火の灯火色のリングで必ず見えるように(マウス時は出さない) */ :focus-visible{outline:2px solid rgba(255,180,80,.85);outline-offset:2px;border-radius:4px} .bgm-btn:focus-visible,.fire-sound-btn:focus-visible{outline:2px solid rgba(255,180,80,.9);outline-offset:2px} /* スクリーンリーダー専用テキスト(視覚には出さずラベルだけ伝える) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* コントラスト高めの環境では薄い文字をくっきりさせる(可読性の下限を引き上げ) */ @media (prefers-contrast: more){:root{--muted:rgba(255,253,246,.6);--muted-text:rgba(255,253,246,.72);--muted2:rgba(255,253,246,.82)}} /* CRT scan-lines */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 3px);mix-blend-mode:overlay} /* === 時間帯ティント — body::after に低alphaグラデ (::before は scanlines、通常合成で夜は暗く) === */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:0;transition:opacity 2s ease} body.tod-dawn::after{opacity:1;background:linear-gradient(180deg,rgba(255,170,110,.05),rgba(255,140,90,.02) 60%,transparent)} body.tod-dusk::after{opacity:1;background:linear-gradient(180deg,rgba(255,110,60,.06),rgba(190,70,90,.03) 60%,transparent)} body.tod-night::after{opacity:1;background:linear-gradient(180deg,rgba(18,28,68,.10),rgba(10,15,40,.05) 60%,transparent)} @keyframes pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.3);opacity:.55}} /* main 2-col grid: BOARD | FIRE */ main{display:grid;grid-template-columns:380px 1fr;gap:1px;background:var(--border);overflow:hidden;min-height:0} .pane{background:var(--ink2);display:flex;flex-direction:column;overflow:hidden;min-height:0} .pane-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-text);background:rgba(0,0,0,.2)} .pane-head .left{color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;overflow:hidden} .pane-head .left .ph-label{text-transform:none;letter-spacing:.02em;font-size:12px;color:var(--muted2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pane-head .right{font-size:9.5px} .pane-body{flex:1 1 auto;overflow-y:auto;padding:16px 18px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--border2) transparent} .pane-body::-webkit-scrollbar{width:6px} .pane-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} /* === FIRE pane (main hearth) === */ .fire-pane .pane-body{display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden} .fire-stage{flex:1 1 auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:0;padding:16px 0 8px} /* layered radial glow */ .fire-stage::before{content:"";position:absolute;width:500px;height:420px;left:50%;top:44%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(230,57,70,.28) 0,rgba(255,107,53,.15) 26%,rgba(255,196,75,.06) 48%,transparent 68%);filter:blur(30px);pointer-events:none;animation:glow-breath 4s ease-in-out infinite;z-index:0} @keyframes glow-breath{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}} /* === Smoke wisps — 5本、横流れ付き === */ .smoke-container{position:absolute;left:50%;top:-4%;transform:translateX(-50%);width:200px;height:300px;pointer-events:none;z-index:0;scale:calc(.85 + .15*var(--smoke-mul,1))} .smoke-wisp{position:absolute;bottom:0;border-radius:50%;opacity:0;animation:smoke-up var(--sd,6s) ease-out infinite} .smoke-wisp:nth-child(1){left:24%;width:52px;height:82px;background:radial-gradient(ellipse,rgba(145,135,125,.18),transparent 70%);--sd:5.2s;--sw:-10px} .smoke-wisp:nth-child(2){left:40%;width:68px;height:108px;background:radial-gradient(ellipse,rgba(125,115,105,.15),transparent 70%);--sd:7.2s;animation-delay:1.9s;--sw:16px} .smoke-wisp:nth-child(3){left:12%;width:44px;height:72px;background:radial-gradient(ellipse,rgba(155,145,135,.16),transparent 70%);--sd:6.5s;animation-delay:3.7s;--sw:-5px} .smoke-wisp:nth-child(4){left:54%;width:60px;height:95px;background:radial-gradient(ellipse,rgba(120,112,103,.14),transparent 70%);--sd:8.8s;animation-delay:.8s;--sw:13px} .smoke-wisp:nth-child(5){left:6%;width:40px;height:65px;background:radial-gradient(ellipse,rgba(140,132,122,.13),transparent 70%);--sd:9.4s;animation-delay:2.6s;--sw:-18px} @keyframes smoke-up{0%{opacity:0;transform:translateY(0) scaleX(1)}8%{opacity:.88}45%{opacity:.44;transform:translateY(-90px) scaleX(2.1) translateX(calc(var(--sw,8px)*.5))}100%{opacity:0;transform:translateY(-215px) scaleX(3.8) translateX(var(--sw,8px))}} /* === Heat shimmer (wobbly hot air above tips) === */ .heat-shimmer{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:230px;height:160px;background:radial-gradient(ellipse at 50% 92%,rgba(255,150,60,.10) 0%,rgba(255,200,100,.05) 30%,rgba(255,180,80,.025) 55%,transparent 78%);filter:url(#heat-haze) blur(1.4px);pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.8;animation:haze-breath 4.7s ease-in-out infinite} @keyframes haze-breath{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.08)}} /* === Canvas flame renderer === */ #flame-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} /* WebGL fire (濱田 drop-in) — primary when available; webgl-on hides the Canvas-era flame & props */ #fire-gl{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2;pointer-events:none} #fire-stage.webgl-on #fire-gl{display:block} #fire-stage.webgl-on #flame-canvas, #fire-stage.webgl-on #spark-canvas, #fire-stage.webgl-on .fire-base, #fire-stage.webgl-on .fire-ground-glow, #fire-stage.webgl-on .heat-shimmer{display:none} /* === 残り火モード — 火勢が落ちると炎が沈み、灰の温もり(地面の glow)だけ残る === */ #fire-stage.lowfire-mode #fire-gl, #fire-stage.lowfire-mode #flame-canvas{filter:brightness(.4) saturate(.7)} #fire-stage.lowfire-mode .fire-ground-glow{width:260px;animation-duration:6s} #fire-stage.webgl-on.lowfire-mode .fire-ground-glow{display:block} .heat-aura{position:absolute;inset:-120px;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:0;background:radial-gradient(ellipse 72% 55% at 50% 60%,rgba(255,75,15,0.13),rgba(255,130,30,0.07) 42%,rgba(255,60,0,0.03) 68%,transparent 85%);transition:opacity .4s ease} .heat-aura.pulsing{animation:heat-pulse 2.4s ease-in-out infinite} @keyframes heat-pulse{0%,100%{transform:scale(1) translateZ(0)}50%{transform:scale(1.07) translateZ(0)}} .flame-host{position:relative;z-index:1;transition:transform .12s ease-out;transform-origin:center 88%} .flame-host.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)} .flame-host.poke-recoil{animation:poke-recoil .6s cubic-bezier(.22,.68,0,1.2)} @keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(-6px) rotate(-2.5deg)}35%{transform:translateX(6px) rotate(2.5deg)}55%{transform:translateX(-4px) rotate(-1.5deg)}75%{transform:translateX(3px) rotate(1deg)}100%{transform:translateX(0)}} @keyframes poke-recoil{0%{transform:scaleY(0.88) scaleX(1.08)}30%{transform:scaleY(1.14) scaleX(0.93)}65%{transform:scaleY(0.97) scaleX(1.02)}100%{transform:scaleY(1) scaleX(1)}} .poke-ripple{position:fixed;border-radius:50%;border:2px solid rgba(255,140,30,0.7);pointer-events:none;z-index:9999;transform:scale(0);opacity:1;animation:poke-ripple-out .55s cubic-bezier(.22,.68,0,1.1) forwards} @keyframes poke-ripple-out{to{transform:scale(3.5);opacity:0}} /* === Logs & ember bed === */ .fire-base{position:relative;z-index:2;width:200px;margin-top:-6px;display:flex;flex-direction:column;align-items:center} .log-stack{position:relative;width:190px;height:32px} .flog{position:absolute;height:13px;border-radius:4px;overflow:hidden} .flog-l{width:130px;left:4px;bottom:6px;background:linear-gradient(180deg,#3e1c0c 0%,#2a1208 50%,#1c0d06 100%);box-shadow:0 2px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,100,0,.08),inset 0 -2px 6px rgba(255,80,0,.18);transform:rotate(-9deg);transform-origin:right center} .flog-r{width:130px;right:4px;bottom:6px;background:linear-gradient(180deg,#3a1a0a 0%,#28110a 50%,#1a0c05 100%);box-shadow:0 2px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,80,0,.06),inset 0 -2px 6px rgba(255,60,0,.14);transform:rotate(9deg);transform-origin:left center} .flog-c{width:105px;left:50%;bottom:14px;transform:translateX(-50%);background:linear-gradient(180deg,#2c1108 0%,#1a0a05 50%,#120804 100%);box-shadow:0 1px 5px rgba(0,0,0,.5),inset 0 -2px 5px rgba(255,90,20,.22)} /* glowing internal cracks — pseudo elements pulsing independently */ .flog::before{content:"";position:absolute;left:6%;right:6%;top:38%;height:1.6px;background:linear-gradient(90deg,transparent 0%,#ff6010 18%,#ffd166 40%,#ff8c2a 60%,#ff5500 78%,transparent 100%);box-shadow:0 0 6px rgba(255,140,40,.85),0 0 2px rgba(255,210,80,.6);opacity:.65;animation:crack-pulse var(--cp,1.8s) ease-in-out infinite alternate} .flog::after{content:"";position:absolute;left:18%;right:14%;top:62%;height:1.2px;background:linear-gradient(90deg,transparent 0%,#ff5000 30%,#ffa040 50%,#ff5500 72%,transparent 100%);box-shadow:0 0 5px rgba(255,100,20,.75);opacity:.5;animation:crack-pulse var(--cp2,2.4s) ease-in-out infinite alternate} .flog-l::before{--cp:1.9s}.flog-l::after{--cp2:2.6s;top:70%} .flog-r::before{--cp:1.55s;top:32%}.flog-r::after{--cp2:2.1s;top:60%} .flog-c::before{--cp:1.3s;top:42%}.flog-c::after{--cp2:1.85s;top:68%} @keyframes crack-pulse{0%{opacity:.25;filter:brightness(.7)}55%{opacity:.78;filter:brightness(1.25)}100%{opacity:.95;filter:brightness(1.45)}} .ember-bed{position:relative;width:164px;height:26px;margin-top:2px;border-radius:2px;background:linear-gradient(180deg,rgba(80,20,0,.5),rgba(30,8,0,.8));overflow:hidden} .coal{position:absolute;border-radius:50%;animation:ember-pulse var(--ep,2s) ease-in-out infinite alternate} .coal:nth-child(1){width:16px;height:9px;left:12%;top:20%;background:radial-gradient(ellipse,#ff5500 0%,#aa2200 60%,transparent 100%);box-shadow:0 0 10px rgba(255,80,0,.75);--ep:1.7s} .coal:nth-child(2){width:11px;height:7px;left:30%;top:30%;background:radial-gradient(ellipse,#ff7000 0%,#cc3300 60%,transparent 100%);box-shadow:0 0 7px rgba(255,110,0,.6);--ep:2.4s;animation-delay:.5s} .coal:nth-child(3){width:20px;height:10px;left:50%;top:10%;background:radial-gradient(ellipse,#ff4000 0%,#990000 55%,transparent 100%);box-shadow:0 0 13px rgba(255,60,0,.85);--ep:1.4s;animation-delay:.9s} .coal:nth-child(4){width:9px;height:6px;left:68%;top:35%;background:radial-gradient(ellipse,#ff6535 0%,#b03010 60%,transparent 100%);box-shadow:0 0 6px rgba(255,100,50,.5);--ep:3s;animation-delay:1.3s} .coal:nth-child(5){width:14px;height:8px;left:80%;top:18%;background:radial-gradient(ellipse,#ff6000 0%,#cc2200 58%,transparent 100%);box-shadow:0 0 9px rgba(255,96,0,.65);--ep:1.9s;animation-delay:.3s} .coal:nth-child(6){width:8px;height:5px;left:5%;top:55%;background:radial-gradient(ellipse,#ff4500 0%,#991500 60%,transparent 100%);box-shadow:0 0 5px rgba(255,69,0,.55);--ep:2.8s;animation-delay:.7s} .coal:nth-child(7){width:12px;height:7px;left:42%;top:58%;background:radial-gradient(ellipse,#ff6800 0%,#cc2800 58%,transparent 100%);box-shadow:0 0 8px rgba(255,104,0,.65);--ep:1.6s;animation-delay:1.1s} .coal:nth-child(8){width:10px;height:6px;left:72%;top:60%;background:radial-gradient(ellipse,#ff5800 0%,#bb2200 60%,transparent 100%);box-shadow:0 0 7px rgba(255,88,0,.6);--ep:2.1s;animation-delay:1.8s} @keyframes ember-pulse{0%{opacity:.6;transform:scale(.95)}100%{opacity:1;transform:scale(1.15);filter:brightness(1.35)}} /* === Ground glow — radial light pool under logs === */ .fire-ground-glow{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:220px;height:28px;background:radial-gradient(ellipse at 50% 0%,rgba(255,90,10,.38) 0%,rgba(255,55,0,.18) 40%,transparent 72%);filter:blur(4px);pointer-events:none;z-index:1;animation:glow-pulse 2.3s ease-in-out infinite alternate;transition:opacity .5s,width .5s} @keyframes glow-pulse{0%{opacity:.65;transform:translateX(-50%) scaleX(1)}100%{opacity:1;transform:translateX(-50%) scaleX(1.12)}} .body-heat-glow{position:fixed;top:0;left:0;right:0;height:45vh;height:45dvh;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,55,10,0.038),transparent 75%);pointer-events:none;z-index:0;opacity:0;mix-blend-mode:screen;transition:opacity .8s ease} /* === Ash layer — grey residue beneath coals === */ .ash-layer{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:180px;height:6px;background:linear-gradient(90deg,transparent,rgba(120,110,100,.25) 20%,rgba(140,130,120,.35) 50%,rgba(120,110,100,.25) 80%,transparent);border-radius:3px;pointer-events:none;z-index:0} /* === Ambient overlay — dynamic background flicker === */ #ambient-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(255,80,20,.06),transparent 65%);pointer-events:none;z-index:0;mix-blend-mode:screen} /* === 空模様: 雨 — 寒色ティント + 雨筋 (fire-stage::after は未使用レイヤー) === */ body.wx-rain #ambient-overlay{background:radial-gradient(ellipse at 50% 80%,rgba(120,150,200,.06),transparent 65%)} .fire-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;background:repeating-linear-gradient(105deg,transparent 0,transparent 9px,rgba(160,190,230,.07) 9px,rgba(160,190,230,.07) 10px);transition:opacity 1.2s ease} body.wx-rain .fire-stage::after{opacity:1;animation:rain-fall .9s linear infinite} /* 強雨 (検証パネル /ツイン の override): 雨筋が速くなる。雨音 gain は crackleLoop 側 */ body.wx-rain.wx-storm .fire-stage::after{animation-duration:.45s} @keyframes rain-fall{0%{background-position:0 0}100%{background-position:-30px 110px}} /* === Hot core — blue-white base at flame root (最高温部) === */ .flame-hotcore{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:22px;height:36px;background:radial-gradient(ellipse at 50% 95%,rgba(210,230,255,.7) 0%,rgba(160,200,255,.38) 30%,transparent 72%);mix-blend-mode:screen;z-index:2;pointer-events:none;animation:core-flicker .55s ease-in-out infinite alternate} @keyframes core-flicker{0%{opacity:.5;height:30px}100%{opacity:.9;height:40px;width:26px}} /* === Spark canvas === */ #spark-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4} /* spark burst overlay (triggered on loud sound) */ .spark-burst{position:absolute;left:50%;bottom:36%;width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px var(--yellow);opacity:0;pointer-events:none;z-index:3} .spark-burst.fire{animation:burst-up 1.4s ease-out forwards} @keyframes burst-up{ 0%{opacity:1;transform:translate(0,0) scale(1)} 80%{opacity:.6} 100%{opacity:0;transform:translate(var(--dx,0),-220px) scale(.3)} } /* access chips */ .access-line{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px} .ac-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;font-size:10.5px;letter-spacing:.02em;border:1px solid var(--border);text-decoration:none} .ac-open{background:rgba(109,204,109,.06);color:#a8d8a8;border-color:rgba(109,204,109,.2)} .ac-gated{background:rgba(230,57,70,.06);color:#f5a6ad;border-color:rgba(230,57,70,.25)} .ac-koe{background:rgba(255,253,246,.04);color:rgba(255,253,246,.78)} .ac-koe:hover{color:var(--paper);border-color:rgba(255,253,246,.3)} /* token bar */ .token-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:14px;border-top:1px solid var(--border)} .token-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,253,246,.03);border:1px solid var(--border);border-radius:3px;padding:4px 8px;font-size:12px;color:rgba(255,253,246,.7);font-family:'JetBrains Mono',monospace;letter-spacing:.01em;text-decoration:none;transition:all .15s;white-space:nowrap} .token-chip:hover{border-color:rgba(232,201,126,.4);background:rgba(255,253,246,.07);color:var(--paper)} .token-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)} .token-chip.cold .dot{background:var(--muted);box-shadow:none} .token-chip[hidden]{display:none} #ash-chip{color:rgba(232,201,126,.85)} /* roadmap mini */ .roadmap-mini{margin-top:14px;padding:10px 12px;background:rgba(109,204,109,.04);border-left:2px solid var(--green);font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.7;color:rgba(255,253,246,.7)} .roadmap-mini .rd-h{color:var(--green);font-weight:700;letter-spacing:.06em;display:block;margin-bottom:4px} /* === BOARD pane === */ /* Pinned: Blank Dev Camp 募集カード */ .pinned-camp{border:1px solid rgba(212,184,150,.35);background:linear-gradient(160deg,rgba(212,184,150,.06),rgba(212,184,150,.02));border-radius:5px;padding:14px 14px 12px;margin:0 0 14px;position:relative} .pinned-camp::before{content:"📌 PINNED";position:absolute;top:-7px;left:12px;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.18em;background:var(--ink2);padding:0 6px;color:rgba(212,184,150,.7)} .pc-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;padding:2px 7px;border-radius:10px;border:1px solid rgba(136,201,122,.5);color:#a8d8a8;margin-bottom:8px} .pc-title{font-family:'EB Garamond','Hiragino Mincho ProN',serif;font-weight:500;font-size:18px;line-height:1.3;margin-bottom:5px;color:var(--paper)} .pc-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-text);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px} .pc-meta span{display:inline-flex;align-items:center;gap:4px} .pc-body{font-size:12.5px;line-height:1.65;color:rgba(255,253,246,.78);margin-bottom:10px} .pc-cta{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;padding:6px 12px;border:1px solid rgba(212,184,150,.4);border-radius:3px;color:rgba(212,184,150,.95);transition:all .15s} .pc-cta:hover{background:rgba(212,184,150,.1);border-color:rgba(212,184,150,.7)} .pinned-camp.is-collapsed{cursor:pointer} .pinned-camp.is-collapsed .pc-meta,.pinned-camp.is-collapsed .pc-body,.pinned-camp.is-collapsed .pc-cta{display:none} .pinned-camp.is-collapsed .pc-title{margin-bottom:0} .pinned-camp.is-collapsed .pc-title::after{content:' — ひらく ↗';font-size:.78em;color:var(--muted2);font-weight:400} .post{position:relative;padding:11px 2px 11px 0;border-bottom:1px solid var(--border)} .post:last-child{border-bottom:none} .post:first-child{padding-top:2px} .post-meta{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted-text);margin-bottom:5px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em} .post-meta .author{color:var(--paper);font-weight:700;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;letter-spacing:0} .post-meta .time{color:var(--muted2);margin-left:auto;font-size:10px;opacity:.9} .post-meta .ai-badge{font-size:10px;opacity:.7} /* 著者の頭文字アバター(薪の小さな焚き火) */ .post-avatar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:50%;font-size:10px;font-weight:700;font-family:'Helvetica Neue',Arial,sans-serif;color:#1a0f08;background:radial-gradient(circle at 50% 30%,#ffd28a,#f0a04b 60%,#c5722a);box-shadow:0 0 8px rgba(240,160,75,.35)} .post-body{font-size:13.5px;line-height:1.66;color:var(--paper);white-space:pre-wrap;padding-left:27px} .post-body a.post-link{color:#f4c430;text-decoration:underline;text-underline-offset:2px;word-break:break-all} .post-body a.post-link:hover{color:#ffd54a} .post-body .post-img{max-width:min(100%,420px);max-height:340px;border-radius:10px;margin-top:6px;display:block;background:rgba(255,255,255,.04)} .post-body a.post-media-link{display:inline-block} .post-body .post-audio{width:min(100%,420px);height:38px;margin-top:8px;display:block} .post-body .post-video{max-width:min(100%,480px);border-radius:10px;margin-top:6px;display:block} .post.post-new{animation:ember-arrive 1s ease-out} .post.post-new::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--green),rgba(109,204,109,0));animation:ember-rail 2.4s ease-out forwards} @keyframes ember-arrive{0%{opacity:0;transform:translateY(-7px);background:rgba(109,204,109,.16)}55%{background:rgba(109,204,109,.07)}100%{opacity:1;transform:none;background:transparent}} @keyframes ember-rail{0%{opacity:.9}100%{opacity:0}} /* 鍵つきの薪(未ログイン): 殺風景にせず「読める日を待つ薪」として上品に */ .post.locked{cursor:pointer;border-radius:6px;padding:10px 12px 10px 14px;margin:2px 0;border-bottom:1px solid transparent;background:linear-gradient(100deg,rgba(212,184,150,.045),rgba(212,184,150,.015));transition:background .18s,transform .18s} .post.locked + .post.locked{margin-top:-2px} .post.locked .lock-rail{position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(240,160,75,.55),rgba(212,184,150,.15))} .post.locked .post-avatar{background:radial-gradient(circle at 50% 30%,rgba(212,184,150,.5),rgba(140,120,95,.35));color:rgba(255,253,246,.85);box-shadow:none} .post.locked:hover,.post.locked:focus-visible{background:linear-gradient(100deg,rgba(212,184,150,.1),rgba(212,184,150,.03));transform:translateX(1px);outline:none} .locked-body{display:flex;align-items:center;gap:7px;padding-left:27px;font-size:12.5px;color:var(--muted2)} .locked-body .lock-badge{font-size:11px;opacity:.85} .locked-body .lock-text{letter-spacing:.01em} .post.locked:hover .lock-text,.post.locked:focus-visible .lock-text{color:rgba(212,184,150,.95);text-decoration:underline;text-underline-offset:2px} /* 末尾のログイン誘導ボタン */ .board-login-cta{display:block;width:100%;margin:14px 0 2px;padding:10px 12px;border:1px dashed rgba(212,184,150,.4);border-radius:7px;background:rgba(212,184,150,.04);color:rgba(212,184,150,.95);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em;cursor:pointer;transition:all .15s} .board-login-cta:hover{background:rgba(212,184,150,.1);border-color:rgba(212,184,150,.7);border-style:solid} .compose{margin:10px 0 6px} .compose-toggle{display:block;width:100%;padding:9px 12px;border:1px dashed rgba(212,184,150,.32);border-radius:7px;background:rgba(212,184,150,.03);color:rgba(212,184,150,.9);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em;cursor:pointer;transition:all .15s} .compose-toggle:hover{background:rgba(212,184,150,.09);border-color:rgba(212,184,150,.6)} .compose-toggle:disabled{opacity:.45;cursor:default} .maki-gate{margin-bottom:8px;padding:9px 12px;border:1px dashed rgba(212,184,150,.32);border-radius:7px;background:rgba(212,184,150,.04);color:rgba(212,184,150,.85);font-size:12px;line-height:1.6} .maki-gate[hidden]{display:none} /* 残り火 CTA — 火が落ちている時だけ JS が style.display で出す ([hidden] 罠回避) */ .lowfire-cta{display:none;width:100%;margin-bottom:8px;padding:9px 12px;border:1px dashed rgba(255,120,40,.45);border-radius:7px;background:rgba(255,90,10,.06);color:#e8a857;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em;cursor:pointer;transition:all .15s} .lowfire-cta:hover{background:rgba(255,90,10,.12);border-color:rgba(255,120,40,.7)} /* デプロイ後の stale タブに出す更新バナー(checkBuild が生成。クリックで reload) */ .update-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;padding:9px 16px;border:1px solid rgba(212,184,150,.45);border-radius:999px;background:rgba(20,14,8,.92);color:rgba(212,184,150,.95);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.03em;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.45);animation:update-banner-in .4s ease-out;backdrop-filter:blur(4px)} .update-banner:hover{background:rgba(40,26,14,.96);border-color:rgba(212,184,150,.8)} .update-banner[hidden]{display:none} @keyframes update-banner-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .compose-form{margin-top:8px;display:flex;flex-direction:column;gap:8px} .compose-form[hidden]{display:none} .compose-text{width:100%;resize:vertical;min-height:60px;padding:10px 12px;border:1px solid rgba(212,184,150,.25);border-radius:7px;background:rgba(10,8,6,.6);color:#f5efe4;font-family:inherit;font-size:13px;line-height:1.6;outline:none} .compose-text:focus{border-color:rgba(212,184,150,.55)} .compose-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .compose-msg{font-size:11px;color:rgba(212,184,150,.72)} .compose-send{padding:7px 16px;border:none;border-radius:7px;background:linear-gradient(180deg,#e8a857,#d4823c);color:#1a1206;font-weight:700;font-size:12px;cursor:pointer;transition:filter .15s} .compose-send:hover{filter:brightness(1.08)} .compose-send:disabled{opacity:.5;cursor:default} /* 🔥 未ログインの初訪問者向け 見えるメールフォーム(摩擦ゼロ・思わず入れたくなる) */ .visitor-gate{margin:0 0 16px;padding:18px 16px 14px;border:1px solid rgba(230,57,70,.35);border-radius:10px;background:linear-gradient(180deg,rgba(244,196,48,.06),rgba(230,57,70,.05));box-shadow:0 0 24px rgba(230,57,70,.07) inset} .visitor-gate[hidden]{display:none} .join-cta[hidden]{display:none} .vg-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px} .vg-title{font-size:19px;font-weight:800;line-height:1.25;color:var(--paper);margin-bottom:6px} .vg-sub{font-size:12.5px;line-height:1.6;color:var(--muted2);margin-bottom:12px} .vg-count{color:var(--yellow);font-weight:700} .vg-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--muted2);margin-bottom:7px} #vg-code-form{margin-top:12px} #vg-code-form[hidden]{display:none} #vg-code{letter-spacing:.3em;font-size:18px;text-align:center} .vg-row{display:flex;gap:8px} .vg-input{flex:1 1 auto;min-width:0;box-sizing:border-box;background:rgba(0,0,0,.3);border:1px solid var(--border2);border-radius:7px;color:var(--paper);font-family:inherit;font-size:14px;padding:11px 12px} .vg-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(230,57,70,.25)} .vg-input:focus-visible{outline:2px solid var(--yellow);outline-offset:1px} .vg-input::placeholder{color:var(--muted)} .vg-btn{flex:0 0 auto;background:var(--red);color:#fffdf6;border:0;border-radius:7px;padding:11px 16px;font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .15s} .vg-btn:hover{background:#d22e3b} .vg-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} .vg-btn:disabled{opacity:.6;cursor:default} .vg-msg{font-size:12.5px;line-height:1.5;margin-top:10px;min-height:0} .vg-msg.ok{color:var(--green)} .vg-msg.err{color:#ff8a8a} .vg-msg:empty{display:none} .vg-foot{font-size:10.5px;color:var(--muted);margin-top:11px;line-height:1.5} .dim{color:var(--muted-text);font-size:12px;padding:6px 0} /* === CONNECT pane === */ .connect-h{font-size:11px;color:var(--muted-text);letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px} .code-block{background:var(--code-bg);border:1px solid var(--border);border-radius:3px;padding:11px 13px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:11.5px;color:var(--paper);margin:0 0 12px;cursor:pointer;position:relative;white-space:pre-wrap;word-break:break-all;line-height:1.55} .code-block .copy-hint{position:absolute;right:8px;top:7px;font-size:9px;color:var(--muted-text);letter-spacing:.08em} .code-block:hover .copy-hint{color:var(--paper)} .tool-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:11.5px} .tool-row:last-of-type{border-bottom:none} .tool-row code{font-family:'JetBrains Mono',monospace;color:#e8c97e;font-size:10.5px} .tool-row .desc{color:var(--muted2);font-size:10.5px} .sec-h{display:flex;align-items:center;justify-content:space-between} .tools-toggle{background:transparent;border:1px solid var(--border);color:var(--muted-text);font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:1px 6px;border-radius:99px;cursor:pointer;letter-spacing:.06em} .tools-toggle:hover{color:var(--paper);border-color:var(--paper)} .tools-toggle[aria-expanded=true]{color:var(--yellow);border-color:rgba(244,196,48,.4)} /* icon-only chips */ .ic-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,253,246,.04);border:1px solid var(--border);text-decoration:none;font-size:14px;line-height:1;transition:all .15s} .ic-chip:hover{background:rgba(255,253,246,.1);border-color:rgba(255,253,246,.3);transform:translateY(-1px)} .mcp-chip{width:auto;border-radius:14px;padding:0 10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--green);border-color:rgba(109,204,109,.3);cursor:pointer;position:relative;gap:6px} .mcp-chip:hover{background:rgba(109,204,109,.08);border-color:rgba(109,204,109,.6)} .mcp-chip .copy-hint{font-size:9px;color:var(--muted);opacity:0;transition:opacity .15s} .mcp-chip:hover .copy-hint{opacity:1} /* koe peer orbit (中央焚き火の上部に統合) */ .koe-orbit{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:rgba(109,204,109,.08);border:1px solid rgba(109,204,109,.25);color:#a8d8a8;font-family:'JetBrains Mono',monospace;font-size:11px;z-index:4;transition:all .2s} .koe-orbit.live{background:rgba(109,204,109,.22);border-color:rgba(109,204,109,.85);color:#bff0bf;box-shadow:0 0 18px rgba(109,204,109,.35)} .koe-orbit .koe-dot{width:7px;height:7px;border-radius:50%;background:rgba(109,204,109,.4)} .koe-orbit.live .koe-dot{background:#6dcc6d;box-shadow:0 0 8px #6dcc6d;animation:pulse 1.4s ease-in-out infinite} .koe-orbit .koe-jump{color:inherit;text-decoration:none;opacity:.6;font-size:10px;padding:0 2px} .koe-orbit .koe-jump:hover{opacity:1} /* fire stage clickable */ .fire-stage[role=button]{cursor:pointer} .fire-stage[role=button]:hover .koe-orbit{box-shadow:0 0 10px rgba(255,253,246,.1)} .fire-stage.mic-live{outline:1px dashed rgba(245,166,173,.4);outline-offset:6px} /* 焚き火の足元の「息する一席」。文字ゼロ — 光と鼓動と音の波紋だけで誘う。 タップでページ内通話に加わり、話すと火が育つ(realismCurrent に声が乗る)。 */ .join-cta{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);z-index:6;width:84px;height:84px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent} /* 明るい炎の基部でも席が必ず読めるよう、背後に淡いダーク・ハロを敷く */ .join-cta::before{content:'';position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(8,6,4,.6),rgba(8,6,4,.28) 52%,transparent 72%);z-index:0;pointer-events:none} .join-cta .jc-seat{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 36%,rgba(190,255,190,.5),rgba(109,204,109,.16) 56%,rgba(109,204,109,0) 73%);box-shadow:0 0 22px rgba(109,204,109,.45),inset 0 0 12px rgba(190,255,190,.3);animation:seat-breathe 3.4s ease-in-out infinite;transition:box-shadow .25s,transform .15s} /* 声=サウンドウェーブ3本(無言の「声」アイコン) */ .join-cta .jc-glyph{display:flex;align-items:flex-end;gap:3px;height:18px} .join-cta .jc-glyph i{width:3px;height:7px;border-radius:2px;background:#eafff0;box-shadow:0 0 6px rgba(190,255,190,.65);animation:jc-wave 1.25s ease-in-out infinite} .join-cta .jc-glyph i:nth-child(2){height:13px;animation-delay:.16s} .join-cta .jc-glyph i:nth-child(3){animation-delay:.32s} /* 音の波紋(声で加わる、の無言の合図) */ .join-cta .jc-rings{position:absolute;inset:0;pointer-events:none;z-index:0} .join-cta .jc-rings i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid rgba(127,224,127,.5);opacity:0;animation:seat-ring 3.4s ease-out infinite} .join-cta .jc-rings i:nth-child(2){animation-delay:1.13s} .join-cta .jc-rings i:nth-child(3){animation-delay:2.26s} /* 人数(最小限の数字。無人では出さない) */ .join-cta .jc-count{position:absolute;top:1px;right:1px;z-index:2;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#0a0806;border:1px solid rgba(127,224,127,.85);color:#eafff0;font:700 10px/18px 'JetBrains Mono',monospace;display:none} .join-cta.has-peers .jc-count,.join-cta.live .jc-count{display:block} .join-cta:hover .jc-seat{transform:scale(1.06);box-shadow:0 0 34px rgba(127,224,127,.7),inset 0 0 14px rgba(190,255,190,.5)} .join-cta:active .jc-seat{transform:scale(.93)} /* 通話中: 灯がともり緑が満ちる。波紋・波形が速く脈打つ */ .join-cta.live .jc-seat{background:radial-gradient(circle at 50% 36%,rgba(200,255,200,.9),rgba(109,204,109,.5) 55%,rgba(109,204,109,.06) 76%);box-shadow:0 0 calc(30px + var(--v,0)*46px) rgba(127,224,127,calc(.65 + var(--v,0)*.35)),inset 0 0 16px rgba(190,255,190,.6);animation:seat-breathe 1.7s ease-in-out infinite} .join-cta.live .jc-rings i{border-color:rgba(127,224,127,.85);animation-duration:1.7s} .join-cta.live .jc-glyph i{animation-duration:.7s;background:#f3fff3} /* 接続中 / マイク不可 */ .join-cta.connecting .jc-glyph i{animation:jc-pulse .9s ease-in-out infinite} .join-cta.err .jc-seat{background:radial-gradient(circle at 50% 36%,rgba(255,180,186,.6),rgba(245,166,173,.18) 56%,transparent 74%);box-shadow:0 0 24px rgba(245,166,173,.6)} @keyframes seat-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes seat-ring{0%{transform:scale(.66);opacity:.7}80%{opacity:0}100%{transform:scale(2.5);opacity:0}} @keyframes jc-wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.3)}} @keyframes jc-pulse{0%,100%{opacity:.4}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.join-cta .jc-seat,.join-cta .jc-rings i,.join-cta .jc-glyph i{animation:none}} .join-hint{position:absolute;left:50%;bottom:calc(6.5% + 90px);transform:translateX(-50%);z-index:7;display:none;white-space:nowrap;max-width:78vw;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:600;color:#eafff0;background:rgba(8,6,4,.58);padding:4px 10px;border-radius:999px;border:1px solid rgba(127,224,127,.3);letter-spacing:.04em;pointer-events:none;animation:jh-pulse 2.4s ease-in-out infinite;transition:opacity 1s var(--cool-ease,cubic-bezier(.55,0,.85,.35))} .join-hint[hidden]{display:none} .join-cta.has-peers .jc-seat{animation-duration:2.2s} .join-hint.visible{display:block} /* 一時ヒントの汎用原則「現れて、読まれて、沈む」: 8秒で主張をやめ(armHintFade)、--cool-ease で1秒かけて沈む */ .join-hint.dim{opacity:0;animation:none} /* 沈んだ後の気配: 声が続いている事実は熾火の明滅(小さな点)として残す — 完全に消すと声がしてること自体が分からなくなる */ .join-ember{position:absolute;left:50%;bottom:calc(6.5% + 96px);transform:translateX(-50%);z-index:7;width:6px;height:6px;border-radius:50%;background:rgba(127,224,127,.75);box-shadow:0 0 8px rgba(127,224,127,.45);pointer-events:none;animation:jh-ember 3.4s ease-in-out infinite} .join-ember[hidden]{display:none} @keyframes jh-pulse{0%,100%{opacity:.75}50%{opacity:1}} @keyframes jh-ember{0%,100%{opacity:.25}50%{opacity:.8}} @media (prefers-reduced-motion:reduce){.join-hint{transition:opacity .2s linear}.join-ember{animation:none;opacity:.5}} .cr-record{background:rgba(200,50,50,.85);color:#fff;border:none;border-radius:5px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .15s;white-space:nowrap;line-height:1.4} .cr-record[hidden]{display:none} .cr-record:hover{background:rgba(220,60,60,1)} .cr-theater-lbl{font-size:10px;font-weight:600;letter-spacing:.03em} @media(max-width:400px){.cr-theater-lbl{display:none}} /* fire strip: icon + sparkline */ .fs-ico{font-size:13px;opacity:.7} .fs-spark{flex:1.2;display:flex;align-items:center;justify-content:center} .fs-spark svg{width:100%;height:28px;max-width:140px} /* intensity-label embed mic-meter */ .intensity-label .mic-meter{margin-left:10px} /* pane-head right: 常時うっすら見え、ホバーで完全表示 */ .pane-head .right{opacity:.85;transition:opacity .25s;font-size:11px;white-space:nowrap;flex:0 0 auto} .pane-head .right a{white-space:nowrap} .pane:hover .pane-head .right,.pane:focus-within .pane-head .right{opacity:1} /* 板ヘッダの情報チップは「気配」: 枠と発光を落とし、触れた時だけ浮かぶ(操作だけ触れる見た目) */ .pane-head .token-chip{background:none;border-color:transparent;padding:4px 2px;color:var(--muted-text)} .pane-head .token-chip:hover{border-color:var(--border);background:rgba(255,253,246,.05)} .pane-head .token-chip .dot{background:var(--muted);box-shadow:none} #ash-chip{cursor:pointer} /* ログアウトは名前チップの中に格納(hover/フォーカス/タップで霞んで現れる)。単独ボタンにしない */ #login-chip .lc-me{cursor:pointer} #login-chip .lc-out{color:var(--muted);font-size:10px;text-decoration:none;opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .2s,max-width .2s,margin .2s} #login-chip:hover .lc-out,#login-chip:focus-within .lc-out,#login-chip.show .lc-out{opacity:.7;max-width:80px;margin-left:5px} #login-chip .lc-out:hover{opacity:1} #koe-board-link{opacity:.8} #koe-board-link:hover{opacity:1} .board-refresh{background:none;border:none;color:rgba(255,210,150,.55);font-size:14px;cursor:pointer;padding:0 0 0 2px;line-height:1;transition:transform .35s,color .15s;display:inline-flex;vertical-align:middle} .board-refresh:hover{color:rgba(255,210,150,.95);transform:rotate(180deg)} .board-search-row{padding:5px 14px 7px;border-bottom:1px solid var(--border,#2a2722)}.board-filter{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border,#2a2722);border-radius:8px;color:#f0ece4;padding:5px 10px;font:inherit;font-size:12px;outline:none;transition:border-color .15s;box-sizing:border-box}.board-filter::placeholder{color:var(--muted,rgba(255,255,255,.35))}.board-filter:focus{border-color:var(--red,#c97a5b)} #koe-board-link{position:relative;padding-left:12px} #koe-board-link::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:livePulse 2.2s ease-in-out infinite} @keyframes livePulse{0%,100%{opacity:.3}55%{opacity:1}} @media(max-width:520px){#koe-board-peers{display:none}} .code-block{font-size:0;color:transparent;transition:all .2s;padding:8px 13px;min-height:34px} .code-block::before{content:attr(data-icon);font-size:14px;color:var(--muted);letter-spacing:0;font-family:'JetBrains Mono',monospace} .code-block:hover,.code-block:focus{font-size:11.5px;color:var(--paper);padding:11px 13px} .code-block:hover::before,.code-block:focus::before{display:none} .code-block .copy-hint{opacity:0} .code-block:hover .copy-hint{opacity:1} .tool-row code{transition:opacity .2s;opacity:.55} .tool-row:hover code{opacity:1} .connect-h{display:none} /* board posts: 既定は控えめ(でも読める)、hover で本文がくっきり浮き上がる。 以前の opacity:.3〜.4 は「壊れて見える」殺風景さの主因だったので、読める下限まで引き上げ。 */ .post{opacity:.82;transition:opacity .2s} .post:hover{opacity:1} .post-meta{opacity:.72;transition:opacity .2s} .post:hover .post-meta{opacity:1} .post-body{font-size:13px;line-height:1.6;opacity:.6;transition:opacity .2s,color .2s} .post:hover .post-body{opacity:1} /* 鍵つき薪は常にはっきり見せる(待っている薪が並ぶ景色) */ .post.locked,.post.locked .post-meta,.post.locked .post-body{opacity:1} /* 「文字かくして」徹底 */ .pinned-card{opacity:.4;transition:opacity .25s} .pinned-card:hover{opacity:1} /* タッチ環境(hover が無い世界): 「触れて浮かぶ」を待たせない — 薪は常時読める・操作は最初から見える。 沈む文法は chrome-idle(無操作沈下)が担うので、hover 由来の減光はここで解く */ @media (hover:none){ .post,.post-meta,.post-body,.pinned-card{opacity:1} .post-cmt-item .cmt-del{opacity:.6} .takibi-theater .tt-bar.autohide{opacity:1} .tool-row code{opacity:1} } footer{opacity:0;transition:opacity .3s} footer:hover{opacity:1} .sec-divider{border:none;border-top:1px solid var(--border);margin:14px 0} .sec-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-family:'JetBrains Mono',monospace;margin:0 0 8px;font-weight:700} .member-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;border-bottom:1px solid var(--border)} .member-row:last-child{border-bottom:none} .member-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-text);min-width:24px} .member-name{color:var(--paper);flex:1} .member-status{font-size:9.5px;color:var(--green);font-family:'JetBrains Mono',monospace;letter-spacing:.06em} .member-status.invited{color:var(--muted-text)} /* === FOOTER ticker === */ footer{display:flex;align-items:center;padding:0 18px;border-top:1px solid var(--border);background:transparent;font-size:10.5px;color:var(--muted-text);gap:18px;overflow:hidden;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;position:relative;z-index:5} footer .status-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)} footer .live-tag{display:inline-flex;align-items:center;gap:5px} footer .takibi-listen{background:none;border:1px solid var(--border);color:var(--muted-text);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;padding:3px 10px;border-radius:99px;cursor:pointer;white-space:nowrap} footer .takibi-listen:hover{color:var(--paper);border-color:var(--red)} footer .takibi-listen.on{color:var(--red);border-color:var(--red);text-shadow:0 0 8px var(--red)} /* 🔴 通話に入る: ページ内で getUserMedia + WebRTC メッシュ。別窓に飛ばさず焚き火の中で話す。 待機(idle)/接続中(connecting)/通話中(live)/ミュート(muted)/エラー(err) の状態色 */ footer .takibi-call{color:var(--muted2);border-color:rgba(230,57,70,.5)} footer .takibi-call:hover{color:var(--red);border-color:var(--red);box-shadow:0 0 8px rgba(230,57,70,.3)} footer .takibi-call.connecting{color:var(--muted);border-color:var(--border);opacity:.7;cursor:default} footer .takibi-call.live{color:var(--green);border-color:rgba(109,204,109,.85);box-shadow:0 0 12px rgba(109,204,109,.35);animation:callPulse 1.8s ease-in-out infinite} footer .takibi-call.muted{color:#f5a6ad;border-color:rgba(245,166,173,.7);animation:none} footer .takibi-call.err{color:var(--red);border-color:var(--red)} @keyframes callPulse{0%,100%{box-shadow:0 0 6px rgba(109,204,109,.3)}50%{box-shadow:0 0 14px rgba(109,204,109,.6)}} /* 通話中の人: 焚き火を囲む声の輪。fire-stage 上部に koe-orbit と同じ世界観で重ねる */ .call-ring{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:9px;padding:6px 13px;border-radius:99px;background:rgba(109,204,109,.12);border:1px solid rgba(109,204,109,.5);color:#bff0bf;font-family:'JetBrains Mono',monospace;font-size:11px;z-index:5;box-shadow:0 0 14px rgba(109,204,109,.3);transition:all .2s} .call-ring.on{display:inline-flex} .call-ring .cr-dot{width:7px;height:7px;border-radius:50%;background:#6dcc6d;box-shadow:0 0 8px #6dcc6d;animation:pulse 1.4s ease-in-out infinite} .call-ring .cr-people{display:inline-flex;gap:5px;align-items:center} .call-ring .cr-face{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,196,75,.85);box-shadow:0 0 6px rgba(255,196,75,.55);color:#1a1410;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase;font-family:'JetBrains Mono',monospace} .call-ring .cr-face.me{background:#6dcc6d;box-shadow:0 0 6px #6dcc6d} .call-ring .cr-face.anon{background:rgba(255,196,75,.32);box-shadow:0 0 5px rgba(255,196,75,.28);color:transparent} .call-ring .cr-face{position:relative} .call-ring .cr-face.muted{opacity:.5;filter:grayscale(.45)} .call-ring .cr-face.muted::after{content:'';position:absolute;right:-1px;bottom:-1px;width:6px;height:6px;border-radius:50%;background:#f5a6ad;box-shadow:0 0 0 1.5px rgba(10,7,5,.92)} .call-ring .cr-face{transition:transform .15s ease,box-shadow .25s ease} .call-ring .cr-face.speaking{transform:scale(1.22);box-shadow:0 0 10px rgba(255,214,90,.95),0 0 20px rgba(255,160,50,.55)} .call-ring .cr-label{opacity:.85} .call-ring .cr-mute{cursor:pointer;color:inherit;opacity:.75;font-size:12px;line-height:1;padding:0 1px;background:none;border:none} .call-ring .cr-mute:hover{opacity:1} .call-ring .cr-leave{cursor:pointer;color:#f5a6ad;opacity:.8;font-size:10px;line-height:1;padding:0 1px;background:none;border:none} .call-ring .cr-leave:hover{opacity:1;text-shadow:0 0 6px #f5a6ad} /* 🎬 一緒に観る: call-ring 内の起動ボタン(cr-mute と同じ無地アイコン流儀)。開いてる間は灯火色で点灯。 */ .call-ring .cr-theater{cursor:pointer;color:inherit;opacity:.75;font-size:12px;line-height:1;padding:0 1px;background:none;border:none} .call-ring .cr-theater:hover{opacity:1} .call-ring .cr-theater.on{opacity:1;color:#ffc44b;text-shadow:0 0 8px rgba(255,196,75,.7)} /* 🖥 画面共有ボタン: cr-theater と同スタイル。共有中は水色に点灯 */ .call-ring .cr-screen{cursor:pointer;color:inherit;opacity:.75;font-size:12px;line-height:1;padding:0 1px;background:none;border:none} .call-ring .cr-screen:hover{opacity:1} .call-ring .cr-screen.on{opacity:1;color:#7dd3fc;text-shadow:0 0 8px rgba(125,211,252,.7)} /* ⏺ 録音インジケータ: 別バナーをやめて通話リングに溶かす(目立ちすぎない) */ .call-ring .cr-rec{display:inline-flex;align-items:center;color:rgba(255,138,138,.85);font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1;cursor:pointer} .call-ring .cr-rec[hidden]{display:none} .call-ring .cr-rec.paused{color:rgba(255,253,246,.4)} /* 録音開始バナー(rec-pill): 開始の瞬間だけ5秒の明示告知。以降は煙(狼煙)だけが引き継ぐ(文字ラベル無し・詳細は煙クリックの rec-pop) */ /* now-playing チップ: 鳴っている間だけ見える止め口(左上・rec-pill=中央上と喧嘩しない)。chrome 退場の例外 */ .now-playing{position:fixed;top:12px;left:12px;z-index:72;display:inline-flex;align-items:center;gap:7px;max-width:56vw;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,196,75,.28);background:rgba(13,10,8,.82);color:rgba(255,225,185,.9);font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.3;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.4);animation:np-breathe 3.2s ease-in-out infinite} .now-playing[hidden]{display:none} .now-playing .np-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .now-playing .np-x{opacity:.55;font-size:10px} .now-playing:hover{border-color:rgba(255,196,75,.6);color:#ffe1b0} .now-playing:hover .np-x{opacity:1} @keyframes np-breathe{0%,100%{opacity:.78}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.now-playing{animation:none}} /* 音響同意チップ: 初回だけ「焚き火の音、つけますか？」を控えめに(ブロックしない・タップ=意思) */ .snd-consent{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:131;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);padding:9px 14px;border-radius:999px;border:1px solid rgba(255,170,80,.35);background:rgba(13,10,8,.9);color:rgba(255,225,185,.92);font-size:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 26px rgba(0,0,0,.5)} .snd-consent[hidden]{display:none} .snd-consent button{font:inherit;font-size:11.5px;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,180,80,.55);background:rgba(255,160,60,.16);color:#ffe1b0;cursor:pointer;white-space:nowrap} .snd-consent button:hover{background:rgba(255,160,60,.28)} .snd-consent button.ghost{border-color:rgba(255,170,80,.25);background:none;color:rgba(255,215,160,.7)} .rec-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px;background:rgba(26,10,10,.88);border:1px solid rgba(255,110,110,.5);color:#ffd9d9;font-size:13.5px;font-weight:700;letter-spacing:.05em;line-height:1.4;cursor:pointer;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.45)} .rec-pill[hidden]{display:none} .rec-pill.banner{animation:rec-drop .45s ease} @keyframes rec-drop{from{transform:translateX(-50%) translateY(-60px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}} /* 録音 = 煙(狼煙): 録音中だけ炎の頂から細い煙柱が立ちのぼる(ambient wisps と同じアンカー)。 雨筋(z5)・tod ティントと重なっても破綻しない低 opacity。録音可視性は安全要件 — 退場対象にしない */ #rec-smoke{position:absolute;left:50%;top:-4%;transform:translateX(-50%);width:84px;height:300px;pointer-events:none;z-index:4;opacity:0;transition:opacity 1.4s ease;-webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 58%,transparent 96%);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 58%,transparent 96%)} #rec-smoke[hidden]{display:none} #rec-smoke.on{opacity:1} #rec-smoke.paused{opacity:.5} /* 静的フォールバック柱: prefers-reduced-motion 専用(動く環境ではパフが主役なので非表示) */ .rs-col{position:absolute;bottom:0;left:50%;width:16px;height:100%;margin-left:-8px;border-radius:8px;background:linear-gradient(to top,rgba(208,200,190,.28),rgba(208,200,190,.04));filter:blur(7px);display:none} .rs-col[hidden]{display:none} /* 録音の煙=パーティクルパフ: 小さなぼかし円を炎の頂点から周期spawn(JS rsArmPuff)。 上昇しながら多段 translateX で揺れ・拡大・opacity減衰して消える。 根元は炎の照り返し(暖色を僅かに帯びる)→上で冷えてグレー→透明(keyframes が background-color を冷やす) */ .rs-puff{position:absolute;bottom:4px;left:50%;border-radius:50%;filter:blur(8px);opacity:0;pointer-events:none;animation:rs-puff var(--pd,5.6s) ease-out forwards;will-change:transform,opacity} .rs-puff[hidden]{display:none} @keyframes rs-puff{0%{opacity:0;background-color:rgba(255,158,92,.42);transform:translate(var(--px,0px),0) scale(.4)}12%{opacity:calc(var(--po,.5)*var(--pboost,1));background-color:rgba(232,184,148,.36)}32%{background-color:rgba(206,193,181,.3);transform:translate(calc(var(--px,0px) + var(--sx,8px)),-88px) scale(.95)}62%{background-color:rgba(178,172,166,.22);transform:translate(calc(var(--px,0px) - var(--sx,8px)*.7),-170px) scale(1.45)}100%{opacity:0;background-color:rgba(164,160,156,.15);transform:translate(calc(var(--px,0px) + var(--sx,8px)*.4),-258px) scale(1.95)}} /* ⏸ 一時停止: spawn間隔3倍(JS側)で途切れ途切れ+全体を薄く。reduced-motion の静的柱は破線マスク */ #rec-smoke.paused .rs-col{-webkit-mask-image:repeating-linear-gradient(to top,#000 0 20px,transparent 20px 38px);mask-image:repeating-linear-gradient(to top,#000 0 20px,transparent 20px 38px)} /* 煙の根元ラベル: ⏺ 議事録 mm:ss。クリックで録音コントロール。::after でタップ領域 44px+(煙の下部も含む) */ /* 煙がボタンになる: 旧ラベル座標に置く透明ヒット(44px+)。視覚は煙柱のみ・mm:ss は煙クリックの rec-pop 内 */ #rec-smoke-hit{position:absolute;left:50%;top:calc(-4% + 306px);transform:translateX(-50%);z-index:6;width:84px;height:48px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent} #rec-smoke-hit[hidden]{display:none} #rec-smoke-hit::after{content:"";position:absolute;inset:-14px;border-radius:12px} /* 押せる気配: hover/focus で薄い輪郭(文字ラベル廃止後、煙が押せることを伝える唯一の信号) */ #rec-smoke-hit:hover::after,#rec-smoke-hit:focus-visible::after{box-shadow:0 0 0 1px rgba(255,120,120,.25)} /* tod-day 保険: 昼テーマでは煙が唯一の録音サイン — パフ/柱を少し濃く(実機コントラスト未検証のための保険値) */ body.tod-day #rec-smoke{--pboost:1.5} body.tod-day .rs-col{background:linear-gradient(to top,rgba(208,200,190,.42),rgba(208,200,190,.07))} @media (prefers-reduced-motion:reduce){.rs-col{display:block}.rs-puff{display:none}#rec-smoke{transition:none}} /* 録音コントロールポップ: 煙ラベル/RECインジケータをクリックで開く(⏺⏸▶⏹ — 通話参加者なら誰でも操作できる) */ .rec-pop{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:4px;min-width:230px;padding:10px;border-radius:12px;background:rgba(14,11,9,.94);border:1px solid rgba(255,110,110,.3);box-shadow:0 14px 44px rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .rec-pop[hidden]{display:none} .rec-pop-head{font-size:11px;color:rgba(255,253,246,.55);padding:2px 4px 6px;letter-spacing:.04em} .rec-pop-btn{background:rgba(255,253,246,.06);border:1px solid rgba(255,253,246,.14);color:#fffdf6;border-radius:8px;padding:8px 12px;font-size:12.5px;text-align:left;cursor:pointer;transition:background .15s} .rec-pop-btn:hover{background:rgba(255,253,246,.13)} /* デバイス/機能メニュー: リング直下に浮かべる */ .cr-mic-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;padding:6px;border-radius:10px;background:rgba(12,9,6,.95);border:1px solid rgba(109,204,109,.4);box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:30} .cr-mic-menu[hidden]{display:none} .cr-mic-item{text-align:left;background:none;border:none;color:#dff3df;font-size:12px;padding:7px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:306px} .cr-mic-item:hover{background:rgba(109,204,109,.14)} .cr-mic-item.cur{color:#8fe28f;font-weight:700} .cr-mic-empty{color:rgba(255,253,246,.45);font-size:11px;padding:6px 9px} .cr-mic-head{color:rgba(255,253,246,.4);font-size:10px;font-weight:700;letter-spacing:.06em;padding:7px 9px 2px} .cr-mic-head+.cr-mic-head{margin-top:2px} /* ⋯ メニュー: リングのボタンを畳んだ先。1タップで全部に届く */ .call-ring .cr-more{cursor:pointer;color:inherit;opacity:.8;font-size:14px;font-weight:700;line-height:1;padding:0 3px;background:none;border:none} .call-ring .cr-more:hover{opacity:1} /* 🪵 火移し(ゲスト招待): 薪を選んで渡すポップ。rec-pop の流儀を継ぎ、時間ドロップダウンは存在しない */ .invite-pop{min-width:262px} .invite-pop[hidden]{display:none} .iv-msg{width:100%;box-sizing:border-box;background:rgba(0,0,0,.45);border:1px solid rgba(255,253,246,.16);border-radius:8px;color:#fffdf6;font-size:12.5px;padding:8px 10px;margin:2px 0 4px;font-family:inherit} .iv-msg:focus{outline:none;border-color:rgba(244,196,48,.5)} .iv-bar{display:inline-block;height:5px;border-radius:3px;background:linear-gradient(90deg,#8a6242,#5a3d26);vertical-align:middle;margin-right:8px} .iv-url{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#ffe9c4;word-break:break-all;background:rgba(0,0,0,.4);border-radius:6px;padding:6px 8px;margin:4px 0;user-select:all;-webkit-user-select:all} /* 🪵 自分の薪 HUD(火移しゲスト専用): 燃え残り=残り時間。数字は出さない */ .guest-hud{position:fixed;right:14px;bottom:64px;z-index:65;width:46px;pointer-events:none} .guest-hud[hidden]{display:none} .gh-log{position:relative;height:64px;display:flex;align-items:flex-end;justify-content:center} .gh-burn{width:10px;border-radius:5px;background:linear-gradient(180deg,#a8744a,#5a3d26);height:100%;transition:height 1s linear} .gh-flame{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:15px;height:21px;border-radius:50% 50% 48% 52%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 80%,#ffe9a8 0%,#ffb347 45%,rgba(232,99,42,0) 100%);animation:gh-sway 1.6s ease-in-out infinite alternate;transform-origin:50% 100%;transition:bottom 1s linear} @keyframes gh-sway{from{transform:translateX(-50%) rotate(-4deg) scaleY(.95)}to{transform:translateX(-50%) rotate(4deg) scaleY(1.06)}} @media (prefers-reduced-motion:reduce){.gh-flame{animation:none}} .guest-hud.low .gh-burn{background:linear-gradient(180deg,#b3502b,#4a2516)} .guest-hud.low .gh-flame{opacity:.65;height:14px} .guest-hud.ember .gh-burn{background:linear-gradient(180deg,#e8632a,#7a3014);box-shadow:0 0 10px rgba(232,99,42,.5)} .guest-hud.ember .gh-flame{opacity:.35;height:9px} /* 送り火: 薪が燃え尽きた瞬間のお別れオーバーレイ(裸の401は絶対に見せない) */ .sendoff-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(5,3,2,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .sendoff-ov[hidden]{display:none} .so-card{max-width:380px;text-align:center;padding:36px 28px} .so-smoke{width:2px;height:78px;margin:0 auto 18px;background:linear-gradient(180deg,rgba(210,205,200,0),rgba(210,205,200,.5));animation:so-rise 3.2s ease-out infinite} @keyframes so-rise{0%{opacity:0;transform:translateY(12px) scaleY(.6)}30%{opacity:.85}100%{opacity:0;transform:translateY(-26px) scaleY(1.18)}} @media (prefers-reduced-motion:reduce){.so-smoke{animation:none;opacity:.5}} .so-title{font-size:20px;font-weight:800;color:#fffdf6;margin:0 0 8px} .so-sub{font-size:14px;color:rgba(255,253,246,.72);margin:0 0 22px;line-height:1.7} .so-actions{display:flex;flex-direction:column;gap:10px} .so-btn{display:block;background:#e63946;color:#fffdf6;border:0;border-radius:8px;padding:12px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer} .so-btn:hover{background:#d22e3b} .so-btn.ghost{background:rgba(255,253,246,.08);border:1px solid rgba(255,253,246,.2)} .so-btn.ghost:hover{background:rgba(255,253,246,.14)} .cr-mic-volrow{padding:2px 9px 6px} .cr-mic-volrow input{width:100%;accent-color:#6dcc6d;margin:0} .cr-mic-selrow{padding:2px 9px 8px} .cr-mic-selrow[hidden]{display:none} .cr-mic-select{width:100%;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(109,204,109,.35);border-radius:7px;color:#dff3df;font-size:12px;padding:5px 7px} .cr-mic-select option{background:#0c0906;color:#dff3df} .cr-mic-hint{color:rgba(255,253,246,.35);font-size:10px;line-height:1.5;padding:7px 9px 3px;border-top:1px solid rgba(255,253,246,.08);margin-top:4px} @media(hover:none){.cr-mic-hint{display:none}} /* 同一著者の連投を畳む(トップを一人で埋めない) */ .post-run{margin:0} .post-run-sum{cursor:pointer;font-size:11px;color:var(--muted-text);font-family:'JetBrains Mono',monospace;padding:7px 6px;letter-spacing:.04em;list-style:none} .post-run-sum::-webkit-details-marker{display:none} .post-run-sum:hover{color:var(--paper)} .post-run-sum:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(212,184,150,.5);border-radius:4px} .post-run[open] .post-run-sum{opacity:.7} .ticker{flex:1;overflow:hidden;white-space:nowrap;position:relative;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)} .ticker-content{display:inline-flex;gap:34px;animation:tick 38s linear infinite;will-change:transform} .ticker-content:hover{animation-play-state:paused} @keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .ticker-item{display:inline-flex;gap:6px;align-items:center} .ticker-item .tk-who{color:var(--paper)} footer a{color:var(--muted2)} footer a:hover{color:var(--paper)} footer .atlas-link{flex-shrink:0;white-space:nowrap;letter-spacing:.05em} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .tilt-hint{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);border:1px solid rgba(255,130,30,.35);border-radius:99px;padding:7px 16px;font-size:11px;color:rgba(255,200,120,.85);letter-spacing:.06em;pointer-events:none;z-index:50;opacity:0;transition:opacity .5s;white-space:nowrap} .tilt-hint.show{opacity:1} .intro-hint{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);border:1px solid rgba(255,130,30,.35);border-radius:99px;padding:7px 16px;font-size:11px;color:rgba(255,200,120,.85);letter-spacing:.06em;pointer-events:none;z-index:50;opacity:0;transition:opacity .5s;white-space:nowrap} .intro-hint.show{opacity:1} /* 🔊 焚き火サウンド トグル (炎の強さで音が変わる) */ .fire-sound-btn{position:fixed;top:104px;right:14px;z-index:60;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,130,30,.35);background:rgba(0,0,0,.55);color:rgba(255,200,120,.9);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .18s} .fire-sound-btn:hover{border-color:rgba(255,160,60,.7);background:rgba(0,0,0,.75)} .fire-sound-btn.muted{color:rgba(255,253,246,.4);border-color:rgba(255,255,255,.12)} /* 🔥 音メニュー: 普段は 🔥 ボタン1つだけ。開くと BGM・火の音が下に出る(最小化・ほぼ隠す) */ .audio-menu-btn{position:fixed;top:14px;right:14px;z-index:61;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,130,30,.45);background:rgba(0,0,0,.6);color:rgba(255,200,120,.95);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .18s} .audio-menu-btn:hover{border-color:rgba(255,160,60,.8);background:rgba(0,0,0,.8)} .audio-menu-btn:focus-visible{box-shadow:0 0 0 2px rgba(255,184,84,.7);outline:none} body.audio-open .audio-menu-btn{color:rgba(255,253,246,.55);border-color:rgba(255,255,255,.18)} /* 閉じている間は BGMバー・火の音ボタンをほぼ隠す(視覚的に消えクリック不可) */ body:not(.audio-open) .bgm-bar,body:not(.audio-open) .fire-sound-btn{opacity:0;pointer-events:none;transform:translateY(-6px)} /* 🎵 Shiopixel BGM プレイヤー (音メニュー内・🔥ボタンの真下) */ .bgm-bar{position:fixed;top:58px;right:14px;z-index:60;display:flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 10px;border-radius:99px;border:1px solid rgba(255,130,30,.35);background:rgba(0,0,0,.55);color:rgba(255,200,120,.9);font-size:11px;letter-spacing:.04em;backdrop-filter:blur(4px);max-width:320px;transition:all .18s} .bgm-bar:hover{border-color:rgba(255,160,60,.7);background:rgba(0,0,0,.75)} .bgm-title{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85} .bgm-btn{width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:rgba(255,200,120,.9);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s} .bgm-btn:hover{color:rgba(255,180,80,1)} .bgm-bar.off .bgm-title{opacity:.4} /* 🔊 音量スライダー (細かく調整・50段階)。ボタンは増やさずバー内に統合 */ .bgm-vol{-webkit-appearance:none;appearance:none;width:56px;height:4px;border-radius:2px;background:rgba(255,200,120,.28);cursor:pointer;outline:none;flex:0 0 auto} .bgm-vol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer;box-shadow:0 0 4px rgba(255,160,60,.6)} .bgm-vol::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer} .bgm-vol:focus-visible{box-shadow:0 0 0 2px rgba(255,184,84,.7)} @media (max-width: 900px){.bgm-bar{max-width:240px}.bgm-title{max-width:56px}.bgm-vol{width:42px}} .tilt-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:rgba(255,130,30,.6);pointer-events:none;z-index:5;opacity:0;transition:opacity .3s,left .15s ease-out} .tilt-indicator.show{opacity:1} /* mobile fallback */ @media (max-width: 900px){ html,body{height:auto;overflow-x:hidden;overflow-y:auto} body{grid-template-rows:auto;height:auto;overflow-x:hidden} main{grid-template-columns:1fr;height:auto;overflow:visible} #board-edge{display:none} /* 薪ファースト: 炎は上部の「囲炉裏バナー」(~38vh)に控えめに収め、 その直下から最新の薪(投稿)がスクロール無しで読めるようにする。 炎の演出(WebGL/Canvas/音/傾き)は fire-stage サイズに追従するので無改変。 */ .fire-pane{order:-1;position:relative} .fire-pane>.pane-body{height:38vh;height:38dvh;min-height:230px;max-height:340px;padding:0} .fire-stage{height:100%;min-height:0;padding:0} #board{order:1} .pane{height:auto;max-height:none} .pane-body{overflow:visible} /* スクロール誘導(炎バナー下端) */ .m-scroll-hint{display:flex;bottom:8px} /* footer はモバイルでは hover できないので常時表示 */ footer{opacity:.85;position:relative} } /* スクロール誘導チップ (モバイルのみ表示) */ .m-scroll-hint{display:none;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:8;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,200,120,.7);pointer-events:none;animation:scroll-bob 1.8s ease-in-out infinite} @keyframes scroll-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}} /* desktop: 薪(投稿)を主役に。掲示板を広めの左カラムで常時表示し、 焚き火は右カラムの「囲炉裏」として愛着ある演出をそのまま見せる。 炎の演出(WebGL/Canvas/音/傾き)は fire-stage のサイズに追従するので無改変。 */ @media (min-width: 901px){ main{grid-template-columns:minmax(420px,520px) 1fr} /* 左端ホバートリガーは不要になったので無効化(レイアウトに干渉させない) */ #board-edge{display:none} #board{box-shadow:6px 0 40px rgba(0,0,0,.35)} /* 最新の薪が数件すぐ読めるよう、本文の行間と密度を整える */ #board .pane-body{padding-top:14px} } /* ════════ 🎬 一緒に観る — 焚き火の脇に浮く小窓(Floating)。会話・盤面・炎を覆わない。 ════════ */ .takibi-theater{position:fixed;z-index:120;right:18px;bottom:86px;width:340px;max-width:calc(100vw - 24px);display:none;flex-direction:column;border-radius:13px;overflow:hidden;background:rgba(10,7,5,.74);border:1px solid rgba(255,140,45,.34);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 34px rgba(255,120,30,.16);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);touch-action:none;transform-origin:bottom right} .takibi-theater.open{display:flex;animation:tt-pop .42s cubic-bezier(.2,.9,.25,1.1) both} @keyframes tt-pop{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}} .takibi-theater.dragging{transition:none;box-shadow:0 26px 64px rgba(0,0,0,.72),0 0 40px rgba(255,140,45,.28)} .takibi-theater.min{display:none} /* つかむ帯(ドラッグハンドル) */ .tt-grip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 11px;cursor:grab;user-select:none;-webkit-user-select:none;background:linear-gradient(180deg,rgba(255,130,30,.10),transparent);border-bottom:1px solid rgba(255,255,255,.04)} .tt-grip:active{cursor:grabbing} .tt-grip-dots{flex:0 0 auto;color:rgba(255,200,120,.42);font-size:12px;line-height:1} .tt-host-name{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;color:rgba(255,221,170,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tt-host-name .tt-hn-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#ffb14b;box-shadow:0 0 6px #ffb14b} .tt-grip-act{flex:0 0 auto;display:flex;align-items:center;gap:2px} .tt-icon{width:26px;height:26px;border-radius:7px;border:none;background:transparent;color:rgba(255,200,120,.85);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s} .tt-icon:hover{color:#ffc44b;background:rgba(255,255,255,.06)} .tt-icon.tt-close:hover{color:#f5a6ad;background:rgba(245,166,173,.1)} /* 映像 */ .tt-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden} .tt-stage .tt-video,.tt-stage .tt-yt,.tt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000} .tt-stage .tt-video,.tt-stage .tt-yt{display:none} .takibi-theater.kind-file .tt-video{display:block} .takibi-theater.kind-yt .tt-yt{display:block} .tt-resume{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 45%,rgba(20,10,4,.5),rgba(8,5,3,.88));border:0;cursor:pointer;color:var(--paper);-webkit-tap-highlight-color:transparent} .takibi-theater.resume-needed .tt-resume{display:flex} .tt-resume-glyph{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;color:#1a0f08;background:radial-gradient(circle at 50% 32%,#ffd28a,#f0a04b 60%,#c5722a);box-shadow:0 0 22px rgba(240,160,75,.5);animation:tt-resume-pulse 2.2s ease-in-out infinite} @keyframes tt-resume-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} .tt-resume-text{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:rgba(255,253,246,.8)} .tt-up{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,184,84,.95);width:0;transition:width .2s;z-index:6;box-shadow:0 0 8px rgba(255,160,60,.7)} /* コントロール帯(hover 以外でそっと隠れる) */ .tt-bar{display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(6,4,3,.5);transition:opacity .3s} .takibi-theater:not(:hover) .tt-bar.autohide{opacity:0} .tt-ctl{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:rgba(255,200,120,.92);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,opacity .15s} .tt-mute.is-muted{color:#ffc44b;animation:tt-resume-pulse 2s ease-in-out infinite} .tt-vol{flex:0 0 50px;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,200,120,.26);cursor:pointer;outline:none} .tt-vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer} .tt-vol::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer} .tt-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:7;touch-action:none;background:linear-gradient(135deg,transparent 46%,rgba(255,210,140,.5) 46%,rgba(255,210,140,.5) 60%,transparent 60%,transparent 72%,rgba(255,210,140,.5) 72%,rgba(255,210,140,.5) 86%,transparent 86%)} .tt-ctl:hover{color:rgba(255,184,84,1);background:rgba(255,255,255,.06)} .tt-ctl:focus-visible{outline:2px solid rgba(255,184,84,.85);outline-offset:1px} .tt-seek{flex:1 1 auto;min-width:40px;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,200,120,.26);cursor:pointer;outline:none} .tt-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer;box-shadow:0 0 5px rgba(255,160,60,.65)} .tt-seek::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:rgba(255,184,84,1);cursor:pointer} .tt-time{flex:0 0 auto;font-size:9.5px;color:rgba(255,200,120,.7);min-width:30px;text-align:center;font-family:'JetBrains Mono',monospace} /* ホストの読み込み行(URL貼付 + 端末ファイル選択)。フォロワーには出さない */ .tt-load-row{display:flex;align-items:center;gap:6px;padding:0 9px 8px} .tt-url{flex:1 1 auto;min-width:0;box-sizing:border-box;background:rgba(0,0,0,.34);border:1px solid var(--border2);border-radius:99px;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:11px;padding:6px 11px} .tt-url::placeholder{color:var(--muted)} .tt-url:focus{outline:none;border-color:rgba(255,160,60,.7);box-shadow:0 0 0 2px rgba(255,160,60,.22)} .tt-file-btn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--border2);background:rgba(0,0,0,.34);color:rgba(255,200,120,.9);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s} .tt-file-btn:hover{border-color:rgba(255,160,60,.7);color:#ffc44b} .takibi-theater.follower .tt-load-row{display:none} .takibi-theater.follower .tt-bar{justify-content:flex-start} .takibi-theater.uploading .tt-file-btn{opacity:.5;pointer-events:none} /* 残り火に畳む(最小化): 小さな光る玉 */ .tt-orb{position:fixed;z-index:120;right:18px;bottom:152px;width:50px;height:50px;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,150,50,.5);background:radial-gradient(circle at 50% 35%,rgba(40,18,6,.92),rgba(12,7,4,.95));color:#ffc44b;font-size:18px;box-shadow:0 0 22px rgba(255,130,30,.4),0 8px 24px rgba(0,0,0,.5);animation:tt-orb-breath 2.6s ease-in-out infinite} body.tt-min .tt-orb{display:flex} @keyframes tt-orb-breath{0%,100%{box-shadow:0 0 18px rgba(255,130,30,.35),0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 0 30px rgba(255,150,50,.6),0 8px 24px rgba(0,0,0,.5)}} /* 入室者ネーム(join 玉の真下にクール表示) */ .cr-names{position:absolute;left:50%;bottom:calc(6.5% - 24px);transform:translateX(-50%);z-index:6;display:none;max-width:84%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:rgba(255,221,170,.64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.85)} .cr-names.on{display:block} @media (max-width:900px){ .takibi-theater{right:8px;left:8px;width:auto;bottom:auto;top:calc(8px + env(safe-area-inset-top,0px));max-width:none} .tt-orb{right:10px;bottom:auto;top:10px} } @media (prefers-reduced-motion:reduce){ .takibi-theater.open{animation:none} .tt-resume-glyph,.tt-orb{animation:none} } footer .mixer-toggle.on{border-color:rgba(150,200,255,.5);color:rgba(200,228,255,.92);box-shadow:0 0 10px rgba(150,200,255,.2)} .audio-mixer{position:fixed;left:14px;bottom:54px;z-index:62;display:none;flex-direction:column;gap:9px;padding:12px 13px;border-radius:12px;background:rgba(10,8,6,.85);border:1px solid rgba(150,200,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .audio-mixer.open{display:flex;animation:tt-pop .28s ease both} .audio-mixer .mx-row{display:flex;align-items:center;gap:9px} .audio-mixer .mx-ic{width:18px;text-align:center;font-size:13px;flex:0 0 auto} .audio-mixer .mx-sl{flex:0 0 130px;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(180,220,255,.25);cursor:pointer;outline:none} .audio-mixer .mx-sl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:rgba(190,224,255,1);cursor:pointer;box-shadow:0 0 5px rgba(150,200,255,.6)} .audio-mixer .mx-sl::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:rgba(190,224,255,1);cursor:pointer} @media (max-width:900px){.audio-mixer{left:10px;bottom:50px}.audio-mixer .mx-sl{flex-basis:120px}} /* ═══ 焚き火ドック + ととのえシート + ひたる(集中) + 呼吸・瞑想 ═══ */ .hearth-dock{position:fixed;right:13px;top:50%;transform:translateY(-50%);z-index:64;display:flex;flex-direction:column;gap:9px} .hearth-dock button{min-width:46px;padding:6px 5px 5px;height:auto;border-radius:10px;border:1px solid rgba(255,150,60,.32);background:rgba(12,9,7,.66);color:rgba(255,210,150,.92);font-size:17px;line-height:1;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:all .18s;box-shadow:0 4px 16px rgba(0,0,0,.4)} .hearth-dock button:hover{border-color:rgba(255,180,80,.7);color:#ffd9a8;transform:scale(1.06)} .hearth-dock button:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,184,84,.7)} .hearth-dock .mixer-toggle.on{border-color:rgba(150,200,255,.6);color:rgba(205,230,255,.95);box-shadow:0 0 12px rgba(150,200,255,.3)} .hearth-dock .dock-zen.on{border-color:rgba(255,180,80,.75);color:#ffe1b0;box-shadow:0 0 12px rgba(255,160,60,.4)} .hearth-dock .dock-foresee.on{border-color:rgba(190,150,255,.7);color:rgba(225,205,255,.95);box-shadow:0 0 12px rgba(170,130,255,.35)} .hearth-dock .dock-label{font-size:9px;letter-spacing:.01em;color:rgba(255,210,150,.65);line-height:1;font-family:'JetBrains Mono',monospace} @media (max-width:760px){.hearth-dock{right:10px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));transform:none}.hearth-dock button{min-width:48px;min-height:48px;padding:6px 5px 5px;font-size:15px}} /* ポモドーロ: 勝手に出てくる「一区切り」タイマー。何をやるかは自分用(投稿されない・くべるのは任意) */ .pomo-panel{position:fixed;right:64px;top:50%;transform:translateY(-50%);z-index:130;width:266px;padding:15px 16px 14px;border-radius:13px;border:1px solid rgba(255,170,80,.3);background:rgba(13,10,8,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 60px rgba(0,0,0,.6);opacity:0;pointer-events:none;transform:translateY(-50%) translateX(8px);transition:opacity .6s,transform .6s} .pomo-panel.on{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)} .pomo-x{position:absolute;top:7px;right:9px;background:none;border:none;color:rgba(255,210,150,.5);font-size:15px;cursor:pointer;line-height:1;padding:3px} .pomo-x:hover{color:#ffd9a8} .pomo-title{font-size:14.5px;font-weight:600;color:#ffe1b0;margin:0 14px 4px 0} .pomo-sub{font-size:11.5px;color:rgba(255,220,170,.65);line-height:1.5;margin-bottom:9px} .pomo-intent{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,170,80,.28);background:rgba(255,255,255,.04);color:#f5e8d5;font:inherit;font-size:12.5px;margin-bottom:8px} .pomo-intent::placeholder{color:rgba(255,220,170,.4)} .pomo-hint{font-size:10px;color:rgba(255,220,170,.45);line-height:1.55;margin:-3px 0 8px} .pomo-row{display:flex;gap:6px;margin-bottom:9px} .pomo-min{font:inherit;font-size:11px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,170,80,.28);background:none;color:rgba(255,215,160,.8);cursor:pointer} .pomo-min.on{border-color:rgba(255,180,80,.75);background:rgba(255,170,80,.14);color:#ffe1b0} .pomo-actions{display:flex;flex-direction:column;gap:6px} .pomo-go{font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:9px;border:1px solid rgba(255,180,80,.6);background:rgba(255,160,60,.18);color:#ffe1b0;cursor:pointer;transition:all .15s} .pomo-go:hover{background:rgba(255,160,60,.3)} .pomo-ghost{font:inherit;font-size:11.5px;padding:7px 11px;border-radius:8px;border:1px solid rgba(255,170,80,.2);background:none;color:rgba(255,215,160,.72);cursor:pointer} .pomo-ghost:hover{border-color:rgba(255,180,80,.5);color:#ffe1b0} .pomo-ghost:disabled{opacity:.55;cursor:default} .pomo-chip{position:fixed;right:64px;top:calc(50% - 118px);z-index:130;font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,170,80,.4);background:rgba(12,9,7,.78);color:#ffe1b0;cursor:pointer;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 4px 16px rgba(0,0,0,.4)} .pomo-chip:hover{border-color:rgba(255,180,80,.8)} /* モバイル: ポモは画面を覆わない下部シート(余白圧縮・根拠ヒントは沈める) */ @media (max-width:760px){.pomo-panel{right:0;left:0;width:auto;top:auto;bottom:0;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;padding:13px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(14px)}.pomo-panel.on{transform:translateY(0)}.pomo-hint{display:none}.pomo-sub{margin-bottom:7px}.pomo-chip{right:66px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom))}} /* 初ログイン3ステップ(pomo-panel と同型・一度きり) */ .onboard-panel{position:fixed;right:64px;top:50%;z-index:131;width:266px;padding:15px 16px 14px;border-radius:13px;border:1px solid rgba(255,170,80,.3);background:rgba(13,10,8,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 60px rgba(0,0,0,.6);opacity:0;pointer-events:none;transform:translateY(-50%) translateX(8px);transition:opacity .3s,transform .3s} .onboard-panel.on{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)} .onboard-x{position:absolute;top:7px;right:9px;background:none;border:none;color:rgba(255,210,150,.5);font-size:15px;cursor:pointer;line-height:1;padding:3px} .onboard-x:hover{color:#ffd9a8} .onboard-title{font-size:14.5px;font-weight:600;color:#ffe1b0;margin:0 14px 4px 0} .onboard-sub{font-size:11.5px;color:rgba(255,220,170,.65);line-height:1.5;margin-bottom:9px} .onboard-rows{display:flex;flex-direction:column;gap:6px} .onboard-row{font:inherit;font-size:12px;text-align:left;padding:8px 11px;border-radius:9px;border:1px solid rgba(255,170,80,.28);background:none;color:rgba(255,215,160,.85);cursor:pointer;line-height:1.45;transition:all .15s} .onboard-row:hover{border-color:rgba(255,180,80,.6);background:rgba(255,170,80,.1);color:#ffe1b0} @media (max-width:760px){.onboard-panel{right:10px;left:10px;width:auto;top:auto;bottom:130px;transform:translateY(8px)}.onboard-panel.on{transform:translateY(0)}} /* ととのえシート = #audio-mixer を1枚に集約(音4ch個別 + BGM + 火音 + 空気 + 呼吸) */ .audio-mixer{right:64px;bottom:54px;left:auto;width:250px;padding:15px 16px 16px} .hs-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:rgba(255,210,150,.85);margin:-2px 0 1px} .hs-sec{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,228,255,.45);margin-top:5px} .audio-mixer .hs-row{display:flex;align-items:center;gap:9px} .audio-mixer .hs-row .mx-ic{width:18px;text-align:center;font-size:13px;flex:0 0 auto} .audio-mixer .mx-sl{flex:1 1 auto} .audio-mixer .bgm-bar,.audio-mixer .fire-sound-btn{position:static!important;top:auto!important;right:auto!important;opacity:1!important;pointer-events:auto!important;transform:none!important} .audio-mixer .bgm-bar{display:flex;align-items:center;gap:7px;width:100%} .audio-mixer .fire-sound-btn{width:30px;height:30px;font-size:13px;flex:0 0 auto;backdrop-filter:none} .hs-breath{width:100%;text-align:left;padding:8px 11px;border-radius:9px;border:1px solid rgba(255,180,90,.32);background:rgba(255,170,80,.06);color:rgba(255,215,160,.95);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.02em;cursor:pointer;transition:all .15s} .hs-breath:hover{background:rgba(255,170,80,.13);border-color:rgba(255,180,90,.6)} @media (max-width:760px){.audio-mixer{right:54px;bottom:124px;width:232px}} /* ひたる(集中): 文字をぜんぶ沈めて火だけ */ body.zen main{grid-template-columns:0 1fr} body.zen #board{opacity:0;pointer-events:none;transition:opacity .5s} body.zen #board-edge,body.zen footer,body.zen .audio-mixer{opacity:0;pointer-events:none} body.zen .fire-pane .pane-head{opacity:0} #fire-stage.breathing::before{animation-duration:7.6s} @media (max-width:760px){body.zen #board{display:none}body.zen .fire-pane>.pane-body{height:76vh;height:76dvh;min-height:0;max-height:none}} /* 呼吸・瞑想 overlay */ .breath{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 50%,rgba(10,8,6,.74),rgba(6,4,3,.92))} .breath.open{display:flex;animation:tt-pop .4s ease both} .breath-run{display:none;flex-direction:column;align-items:center} .breath.running .breath-run{display:flex} .breath.running .breath-cfg{display:none} .breath-ring{width:184px;height:184px;border-radius:50%;border:2px solid rgba(255,190,110,.5);box-shadow:0 0 60px rgba(255,150,60,.35),inset 0 0 50px rgba(255,160,70,.25);display:flex;align-items:center;justify-content:center;transform:scale(.62);transition:transform .25s linear} .breath-cue{font-family:'JetBrains Mono',monospace;font-size:15px;letter-spacing:.18em;color:rgba(255,225,185,.95)} .breath-sub{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:rgba(212,184,150,.72)} .breath-cfg{display:flex;flex-direction:column;gap:15px;align-items:center;padding:0 20px} .breath-cfg h3{font-family:'Londrina Solid',cursive;font-weight:400;font-size:25px;color:#ffe1b0;margin:0;letter-spacing:.02em} .bc-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:330px} .bc-chip{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,180,80,.3);background:rgba(255,170,80,.05);color:rgba(255,215,160,.9);font-family:'JetBrains Mono',monospace;font-size:11.5px;cursor:pointer;transition:all .15s} .bc-chip:hover{border-color:rgba(255,180,80,.6)} .bc-chip.on{background:rgba(255,170,80,.18);border-color:rgba(255,190,90,.8);color:#fff0d8} .bc-voice{padding:7px 16px;border-radius:99px;border:1px solid rgba(150,200,255,.3);background:rgba(150,200,255,.06);color:rgba(200,228,255,.9);font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;transition:all .15s} .bc-voice.on{background:rgba(150,200,255,.16);border-color:rgba(150,200,255,.6);color:#cfe6ff} .breath-fb{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:tt-pop .4s ease both} .breath-fb[hidden]{display:none} .bfb-q{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(212,184,150,.8)} .bfb-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .bfb{padding:8px 14px;border-radius:99px;border:1px solid rgba(255,180,80,.32);background:rgba(255,170,80,.06);color:rgba(255,215,160,.92);font-family:'JetBrains Mono',monospace;font-size:11.5px;cursor:pointer;transition:all .15s} .bfb:hover{background:rgba(255,180,80,.16)} .bfb.done{background:rgba(127,224,127,.18);border-color:rgba(127,224,127,.5);color:#bff0bf} .bc-go{margin-top:4px;padding:11px 32px;border-radius:99px;border:1px solid rgba(255,190,90,.6);background:rgba(255,170,70,.14);color:#ffe6c4;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;cursor:pointer;transition:all .15s} .bc-go:hover{background:rgba(255,180,80,.26)} .breath-end{margin-top:28px;padding:7px 22px;border-radius:99px;border:1px solid rgba(212,184,150,.3);background:transparent;color:rgba(212,184,150,.8);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;cursor:pointer} .breath-end:hover{color:#fff;border-color:rgba(212,184,150,.7)} @media (prefers-reduced-motion:reduce){.breath-ring{transition:none}} /* 🌦 デジタルツイン検証パネル (/ツイン): Wave3/Twin+ の演出パラメータを実況 override で検証 */ .twin-panel{position:fixed;right:0;top:72px;z-index:120;width:260px;padding:14px 16px;border-radius:13px 0 0 13px;border:1px solid rgba(150,200,255,.3);border-right:none;background:rgba(10,12,16,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px} .twin-panel[hidden]{display:none} .twin-x{position:absolute;top:7px;right:9px;background:none;border:none;color:rgba(200,228,255,.5);font-size:15px;cursor:pointer;line-height:1;padding:3px} .twin-x:hover{color:#cfe6ff} .twin-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:rgba(200,228,255,.85)} .twin-live{font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:1.5;color:rgba(200,228,255,.5)} .twin-row{display:flex;align-items:center;gap:8px} .twin-lb{flex:0 0 52px;font-size:10.5px;color:rgba(255,253,246,.65)} .twin-sel{flex:1 1 auto;min-width:0;font:inherit;font-size:11px;padding:4px 6px;border-radius:7px;border:1px solid rgba(150,200,255,.3);background:rgba(0,0,0,.5);color:rgba(220,238,255,.9)} .twin-sl{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(180,220,255,.25);cursor:pointer;outline:none} .twin-sl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:rgba(190,224,255,1);cursor:pointer;box-shadow:0 0 5px rgba(150,200,255,.6)} .twin-sl::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:rgba(190,224,255,1);cursor:pointer} .twin-val{flex:0 0 34px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(200,228,255,.7)} .twin-reset{margin-top:2px;width:100%;padding:7px 11px;border-radius:9px;border:1px solid rgba(150,200,255,.32);background:rgba(150,200,255,.06);color:rgba(200,228,255,.92);font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;transition:all .15s} .twin-reset:hover{background:rgba(150,200,255,.14);border-color:rgba(150,200,255,.6)} @media (max-width:760px){.twin-panel{top:auto;bottom:0;left:0;width:auto;border-radius:13px 13px 0 0;border-right:1px solid rgba(150,200,255,.3)}} /* スラッシュコマンドメニュー: コンポーズ欄で "/" を打つと焚き火アクションのパレットが出る */ .cmd-menu{margin:6px 0 0;border:1px solid rgba(212,184,150,.3);border-radius:9px;background:rgba(14,11,8,.97);box-shadow:0 12px 36px rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;max-height:300px;overflow-y:auto} .cmd-menu[hidden]{display:none} .cmd-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-left:2px solid transparent} .cmd-item .ci-ic{width:20px;text-align:center;font-size:14px;flex:0 0 auto} .cmd-item .ci-k{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--yellow);flex:0 0 auto;min-width:70px} .cmd-item .ci-d{font-size:11.5px;color:rgba(255,253,246,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmd-item.sel,.cmd-item:hover{background:rgba(244,196,48,.1);border-left-color:var(--yellow)} .cmd-hint{padding:6px 12px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;color:rgba(255,253,246,.34);border-top:1px solid rgba(212,184,150,.12)} /* ════ 🔥 ボタンレス/レイヤーUI v1「火の番、火明かりを持って」(body.layered スコープ) ════ クラス不在 = 旧2ペイン(クラシック)が無傷で生きる。既存セレクタは一切書き換えない。 z-index 台帳: 壁紙(fire-pane>.pane-body fixed) 0 / 火明かりカーソル 1 / 薪の窓 #board 40(新設) / チップ・音ボタン群 60-65(既存) / rec-pill(開始バナー) 70(既存)・rec-smoke+透明ヒット(#rec-smoke-hit)は fire-stage 内 4-6 / theater・tt-orb・#board-orb・twin 120 / #orb-bloom(熾火の花弁) 121 / pomo 130・onboard 131 / atsm-ov 110・breath 140(既存)。既存固定値は1つも動かさない。 ※ 新しいチップ/常駐UIを追加する者は class="chrome" を付けること(無操作で沈む対象)。 退場例外(classを付けない): rec-smoke+透明ヒット(録音=安全要件)・rec-pill(開始バナー)・call-ring・onboard-panel・pomo-chip・theater・intro-hint・atsm-ov・invite-pop(火移し)・guest-hud(残り時間=安全要件)・sendoff-ov(送り火) ※ #login-chip/#ash-chip は layered では非表示の「データバス」: renderLoginChip/renderAshChip が塗り続け、熾火の花弁(#orb-bloom)がミラーする。DOM を削除すると花弁が空になる。 ※ footer は layered では .lt-text の文字だけ沈めている。footer DOM を物理削除すると /聞く /声 のパレット el.click() 配線が静かに死ぬ — 残置必須。 */ body.layered{--wake-ease:cubic-bezier(.16,1,.3,1);--cool-ease:cubic-bezier(.55,0,.85,.35);--wake-dur:.28s;--cool-dur:1.6s;--ember:rgba(232,201,126,.8)} /* 壁紙化: 炎が最背面いっぱい。演出(WebGL/Canvas/音/傾き)は fire-stage サイズ追従なので無改変。 fixed は .pane-body に掛ける(section に掛けると stacking context で theater/tt-orb 120 が壁紙層に沈む) */ body.layered main{display:block;background:transparent;overflow:visible} body.layered .fire-pane>.pane-body{position:fixed;inset:0;z-index:0;height:100%;min-height:0;max-height:none;background:var(--ink2)} body.layered #board-edge,body.layered .board-resize,body.layered .m-scroll-hint{display:none} body.layered footer{opacity:.85} /* chrome: 出現/退場エンジンの対象(--i = stagger index)。delay は chrome-idle 側にのみ書く(沈むのは遅く・目覚めは一瞬) */ body.layered .chrome{transition:opacity var(--wake-dur) var(--wake-ease),transform var(--wake-dur) var(--wake-ease),filter 1.2s ease} body.layered.pre-cool .chrome{filter:brightness(.55) saturate(.7)} body.layered.chrome-idle .chrome{opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity var(--cool-dur) var(--cool-ease),transform var(--cool-dur) var(--cool-ease),filter 1.2s ease;transition-delay:calc(var(--i,0)*.08s)} /* 光の総量保存: UIが消えた分、光が炎へ還る(JSが heat-aura の opacity を inline で握るので filter で増光) */ body.layered .heat-aura{transition:opacity .4s ease,filter 1.8s ease} body.layered .body-heat-glow{transition:opacity .8s ease,filter 1.8s ease} body.layered.chrome-idle .heat-aura{filter:brightness(1.35)} body.layered.chrome-idle .body-heat-glow{filter:brightness(1.4)} body.layered.aura-flare .heat-aura{filter:brightness(1.5);transition:opacity .4s ease,filter .4s ease} /* 薪の窓: #board をフローティング窓に(質感は .takibi-theater のガラス窓を転用・DOM順不変・aria-hidden不使用) */ body.layered #board{position:fixed;left:18px;top:72px;width:380px;max-height:72vh;max-height:72dvh;z-index:40;border-radius:13px;overflow:hidden;background:rgba(10,7,5,.74);border:1px solid rgba(255,140,45,.34);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 34px rgba(255,120,30,.16);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);container-type:inline-size} /* 板の窓の密度は窓幅に追従(container query)。コンテナは layered の #board のみ = クラシックでは絶対に発火しない */ @container (max-width:340px){ #board .pane-body{padding:12px} #board .post-body{padding-left:0} } body.layered #board .pane-head{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none} body.layered #board .pane-head:active{cursor:grabbing} body.layered #board.dragging{transition:none;box-shadow:0 26px 64px rgba(0,0,0,.72),0 0 40px rgba(255,140,45,.28)} body.layered #board.min{display:none} body.layered #board[hidden]{display:none} body.layered #board.popping{animation:tt-pop .42s cubic-bezier(.2,.9,.25,1.1) both} body.layered #board.ashing{transition:transform .42s cubic-bezier(.2,.9,.25,1.1),opacity .42s ease;transform:scale(.06);opacity:0;pointer-events:none} body.layered .bd-min{background:none;border:none;color:var(--muted2);font-size:13px;line-height:1;cursor:pointer;padding:0 2px} body.layered .bd-min:hover{color:var(--paper)} /* 熾火オーブ(左下): chrome全退場中も opacity .25 で呼吸する画面唯一の点。完全な闇には絶対にしない */ #board-orb{display:none} body.layered #board-orb{position:fixed;z-index:120;left:18px;bottom:74px;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,150,50,.5);background:radial-gradient(circle at 50% 35%,rgba(40,18,6,.92),rgba(12,7,4,.95));color:#ffc44b;font-size:18px;box-shadow:0 0 22px rgba(255,130,30,.4),0 8px 24px rgba(0,0,0,.5);animation:tt-orb-breath 2.6s ease-in-out infinite;opacity:.25;transition:opacity .4s ease,box-shadow .4s ease,filter 1.2s ease} body.layered #board-orb:hover,body.layered #board-orb:focus-visible{opacity:1;box-shadow:0 0 30px rgba(255,150,50,.6),0 8px 24px rgba(0,0,0,.5)} body.layered #board-orb.flare{opacity:1;box-shadow:0 0 44px rgba(255,170,60,.9),0 8px 24px rgba(0,0,0,.5);transition:opacity .2s ease,box-shadow .2s ease,filter 1.2s ease} /* 灰の最小化: 窓上端から舞い上がる灰(使い捨て生成 → animationend で remove) */ .ash-mote{position:fixed;width:3px;height:3px;border-radius:50%;background:var(--ember,rgba(232,201,126,.8));pointer-events:none;z-index:121;animation:ash-rise .9s ease-out forwards} @keyframes ash-rise{from{opacity:1;transform:translateY(0) rotate(0deg)}to{opacity:0;transform:translateY(-46px) rotate(var(--rot,40deg))}} /* 火明かりカーソル: UIより先に暗闇そのものが応える(pointer:fine のみ JS が生成・rAF 1本・常駐 proximity 無し) */ body.layered #fire-cursor{position:fixed;left:-140px;top:-140px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,60,.05),transparent 70%);mix-blend-mode:screen;pointer-events:none;will-change:transform;z-index:1} /* 暗闇からのゲート: 未ログインの薪の窓は退場対象外(visitor-gate 内包)・blur(6px)→0 で結像して以後常駐 */ body.layered.visitor #board{opacity:0;filter:blur(6px);transform:scale(.985);pointer-events:none;transition:opacity 1.8s ease-out,filter 1.8s ease-out,transform 1.8s ease-out} body.layered.visitor.gate-lit #board{opacity:1;filter:none;transform:none;pointer-events:auto} /* zen(◐)= ボタンレスの先の「完全な無」: 上位状態のまま共存し、熾火も沈める */ body.layered.zen #board-orb{opacity:.3} /* ── 火の懐(topbar-zero): pane-head 右チップ群と FIRE LIVE の文字を layered だけで沈める(クラシック無傷) ── */ body.layered #board .pane-head .right > :not(.bd-min){display:none} body.layered .live-tag .lt-text{display:none} /* 冷えた炭: 未ログインの熾火は灰色で呼吸しない(完全消灯はしない — 絶対に消えない一点)。タップで vg-email へ */ body.layered.visitor #board-orb{filter:grayscale(.9) brightness(.55);animation:none} /* 灰の体温: renderAshChip が --orb-heat(0..1) を写す。visitor の grayscale が specificity で勝つ */ body.layered #board-orb{-webkit-touch-callout:none;filter:brightness(calc(1 + var(--orb-heat,0)*.18))} /* 通話の衛星: paintTakibiCta が data-call=1..4 を塗る → 在室人数分の小ドットがオーブを周回(通話中=call-ring が主役なので消灯) */ body.layered #board-orb::before{content:'';position:absolute;inset:-10px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s ease} body.layered #board-orb[data-call]::before{opacity:1;animation:orb-sat 9s linear infinite} body.layered #board-orb[data-call='1']::before{background:radial-gradient(circle 6px at 50% 4px,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px)} body.layered #board-orb[data-call='2']::before{background:radial-gradient(circle 6px at 50% 4px,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at 50% calc(100% - 4px),rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px)} body.layered #board-orb[data-call='3']::before{background:radial-gradient(circle 6px at 50% 4px,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at 13% 76%,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at 87% 76%,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px)} body.layered #board-orb[data-call='4']::before{background:radial-gradient(circle 6px at 50% 4px,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at 4px 50%,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at 50% calc(100% - 4px),rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px),radial-gradient(circle 6px at calc(100% - 4px) 50%,rgba(127,224,127,.95) 2.5px,rgba(127,224,127,.25) 4px,transparent 6px)} @keyframes orb-sat{to{transform:rotate(360deg)}} /* 懐(bloom): オーブから3枚の花弁(残高・名前・通話)が --wake-ease で開き、離れると灰の粒になって沈む */ #orb-bloom{display:none} #orb-bloom[hidden]{display:none} body.layered #orb-bloom{display:block;position:fixed;z-index:121;left:18px;bottom:74px;width:50px;height:50px;pointer-events:none} body.layered #orb-bloom[hidden]{display:none} .orb-petal{position:absolute;left:50%;top:50%;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:999px;background:rgba(22,13,8,.9);border:1px solid rgba(255,160,60,.42);color:#ffd9a8;font-size:12px;line-height:1.3;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translate(calc(-12px + var(--pi,0)*10px),-50%) translateY(-26px) scale(.25);transition:transform .45s var(--cool-ease),opacity .45s var(--cool-ease);transition-delay:calc((2 - var(--pi,0))*.04s)} .orb-petal[hidden]{display:none} .orb-petal:not(.ro):hover,.orb-petal:not(.ro):focus-visible{border-color:rgba(255,180,80,.8);color:#ffe6c0;background:rgba(34,19,10,.94)} /* 表示専用の花弁(灰の残高): 押せる嘘をつかない */ .orb-petal.ro{cursor:pointer;border-color:rgba(255,160,60,.2);color:rgba(255,217,168,.75)} .orb-petal .petal-out{margin-left:8px;font-size:9.5px;letter-spacing:.04em;opacity:.45} .orb-petal:hover .petal-out{opacity:.8} /* 右上がりの階段ファン: 幅広ピル同士が重ならない(回転扇形は --pi 間隔46px+横26pxの段差に変更)。 stagger は近→遠(--pi 0 が最初に灯る=オーブから火が移っていく順)。--ang の微傾きで階段を少しだけ有機的に */ #orb-bloom.open .orb-petal{opacity:1;transform:translate(calc(-12px + var(--pi,0)*26px),-50%) translateY(calc(-70px - var(--pi,0)*46px)) rotate(var(--ang,0deg)) scale(1);transition:transform var(--wake-dur) var(--wake-ease),opacity var(--wake-dur) var(--wake-ease);transition-delay:calc(var(--pi,0)*.06s)} /* 各花弁 hover でほんのり温まる(read-only の薪·灰も — 辞典へ飛べるので無反応にはしない) */ .orb-petal.ro:hover,.orb-petal.ro:focus-visible{border-color:rgba(255,160,60,.38);color:rgba(255,217,168,.95);background:rgba(28,16,9,.92)} /* 灰の自発呼気: 花弁1が単独で浮かび 4s 静止 → --cool-dur(1.6s) かけて灰のように沈む */ #orb-bloom.cooling .orb-petal{transition:transform var(--cool-dur) var(--cool-ease),opacity var(--cool-dur) var(--cool-ease);transition-delay:0s} /* layered × ≤900px: main は子が全部 fixed で潰れて footer が最上部に浮上する(モバイル実査の「上部バー渋滞」の正体)。 viewport を固定し footer を画面最下段に戻す(z-index 39 = 板シート40の下 — シートが開けば footer は火に沈む) */ @media (max-width:900px){ body.layered{height:100vh;height:100dvh;overflow:hidden} body.layered footer{position:fixed;left:0;right:0;bottom:0;z-index:39;padding:8px 12px calc(8px + env(safe-area-inset-bottom))} } /* モバイル(≤760px): デスクトップの縮小ではなく「焚き火のモバイル文法」。 板の窓=下からのシート(つまみ・慣性スクロール・窓ドラッグ/リサイズ文法は無効)。 width/pos 復元は !important で無効化(inline 指定を抑える) */ @media (max-width:760px){ body.layered #board{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:0!important;max-height:62vh;max-height:60dvh;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none} body.layered #board .pane-body{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))} /* つまみ: シートの掴み所(下スワイプで熾火に畳む)。デスクトップの窓ドラッグ/リサイズはタッチでは出さない */ body.layered #board .pane-head{position:relative;padding-top:16px;cursor:default} body.layered #board .pane-head::before{content:"";position:absolute;left:50%;top:6px;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:rgba(255,253,246,.22)} body.layered #bd-resize{display:none} body.layered #fire-cursor{display:none} /* 懐はオーブ上に縦列ファン(長押し450msで開・外側タップ/Escで閉)。閉は一点に畳み、開でラダー展開=上方向への扇 */ body.layered .orb-petal{transform:translate(-12px,-50%) translateY(-58px) scale(.4)} body.layered #orb-bloom.open .orb-petal{transform:translate(-12px,-50%) translateY(calc(-64px - var(--pi,0)*46px)) scale(1)} /* 熾火オーブ+懐: 親指の届く左下のまま、ホームバーだけ避ける */ body.layered #board-orb,body.layered #orb-bloom{bottom:calc(74px + env(safe-area-inset-bottom))} /* タッチターゲット 48px 最低: 気配の扇は実寸、小さいアイコンは ::after で当たり判定だけ拡張(見た目は据え置き) */ .pf-btn{width:48px;height:48px;font-size:18px} .bd-min,.tt-icon,.scr-icon,.pomo-x,.ov-x,.ov-back,.cmt-del{position:relative} .bd-min::after,.tt-icon::after,.scr-icon::after,.pomo-x::after,.ov-x::after,.ov-back::after,.cmt-del::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%)} /* 入力16px未満は iOS が勝手にズームする */ input,textarea,select{font-size:16px!important} /* シートの中は「読む場所」: 本文16px+ */ .post-body{font-size:16px;line-height:1.7} /* 進行中チップ群(再生中/REC/通話リング)はノッチを避ける */ .now-playing{top:calc(10px + env(safe-area-inset-top,0px));max-width:46vw} .rec-pill{top:calc(10px + env(safe-area-inset-top,0px))} .call-ring{top:calc(14px + env(safe-area-inset-top,0px))} /* footer: ticker を畳んで(火の懐) 聞く/通話 をタッチサイズに */ footer{gap:10px;padding-left:10px;padding-right:10px} footer .ticker{display:none} footer .takibi-listen{padding:9px 13px;font-size:12px} } /* reduced-motion: 波紋delay/stagger/予冷filter/灰/カーソル/オーブ呼吸を全停止 → 一律 opacity .2s linear に縮退 */ @media (prefers-reduced-motion:reduce){ body.layered .chrome,body.layered.chrome-idle .chrome{transition:opacity .2s linear;transition-delay:0s;transform:none;filter:none} body.layered.pre-cool .chrome{filter:none} body.layered #board-orb{animation:none} body.layered #board.popping{animation:none} body.layered #board.ashing{transition:opacity .2s linear;transform:none} body.layered.visitor #board{transition:opacity .3s linear;filter:none;transform:none} body.layered.chrome-idle .heat-aura,body.layered.chrome-idle .body-heat-glow,body.layered.aura-flare .heat-aura{filter:none} .ash-mote{display:none} body.layered #fire-cursor{display:none} /* 懐: opacity .2s linear のみ・stagger 無し・衛星は静止ドット */ body.layered .orb-petal,body.layered #orb-bloom.open .orb-petal,body.layered #orb-bloom.cooling .orb-petal{transition:opacity .2s linear;transition-delay:0s} body.layered #board-orb[data-call]::before{animation:none} } /* ════ 🪨 炉縁 (robe-ring): 1人=石1つ。--d=奥行(0奥/1手前)・--fire=火加減(0-1) body.layered スコープ限定。リストではなく情景。 ════ */ .robe-ring{display:none} .robe-ring[hidden]{display:none} body.layered .robe-ring{display:block;position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(480px,76%);height:82px;z-index:3;pointer-events:none} body.layered .robe-ring::before{content:"";position:absolute;bottom:0;left:0;right:0;height:18px;background:radial-gradient(70% 90% at 50% 100%,rgba(120,115,108,.14),transparent 70%);pointer-events:none} .hearth-fuda{display:none} body.layered .hearth-fuda{display:block;position:absolute;left:50%;bottom:calc(6% - 15px);transform:translateX(-50%);font-size:10px;letter-spacing:.08em;color:rgba(255,210,160,.3);pointer-events:none;white-space:nowrap;z-index:3} /* ── 石本体: transform/opacity は --d から一本導出 ── */ .robe-stone{position:absolute;width:22px;height:15px;border-radius:52% 48% 44% 56% / 62% 58% 42% 38%;background:radial-gradient(ellipse at 35% 28%,#6b6560,#3d3936 70%);pointer-events:auto;cursor:default;transform:translateX(-50%) scale(calc(.62 + .38*var(--d,0))) rotate(var(--jit-r,0deg));opacity:calc(.72 + .28*var(--d,0));z-index:var(--zi,1);transition:left .6s cubic-bezier(.34,1.2,.64,1),transform .6s cubic-bezier(.34,1.2,.64,1),opacity .6s,filter .8s} /* 接地影 */ .robe-stone::before{content:"";position:absolute;width:120%;height:7px;left:-10%;bottom:-4px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.52),transparent 65%);transform:scaleY(calc(.5 + .5*var(--d,0)));pointer-events:none} /* 焚き火の照り返し(上面オレンジ)。rb-uzumi だけ上書き */ .robe-stone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(255,150,60,calc(var(--fire,.5)*.68)),transparent 55%);mix-blend-mode:screen;pointer-events:none} /* 石形3種: handleハッシュで決定論的に割当 */ .robe-stone.rb-katachi-1{border-radius:52% 48% 44% 56% / 62% 58% 42% 38%} .robe-stone.rb-katachi-2{border-radius:44% 56% 52% 48% / 55% 45% 60% 40%} .robe-stone.rb-katachi-3{border-radius:48% 52% 46% 54% / 42% 58% 44% 56%} /* 燠: ここにいる */ .robe-stone.rb-moyu{--fire:.85;animation:rb-moyu 3.8s ease-in-out infinite;animation-delay:var(--rb-delay,0s)} @keyframes rb-moyu{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}} /* 灰: 離席（状態名現行維持） */ .robe-stone.rb-ash{--fire:0;opacity:.38;filter:saturate(.3) brightness(.62);animation:none} /* 夜露: 集中 */ .robe-stone.rb-yotsuyu{--fire:.15;background:radial-gradient(ellipse at 35% 28%,#2a3d52,#0d1822 70%);box-shadow:0 0 9px rgba(120,170,235,.32);animation:none} /* 埋み火: おやすみ（状態名現行維持） */ .robe-stone.rb-uzumi{--fire:.25;opacity:.55;filter:brightness(.55)} .robe-stone.rb-uzumi::after{content:"";position:absolute;left:50%;top:52%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 6px rgba(255,90,60,.8);mix-blend-mode:normal;animation:rb-core 3.4s ease-in-out infinite;animation-delay:var(--rb-delay,0s)} @keyframes rb-core{0%,100%{opacity:.35}50%{opacity:1}} /* 湯気: 湯あみ。蒸気は子要素 .rb-ke */ .robe-stone.rb-yuge{--fire:.5} .rb-ke{position:absolute;left:50%;bottom:100%;width:5px;height:22px;margin-left:-2px;border-radius:50%;background:linear-gradient(to top,rgba(235,240,245,.55),transparent 85%);filter:blur(1.5px);animation:rb-steam 3.2s ease-out infinite;animation-delay:var(--rb-delay,0s)} @keyframes rb-steam{0%{opacity:0;transform:translateY(4px) scaleY(.6)}30%{opacity:.85}100%{opacity:0;transform:translateY(-14px) scaleY(1.2)}} /* 自分の石 */ .robe-stone.rb-me{cursor:pointer} .robe-stone.rb-me:hover{filter:brightness(1.28)} .robe-more{position:absolute;font-size:9px;color:rgba(255,210,150,.5);pointer-events:auto;letter-spacing:.05em} /* 名前: 陽炎で立ち上る */ .rb-namae{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);font-size:10px;color:#ffd9a0;text-shadow:0 0 6px rgba(255,140,40,.45);white-space:nowrap;opacity:0;pointer-events:none;font-family:'JetBrains Mono',monospace,sans-serif} .rb-namae.tatsu{animation:kagerou .9s ease-out forwards} @keyframes kagerou{from{opacity:0;transform:translateX(-50%) translateY(6px) skewX(0deg)}30%{opacity:1}55%{transform:translateX(-50%) translateY(-1px) skewX(1.2deg)}to{opacity:1;transform:translateX(-50%) translateY(-3px) skewX(-.8deg)}} /* 気配の扇: 自分の石クリック → 5択 (♨️湯あみ・🔵集中・🌫おやすみ・🔥ただいま・⚪離席) */ .presence-fan{display:none} .presence-fan[hidden]{display:none} body.layered .presence-fan{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:flex;gap:7px;z-index:7;padding:7px 9px;border-radius:99px;background:rgba(12,9,7,.82);border:1px solid rgba(255,150,60,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} body.layered .presence-fan[hidden]{display:none} .pf-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,150,60,.25);background:rgba(20,13,8,.7);color:rgba(255,220,170,.92);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s} .pf-btn:hover{border-color:rgba(255,180,80,.7);transform:scale(1.08)} /* 🎙 風のリング (PTT): 押下中だけ炎の根元に白青 — マイク稼働の常時開示。録音の煙(赤系)と明確に色分け */ .wind-ring{display:none} .wind-ring[hidden]{display:none} body.layered .wind-ring{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:8;pointer-events:none} body.layered .wind-ring[hidden]{display:none} .wr-glow{width:74px;height:20px;border-radius:50%;background:radial-gradient(ellipse,rgba(190,225,255,.5),rgba(140,190,255,.18) 60%,transparent 75%);filter:blur(2px);animation:wr-pulse 1.3s ease-in-out infinite} @keyframes wr-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}} .wr-text{max-width:280px;font-size:12px;color:rgba(205,230,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace} #fire-stage.ptt-live{outline:1px dashed rgba(150,200,255,.45);outline-offset:6px} /* ✨ 火の勘 (spark): 1行だけ「現れて、読まれて、沈む」。8秒で熾火の点に降格(完全消滅でなく降格)。 fire-stage 内 = 炎の演出として chrome-idle 退場の対象外。「いいえ」ボタンは置かない=無視がいいえ */ .spark-line{display:none} .spark-line[hidden]{display:none} body.layered .spark-line{position:absolute;left:50%;bottom:25%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:7;padding:8px 16px;border-radius:99px;background:rgba(12,9,7,.7);border:1px solid rgba(255,196,75,.3);color:rgba(255,230,190,.95);font-size:13px;cursor:pointer;white-space:nowrap;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity .9s var(--cool-ease,ease),transform .9s var(--cool-ease,ease)} body.layered .spark-line[hidden]{display:none} .spark-line.sinking{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none} .spark-line .sl-no{font-size:11px;color:rgba(255,253,246,.45);padding:2px 8px;border:1px solid rgba(255,253,246,.18);border-radius:99px} .spark-line .sl-no:hover{color:rgba(255,253,246,.85)} .spark-dot{display:none} .spark-dot[hidden]{display:none} body.layered .spark-dot{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,170,70,.7);box-shadow:0 0 8px rgba(255,150,50,.6);cursor:pointer;z-index:7;animation:rb-core 3.4s ease-in-out infinite;padding:0} body.layered .spark-dot[hidden]{display:none} @media (prefers-reduced-motion: reduce){ .robe-stone,.robe-stone::before,.robe-stone::after,.rb-ke,.wr-glow,body.layered .spark-dot{animation:none!important} body.layered .spark-line{transition:opacity .2s linear} }