:root{--ff:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;--sw:210px;--bg2:#0b151b;--glow:rgba(79,209,165,.35);--bg:#10222b;--panel:#183341;--tx:#e8f1ef;--mut:#8fa9ad;--up:#4fd1a5;--dn:#ff6b57;--pb:#f5c84b}
*{box-sizing:border-box}button,input,select,textarea{font-family:inherit}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--tx);font:calc(16px*var(--fz,1))/1.5 var(--ff);display:flex;flex-direction:row;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);-webkit-tap-highlight-color:transparent;user-select:none}
header{justify-content:space-between;display:flex;align-items:center;padding:8px 14px;gap:8px;flex-wrap:wrap}
nav{display:flex;gap:4px}#au{display:flex;align-items:center;gap:8px}
nav button,.b{background:var(--panel);color:var(--tx);border:0;border-radius:8px;padding:10px 14px;font:inherit;cursor:pointer}
nav button.on{background:var(--tx);color:var(--bg)}
#tap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;cursor:pointer;padding:12px;min-height:180px}
#t{font:700 clamp(64px,22vw,180px)/1 "Barlow Condensed","Arial Narrow",sans-serif;font-variant-numeric:tabular-nums}
#hint{color:var(--mut);margin-top:8px;text-align:center}
#ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 14px}
#list{max-height:32vh;overflow:auto;padding:0 14px 12px;font-variant-numeric:tabular-nums}
.r{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--panel)}.r span:first-child:not(.av){flex:1}.r span.av{flex:none}
.up{color:var(--up)}.dn{color:var(--dn)}.pb{color:var(--pb)}
select,input{background:var(--panel);color:var(--tx);border:0;border-radius:8px;padding:10px;font:inherit}
input{width:4.5em;text-align:center}

#main{flex:1;display:flex;flex-direction:column;min-height:0}
#left{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.r.cur{background:var(--panel);border-radius:6px;padding-left:8px;padding-right:8px}
.x{background:none;border:0;color:var(--mut);cursor:pointer;font-size:calc(18px*var(--fz,1));padding:0 4px}
#addsp{width:100%;margin-top:10px}
@media(min-width:700px){#main.rta{flex-direction:row}#main.rta #list{width:min(40vw,380px);max-height:none;padding:0 14px 14px;border-left:1px solid var(--panel)}#main.rta .r{font-size:calc(18px*var(--fz,1))}}

#t{text-shadow:0 0 28px var(--glow)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(160deg,var(--bg),var(--bg2))}
#tap{position:relative;isolation:isolate}#tap::before{content:"";position:absolute;left:50%;top:50%;width:min(92%,560px);height:60%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;pointer-events:none;z-index:-1;will-change:opacity}
.b,select,input,nav button{box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}

#ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9}
#ov[hidden]{display:none}
.card{background:var(--bg);color:var(--tx);border-radius:12px;max-height:85vh;overflow:auto;width:min(480px,100%);padding:16px;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
.card h3,.card h4{margin:0 0 8px}.card h4{margin-top:16px}.close{float:right}.note{color:var(--mut);font-size:calc(13px*var(--fz,1))}
.row{display:flex;gap:8px;flex-wrap:wrap}
details{border-bottom:1px solid var(--panel)}
summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:8px 0;list-style:none;font-variant-numeric:tabular-nums}
summary::-webkit-details-marker{display:none}
.x:disabled{opacity:.3}
#ps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.chip{display:inline-flex;align-items:center}

#side{display:flex;flex-direction:column;min-height:0}
#list{flex:1;min-height:0}
#foot{display:none;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 14px 12px}
.rta #foot{display:flex}
#ft,#fd{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
#ft{font-size:clamp(40px,8vw,64px)}#fd{font-size:clamp(22px,4vw,32px)}
#mm{display:flex;gap:6px}#mm .b{padding:6px 10px}
@media(min-width:700px){#main.rta #foot{border-left:1px solid var(--panel)}}

#pre{display:none}
#main.pre #left,#main.pre #side{display:none}
#main.pre #pre{display:block;flex:1;min-width:0;overflow:auto;padding:12px 16px 24px}
#pre h2{margin:12px 0 8px}#pre h4{margin:16px 0 8px}
.cat{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);color:var(--tx);border:0;border-radius:12px;padding:16px;margin-bottom:8px;font:inherit;font-size:calc(18px*var(--fz,1));cursor:pointer;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}
.cat.on{box-shadow:inset 0 0 0 2px var(--tx)}
#gow{position:sticky;bottom:0;padding:12px 0 4px;background:linear-gradient(transparent,var(--bg2) 40%)}
.go{width:100%;font-size:calc(22px*var(--fz,1));padding:16px;background:var(--tx);color:var(--bg)}
#drw{position:fixed;inset:0;z-index:10;display:flex}
#drw[hidden]{display:none}
#dr{width:min(320px,85vw);background:var(--bg);color:var(--tx);padding:calc(16px + env(safe-area-inset-top)) 16px 16px;overflow:auto;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
#drb{flex:1;background:rgba(0,0,0,.5)}
#dr .b{display:block;width:100%;margin-bottom:8px;text-align:left}
#dr .close{width:auto;float:right}
#dr h3,#dr h4{margin:0 0 8px}#dr h4{margin-top:16px}

.av{border-radius:50%;object-fit:cover;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3)}
textarea{background:var(--panel);color:var(--tx);border:0;border-radius:8px;padding:10px;font:inherit;resize:vertical;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}
.mr{display:flex;gap:8px;margin:6px 0;align-items:flex-end}.mr.me{justify-content:flex-end}
.bb{max-width:75%;padding:6px 10px;border-radius:14px;white-space:pre-wrap;word-break:break-word;background:var(--panel)}
.mr.me .bb{background:var(--tx);color:var(--bg)}

.on2{background:var(--tx)!important;color:var(--bg)!important}
.mr .bb .note{font-size:calc(11px*var(--fz,1));text-align:right;margin-top:2px}
.mr.me .bb .note{color:inherit;opacity:.6}

/* DM・グループ・フレンド画面を大きく表示 */
.card.big{width:min(960px,100%);height:min(calc(100vh - 32px),900px);height:min(calc(100dvh - 32px),900px);max-height:none;display:flex;flex-direction:column}
.card.big>*{flex:none}
.card.big .close{align-self:flex-end}
.card.big #dmm{flex:1 1 auto;min-height:0;max-height:none!important}
.card.big .bb{font-size:calc(17px*var(--fz,1))}
@media(max-width:700px){#ov.big{padding:0}.card.big{width:100%;height:100vh;height:100dvh;border-radius:0;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

/* 着せ替え(画面の一番下のボタンから開く) */
#bt{flex:none;text-align:center;padding:2px 0 6px}
#bt .b{background:none;color:var(--mut);padding:6px 14px;font-size:calc(14px*var(--fz,1));box-shadow:none}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tc{border:0;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;box-shadow:0 0 0 1px rgba(128,128,128,.4)}
.tc.on{box-shadow:0 0 0 3px var(--tx)}
.tc .tn{font:700 24px/1.3 "Barlow Condensed","Arial Narrow",sans-serif}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin:4px 5px 0 0}

/* 常時表示の左メニュー */
#app{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#sb{flex:none;width:var(--sw);display:flex;flex-direction:column;gap:4px;padding:10px 8px;border-right:1px solid var(--panel);background:rgba(0,0,0,.12);overflow:auto}
#sb nav{flex-direction:column;gap:4px}#sb hr{width:100%;border:0;border-top:1px solid var(--panel);margin:6px 0}
.sbt{font-weight:700;padding:6px 10px 10px;white-space:nowrap}
.sbi,#sb nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;color:var(--tx);border:0;border-radius:8px;padding:10px;font:inherit;cursor:pointer;box-shadow:none;position:relative}
.sbi i,#sb nav button i{font-style:normal;width:24px;text-align:center;flex:none}
.sbi span,#sb nav button span{flex:1;min-width:0}
.sbi:hover,#sb nav button:hover{background:var(--panel)}
#sb nav button.on{background:var(--tx);color:var(--bg)}
.bdg{background:var(--dn);color:#fff;border-radius:10px;padding:0 6px;font-size:calc(12px*var(--fz,1))}
#ov,#drw{left:var(--sw)}
@media(max-width:700px){:root{--sw:58px}.sbt,.sbi span,#sb nav button span{display:none}.sbi,#sb nav button{justify-content:center;padding:12px 4px}
 .bdg{position:absolute;top:2px;right:2px;font-size:calc(10px*var(--fz,1));padding:0 4px}}
/* 音楽 */
.np{background:var(--panel);border-radius:14px;padding:12px 16px;margin-bottom:10px;text-align:center}
.npt{font-size:clamp(16px,2.4vw,22px);font-weight:700;line-height:1.35;word-break:break-word;overflow-wrap:anywhere;margin-bottom:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.npc{justify-content:center;align-items:center;margin-top:10px}.npc .b{font-size:calc(22px*var(--fz,1));padding:10px 18px}
input[type=range]{width:auto;padding:0;background:none;box-shadow:none;accent-color:var(--tx)}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px}.chips .b{flex:none;white-space:nowrap}
.ps{padding:4px;max-width:6em;font-size:calc(13px*var(--fz,1))}
.card.big #tl{flex:1 1 auto;min-height:260px;overflow:auto}

#hplogo{flex:none;margin-top:auto;padding:10px 0 2px;display:flex;align-items:center;justify-content:center;pointer-events:none}
#hplogo img{display:block;flex:none;width:112px;height:112px;max-width:100%;object-fit:contain;aspect-ratio:1/1}
@media(max-width:700px){#hplogo img{width:40px;height:40px}}
@media(max-height:700px){#hplogo{display:none}}

#t.fin{animation:fin .5s ease-in-out 12 alternate}@keyframes fin{from{opacity:1}to{opacity:.2}}
.chart{display:block;width:100%;max-width:520px;height:auto;margin:4px 0}
input,textarea{user-select:text;-webkit-user-select:text}
.sh{margin:6px 0 10px;font-size:calc(14px*var(--fz,1));padding:6px 12px}

.kb{font-size:calc(14px*var(--fz,1));line-height:2}kbd{display:inline-block;min-width:1.8em;padding:0 6px;margin-right:3px;text-align:center;border-radius:6px;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);font:600 calc(13px*var(--fz,1))/1.7 var(--ff)}

.qt{border-left:2px solid currentColor;opacity:.7;padding-left:6px;margin-bottom:3px;font-size:calc(12px*var(--fz,1));text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rxs{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}.rx{font-size:calc(12px*var(--fz,1));padding:1px 6px;border-radius:10px;background:rgba(128,128,128,.25);cursor:pointer}.rx.on{outline:1px solid currentColor}
.bb.sel{outline:2px solid var(--tx)}#act:not([hidden]){display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.pic{display:block;max-width:100%;max-height:240px;border-radius:8px;margin:2px 0}
#main.ck #side{display:none}
#wx{display:none;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:default}
#main.wx #t,#main.wx #hint,#main.wx #side{display:none}#main.wx #wx{display:flex}#main.wx #tap{cursor:default}
.wxp{color:var(--mut);font-size:calc(15px*var(--fz,1))}
.wxm{display:flex;align-items:center;justify-content:center;gap:10px}
.wxm img{width:clamp(80px,22vw,140px);height:auto;border-radius:50%;background:rgba(128,128,128,.25);filter:drop-shadow(0 0 12px var(--glow))}
.wxt{font:700 clamp(64px,22vw,160px)/1 "Barlow Condensed","Arial Narrow",sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 0 28px var(--glow)}
.wxt small{font-size:.4em;margin-left:4px}
.wxd{font-size:calc(22px*var(--fz,1));font-weight:700}.wxd span{font-size:.65em;font-weight:400;color:var(--mut)}
.wxs{color:var(--mut);font-size:calc(13px*var(--fz,1))}
#wx .b{margin-top:6px}
#wx{width:100%;max-width:100%}#main.wx #tap{overflow-y:auto;justify-content:flex-start}#main.wx #wx{margin:auto 0}
.wxh{color:var(--mut);font-size:calc(13px*var(--fz,1));margin-top:10px}
.wxf{display:flex;gap:6px;max-width:100%;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.wxc{flex:0 0 auto;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 6px;border-radius:12px;background:rgba(128,128,128,.18);font-size:calc(13px*var(--fz,1))}
.wxc img{width:44px;height:44px}.wxu{font-weight:700;font-size:1.15em}.wxk{color:var(--mut);font-size:.85em;min-height:1.2em;white-space:nowrap}

/* VC(通話)バー */
#vcb{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px);background:var(--bg);color:var(--tx);border-radius:16px;padding:8px 12px;box-shadow:0 0 0 1px rgba(128,128,128,.4),0 8px 28px rgba(0,0,0,.55)}
#vcb[hidden]{display:none}
#vcb .vct{line-height:1.25;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vcb .vcp{display:flex;gap:6px}
#vcb .av{transition:box-shadow .12s}
#vcb .av.sp{box-shadow:0 0 0 3px var(--up),0 0 12px var(--up)}
#vca{position:fixed;width:0;height:0;overflow:hidden}
body.vcon #ov,body.vcon #gmw{padding-bottom:calc(var(--vcbh,64px) + env(safe-area-inset-bottom,0px) + 24px)}
body.vcon .card{max-height:calc(100vh - 120px)}
#vcb .vcib{padding:8px 10px;display:inline-flex;align-items:center;justify-content:center}
#vcb .vcib.on{color:var(--up)}
#vcb .vcib.off{color:var(--dn)}
/* VC 映像パネル(カメラ・画面共有) */
#vcv{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--vcbh,64px) + env(safe-area-inset-bottom,0px) + 20px);width:min(94vw,720px);max-height:52vh;max-height:52dvh;z-index:19;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;overflow:auto;background:rgba(0,0,0,.6);border-radius:16px;box-shadow:0 0 0 1px rgba(128,128,128,.4),0 8px 28px rgba(0,0,0,.55);-webkit-overflow-scrolling:touch}
#vcv[hidden]{display:none}
#vcv[data-n="1"]{grid-template-columns:minmax(0,1fr);width:min(94vw,460px)}
#vcv .vt{position:relative;aspect-ratio:4/3;background:#000;border-radius:10px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
#vcv .vt video{display:block;width:100%;height:100%;background:#000}
#vcv .vcn{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.8em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 拡大: 画面いっぱいに1つ、ほかは右上に小さく */
#vcv.big{inset:0;left:0;transform:none;width:auto;max-height:none;bottom:0;padding:0;border-radius:0;display:block;overflow:hidden;background:#000}
#vcv.big .vt{position:absolute;width:96px;height:72px;aspect-ratio:auto;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(8px + var(--i,0)*104px);z-index:2;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
#vcv.big .vt.vcf{inset:0 0 calc(var(--vcbh,64px) + env(safe-area-inset-bottom,0px) + 20px) 0;width:auto;height:auto;z-index:1;border-radius:0;box-shadow:none}
#vcv.big .vt.vcf video{object-fit:contain!important}
#vcv.big .vt:not(.vcf) .vcn{display:none}
body.vcbig{overflow:hidden}
@media(max-width:480px){#vcb{gap:8px;padding:8px}#vcb .vct{max-width:110px}}

.fcard{background:rgba(128,128,128,.16);border-radius:10px;padding:8px 10px;margin:4px 0;max-width:100%;overflow:hidden}.fcard b{word-break:break-all}

/* オフライン表示: 画面の下に小さく出す。タップは邪魔しない */
#offb{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transform:translateX(-50%);max-width:min(92vw,520px);z-index:5;pointer-events:none;background:var(--panel);color:var(--tx);border:1px solid var(--mut);border-radius:999px;padding:6px 14px;font-size:calc(12px*var(--fz,1));line-height:1.4;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#offb[hidden]{display:none}
#kvb{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);transform:translateX(-50%);max-width:min(94vw,560px);z-index:5;pointer-events:none;background:var(--panel);color:var(--tx);border:1px solid var(--mut);border-radius:12px;padding:6px 14px;font-size:calc(12px*var(--fz,1));line-height:1.5;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#kvb[hidden]{display:none}

.npc .b.sm{font-size:calc(20px*var(--fz,1));padding:10px 12px}.edp{border:1px dashed rgba(128,128,128,.55);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.sbi[hidden]{display:none}

/* ===== ボタンなどの細かいアニメーション ===== */
/* 見た目の土台(動きを減らす設定の人にも適用) */
.b,.cat,.tc,.go{position:relative;overflow:hidden}
.sbi{overflow:hidden}
rip-l{position:absolute;display:block;border-radius:50%;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0)}
.tring{position:fixed;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid var(--tx);opacity:.6;pointer-events:none;z-index:4}
.tflash{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0}
/* スイッチ(チェックボックスをスライド式に) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:46px!important;height:28px;padding:0;margin:0;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);position:relative;cursor:pointer;vertical-align:middle}
input[type=checkbox]::before{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--mut)}
input[type=checkbox]:checked{background:var(--up)}
input[type=checkbox]:checked::before{transform:translateX(18px);background:#fff}
input[type=checkbox]:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
input:not([type=checkbox]):not([type=range]):focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 2px var(--tx),0 0 14px var(--glow)}

@media(prefers-reduced-motion:no-preference){
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cardInBig{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes drIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes popIn{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.88)}to{opacity:1;transform:none}}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes tring{to{transform:scale(9);opacity:0}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.05);text-shadow:0 0 56px var(--glow),0 0 18px var(--glow)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{text-shadow:0 0 22px var(--glow)}50%{text-shadow:0 0 46px var(--glow)}}
@keyframes pulseRing{0%{box-shadow:inset 0 0 0 1px rgba(128,128,128,.25),0 0 0 0 var(--glow)}100%{box-shadow:inset 0 0 0 1px rgba(128,128,128,.25),0 0 0 11px transparent}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes tflash{0%{opacity:.9}100%{opacity:0}}

/* 押したときの反応・色の切り替え */
.b,nav button,.cat,.tc,.sbi,.go,.rx,.x{transition:transform .16s cubic-bezier(.3,1.6,.5,1),background-color .3s,color .3s,box-shadow .2s,filter .2s,opacity .2s}
.card,.bb,.np,#sb,select,input,textarea{transition:background-color .3s,color .3s,box-shadow .2s}
.b:active,nav button:active,.cat:active,.tc:active,.sbi:active,.go:active{transform:scale(.94)}
.x:not(:disabled):active{transform:scale(.78)}
.rx:active{transform:scale(.85)}
summary:active{opacity:.65}
@media(hover:hover){
 .b:hover,.go:hover{filter:brightness(1.14)}
 .cat:hover,.tc:hover{transform:translateY(-2px)}
 .sbi:hover,#sb nav button:hover{transform:translateX(3px)}
 .x:not(:disabled):hover{color:var(--tx);transform:scale(1.15)}
 .rx:hover{transform:translateY(-1px) scale(1.08)}
 .b:active,nav button:active,.cat:active,.tc:active,.sbi:active,.go:active{transform:scale(.94)}
}
.sbi i,#sb nav button i{transition:transform .2s cubic-bezier(.3,1.6,.5,1);display:inline-block}
.sbi:hover i,#sb nav button:hover i{transform:scale(1.2) rotate(-6deg)}
.sbi:active i,#sb nav button:active i{transform:scale(.8)}
rip-l{animation:rip .55s ease-out forwards}
.tring{animation:tring .6s ease-out forwards}
.tflash{background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),var(--glow),transparent 65%);animation:tflash .7s ease-out forwards}
#t.bump:not(.fin){animation:bump .24s ease-out}
.running #tap::before{animation:glowb 2.6s ease-in-out infinite}@keyframes glowb{0%,100%{opacity:.3}50%{opacity:.85}}
.playing #mpp{animation:pulseRing 1.6s ease-out infinite}

/* スイッチの動き */
input[type=checkbox]{transition:background-color .25s,box-shadow .25s}
input[type=checkbox]::before{transition:transform .28s cubic-bezier(.3,1.5,.5,1),background-color .25s,width .15s}
input[type=checkbox]:active::before{width:28px}
input[type=checkbox]:checked:active::before{transform:translateX(12px)}

/* 画面が開く・閉じる動き */
#ov.in{animation:fadeIn .18s ease-out}
#ov.in .card{animation:cardIn .28s cubic-bezier(.2,.9,.3,1.1)}
#ov.in.big .card{animation:cardInBig .3s cubic-bezier(.2,.9,.3,1)}
#drw:not([hidden]) #dr{animation:drIn .26s cubic-bezier(.2,.9,.3,1)}
#drw:not([hidden]) #drb{animation:fadeIn .26s ease-out}
#vcb:not([hidden]),#offb:not([hidden]){animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
#act:not([hidden]){animation:fadeUp .2s ease-out}
.bdg:not([hidden]){animation:popIn .4s cubic-bezier(.3,1.4,.5,1)}
details[open]>:not(summary){animation:fadeDown .22s ease-out}
#main.pre #pre{animation:fadeUp .28s ease-out}
#left,#side{animation:fadeIn .25s ease-out}

/* メッセージ・メニュー・ロゴ */
.mr.pop .bb{animation:msgIn .3s cubic-bezier(.2,.9,.3,1.2);transform-origin:0 100%}
.mr.me.pop .bb{transform-origin:100% 100%}
.sbi{animation:fadeLeft .4s ease-out backwards}
.sbi:nth-of-type(1){animation-delay:.03s}.sbi:nth-of-type(2){animation-delay:.07s}.sbi:nth-of-type(3){animation-delay:.11s}.sbi:nth-of-type(4){animation-delay:.15s}.sbi:nth-of-type(5){animation-delay:.19s}.sbi:nth-of-type(6){animation-delay:.23s}.sbi:nth-of-type(7){animation-delay:.27s}.sbi:nth-of-type(8){animation-delay:.31s}.sbi:nth-of-type(9){animation-delay:.35s}
#hplogo img{animation:floaty 6s ease-in-out infinite}
}
/* 文字サイズの切り替えボタン */
.fsr{flex-wrap:wrap;margin:6px 0 4px}.fsb.on{background:var(--tx);color:var(--bg)}

/* ===== ストーリー ===== */
#sth [hidden],#stv [hidden],#ste [hidden]{display:none!important}
#sth{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.sth-card{background:var(--bg);color:var(--tx);border-radius:12px;max-height:85vh;max-height:85dvh;overflow:auto;width:min(520px,100%);padding:16px;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
.sth-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:calc(18px*var(--fz,1))}
.sth-card h4{margin:14px 0 6px}
.sth-top{display:flex;gap:14px;align-items:center}.sth-nc{flex:1;min-width:0}.sth-new{width:100%}
.sth-row{display:flex;gap:12px;overflow-x:auto;padding:4px 0 8px}
.sth-c{background:none;border:0;color:var(--tx);display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;cursor:pointer;width:78px;flex:none;padding:0}
.sth-c .sn{font-size:calc(12px*var(--fz,1));max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.str{display:inline-flex;padding:3px;border-radius:50%;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.str.seen{background:#6b7280}.str.none{background:transparent;box-shadow:inset 0 0 0 2px var(--panel)}
.str .av{border:3px solid var(--bg);box-sizing:content-box;border-radius:50%}
#stv{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.stv-box{position:relative;height:min(100vh,177.78vw);height:min(100dvh,177.78vw);aspect-ratio:9/16;background:#000;overflow:hidden;border-radius:12px;touch-action:none;-webkit-user-select:none;user-select:none;color:#fff}
@media(max-width:700px){.stv-box{border-radius:0}}
.stv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s;pointer-events:none}.stv-img.in{opacity:1}
.stv-box.sr{animation:stsr .22s ease-out}.stv-box.sl{animation:stsl .22s ease-out}
@keyframes stsr{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}@keyframes stsl{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
.stv-top{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 10px 28px;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));z-index:2;transition:opacity .15s}
.stv-bars{display:flex;gap:4px}.stv-bars i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}.stv-bars b{display:block;height:100%;background:#fff}
.stv-hd{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}
.stv-nm{flex:1;min-width:0;line-height:1.3}.stv-nm span{opacity:.75;font-size:12px}
.stv-vs{font-size:12px;background:rgba(0,0,0,.45);border-radius:10px;padding:2px 8px;white-space:nowrap}
.stv-x{background:none;border:0;color:#fff;font-size:20px;padding:6px 8px;cursor:pointer}
.stv-bt{position:absolute;left:0;right:0;bottom:0;padding:28px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;transition:opacity .15s}
.stv-bt>button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:20px;padding:10px 14px;font:inherit;cursor:pointer}.stv-vw{flex:1;text-align:left}
.stv-box.hold .stv-top,.stv-box.hold .stv-bt{opacity:0}
.stv-rx{display:none;justify-content:space-around;width:100%}.stv-bt.f .stv-rx{display:flex}
.stv-rx button{background:none;border:0;font-size:28px;cursor:pointer;transition:transform .2s}.stv-rx button.pop{transform:scale(1.8)}
.stv-rp{display:flex;gap:6px;align-items:center;width:100%}
.stv-rp input{flex:1;width:auto;min-width:0;text-align:left;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:22px;padding:10px 14px;font-size:16px;-webkit-user-select:text;user-select:text}
.stv-rp button{background:none;border:0;color:#fff;font-size:24px;cursor:pointer;padding:4px 6px}.stv-lk.on{color:#ff3b5c}
.stv-hrt{position:absolute;left:50%;top:45%;font-size:120px;color:#ff3b5c;z-index:3;pointer-events:none;transform:translate(-50%,-50%) scale(0);line-height:1}
.stv-hrt.go{animation:sthr .7s ease-out}
@keyframes sthr{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}40%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-60%) scale(1.5);opacity:0}}
.stv-err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.stv-sh:not(:empty){position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
.stv-sc{background:var(--bg);color:var(--tx);width:100%;max-height:70%;overflow:auto;border-radius:16px 16px 0 0;padding:14px}
.stv-sch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.stv-sx{background:none;border:0;color:var(--tx);font-size:18px;cursor:pointer}
.stv-vr{display:flex;align-items:center;gap:10px;padding:6px 0}.stv-vn{flex:1;line-height:1.3}.stv-lkd{color:#ff3b5c;font-size:20px}
#ste{position:fixed;inset:0;z-index:30;background:#0b0b0b;color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.ste-tp{display:flex;gap:2px;align-items:center;padding:6px 8px}
.ste-tp button{background:none;border:0;color:#fff;font-size:22px;display:flex;flex-direction:column;align-items:center;padding:4px 8px;cursor:pointer;min-width:44px;line-height:1.2}
.ste-tp small,.ste-vis small,.ste-fx small{font-size:10px;opacity:.8}
.ste-st{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.ste-st canvas{border-radius:14px;touch-action:none;background:#000;display:block}
.ste-sel{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:rgba(0,0,0,.7);border-radius:20px;padding:4px 8px;z-index:3}
.ste-sel button{background:none;border:0;color:#fff;font-size:20px;padding:4px 9px;cursor:pointer}
.ste-tr{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:24px;z-index:3;pointer-events:none;transition:transform .15s}
.ste-tr.on{background:#ff3b5c;transform:translateX(-50%) scale(1.25)}
.ste-bt{padding:8px 10px calc(10px + env(safe-area-inset-bottom));min-height:96px}
.ste-pub{display:flex;gap:8px}
.ste-vis{flex:none;background:#262626;color:#fff;border:0;border-radius:24px;padding:8px 16px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.ste-go{flex:1;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);color:#fff;border:0;border-radius:24px;padding:12px;font:inherit;font-weight:700;cursor:pointer}
.ste-fx{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.ste-fx button{flex:none;background:none;border:2px solid transparent;border-radius:8px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px;cursor:pointer}.ste-fx button.on{border-color:#fff}
.ste-fx .th canvas{width:54px;height:96px;border-radius:6px;display:block}
.ste-dn{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
#ste .b{background:#262626;color:#fff}#ste .b.on2{background:#fff;color:#000}
.ste-pal{display:flex;gap:8px;overflow-x:auto;padding:8px 2px}
.ste-pal button{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid #666;cursor:pointer;padding:0}.ste-pal button.on{border-color:#fff;transform:scale(1.18)}
.ste-br{display:flex;gap:8px;align-items:center}.ste-br input[type=range]{flex:1;width:auto;padding:0;background:none;box-shadow:none}
.ste-tabs{display:flex;gap:6px;overflow-x:auto}.ste-tabs button{flex:none;background:#262626;border:0;border-radius:16px;padding:4px 12px;font-size:20px;color:#fff;cursor:pointer}.ste-tabs button.on{background:#666}
.ste-eg{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;max-height:30vh;overflow:auto;margin-top:6px}.ste-eg button{background:none;border:0;font-size:28px;cursor:pointer;padding:4px;line-height:1.2}
@media(max-width:520px){.ste-eg{grid-template-columns:repeat(6,1fr)}}
.ste-tx{position:absolute;inset:0;background:rgba(0,0,0,.9);z-index:6;display:flex;align-items:flex-start;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 12px 12px;overflow:auto}
.ste-txc{width:min(480px,100%)}
.ste-txc textarea{width:100%;background:transparent;border:0;outline:0;resize:none;color:#fff;font-size:22px;padding:8px;min-height:120px;-webkit-user-select:text;user-select:text;font-family:inherit}
.ste-fr{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.st-sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.st-sc{background:var(--bg);color:var(--tx);width:min(480px,100%);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.st-sc .b{text-align:center;cursor:pointer;display:block}
.st-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,10px);background:rgba(20,20,20,.92);color:#fff;padding:10px 16px;border-radius:20px;z-index:60;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
.st-toast.on{opacity:1;transform:translate(-50%,0)}
/* ストーリーの動画 */
.stv-vd{object-fit:contain;background:#000}
.stv-ld{position:absolute;left:0;right:0;bottom:30%;text-align:center;z-index:1;font-size:13px;text-shadow:0 1px 4px #000;pointer-events:none}
.stv-mt{background:none;border:0;color:#fff;font-size:20px;padding:6px 8px;cursor:pointer}
.ste-vp{height:calc(100% - 8px);max-width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px;display:block}

/* 音楽の曲の行: 題名が長くてもボタンが潰れない・曲名を押しやすい */
.r.tr{gap:4px;align-items:center}
.tt{flex:1 1 0;min-width:0;display:block;text-align:left;font-size:calc(16px*var(--fz,1));color:inherit;padding:10px 4px;min-height:44px;line-height:1.35}
.tt .tl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.tt:not(:disabled):hover{transform:none}
.tt:not(:disabled):active{transform:none;background:var(--panel)}
.ta{display:flex;align-items:center;flex:none;gap:2px}
.ta .x{min-width:40px;min-height:40px}
.r.tr.ed{flex-wrap:wrap}
.r.tr.ed .tt{flex:1 1 100%}
.r.tr.ed .ta{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

/* お知らせ・パッチノート(題名だけ→タップで開く) */
.nz{border-bottom:1px solid var(--panel)}
.nz summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 4px;cursor:pointer;list-style:none;min-height:44px}
.nz summary::-webkit-details-marker{display:none}
.nz summary::before{content:'▸';color:var(--mut);flex:none;transition:transform .15s}
.nz[open] summary::before{transform:rotate(90deg)}
.nzt{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.nzk{display:inline-block;font-size:.72em;font-weight:500;padding:1px 7px;margin-right:6px;border-radius:8px;background:var(--panel);color:var(--mut);vertical-align:1px}
.nzb{white-space:pre-wrap;word-break:break-word;padding:2px 4px 12px 22px;-webkit-user-select:text;user-select:text}
.nzl{margin:0;padding:2px 4px 12px 26px;-webkit-user-select:text;user-select:text}
.nzl li{margin:3px 0}

/* 新着メッセージの画面内お知らせ / 通知オンの案内 */
#nbn{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:20;width:min(94vw,460px);display:flex;align-items:center;gap:8px;background:var(--bg);color:var(--tx);border:1px solid var(--mut);border-radius:14px;padding:8px 8px 8px 12px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
#nbn[hidden]{display:none}
#nbn.in{animation:nbIn .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes nbIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
#nbn .nbb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;padding:4px 0;font:inherit;font-size:calc(15px*var(--fz,1))}
#nbn .nbm{font-size:calc(14px*var(--fz,1));line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
#nbn .nbx{flex:none;min-width:40px;min-height:40px;background:none;border:0;color:var(--mut);font-size:calc(20px*var(--fz,1));cursor:pointer}

/* アプリ内のダイアログ(確認・入力・選択)とトースト */
#dlg{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease-out}
.dlgc{background:var(--bg);color:var(--tx);border-radius:14px;width:min(380px,100%);padding:18px;box-shadow:0 0 0 1px rgba(128,128,128,.35),0 12px 40px rgba(0,0,0,.5);animation:cardIn .25s cubic-bezier(.2,.9,.3,1.1)}
.dlgm{margin:0 0 14px;white-space:pre-line;overflow-wrap:anywhere;line-height:1.5;font-size:calc(16px*var(--fz,1))}
.dlgi{width:100%;box-sizing:border-box;text-align:left;margin-bottom:14px}
.dlgb{justify-content:flex-end}
.dlgb .b{min-height:44px}
.dlgv{flex-direction:column;align-items:stretch}
.dlgc .dgr{background:var(--dn);color:#fff;border-color:var(--dn)}
#sayb{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);transform:translateX(-50%);z-index:90;max-width:min(92vw,460px);background:rgba(20,20,20,.94);color:#fff;border-radius:16px;padding:10px 16px;white-space:pre-line;overflow-wrap:anywhere;text-align:center;line-height:1.5;box-shadow:0 4px 18px rgba(0,0,0,.5);cursor:pointer;font-size:calc(15px*var(--fz,1))}
#sayb[hidden]{display:none}
#sayb.in{animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
.dlgb .b,.dlgb .go{width:auto;margin:0;flex:1 1 0;min-width:0}
.dlgv .b{flex:none;width:100%}

/* ストーリーのコメント欄 */
.stv-cm small{font-size:12px;margin-left:2px;vertical-align:middle}
.stv-rp .stv-cm{display:flex;align-items:center}
.stv-sc.cm{display:flex;flex-direction:column;height:70%;max-height:70%;overflow:hidden}
.stv-cl{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.stv-cr{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.stv-cb{flex:1;min-width:0;line-height:1.35}
.stv-cb em{font-style:normal;font-size:11px;padding:1px 6px;border-radius:8px;background:var(--panel);color:var(--mut);margin-left:2px}
.stv-ct{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text;margin-top:1px}
.stv-cd{background:none;border:0;color:var(--mut);font-size:16px;cursor:pointer;padding:6px;flex:none}
.stv-ci{display:flex;gap:6px;align-items:center;padding-top:8px;border-top:1px solid var(--panel);margin-top:6px}
.stv-ci input{flex:1;width:auto;min-width:0;text-align:left;font-size:16px;-webkit-user-select:text;user-select:text}
.stv-cs{background:none;border:0;color:var(--tx);font-size:22px;cursor:pointer;padding:4px 8px}

/* 動画の編集(切り取り・音楽) */
.ste-bt.ve{max-height:46vh;max-height:46dvh;overflow:auto}
.ve-tools{display:flex;gap:8px;margin-bottom:8px}
.ve-tools .b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.3;padding:8px 6px}
.ve-tools .b small{font-size:11px;opacity:.8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ve-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ve-r{display:flex;align-items:center;gap:10px;margin:6px 0}
.ve-r span{flex:none;width:6.5em;font-size:13px;opacity:.85}
.ve-r b{flex:none;min-width:3.4em;text-align:right;font-size:13px;font-weight:600}
.ve-r input[type=range]{flex:1;width:auto;min-width:0;padding:0;background:none;box-shadow:none}
.ve-ml{display:flex;flex-direction:column;gap:4px;max-height:20vh;max-height:20dvh;overflow:auto}
.ve-mi{text-align:left;background:#262626;color:#fff;border:2px solid transparent;border-radius:10px;padding:9px 12px;font:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.ve-mi.on{border-color:#fff}

/* ===== 動画編集(vedit.js): 複数の動画をつないで、切って、文字・音楽を付ける画面 ===== */
#vx{position:fixed;inset:0;z-index:31;background:#0b0b0b;color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);font-size:14px;line-height:1.35;-webkit-user-select:none;user-select:none}
#vx [hidden]{display:none!important}
#vx button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#vx button:disabled{opacity:.35;cursor:default}
#vx small{font-size:11px;opacity:.75}
#vx .vx-pri{background:#ffd60a;color:#111}
.vx-top{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid #222}
.vx-ttl{font-size:15px;margin-left:2px}.vx-sp{flex:1}
.vx-ib{background:none;border:0;font-size:20px;width:40px;height:40px;border-radius:10px}
.vx-vis{background:#262626;border:0;border-radius:20px;padding:8px 12px;white-space:nowrap}
.vx-go{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);border:0;border-radius:20px;padding:9px 16px;font-weight:700;white-space:nowrap}
.vx-main{flex:1;min-height:0;display:flex}
.vx-rail{flex:none;width:68px;background:#101012;border-right:1px solid #222;display:flex;flex-direction:column;overflow-y:auto}
.vx-rail button{background:none;border:0;padding:12px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:20px;color:#a8a8b0;line-height:1.2}
.vx-rail button small{font-size:11px;opacity:1}
.vx-rail button.on{color:#ffd60a;background:#1b1b1f}
.vx-panel{flex:none;width:290px;background:#141416;border-right:1px solid #222;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.vx-stage{flex:1;min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.vx-stage canvas{background:#000;border-radius:6px;touch-action:none;display:block}
.vx-empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#8a8a93;padding:0 24px;pointer-events:none}
.vx-sel{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:rgba(0,0,0,.72);border-radius:20px;padding:3px 6px;z-index:3}
.vx-sel button{background:none;border:0;font-size:19px;padding:4px 9px}
/* 左のパネルの中身 */
#vx .vx-bt{background:#262629;border:0;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
#vx .vx-pri.vx-bt{background:#ffd60a;color:#111}
.vx-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vx-ml{display:flex;flex-direction:column;gap:6px}
.vx-mi{display:flex;align-items:center;gap:8px;background:#1d1d21;border:0;border-radius:10px;padding:6px;text-align:left}
.vx-th{flex:none;width:36px;height:64px;border-radius:6px;background:#2b2b31 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:18px}
.vx-mn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-note{margin:0;color:#8a8a93;font-size:12px}
.vx-cats{display:flex;gap:4px;overflow-x:auto}
.vx-cats button{flex:none;background:#1d1d21;border:0;border-radius:8px;padding:6px 10px;font-size:18px}
#vx .vx-cats button.on{background:#fff;color:#111}
.vx-eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px}
.vx-eg button{background:none;border:0;font-size:26px;padding:4px}
.vx-h2{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.vx-h2 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-fr{display:flex;flex-direction:column;gap:6px}.vx-fr>span{color:#a8a8b0;font-size:12px}
.vx-fr input[type=range]{width:100%;accent-color:#ffd60a}
.vx-ch,.vx-ch2{display:flex;flex-wrap:wrap;gap:6px}
.vx-ch button,.vx-ch2 button{background:#262629;border:0;border-radius:8px;padding:7px 10px}
#vx .vx-ch button.on{background:#ffd60a;color:#111}
.vx-pal{display:flex;flex-wrap:wrap;gap:8px}
.vx-pal button{width:30px;height:30px;border-radius:50%;border:2px solid #444;padding:0}
.vx-pal button.on{border-color:#fff;box-shadow:0 0 0 2px #0b0b0b inset}
/* 再生・分割などの操作 */
.vx-ctl{flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px 10px;padding:4px 10px;border-top:1px solid #222;flex-wrap:wrap}
.vx-tools,.vx-tp,.vx-zm{display:flex;align-items:center;gap:2px}
.vx-tools button{background:none;border:0;display:flex;flex-direction:column;align-items:center;font-size:19px;padding:2px 10px;line-height:1.2;min-width:46px}
.vx-tp button{background:none;border:0;font-size:20px;width:42px;height:42px;border-radius:50%}
#vx .vx-play{background:#fff;color:#111;font-size:18px}
.vx-time{margin-left:8px;font-variant-numeric:tabular-nums;color:#a8a8b0;white-space:nowrap}
.vx-now{color:#fff}.vx-tot.over{color:#ff6b57;font-weight:700}
.vx-zm button{background:none;border:0;font-size:18px;width:34px;height:34px}
.vx-z{width:min(160px,26vw);accent-color:#ffd60a}
/* タイムライン */
.vx-tl{flex:none;height:196px;background:#0f0f11;border-top:1px solid #222}
.vx-sc{height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.vx-in{position:relative;height:100%;min-width:100%}
.vx-rl{position:relative;height:26px;touch-action:none;cursor:pointer;border-bottom:1px solid #1f1f23}
.vx-rl i{position:absolute;bottom:0;width:1px;height:6px;background:#4a4a52}.vx-rl i.mj{height:11px;background:#8a8a93}
.vx-rl span{position:absolute;top:1px;font-size:10px;color:#9a9aa2;transform:translateX(3px)}
.vx-row{position:relative;margin-top:6px}
.vx-r1{height:66px}.vx-r2{height:34px}.vx-r3{height:44px}
.vx-hint{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;color:#5d5d66;font-size:12px;pointer-events:none;white-space:nowrap}
.vx-bk{position:absolute;top:0;bottom:0;border-radius:8px;overflow:hidden;border:2px solid transparent;display:flex;align-items:center;cursor:pointer}
.vx-bk.on{border-color:#ffd60a;touch-action:none}
.vx-bk-c{background-color:#2b2b31;align-items:flex-start}
.vx-bk-t{background:linear-gradient(90deg,#6228d7,#c2185b)}
.vx-bk-a{background:#0b3a56}
.vx-lb{position:relative;z-index:1;font-size:11px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none;text-shadow:0 1px 2px #000}
.vx-bk-c .vx-lb{background:rgba(0,0,0,.6);border-radius:0 0 6px 0}
.vx-bk-a .vx-lb{align-self:flex-start;color:#bfe8ff}
.vx-wf{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%}
.vx-h{position:absolute;top:0;bottom:0;width:16px;background:#ffd60a;z-index:2;touch-action:none;cursor:ew-resize;display:none}
.vx-bk.on .vx-h{display:block}
.vx-h[data-s=l]{left:0;border-radius:6px 0 0 6px}.vx-h[data-s=r]{right:0;border-radius:0 6px 6px 0}
.vx-h::after{content:"";position:absolute;left:50%;top:30%;bottom:30%;width:2px;margin-left:-1px;background:#222;border-radius:2px}
.vx-ph{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#ff5a1f;z-index:5;pointer-events:none;will-change:transform}
.vx-ph::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:10px solid #ff5a1f;border-bottom:0}
/* 書き出し中の表示・文字の入力 */
.vx-pg,.vx-md{position:absolute;inset:0;z-index:21;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:12px}
.vx-pgc,.vx-mdc{background:#1a1a1d;border-radius:16px;padding:16px;width:min(380px,100%);display:flex;flex-direction:column;gap:10px}
.vx-pgc{text-align:center}.vx-pgc button{background:#262629;border:0;border-radius:10px;padding:9px 16px}
.vx-bar{height:8px;background:#333;border-radius:4px;overflow:hidden}.vx-bar i{display:block;height:100%;background:linear-gradient(90deg,#f9ce34,#ee2a7b,#6228d7)}
.vx-mdc textarea{width:100%;background:#0b0b0b;border:1px solid #3a3a40;border-radius:10px;padding:10px;resize:none;-webkit-user-select:text;user-select:text}
.vx-fr2{display:flex;gap:6px;flex-wrap:wrap}.vx-fr2 button{background:#262629;border:0;border-radius:8px;padding:7px 10px}
#vx .vx-fr2 button.on{background:#fff;color:#111}
.vx-mdb{display:flex;justify-content:flex-end;gap:8px}.vx-mdb button{background:#262629;border:0;border-radius:10px;padding:9px 18px}
#vx.busy .vx-main,#vx.busy .vx-tl,#vx.busy .vx-ctl{pointer-events:none}
@media (max-width:759px){
 .vx-main{flex-direction:column}
 .vx-stage{order:1;flex:1}
 .vx-rail{order:2;width:auto;flex-direction:row;border-right:0;border-top:1px solid #222;overflow-y:visible}
 .vx-rail button{flex:1;padding:5px 2px;font-size:17px}
 .vx-panel{order:3;width:auto;height:150px;border-right:0;border-top:1px solid #222}
 .vx-tl{height:168px}.vx-r1{height:58px}
 .vx-ttl{display:none}
 .vx-go{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){#vx *{transition:none!important;animation:none!important}}

/* YouTube検索(管理者だけ) */
.ysw{background:rgba(128,128,128,.08);border-radius:12px;padding:10px;margin-bottom:10px}
.ysi{flex:1;width:auto;min-width:0;text-align:left;font-size:16px;-webkit-appearance:none;appearance:none}
.ysg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:720px){.ysg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ysc{display:flex;flex-direction:column;gap:4px;background:var(--panel);border-radius:10px;padding:6px;min-width:0}
.ysth{position:relative;display:block;width:100%;padding:0;border:0;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;cursor:pointer}
.ysth img{width:100%;height:100%;object-fit:cover;display:block}
.ysplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:rgba(0,0,0,.25)}
.yst{font-size:.85em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;user-select:text}
.ysch{font-size:.75em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysa{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.ysa .b{padding:7px 8px;font-size:.85em}

#ysF{align-items:stretch}
#ysF .ysi{flex:1 1 auto;width:100%;min-width:0;padding:14px 16px;font-size:18px;text-align:left}
#ysF .ysb{flex:none;width:auto;padding:8px 14px;font-size:.9em;background:var(--tx);color:var(--bg);white-space:nowrap}

/* 共有相手を選ぶ画面 */
.shl{max-height:40vh;overflow-y:auto;margin:8px 0 14px;border-top:1px solid var(--panel)}
.dlgc input[type=radio]{flex:none;width:20px;height:20px;margin:0 10px 0 0}
.ysc[hidden]{display:none}

/* みんなの曲: YouTubeのホーム画面のような大きなサムネイルの一覧 */
.card.big.wide{width:min(1360px,100%)}
.pbg{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:18px 12px}
.pbc{background:none;padding:0;gap:6px;content-visibility:auto;contain-intrinsic-size:auto 250px}
.pbc .ysth{border-radius:12px}
.pbc .yst{font-size:.95em;font-weight:600;padding:0 2px}
.pbc .ysch{padding:0 2px;font-size:.8em}
.pbc .ysa{flex-direction:row;flex-wrap:wrap;padding:0 2px}
.pbc .ysa .b{flex:1 1 auto;padding:6px 8px;font-size:.8em}
@media(max-width:520px){.pbg{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.pbc.cur .ysth{outline:3px solid var(--up,#4af);outline-offset:-3px}

/* フォント選び(着せ替え画面) */
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ffb{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;background:var(--panel);color:var(--tx);border:0;border-radius:10px;padding:8px 10px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);line-height:1.3}
.ffb .fs{font-size:calc(18px*var(--fz,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffb small{font-size:calc(11px*var(--fz,1));color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffb.on{box-shadow:0 0 0 3px var(--tx)}
.ffc{position:relative;min-width:0}.ffc .ffb{width:100%;padding-right:34px}
.ffs{position:absolute;top:3px;right:3px;background:none;border:0;color:var(--mut);font-size:calc(18px*var(--fz,1));line-height:1;padding:6px;cursor:pointer}
.ffs.on{color:var(--pb)}

/* アイコン(Googleフォントの Material Symbols)。選んだフォントの影響を受けず、読み込み前は文字が見えないよう枠で隠す */
ms-i{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:1.25em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;width:1em;height:1em;overflow:hidden;white-space:nowrap;word-wrap:normal;direction:ltr;vertical-align:-.25em;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none;-webkit-user-select:none;pointer-events:none;flex:none}
ms-i.o{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.stv-hrt ms-i{font-size:1em}.ysplay ms-i{font-size:1.1em}.sbi i ms-i,#sb nav button i ms-i{font-size:22px;vertical-align:middle}
.ffs ms-i{font-size:1em;vertical-align:middle}


/* ===== 画面の大きさに合わせた表示(スマホ・タブレット・横向き) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
.card{max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px)}
.card,.card .r>span,.card .note,.card h3,.card h4{overflow-wrap:anywhere}
#ov:not(.big){padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
/* 小さいスマホ: 左メニューで幅が狭くなるので、窓の余白と内側の余白をつめて、中身を広く使う */
@media(max-width:480px){#ov:not(.big){padding:8px 8px 76px}.card:not(.big){padding:14px}.card h3{font-size:calc(19px*var(--fz,1))}}
@media(max-width:360px){:root{--sw:52px}#sb{padding:8px 4px}#ov:not(.big){padding:6px 6px 72px}.card:not(.big){padding:12px}}
/* 横向きのスマホ(高さが低い): 窓を画面いっぱいに使い、下の余白を減らす */
@media(max-height:520px){#ov:not(.big){padding:6px}.card:not(.big){max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}#sb{padding:6px 6px;gap:2px}.sbi,#sb nav button{padding-top:8px;padding-bottom:8px}}
/* 指で押す端末: ボタンや選択肢を押しやすい大きさに */
@media(pointer:coarse){
 .x{padding:10px 12px;min-height:44px}
 .ffs{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
 select{min-height:44px}
 .plo{padding:8px 0!important}
}
/* アンケートの選択肢 */
.plo{display:block;padding:5px 0;cursor:pointer}
.plo>div{min-height:34px}
.plo input[type=radio]{width:20px!important;height:20px;margin:0;flex:none;accent-color:var(--up)}
.plo input[type=checkbox]{flex:none}
/* 左メニュー: 高さが足りないときは、ボタンを潰さずに、メニュー全体をスクロールできるようにする */
#sb>*,#sb nav>*{flex-shrink:0}
#sb{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 大きなタイマーの数字: 左メニューの幅と画面の高さも考えて、はみ出さない大きさにする(縦向きスマホ・PCの大きさは今まで通り) */
#t{font-size:clamp(48px,min(22vw,calc((100vw - var(--sw))*.3),34vh),180px)}

/* ゲーム */
#gmw{display:none}
#main.gm #left,#main.gm #side{display:none}
#main.gm #gmw{display:block;flex:1;min-height:0;overflow:auto;padding:12px 16px 24px;-webkit-overflow-scrolling:touch}
#gmw h2{margin:12px 0 8px}
.gmbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;max-width:760px;margin:0 auto 10px}
.dnbox{width:100%;max-width:760px;margin:0 auto}
#dnc{display:block;width:100%;height:auto;aspect-ratio:600/170;border-radius:12px;touch-action:none;cursor:pointer;background:#f7f7f7;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
#bbc{display:block;width:100%;height:auto;aspect-ratio:360/560;border-radius:14px;touch-action:none;cursor:grab;background:#0c0f22;box-shadow:0 0 0 1px rgba(128,128,128,.35);-webkit-user-select:none;user-select:none}
.dnbt{display:flex;gap:10px;justify-content:center;max-width:760px;margin:12px auto}
.dnbt .b{flex:1;max-width:260px;padding:16px;font-size:calc(18px*var(--fz,1));touch-action:none;-webkit-user-select:none;user-select:none}
.dnr{max-width:760px;margin:0 auto}
.dntab.on{background:var(--tx);color:var(--bg)}

/* オセロ */
.otw{max-width:520px;margin:0 auto}
.otw h4{margin:14px 0 6px}
.otsc{display:flex;gap:8px;margin-bottom:8px}
.otp{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);color:var(--tx);border-radius:12px;padding:8px 10px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3);transition:box-shadow .2s,transform .2s}
.otp.on{box-shadow:inset 0 0 0 3px var(--tx)}
.otp b{margin-left:auto;font-size:calc(22px*var(--fz,1))}
.otk,.shck{flex:none;font-variant-numeric:tabular-nums;font-size:calc(13px*var(--fz,1));opacity:.85}
.shck{margin-left:auto}
.otk.low,.shck.low{color:#e53935;font-weight:700;opacity:1}
.otn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:calc(14px*var(--fz,1))}
.otsc .otd{display:inline-block;flex:none;width:24px;height:24px;margin:0}
.otst{text-align:center;margin:6px 0 10px;min-height:1.6em;font-size:calc(17px*var(--fz,1));font-weight:700}
.otst.end{font-size:calc(22px*var(--fz,1))}
.otb{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:2px;width:100%;aspect-ratio:1;background:#0b3d1e;padding:4px;border-radius:12px;box-sizing:border-box;touch-action:manipulation}
.otc{position:relative;display:block;min-width:0;min-height:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:3px;background:#17803d;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.otc:disabled{cursor:default}
.otc.hn::after{content:'';position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:rgba(0,0,0,.28);pointer-events:none}
.otc.lm::before{content:'';position:absolute;left:41%;top:41%;width:18%;height:18%;border-radius:50%;background:#ff4d4d;z-index:2;pointer-events:none}
.otd{display:block;width:84%;height:84%;margin:8%;border-radius:50%;box-sizing:border-box}
.otc .otd{position:absolute;left:8%;top:8%;width:84%;height:84%;margin:0}
.otd.k1{background:radial-gradient(circle at 35% 30%,#666,#000 72%);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.otd.k2{background:radial-gradient(circle at 35% 30%,#fff,#c9c9c9 75%);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.otd.pop{animation:otpop .22s ease-out}
.otd.fl{animation:otfl .38s ease-in-out}
@keyframes otpop{from{transform:scale(.3);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes otfl{0%{transform:scaleX(1)}50%{transform:scaleX(.05)}100%{transform:scaleX(1)}}
.otbt{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.otbt>span{display:contents}
.otbt .b{flex:1 1 130px;max-width:220px;padding:14px 10px}
.otrow{display:flex;gap:8px;flex-wrap:wrap}
.otrow .b{flex:1 1 90px;padding:14px 10px}
.otsel.on{background:var(--tx);color:var(--bg)}
.otfrw{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);color:var(--tx);border-radius:12px;padding:8px 10px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3)}
.otwho{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.otwho>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otbtn2{display:flex;gap:6px;flex:none}
@media (prefers-reduced-motion:reduce){.otd.pop,.otd.fl{animation:none}}

/* 将棋 */
.shw{max-width:560px}
.shbw{position:relative;margin:8px 0}
.shb{--cs:40px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));gap:1px;width:100%;aspect-ratio:1;background:#6b4a1c;padding:3px;border-radius:8px;box-sizing:border-box;touch-action:manipulation}
.shc{position:relative;display:block;min-width:0;min-height:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:#e6bf72;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.shc.lf{background:#efd48c}
.shc.lm{background:#f4e08a}
.shc.sl{background:#9ed67d}
.shc.ck{background:#f08a8a}
.shc.dt::after{content:'';position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:rgba(0,0,0,.32);pointer-events:none}
.shc.dt.hv::after{left:6%;top:6%;width:88%;height:88%;border-radius:8px;background:none;border:3px solid rgba(220,40,40,.8);box-sizing:border-box}
.shp{position:absolute;left:50%;top:50%;width:calc(var(--cs)*.84);height:calc(var(--cs)*.92);margin:calc(var(--cs)*-.46) 0 0 calc(var(--cs)*-.42);clip-path:polygon(50% 0,88% 14%,100% 100%,0 100%,12% 14%);background:#3b2808;pointer-events:none}
.shp i{position:absolute;inset:2px;clip-path:polygon(50% 0,88% 14%,100% 100%,0 100%,12% 14%);background:#f7de9a;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:calc(var(--cs)*.5);line-height:1;color:#201505;padding-top:10%;box-sizing:border-box;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.shp.dn{transform:rotate(180deg)}
.shp.pm i{color:#c1121f}
.shpn{display:flex;flex-direction:column;gap:4px;background:var(--panel);color:var(--tx);border-radius:12px;padding:8px 10px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3);transition:box-shadow .2s}
.shpn.on{box-shadow:inset 0 0 0 3px var(--tx)}
.shnm{display:flex;align-items:center;gap:6px;font-size:calc(14px*var(--fz,1));min-width:0}
.shmk{font-size:1.25em;line-height:1}
.shnt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shhd{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;align-items:center}
.shs{--cs:38px;position:relative;width:calc(var(--cs)*1.05);height:calc(var(--cs)*1.05);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shs.on::before{content:'';position:absolute;inset:-2px;border-radius:8px;background:#9ed67d}
.shs b{position:absolute;right:-4px;bottom:-4px;font-size:12px;background:var(--tx);color:var(--bg);border-radius:9px;min-width:16px;padding:0 4px;line-height:16px;text-align:center;z-index:3;box-sizing:border-box}
.shpr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--panel);color:var(--tx);border-radius:14px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.45);z-index:5}
.shpr[hidden]{display:none}
.shpr b{width:100%;text-align:center}
.shpr .b{flex:1 1 110px;padding:12px 18px}


#cpc{display:block;width:100%;height:auto;aspect-ratio:960/540;border-radius:12px;touch-action:manipulation;background:#000;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
.cpui{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:760px;margin:10px auto 0;padding:10px 14px;border-radius:12px;background:#1b0e0b;color:#e8d8c0;box-shadow:0 0 0 1px #4a2a20}
.cpui b{color:#ff5a4a;font-size:1.3em}
.cpui span{max-width:100%;overflow-wrap:anywhere}
.cpui b{word-break:break-all}
#cprt{background:#7a0f0f;color:#fff}

/* 天気: 1時間ごとの予報の絵文字 / 雨雲レーダー */
.wxe{font-size:1.7em;line-height:1.25}
#rdmap{width:100%;height:min(58vh,460px);border-radius:12px;position:relative;z-index:0;isolation:isolate;margin-top:6px;overflow:hidden}
#rdmap[hidden],#rdbar[hidden],.rdlg[hidden]{display:none}
.rdlg{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-top:8px;font-size:calc(12px*var(--fz,1));color:var(--mut)}
.rdlg i{display:inline-block;width:22px;height:12px;border-radius:3px;border:1px solid rgba(128,128,128,.5)}
.rdlg span{margin:0 4px}.rdlg small{margin-left:6px}

#tetc{display:block;width:100%;height:auto;aspect-ratio:340/480;border-radius:12px;touch-action:none;cursor:pointer;background:#12101f;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
#ringc{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px);background:var(--bg);color:var(--tx);border-radius:16px;padding:12px 16px;box-shadow:0 0 0 2px var(--up),0 8px 28px rgba(0,0,0,.55);animation:ringp 1s ease-in-out infinite}
#ringc[hidden]{display:none}
#ringc .rt{line-height:1.3;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes ringp{0%,100%{box-shadow:0 0 0 2px var(--up),0 8px 28px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 6px var(--up),0 8px 28px rgba(0,0,0,.55)}}
.pmrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;margin:6px 0}
#pmb.on{background:var(--tx);color:var(--bg)}

/* ===== スマホ専用の表示(画面幅700px以下)===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;max-width:100vw}
img,video,canvas,svg{max-width:100%}
input,textarea,select{font-size:max(16px,1em)} /* iPhoneで入力時に画面が勝手に拡大されるのを防ぐ */
/* チャット上部(一覧・通話・ブロック+名前): 名前は2段目に回して縦書きにならないようにする */
.dmh{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dmh>button{flex:none;white-space:nowrap}
.dmh>#pp,.dmh>#gt{order:9;flex:1 1 100%;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer}
.dmh>#gt{cursor:default;display:block}
.dmh>#bk2{margin-right:auto}
.dmn{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.dmn>b,.dmn>.note,.dmh>#gt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;writing-mode:horizontal-tb}
.dmh .av{flex:none}
#lsn{writing-mode:horizontal-tb}
@media(max-width:700px){
 :root{--sw:56px}
 #main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .card{max-width:100%;box-sizing:border-box}
 .card table{display:block;overflow-x:auto;max-width:100%}
 .card pre,.card code{white-space:pre-wrap;word-break:break-all}
 .card .row{flex-wrap:wrap}
 .card h3{word-break:break-word}
 button,.b,.x{touch-action:manipulation}
 .b{min-height:40px}
 /* ゲームの画面: 横にはみ出さない */
 #gmw{max-width:100vw;overflow-x:hidden}
 #gmw canvas{max-width:100%;height:auto;touch-action:none}
 /* メッセージの吹き出し */
 .msg,.bub{max-width:86%;word-break:break-word;overflow-wrap:anywhere}
}
@media(max-width:400px){
 .dmh{gap:6px}
 .dmh>button{padding-left:8px;padding-right:8px}
}

/* ===== 設定画面のタブ(設定 / 着せ替え / フォント) ===== */
.stabs{display:flex;gap:6px;margin:4px 0 12px}
.stabs .b{flex:1;padding:10px 6px;white-space:nowrap}

/* ===== テトリスの操作ボタン: スマホ(縦)は画面の下、iPad・横向きは画面の左右に置いて、上が見切れないようにする ===== */
.tetw{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:360px;margin:0 auto}
.tetw>.dnbox{order:-1;width:100%;max-width:360px;margin:0}
.tetw>.dnbt{width:100%;max-width:360px;margin:0}
@media(min-width:700px),(orientation:landscape) and (max-height:700px){
 .tetw{flex-direction:row;align-items:center;justify-content:center;gap:14px;max-width:none;width:100%}
 .tetw>.dnbox{order:0;width:auto;max-width:none;flex:0 1 auto;min-width:0}
 .tetw #tetc{width:auto;max-width:100%;height:min(600px,calc(100vh - 150px));height:min(600px,calc(100dvh - 150px));min-height:240px}
 .tetw>.dnbt{flex:0 0 auto;width:auto;max-width:none}
 .tcl{flex-direction:column;justify-content:center;gap:12px}
 .tcl .b{width:118px;max-width:none;flex:none;min-height:84px;padding:8px}
 .tcr{display:grid;grid-template-columns:repeat(3,62px);gap:10px;align-content:center}
 .tcr .b{width:auto;max-width:none;min-height:84px;padding:0}
}

/* ===== 人狼 ===== */
.wwb{max-width:760px;margin:0 auto}
.wwb h4{margin:14px 0 6px}
.wwin{flex:1 1 120px;width:auto;min-width:0;text-align:left}
.wwrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wwgo{padding:10px 16px;background:var(--tx);color:var(--bg);font-weight:700}
.wwh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.wwh.n{background:#161c3d}.wwh.d{background:#4a3a1c}.wwh.v{background:#4a2330}
.wwph{font-weight:700;font-size:1.1em}
.wwid{color:var(--mut);font-size:.9em;display:flex;align-items:center;gap:6px}
.wwtm{font:700 1.5em "Barlow Condensed","Arial Narrow",sans-serif;font-variant-numeric:tabular-nums;margin-left:auto}
.wwrole{display:flex;gap:12px;align-items:center;background:var(--panel);border-radius:12px;padding:10px 14px;margin-bottom:8px;box-shadow:inset 0 0 0 2px var(--pb)}
.wwri{font-size:2.4em;line-height:1}
.wwinf{color:var(--pb);font-size:.95em}
.wwbn{background:var(--panel);border-radius:12px;padding:10px 14px;margin-bottom:8px;line-height:1.6}
.wwbn.win{box-shadow:inset 0 0 0 2px var(--up)}.wwbn.lose{box-shadow:inset 0 0 0 2px var(--dn)}
.wwbn .b{margin-top:6px}.wwbn .b.on{background:var(--tx);color:var(--bg)}
.wwpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-bottom:8px}
.wwp{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:10px;padding:6px 8px;min-width:0;border:2px solid transparent}
.wwp.t{cursor:pointer;border-color:rgba(255,255,255,.3)}
.wwp.sel{border-color:var(--pb);background:#4a3f1c}
.wwp.dead{opacity:.45}
.wwpn{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1.35}
.wwpr{font-size:.85em;color:var(--mut)}
.wwas{width:100%;margin-top:2px;padding:4px;font-size:.85em}
.wwlog{height:300px;overflow:auto;background:var(--bg2);border-radius:12px;padding:8px;user-select:text;-webkit-user-select:text}
.wwm{margin:4px 0;word-break:break-word;white-space:pre-wrap;line-height:1.5}
.wwm.s{background:rgba(255,255,255,.08);border-radius:8px;padding:6px 10px}
.wwm.p{background:rgba(130,95,210,.28);border-radius:8px;padding:6px 10px}
.wwm .nm{font-weight:700;margin-right:8px}
.wwm.w .nm{color:var(--dn)}.wwm.m .nm{color:#7cc4ff}.wwm.d{opacity:.7}
.wwcb{display:flex;gap:6px;margin-top:6px}
.wwcb select{flex:none;max-width:38%}
.wwft{margin-top:10px}
.wwl{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}
.wwl>span{flex:none}.wwl select,.wwl .wwin{flex:1 1 55%;min-width:0;max-width:340px}
.wwrr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(128,128,128,.2)}
.wwrn{display:flex;flex-direction:column;min-width:0}
.wwst{display:flex;align-items:center;gap:8px;flex:none}.wwst b{min-width:1.5em;text-align:center}.wwst .b{padding:6px 12px}
.wwset{background:var(--panel);border-radius:12px;padding:8px 12px;margin:8px 0}
.wwhow{margin-top:14px}
/* 人狼: 対面モード・VC */
.wwhid .wwreal{display:none}.wwrole:not(.wwhid) .wwfake{display:none}
#wwpk{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.wwof .wwm.p{filter:blur(7px);-webkit-user-select:none;user-select:none}.wwof.wwshow .wwm.p{filter:none}
.wwtl{margin-top:8px}

/* Googleドライブ「対応済み」の表示 */
.gdb{display:inline-block;font-size:calc(12px*var(--fz,1));font-weight:bold;color:var(--up);border:1px solid var(--up);border-radius:10px;padding:0 6px;margin-left:4px;white-space:nowrap}

.snhd{display:flex;justify-content:center;gap:28px;max-width:760px;margin:8px auto;font-size:calc(18px*var(--fz,1))}
.snc{display:block;width:100%;aspect-ratio:17/15;touch-action:none;border-radius:10px;-webkit-user-select:none;user-select:none}
.snpad{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:760px;margin:12px auto}
.snpad>div{display:flex;gap:8px}
.snpad .b{width:84px;padding:14px 0;touch-action:none;-webkit-user-select:none;user-select:none}
.snpad ms-i{font-size:1.6em}
/* ヘビの操作ボタン: スマホ(縦)は画面の下、iPad・パソコン・横向きは画面の右がわに置いて、上が見切れないようにする(テトリスと同じ条件) */
@media(min-width:700px),(orientation:landscape) and (max-height:700px){
 .snw{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;width:100%}
 .snw>.dnbox{width:auto;max-width:none;flex:0 1 auto;min-width:0;margin:0}
 .snw .snc{width:auto;max-width:100%;height:min(560px,calc(100vh - 250px));height:min(560px,calc(100dvh - 250px));min-height:220px}
 .snw>.snpad{flex:0 0 auto;width:auto;max-width:none;margin:0;gap:10px}
 .snw>.snpad>div{gap:10px}
 .snw>.snpad .b{width:92px;padding:22px 0}
}

/* スマホで、名前とボタンが同じ行に並んで文字が1文字ずつ縦に潰れるのを防ぐ(ボタンつきの行は、入りきらなければボタンが下に回る) */
.r>span:first-child{min-width:0;overflow-wrap:anywhere}
.r:has(>.row){flex-wrap:wrap;align-items:flex-start}
.r:has(>.row)>span:first-child{flex:1 1 200px}
.r:has(>.row)>.row{flex:0 1 auto;margin-left:auto;justify-content:flex-end}
@supports not selector(:has(*)){.r{flex-wrap:wrap}.r>span:first-child{flex:1 1 200px}}
.snch{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:760px;margin:0 auto 6px}.snch:empty{display:none}.snch>span{padding:4px 10px;border-radius:999px;background:var(--panel);font-size:calc(14px*var(--fz,1))}.snch>div{flex:0 0 100%}

/* ===== ゲーム中のチャット: パネル表示(ゲームをおおわない) ===== */
:root{--dkw:min(380px,40vw);--dkh:46vh;--dkh:46dvh}
.dkbar{display:flex;gap:8px;justify-content:flex-end;align-self:stretch;flex:none}
#ov.dock{left:auto;right:0;top:0;bottom:0;width:var(--dkw);padding:0!important;background:transparent;pointer-events:none;align-items:stretch;justify-content:stretch;animation:none}
#ov.dock .card.big{pointer-events:auto;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:-1px 0 0 rgba(128,128,128,.45);padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));animation:none}
body.ovdock #app{margin-right:var(--dkw)}
body.ovdock #vcb,body.ovdock #vcv{left:calc((100vw - var(--dkw))/2)}
body.ovdock{--gmo:0px}
@media(orientation:portrait),(max-width:520px){
 #ov.dock{left:var(--sw);right:0;top:auto;bottom:0;width:auto;height:var(--dkh)}
 #ov.dock .card.big{border-radius:14px 14px 0 0;box-shadow:0 -1px 0 rgba(128,128,128,.45)}
 body.ovdock #app{margin-right:0;margin-bottom:var(--dkh)}
 body.ovdock #vcb,body.ovdock #vcv{left:50%}
 body.ovdock #vcb{bottom:calc(var(--dkh) + env(safe-area-inset-bottom) + 10px)}
 body.ovdock #vcv{bottom:calc(var(--dkh) + var(--vcbh,64px) + env(safe-area-inset-bottom,0px) + 20px)}
 body.ovdock{--gmo:var(--dkh)}
 body.ovdock #gmt{right:10px}
}
/* ゲーム画面の右下のボタン(チャット・大画面) */
#gmt{position:fixed;right:10px;bottom:calc(var(--vcbh,0px) + env(safe-area-inset-bottom,0px) + 12px + var(--gmo,0px) + var(--gmx,0px));z-index:8;display:flex;flex-direction:column;gap:8px}
#gmt[hidden]{display:none}
#gmt .b{width:46px;height:46px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4);position:relative}
#gmt .bdg{position:absolute;top:-4px;right:-4px}
body.ovdock #gmt{right:calc(var(--dkw) + 10px)}
body.vcon #gmt{margin-bottom:20px}
/* ゲームの大画面 */
body.gmbig{--sw:0px}
body.gmbig #sb,body.gmbig header{display:none}
body.gmbig #main{padding-left:0;padding-right:0}
body.gmbig #main.gm #gmw{padding:8px 10px 14px}
body.gmbig #gmw :not(.tetw)>.dnbox{max-width:none}
body.gmbig #gmw .gmbar,body.gmbig #gmw .snhd,body.gmbig #gmw .dnbt,body.gmbig #gmw .snpad,body.gmbig #gmw .dnr{max-width:none}
body.gmbig #gmw canvas[data-bg]{display:block;width:min(100%,calc((100vh - 170px)*var(--car,1)))!important;width:min(100%,calc((100dvh - 170px)*var(--car,1)))!important;max-width:100%!important;height:auto;margin-left:auto;margin-right:auto}

/* ===== 動画編集メニュー(ゲームの下) ===== */
#vew{display:none}
#main.ve #left,#main.ve #side{display:none}
#main.ve #vew{display:block;flex:1;min-height:0;overflow:auto;padding:12px 16px 28px;-webkit-overflow-scrolling:touch}
#vew .veh{max-width:860px;margin:0 auto}
#vew .veh-hero{border-radius:18px;padding:22px 20px;margin:6px 0 16px;background:linear-gradient(135deg,#6d28d9,#db2777 55%,#f59e0b);color:#fff;box-shadow:0 10px 30px rgba(120,40,200,.35)}
#vew .veh-hero h2{margin:0 0 6px;font-size:1.5em}
#vew .veh-hero p{margin:0 0 14px;opacity:.95;line-height:1.55}
#vew .veh-go{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#4c1d95;border:0;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#vew .veh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0 14px}
#vew .veh-c{background:var(--panel);border-radius:14px;padding:14px}
#vew .veh-c b{display:flex;align-items:center;gap:6px;margin-bottom:4px}
#vew .veh-c span{font-size:.88em;opacity:.8;line-height:1.5}
#vew .veh-sh{margin:16px 0 4px;font-weight:700}
.vx-fx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vx-fx button{border:0;border-radius:10px;padding:16px 4px 8px;color:#fff;font:inherit;font-size:.82em;cursor:pointer;text-align:center;outline:2px solid transparent}
.vx-fx button.on{outline-color:#fff}

.vx-rl i.bt{height:26px;width:1px;background:rgba(255,59,92,.4)}.vx-rl i.bt.bar{width:2px;background:rgba(255,59,92,.9)}
#vx input[type=number]{background:#1c1c20;color:#fff;border:1px solid #3a3a42;border-radius:8px;padding:8px;font:inherit}

.vx-fl{max-height:132px;overflow:auto;-webkit-overflow-scrolling:touch}.vx-fs{max-height:104px}
.vx-mdc{max-height:94%;overflow:auto}.vx-mdw{width:min(480px,100%)}
.vx-slc{flex:1;min-width:0;width:100%;background:#262629;color:#fff;border:0;border-radius:8px;padding:8px;font:inherit}
.vx-cp{position:relative;width:30px;height:30px;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden;border:2px solid #444;display:inline-block}
.vx-cp input{position:absolute;inset:-10px;width:60px;height:60px;opacity:0;cursor:pointer;border:0;padding:0}

/* オンライン表示(メッセージ画面): アイコンの右下の緑の丸 */
.avw{position:relative;display:inline-block;flex:none;line-height:0}
.pdot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--up);border:2px solid var(--bg);box-sizing:border-box}

.vx-hsv{display:flex;flex-direction:column;gap:8px;width:100%}
.vx-hsv .vx-hr{display:flex;align-items:center;gap:8px}
.vx-hsv .vx-hr small{color:#888;font-size:11px}
.vx-hsv .vx-sw{width:34px;height:34px;border-radius:8px;border:2px solid #666;flex:none}
.vx-hsv .vx-hex{width:90px;background:#222;border:1px solid #444;border-radius:8px;color:#fff;padding:6px;font:inherit;font-size:14px}
.vx-hsv input[type=range]{-webkit-appearance:none;appearance:none;height:24px;border-radius:12px;border:1px solid #555;flex:1;min-width:0;margin:0;touch-action:pan-y}
.vx-hsv input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #111;box-shadow:0 0 0 1px #999}
.vx-hsv input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #111}
.vx-mdc .vx-hsv{margin-top:8px}
.vx-ta{width:100%;box-sizing:border-box;background:#1c1c1f;color:#fff;border:1px solid #444;border-radius:10px;padding:8px;font:inherit;font-size:14px;resize:vertical}

/* SNS(ストーリー・ノートのタブ)とノート */
.sth-tabs{display:flex;gap:6px;margin:0 0 10px}
.sth-tabs button{flex:1;background:var(--panel,#262629);color:var(--tx);border:0;border-radius:999px;padding:8px 10px;font:inherit;cursor:pointer}
.sth-tabs button.on{background:var(--tx);color:var(--bg);font-weight:700}
.nt-form{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.nt-form textarea{width:100%;box-sizing:border-box;resize:none;padding:10px;border-radius:10px;border:1px solid rgba(128,128,128,.4);background:transparent;color:var(--tx);font:inherit}
.nt-ft{display:flex;align-items:center;gap:8px}
.nt-vs{display:flex;gap:4px;flex:1}
.nt-vs button{background:var(--panel,#262629);color:var(--tx);border:0;border-radius:999px;padding:6px 10px;font:inherit;font-size:calc(13px*var(--fz,1));cursor:pointer}
.nt-vs button.on{background:var(--tx);color:var(--bg)}
.nt-cnt{font-size:calc(12px*var(--fz,1));opacity:.7}
.nt-mine{border:1px solid rgba(128,128,128,.4);border-radius:12px;padding:10px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.nt-mine .nt-del{align-self:flex-start}
.nt-c{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.2)}
.nt-m{flex:1;min-width:0}
.nt-n{font-weight:700;font-size:calc(14px*var(--fz,1))}.nt-n small{font-weight:400;opacity:.65;margin-left:8px}
.nt-b{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.nt-lk{background:none;border:0;color:var(--tx);display:flex;align-items:center;gap:3px;cursor:pointer;font:inherit;opacity:.75}
.nt-lk.on{color:#ff3b5c;opacity:1}.nt-lk.on ms-i{font-variation-settings:'FILL' 1}

/* MADプロの使い方ガイド */
.vx-gd{background:#1c1c20;border:1px solid #3a3a42;border-radius:10px;padding:8px 10px}
.vx-gd summary{cursor:pointer;font-weight:700;color:#ffd60a}
.vx-gd .vx-note{margin:8px 0;line-height:1.6;color:#b4b4bc}
.vx-gl{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.55}

/* ===== ディスコ風のメッセージ画面(msgr.js) ===== */
#dc{position:fixed;inset:0;z-index:8;display:flex;background:var(--bg);color:var(--tx);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-sizing:border-box}
#dc[hidden]{display:none}
#dc button{font:inherit}
#dc .dcnav{display:flex;flex:none;height:100%;background:var(--bg2);z-index:3}
#dc .dcr{width:68px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;overflow-y:auto;scrollbar-width:none;background:rgba(0,0,0,.22)}
#dc .dcr::-webkit-scrollbar{display:none}
#dc .dcri{position:relative;flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--panel);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;padding:0;transition:border-radius .15s,background .15s}
#dc .dcri:hover,#dc .dcri.on{border-radius:16px;background:var(--up);color:var(--bg)}
#dc .dcri ms-i{font-size:24px}
#dc .dcbk{background:transparent;box-shadow:none}
#dc .dcadd{background:transparent;color:var(--up);font-size:26px;box-shadow:inset 0 0 0 2px var(--panel)}
#dc .dcri .bdg{position:absolute;right:-4px;bottom:-4px;min-width:18px;text-align:center;box-sizing:border-box;border:2px solid var(--bg2);font-size:11px;line-height:14px;padding:0 4px}
#dc .dcri.un::before{content:"";position:absolute;left:-11px;top:50%;width:6px;height:10px;margin-top:-5px;border-radius:0 6px 6px 0;background:var(--tx)}
#dc .dcsep{width:32px;height:2px;background:var(--panel);border-radius:1px;flex:none}
#dc .dcl{width:232px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--bg2);border-left:1px solid rgba(0,0,0,.2)}
#dc .dclh{flex:none;border-bottom:1px solid rgba(0,0,0,.3)}
#dc .dcsh,#dc .dcsh2{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:48px;box-sizing:border-box;padding:0 12px;background:none;border:0;color:var(--tx);cursor:pointer;text-align:left}
#dc .dcsh2{cursor:default;height:40px}
#dc .dcsh b,#dc .dcsh2 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dc .dcsh:hover{background:rgba(255,255,255,.05)}
#dc .dcla{flex:1;min-height:0;overflow-y:auto;padding:6px 8px}
#dc .dcsec{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 4px;color:var(--mut);font-size:calc(12px*var(--fz,1));font-weight:700;letter-spacing:.02em}
#dc .dcch,#dc .dcdmr,#dc .dcmem{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--mut);cursor:pointer;text-align:left;min-height:34px}
#dc .dcch:hover,#dc .dcdmr:hover,#dc .dcmem:hover{background:rgba(255,255,255,.06);color:var(--tx)}
#dc .dcch.on,#dc .dcdmr.on{background:rgba(255,255,255,.1);color:var(--tx)}
#dc .dcch.un,#dc .dcdmr.un{color:var(--tx);font-weight:700}
#dc .dci{width:20px;text-align:center;font-weight:700;flex:none;display:inline-flex;justify-content:center}
#dc .dcn2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dc .dcdmt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
#dc .dcpv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dc .dcch .x{padding:0 2px;line-height:1}
#dc .dcon{display:flex;flex-direction:column}
#dc .dcbl{display:flex;justify-content:space-between;align-items:center;padding:2px 8px;color:var(--mut)}
#dc .dcemp{padding:8px 6px;margin:0}
#dc .dcu{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(0,0,0,.25)}
#dc .dcmi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
#dc .dcmi b,#dc .dcmi .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dc .dcu .x{font-size:20px;padding:4px;color:var(--mut)}
#dc .dcmain{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
#dc .dch{flex:none;height:48px;display:flex;align-items:center;gap:6px;padding:0 10px 0 16px;border-bottom:1px solid rgba(0,0,0,.3);box-sizing:border-box}
#dc .dcht{flex:1;min-width:0;font-weight:700;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#dc .dcpp{cursor:pointer;gap:8px}
#dc .dcn3{overflow:hidden;text-overflow:ellipsis}
#dc .dch .x{font-size:20px;color:var(--mut);padding:6px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
#dc .dch .x:hover{background:rgba(255,255,255,.08);color:var(--tx)}
#dc .dch #vcj{font-size:14px;white-space:nowrap}
#dc .dcmb{display:none}
#dc .dcfeed,#dc .dcpf{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
#dc .dcms{flex:1;min-height:0;overflow-y:auto;padding:8px 0;overscroll-behavior:contain}
#dc .dcmo{text-align:center;padding:6px}
#dc .dcm{display:flex;gap:12px;padding:3px 16px;position:relative;word-break:break-word}
#dc .dcm:not(.par):hover{background:rgba(255,255,255,.03)}
#dc .dcm:not(.cp){margin-top:10px}
#dc .dcm.sel{background:rgba(255,255,255,.07)!important}
#dc .dcm.hl{background:rgba(245,200,75,.1);box-shadow:inset 3px 0 0 var(--pb)}
#dc .dca{flex:none;width:40px}
#dc .dca2{display:none;font-size:11px;text-align:right;line-height:22px}
#dc .dcm.cp:hover .dca2{display:block}
#dc .dcb{flex:1;min-width:0}
#dc .dch2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#dc .dcn{cursor:pointer}
#dc .dcn:hover{text-decoration:underline}
#dc .dcx{white-space:pre-wrap;line-height:1.45}
#dc .dcx a{color:var(--up)}
#dc .dcmt{background:rgba(120,140,255,.25);border-radius:4px;padding:0 3px}
#dc .dcmt.me{background:rgba(245,200,75,.3)}
#dc .dcrt{font-size:10px;padding:0 6px;border-radius:8px;background:var(--panel);color:var(--mut);align-self:center}
#dc .dcrt.r3{color:var(--pb)}#dc .dcrt.r2{color:var(--up)}
#dc .dcpn{color:var(--pb);align-self:center;font-size:14px}
#dc .dcthc{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 8px;border:0;border-radius:6px;background:rgba(255,255,255,.06);color:var(--up);cursor:pointer}
#dc .dcthc:hover{background:rgba(255,255,255,.12)}
#dc .dcact{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;padding:4px;background:var(--panel);border-radius:8px;animation:fadeUp .15s ease-out}
#dc .dcact .x{padding:4px 8px;color:var(--tx);font-size:calc(14px*var(--fz,1));border-radius:6px}
#dc .dcact .x:hover{background:rgba(255,255,255,.1)}
#dc .dcrd{text-align:right;font-size:11px}
#dc .dcdv{display:flex;align-items:center;gap:10px;margin:14px 16px 4px;color:var(--mut);font-size:12px}
#dc .dcdv::before,#dc .dcdv::after{content:"";flex:1;height:1px;background:rgba(128,128,128,.3)}
#dc .dcpar{border-bottom:1px solid rgba(128,128,128,.2);padding-bottom:6px}
#dc .dcjp{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:2;border-radius:16px;padding:6px 14px;box-shadow:0 4px 14px rgba(0,0,0,.4);background:var(--up);color:var(--bg)}
#dc .dcc{flex:none;position:relative;padding:0 16px 12px}
#dc .dcrp{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;background:var(--panel);border-radius:8px 8px 0 0}
#dc .dcrp[hidden],#dc .dcmn[hidden],#dc .dcjp[hidden],#dc .dcp[hidden],#dc .dcmo[hidden]{display:none}
#dc .dcrow{display:flex;align-items:flex-end;gap:4px;background:var(--panel);border-radius:10px;padding:4px 6px}
#dc .dcrp:not([hidden])+.dcmn+.dcrow{border-radius:0 0 10px 10px}
#dc .dcib,#dc .dcsd{flex:none;width:38px;height:38px;border:0;background:none;color:var(--mut);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;padding:0}
#dc .dcib:hover,#dc .dcsd:hover{background:rgba(255,255,255,.08);color:var(--tx)}
#dc .dcsd{color:var(--up)}
#dc .dcsd:disabled,#dc .dct:disabled{opacity:.5;cursor:not-allowed}
#dc .dct{flex:1;min-width:0;resize:none;border:0;background:transparent;box-shadow:none;color:var(--tx);font-size:16px;line-height:1.4;padding:9px 4px;max-height:140px;outline:none}
#dc .dcer{margin:4px 0 0;min-height:0}
#dc .dcer:empty{display:none}
#dc .dcmn{position:absolute;left:16px;right:16px;bottom:100%;margin-bottom:-8px;background:var(--bg2);border-radius:10px;box-shadow:0 0 0 1px rgba(128,128,128,.35),0 8px 24px rgba(0,0,0,.45);max-height:240px;overflow:auto;z-index:4;padding:4px}
#dc .dcmn button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;color:var(--tx);border-radius:6px}
#dc .dcmn button.on,#dc .dcmn button:hover{background:var(--panel)}
#dc .dcp{width:260px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--bg2);border-left:1px solid rgba(0,0,0,.3)}
#dc .dcp.dcpw,#dc.dcpw .dcp{width:360px}
#dc .dcph{flex:none;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 14px;border-bottom:1px solid rgba(0,0,0,.3);box-sizing:border-box}
#dc .dcph .x{font-size:20px;padding:6px}
#dc .dcp>.dcpb{flex:1;min-height:0;overflow-y:auto;padding:4px 8px}
#dc .dcp>.dcpf{padding:0;overflow:hidden}
#dc .dcmem .note{display:none}
#dc .dcpinm{padding:8px 4px;border-bottom:1px solid rgba(128,128,128,.2)}
#dc .dcpinm .x{margin-left:auto;font-size:12px}
/* ゲーム中: チャット画面を、ゲームの横(縦長・スマホは下)のパネルにする。せまい画面用のならびを、ここでも使う */
#dc.gdock{inset:0 0 0 auto;width:var(--dkw);box-shadow:-1px 0 0 rgba(128,128,128,.45)}
#dc.gdock .dcp{position:absolute;right:0;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);z-index:2;width:min(100%,320px);box-shadow:-8px 0 24px rgba(0,0,0,.45)}
#dc.gdock .dcp.dcpw,#dc.gdock.dcpw .dcp{width:min(100%,380px)}
#dc.gdock .dcnav{position:absolute;left:0;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);transform:translateX(-102%);transition:transform .2s;box-shadow:6px 0 24px rgba(0,0,0,.5);z-index:5}
#dc.gdock.nv .dcnav{transform:none}
#dc.gdock .dcl{width:min(232px,calc(88% - 68px))}
#dc.gdock.nv .dcsc{display:block;position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:4}
#dc.gdock .dcmb{display:inline-flex}
#dc.gdock .dcp{width:100%!important;max-width:none;z-index:3}
#dc.gdock .dcm{padding:3px 10px;gap:10px}#dc.gdock .dcc{padding:0 8px 8px}
#dc.gdock .dch{padding:0 4px 0 6px}
#dc.gdock .dch #vcj{font-size:12px;padding:6px}
@media(orientation:portrait),(max-width:520px){
 #dc.gdock{inset:auto 0 0 var(--sw);width:auto;height:var(--dkh);border-radius:14px 14px 0 0;box-shadow:0 -1px 0 rgba(128,128,128,.45)}
}

#dc .dcemp2{margin:auto;text-align:center;color:var(--mut);padding:24px}
#dc .dcemp2 ms-i{font-size:56px;opacity:.5}
#dc .dcsc{display:none}
/* 中くらいの画面: 右のパネルは重ねて表示 */
@media(max-width:1099px){#dc .dcp{position:absolute;right:0;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);z-index:2;width:min(100%,320px);box-shadow:-8px 0 24px rgba(0,0,0,.45)}#dc .dcp.dcpw,#dc.dcpw .dcp{width:min(100%,380px)}}
/* スマホ: 左の2列は引き出し、右のパネルは全面 */
@media(max-width:759px){
 #dc .dcnav{position:absolute;left:0;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);transform:translateX(-102%);transition:transform .2s;box-shadow:6px 0 24px rgba(0,0,0,.5);z-index:5}
 #dc.nv .dcnav{transform:none}
 #dc .dcl{width:min(232px,calc(88vw - 68px))}
 #dc.nv .dcsc{display:block;position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:4}
 #dc .dcmb{display:inline-flex}
 #dc .dcp{width:100%!important;max-width:none;z-index:3}
 #dc .dcm{padding:3px 10px;gap:10px}#dc .dcc{padding:0 8px 8px}
 #dc .dch{padding:0 4px 0 6px}
 #dc .dch #vcj{font-size:12px;padding:6px}
}
@media(prefers-reduced-motion:reduce){#dc .dcnav{transition:none}}
#dc .dcpf .dcls>.dcdv:first-child{display:none}

/* 自分のメッセージは右側に出す(ふきだし) */
#dc .dcm.mine{flex-direction:row-reverse}
#dc .dcm.mine .dca{display:none}
#dc .dcm.mine .dcb{flex:0 1 auto;max-width:min(80%,680px);margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
#dc .dcm.mine .dch2{justify-content:flex-end}
#dc .dcm.mine .dcx{background:rgba(79,209,165,.2);border-radius:14px 14px 4px 14px;padding:6px 12px;text-align:left}
#dc .dcm.mine .qt{text-align:left}
#dc .dcm.mine .rxs{justify-content:flex-end}
#dc .dcm.mine .dcact{justify-content:flex-end}
#dc .dcm.mine .pic{border-radius:12px}
/* ボイスチャンネル */
#dc .dcvch .dci ms-i{font-size:18px}
#dc .dcvch.on{color:var(--up)}
#dc .dcvch .note{margin-left:auto;font-size:12px}
#dc .dcvch .x{margin-left:auto}
#dc .dcvch .note+.x{margin-left:4px}
#dc .dcvus{padding:0 0 4px 30px}
#dc .dcvu{display:flex;align-items:center;gap:6px;padding:2px 6px;color:var(--mut);font-size:calc(13px*var(--fz,1))}
#dc .dclk{font-size:14px;color:var(--mut);margin-left:2px;flex:none}
#dc .dclg>ms-i{font-size:26px}
#dc .dclg.on>ms-i,#dc .dclg:hover>ms-i{color:#fff}
.lgc{display:inline-block;margin-left:6px;padding:0 8px;border-radius:10px;background:rgba(255,255,255,.1);font-size:.75em;font-weight:400;cursor:pointer;vertical-align:middle}
.lgc:hover{background:rgba(255,255,255,.2)}

/* ---- ラウンジの「募集」メッセージ ---- */
#dc .dcrcc{margin:4px 0;padding:10px 12px;border-radius:10px;background:rgba(245,200,75,.13);box-shadow:inset 3px 0 0 #f5c84b;max-width:420px;text-align:left}
#dc .dcrcc.on{background:rgba(79,209,165,.17);box-shadow:inset 3px 0 0 #4fd1a5}
#dc .dcrcc.end,#dc .dcrcc.gone{opacity:.55;background:rgba(128,128,128,.14);box-shadow:inset 3px 0 0 #888}
#dc .dcrch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#dc .dcrcs{font-size:.72em;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,.16)}
#dc .dcrct2{display:flex;align-items:center;gap:4px;margin:4px 0 6px;font-size:1.05em}
#dc .dcrcc .dcrcj{margin-top:2px}
#dc .dcrcp{border-radius:10px;background:rgba(128,128,128,.14);padding:10px 12px;margin-bottom:6px;display:flex;flex-direction:column;gap:8px}
#dc .dcrcp[hidden],#dc .dcrb[hidden]{display:none}
#dc .dcrcx{display:flex;align-items:center;justify-content:space-between}
#dc .dcrcr{display:flex;gap:8px;flex-wrap:wrap}
#dc .dcrcr label{display:flex;flex-direction:column;gap:2px;font-size:.8em;opacity:.9}
#dc .dcrcp select,#dc .dcrcp input{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid rgba(128,128,128,.4);background:var(--bg);color:var(--tx);max-width:100%}
#dc .dcrb.on{color:var(--tx);background:rgba(245,200,75,.25)}
#dc .dcrcn{font-size:.85em;opacity:.85;margin-bottom:6px}
#dc .dcrcb2{display:flex;gap:8px;flex-wrap:wrap}
#dc .dcrh{font-size:.9em;margin:6px 0;line-height:1.5}
#dc .dcrg{margin:4px 0}

/* 真オセロ: 固定石(金のふち)・穴・特殊な石えらび */
.otd.lk{box-shadow:inset 0 0 0 3px #f5c542,0 1px 2px rgba(0,0,0,.6)}
.otc.hole{background:#082915;cursor:default;box-shadow:inset 0 0 8px #000}
.snpk{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px}
.snk{flex:1 1 30%;min-width:96px;padding:10px 6px;font-size:calc(13px*var(--fz,1))}
.snk.on{background:var(--tx);color:var(--bg)}
.snk:disabled{opacity:.4}
.sndc{min-height:2.8em;margin:2px 0 6px;text-align:center}
.sndh{text-align:center;margin:0 0 8px}
.snrule p{margin:0 0 8px}

/* ===== RTA × ゲーム(ストップウォッチの大きい表示のかわりに、ゲーム画面を出す) ===== */
#main.rg #left{display:none}
#main.rg #gmw{display:block;flex:1;min-height:0;min-width:0;overflow:auto;padding:8px 10px 12px;-webkit-overflow-scrolling:touch}
#main.rg #gmw h2{margin:6px 0}
#rtc{display:flex;flex-direction:column;gap:8px;padding:10px 14px 4px}
#rtc .go{padding:14px}
#rtc .row{margin:0}
#rtc .row .b{flex:1 1 0;min-width:0}
#rtc .rtd{display:flex;align-items:center;gap:8px;min-height:1.4em;font-size:calc(14px*var(--fz,1));color:var(--mut)}
#rtc .rec{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--dn);animation:rtrec 1.1s ease-in-out infinite}
@keyframes rtrec{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#rtc .rec{animation:none}}
@media(min-width:700px){#main.rta #rtc{border-left:1px solid var(--panel);padding-left:14px}}
@media(max-width:699px){#main.rg #list{max-height:20vh}}
.rtv{width:100%;max-height:62vh;background:#000;border-radius:10px;display:block}
.rtg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.rtg .b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;text-align:center;line-height:1.25}
.rtg .b i{font-style:normal;font-size:1.8em;line-height:1}
.rtg .b.on{box-shadow:inset 0 0 0 2px var(--tx)}
.rtf label{display:block;margin:10px 0 4px;font-weight:700}
.rtf input[type=text],.rtf select,.rtf textarea{width:100%;text-align:left;font:inherit;box-sizing:border-box}
.rtf textarea{min-height:130px}
.rtx{padding:12px 0;border-bottom:1px solid var(--panel)}
.rtx .tp{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.9em;color:var(--mut);margin:4px 0}

/* View Transitions(画面切り替え)。動きを減らす設定のときは app.js 側で使わない */
@media(prefers-reduced-motion:no-preference){
::view-transition-old(root){animation:vtOut .14s ease both}
::view-transition-new(root){animation:vtIn .2s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
}

/* ファイルをドロップできる画面の目印(app.js のドラッグ&ドロップ) */
.dropping{outline:2px dashed var(--up);outline-offset:-6px}

/* ===== VC専用画面(ディスコード風) ===== */
#vcr{position:fixed;inset:0;z-index:21;background:var(--bg);color:var(--tx);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);animation:toastIn .25s cubic-bezier(.2,.9,.3,1.2)}
#vcr[hidden]{display:none}
body.vcroom{overflow:hidden}
body.vcroom #vcb{display:none}
#vrh{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(128,128,128,.25)}
#vrh .vrt{flex:1;min-width:0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vrmain{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px 12px}
#vrp{flex:1 1 auto;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px;overflow:auto;-webkit-overflow-scrolling:touch}
#vrmain[data-v="1"] #vrp{flex:none;flex-wrap:nowrap;justify-content:flex-start;align-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:8px}
.vpc{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:116px;padding:16px 12px 12px;border-radius:16px;background:rgba(128,128,128,.14)}
#vrmain[data-v="1"] .vpc{flex-direction:row;min-width:0;padding:6px 12px 6px 6px;border-radius:999px;gap:8px;flex:none}
.vpn{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#vrmain[data-v="1"] .vpn{max-width:110px;font-size:.9em}
.vpi{display:inline-flex;gap:4px;color:var(--dn);opacity:.95}
.vpi ms-i:not(:first-child){color:var(--mut)}
.vpc .av{transition:box-shadow .12s}
.vpc .av.sp{box-shadow:0 0 0 4px var(--up),0 0 16px var(--up)}
#vrc{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(128,128,128,.25)}
.vrb{width:54px;height:54px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center}
.vrb ms-i{font-size:26px}
.vrb.sm{width:40px;height:40px}.vrb.sm ms-i{font-size:24px}
.vrb.on{color:var(--up)}.vrb.off{color:var(--dn)}
.vrb.end{background:var(--dn);color:#fff;width:68px;border-radius:27px}
#vcb .vct{cursor:pointer}
#vrmain #vcv{position:relative;left:auto;bottom:auto;transform:none;width:auto;max-width:none;max-height:none;flex:1 1 0;min-height:0;z-index:auto;box-shadow:none;border-radius:14px;background:#000;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));grid-auto-rows:minmax(160px,1fr);align-content:stretch}
#vrmain #vcv[data-n="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:auto}
#vrmain #vcv .vt{aspect-ratio:auto;min-height:0}
#vrmain #vcv.big{position:relative;inset:auto;display:block;overflow:hidden;max-height:none;width:auto;padding:0;border-radius:14px}
#vrmain #vcv.big .vt.vcf{inset:0;width:auto;height:auto}
@media(max-width:480px){.vrb{width:48px;height:48px}.vrb.end{width:60px}#vrc{gap:8px}}

/* 通話バー: 動かせる小さな丸 */
#vcb{touch-action:none;-webkit-user-select:none;user-select:none}
#vcb:not([hidden]){animation:none}
#vcb.mini{padding:0;gap:0;border-radius:50%;width:52px;height:52px;flex-wrap:nowrap}
#vcb .vcmini{width:52px;height:52px;border-radius:50%;padding:0;position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;color:var(--up)}
#vcb .vcmini.off{color:var(--dn)}
#vcb .vcmini ms-i{font-size:26px}
#vcb .vcmini .vcmb{position:absolute;right:3px;bottom:3px;font-size:16px;background:var(--bg);border-radius:50%;color:var(--dn)}
#vcb.sp{box-shadow:0 0 0 3px var(--up),0 0 14px var(--up),0 8px 28px rgba(0,0,0,.55)}

/* ===== ディスコ風の追加 ===== */
#dc .dccb{margin:4px 0;padding:8px 10px;background:rgba(0,0,0,.35);border:1px solid rgba(128,128,128,.3);border-radius:6px;overflow-x:auto;white-space:pre;font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#dc .dccd{padding:1px 5px;background:rgba(0,0,0,.35);border-radius:4px;font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#dc .dcqt{display:block;padding-left:10px;border-left:4px solid rgba(128,128,128,.6);color:var(--mut)}
#dc .dcsp{background:#202225;color:transparent;border-radius:4px;padding:0 2px;cursor:pointer;-webkit-user-select:none;user-select:none}
#dc .dcsp.on{background:rgba(128,128,128,.25);color:inherit;-webkit-user-select:text;user-select:text}
#dc .dchv{display:none;position:absolute;right:14px;top:-16px;gap:2px;padding:2px;background:var(--panel);border:1px solid rgba(128,128,128,.35);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:2}
#dc .dchv .x{padding:4px 7px;border-radius:6px;color:var(--tx);line-height:1}
#dc .dchv .x:hover{background:rgba(255,255,255,.12)}
#dc .dchv ms-i{font-size:20px}
@media(hover:hover) and (pointer:fine){#dc .dcm:not(.par):hover>.dchv{display:flex}}
#dc .dcvs{flex:none;padding:8px 10px;border-top:1px solid rgba(128,128,128,.25);background:rgba(0,0,0,.18)}
#dc .dcvs[hidden]{display:none}
#dc .dcvs1{display:flex;align-items:center;gap:8px}
#dc .dcvg{color:var(--up)}
#dc .dcvt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
#dc .dcvt b{color:var(--up);font-size:.9em}
#dc .dcvl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dc .dcvs2{display:flex;gap:4px;margin-top:6px}
#dc .dcvb{flex:1;padding:6px 0;border-radius:6px;background:rgba(255,255,255,.07);color:var(--tx);display:inline-flex;align-items:center;justify-content:center}
#dc .dcvb:hover{background:rgba(255,255,255,.14)}
#dc .dcvb.on{color:var(--up)}#dc .dcvb.off,#dc .dcvb.end{color:var(--dn)}
#dc .dcvu .av{transition:box-shadow .12s}#dc .dcvu .av.sp{box-shadow:0 0 0 2px var(--up)}
/* 通話画面: 相手ごとの音量 */
.vpc{cursor:pointer}
#vrvol{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
#vrvol .vvb{width:min(100%,420px);display:flex;flex-direction:column;gap:12px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));background:var(--bg);border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.5)}
#vrvol input[type=range]{width:100%}

/* 通話中のP2Pチャット */
.vrb{position:relative}
#vrch{flex:none;display:flex;flex-direction:column;max-height:42%;border-top:1px solid rgba(128,128,128,.25);background:var(--bg2)}
#vrch[hidden]{display:none}
#vrch .vcl{flex:1 1 auto;min-height:64px;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:6px}
#vrch .vcm{max-width:85%;padding:6px 10px;border-radius:12px;background:var(--panel);word-break:break-word;white-space:pre-wrap;font-size:calc(14px*var(--fz,1))}
#vrch .vcm.me{align-self:flex-end;background:rgba(79,209,165,.22)}
#vrch .vcm b{display:block;font-size:11px;font-weight:500;color:var(--mut)}
#vrch .vcw{flex:none;display:flex;gap:8px;padding:8px 14px}
#vrch .vcw input{flex:1;min-width:0;width:auto;text-align:left;background:var(--panel);color:var(--tx);border:0;border-radius:18px;padding:10px 14px;font:inherit;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}

/* ===== 手書きノート(notes.js) ===== */
#ntw{display:none}
#main.nt #left,#main.nt #side{display:none}
#main.nt{padding-left:0;padding-right:0}
#main.nt #ntw{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;max-width:100%}
#ntw .nte{min-width:0}
#ntw .ntb{min-width:0;max-width:100%}
#ntw .ntl{flex:1;min-height:0;overflow:auto;padding:12px 16px 28px;-webkit-overflow-scrolling:touch}
#ntw .ntl[hidden],#ntw .nte[hidden]{display:none}
#ntw .ntlh{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
#ntw .ntlh h2{margin:0;flex:1}
#ntw .ntg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
#ntw .ntc{position:relative;background:var(--panel);border-radius:14px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
#ntw .ntc canvas{width:100%;height:auto;aspect-ratio:1000/1414;border-radius:6px;background:#fff;display:block}
#ntw .ntc b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ntw .ntx{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
#ntw .nte{display:flex;flex-direction:column;flex:1;min-height:0}
#ntw .ntb{display:flex;align-items:center;gap:4px;padding:6px 8px;overflow-x:auto;flex:none;background:var(--bg2);-webkit-overflow-scrolling:touch;scrollbar-width:none}
#ntw .ntb::-webkit-scrollbar{display:none}
#ntw .ntk{flex:none;min-width:40px;height:40px;border:0;border-radius:10px;background:var(--panel);color:var(--tx);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;font:inherit;cursor:pointer}
#ntw .ntk small{font-size:.72em;white-space:nowrap}
#ntw .ntk.on{background:var(--pb);color:#111}
#ntw .ntk:disabled{opacity:.35}
#ntw .ntt{flex:none;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;padding:0 4px}
#ntw .ntp{flex:none;font-size:.85em;opacity:.8;min-width:3.4em;text-align:center}
#ntw .nts{flex:none;width:1px;height:24px;background:var(--mut);opacity:.4;margin:0 4px}
#ntw .ntcl{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0}
#ntw .ntcl.on{border-color:var(--pb);box-shadow:0 0 0 2px var(--pb)}
#ntw .ntci{flex:none;width:34px;height:34px;padding:0;border:0;background:none}
#ntw .ntr{flex:none;width:110px;padding:0;accent-color:var(--pb);background:none}
#ntw .ntv{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg2);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#ntw .ntlay{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
#ntw .ntlay canvas{position:absolute;left:0;top:0;display:block;touch-action:none;max-width:none}
#ntw .ntlive,#ntw .ntpred{pointer-events:none}
#ntw .ntm{display:flex;flex-direction:column;gap:8px;margin:8px 0}
body.vcon #ntw .ntv{margin-bottom:calc(var(--vcbh,64px) + env(safe-area-inset-bottom,0px))}
/* ゴールダッシュ中は、ページ全体で拡大(ピンチ・ダブルタップ)を止める。スクロールはできる */
html:has(#gdc),html:has(#gdc) body{touch-action:pan-x pan-y}

/* ===== 着せ替えのとくちょう(fx.js) ===== */
.tc .tfx{display:block;margin-top:4px;font-size:calc(11px*var(--fz,1));opacity:.9}
body.fx-dot,body.fx-dot #t{font-family:"DotGothic16","Courier New",ui-monospace,monospace!important}
body.fx-dot #t{text-shadow:3px 3px 0 rgba(0,0,0,.55)}
body.fx-dot button,body.fx-dot input,body.fx-dot textarea,body.fx-dot select{font-family:inherit}
body.fx-dot .card,body.fx-dot .b,body.fx-dot .x,body.fx-dot .tc,body.fx-dot input,body.fx-dot textarea,body.fx-dot select{border-radius:0!important}
body.fx-dot .card{box-shadow:0 0 0 3px var(--tx),6px 6px 0 3px rgba(0,0,0,.55)}
body.fx-dot .b{box-shadow:0 3px 0 rgba(0,0,0,.55)}
body.fx-dot .b:active{transform:translateY(3px);box-shadow:none}
body.fx-dot{image-rendering:pixelated}
body.fx-dot::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}

/* ===== SNSの配信(live.js) ===== */
/* 部屋: 左に映像、右にコメント欄。スマホのたて画面だけ、映像の下にコメント欄 */
#lvr{position:fixed;inset:0;z-index:30;background:#000;color:#fff;display:flex}
#lvr[hidden]{display:none!important}
.lv-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.lv-hd{display:flex;align-items:center;gap:10px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:rgba(0,0,0,.65)}
.lv-ti{flex:1;min-width:0;display:flex;flex-direction:column}
.lv-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-sub{font-size:calc(12px*var(--fz,1));color:#b8c7c9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-sub.lv-warn{color:var(--pb,#f5c84b)}
.lv-vn{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:calc(15px*var(--fz,1))}
.lv-ib{display:inline-flex;align-items:center;gap:6px;background:rgba(128,128,128,.28);color:inherit;border:0;border-radius:999px;min-width:40px;height:40px;padding:0 10px;font:inherit;font-size:calc(13px*var(--fz,1));cursor:pointer;justify-content:center}
.lv-ib.on{background:var(--up,#4fd1a5);color:#04201a}
.lv-st{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
.lv-vd{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lv-fly{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lv-fl{position:absolute;left:100%;white-space:nowrap;color:#fff;font-weight:700;font-size:clamp(14px,2.3vw,26px);text-shadow:0 0 3px #000,0 0 3px #000,0 0 6px #000;animation:lvfl linear forwards;will-change:transform}
@keyframes lvfl{from{transform:translateX(0)}to{transform:translateX(calc(-1*var(--lvw,100vw) - 100%))}}
.lv-wait,.lv-no{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:rgba(0,0,0,.5);color:#fff}
.lv-wait[hidden],.lv-no[hidden],.lv-new[hidden]{display:none}
.lv-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:rgba(0,0,0,.65)}
.lv-bb{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:10px;padding:8px 12px;font:inherit;font-size:calc(13px*var(--fz,1));cursor:pointer}
.lv-bb.on{background:var(--up,#4fd1a5);color:#04201a}
.lv-bb.end{background:var(--dn,#ff6b57);color:#fff}
/* 右側のコメント欄 */
.lv-side{width:clamp(260px,28vw,360px);flex:none;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--bg);color:var(--tx);border-left:1px solid rgba(128,128,128,.35)}
.lv-sh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid rgba(128,128,128,.25)}
.lv-sh b{display:flex;align-items:center;gap:6px}
.lv-fb{height:32px;font-size:calc(12px*var(--fz,1))}
.lv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.lv-c{display:flex;gap:8px;align-items:flex-start;animation:lvin .25s ease-out}
@keyframes lvin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lv-a{flex:none;line-height:0}
.lv-t{min-width:0;font-size:calc(14px*var(--fz,1));line-height:1.4;overflow-wrap:anywhere}
.lv-t b{color:var(--mut);font-weight:600;margin-right:6px}
.lv-c.me .lv-t b{color:var(--up)}
.lv-h{font-style:normal;font-size:.75em;background:var(--dn,#ff6b57);color:#fff;border-radius:4px;padding:1px 5px;margin-right:6px}
.lv-b{display:inline}
.lv-new{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;background:var(--up,#4fd1a5);color:#04201a;border:0;border-radius:999px;padding:6px 14px;font:inherit;font-size:calc(12px*var(--fz,1));cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.lv-in{display:flex;gap:6px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(128,128,128,.25)}
.lv-in input{flex:1;min-width:0}
@media (max-width:640px) and (orientation:portrait){
 #lvr{flex-direction:column}
 .lv-main{flex:1 1 56%}
 .lv-side{width:auto;flex:1 1 44%;border-left:0;border-top:1px solid rgba(128,128,128,.35)}
 .lv-sh{padding-top:10px}
 .lv-bar{padding-bottom:8px}
}
/* 配信中に画面を小さくしたときの目印 */
#lvpill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:29;display:flex;align-items:center;gap:6px;background:var(--dn,#ff6b57);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45)}
#lvpill i{width:8px;height:8px;border-radius:50%;background:#fff;animation:lvbl 1.2s infinite}
@keyframes lvbl{50%{opacity:.25}}
/* SNSの「配信」タブ */
.lvt-top .note{margin:8px 0 0}
.lvt-list{display:flex;flex-direction:column;gap:8px}
.lvt-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel,#262629);color:var(--tx);border:0;border-radius:12px;padding:10px;font:inherit;cursor:pointer}
.lvt-av{position:relative;flex:none;line-height:0}
.lvt-on{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--dn,#ff6b57);border:2px solid var(--panel,#262629)}
.lvt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lvt-tx b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvt-tx small{color:var(--mut);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.lvt-tx small ms-i{font-size:1em}
.lvt-n{flex:none;display:flex;align-items:center;gap:4px;color:var(--mut);font-size:calc(13px*var(--fz,1))}
/* 配信をはじめる画面 */
#lvs{position:fixed;inset:0;z-index:31;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.lvs-card{background:var(--bg);color:var(--tx);border-radius:12px;width:min(440px,100%);max-height:90dvh;overflow:auto;padding:16px;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
.lvs-card h3{margin:0 0 8px}
.lvs-card label{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.lvs-card label.lvs-ck{flex-direction:row;align-items:center;gap:8px}
.lvs-bt{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* 配信を小さくして、ゲームなどをしているときに、画面のすみに出る新しいコメント */
#lvfc{position:fixed;left:12px;bottom:calc(56px + env(safe-area-inset-bottom));z-index:29;display:flex;flex-direction:column;gap:4px;max-width:min(72vw,380px);pointer-events:none}
.lvfc-i{background:rgba(0,0,0,.62);color:#fff;border-radius:10px;padding:5px 10px;font-size:13px;line-height:1.35;word-break:break-all;animation:lvfcin .25s ease-out;transition:opacity .4s}
.lvfc-i.out{opacity:0}
.lvfc-i b{opacity:.75;margin-right:4px}
@keyframes lvfcin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lvfc-i{animation:none}}

/* コメントの位置(data-pos)と文字の大きさ(data-sz)。ゲームの大画面よりも前に出す */
#lvfc{z-index:35;max-width:min(82vw,460px)}
#lvfc[data-pos]{left:auto;right:auto;top:auto;bottom:auto}
#lvfc[data-pos=tr]{top:calc(12px + env(safe-area-inset-top));right:12px;align-items:flex-end}
#lvfc[data-pos=tl]{top:calc(12px + env(safe-area-inset-top));left:12px;align-items:flex-start}
#lvfc[data-pos=br]{bottom:calc(12px + env(safe-area-inset-bottom));right:12px;align-items:flex-end}
#lvfc[data-pos=bl]{bottom:calc(56px + env(safe-area-inset-bottom));left:12px;align-items:flex-start}
#lvfc[data-sz="0"]{--fs:14px}#lvfc[data-sz="1"]{--fs:18px}#lvfc[data-sz="2"]{--fs:24px}
.lvfc-i{background:rgba(0,0,0,.78);font-size:var(--fs,18px);font-weight:600;text-shadow:0 0 2px #000;padding:6px 12px;border-radius:12px}
.lvfc-i b{color:#ffd3e0;opacity:1}

/* フレンドの配信のお知らせ(live.js) */
#lvfr{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:29;display:flex;align-items:center;gap:6px;background:var(--dn,#ff6b57);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45);max-width:min(70vw,320px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lvfr i{flex:none;width:8px;height:8px;border-radius:50%;background:#fff;animation:lvbl 1.2s infinite}
#lvfrp{position:fixed;right:12px;bottom:calc(58px + env(safe-area-inset-bottom));z-index:29;display:flex;flex-direction:column;gap:6px;max-width:min(86vw,340px);max-height:50vh;overflow:auto;background:var(--panel,#262629);border-radius:14px;padding:8px;box-shadow:0 4px 18px rgba(0,0,0,.5)}
#lvfrp button{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;color:var(--tx);border:0;border-radius:10px;padding:6px;font:inherit;cursor:pointer}
#lvfrp button:hover{background:rgba(128,128,128,.2)}
.lvfr-toast{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:91;display:flex;align-items:center;gap:10px;width:min(94vw,440px);box-sizing:border-box;background:var(--panel,#262629);color:var(--tx);border:2px solid var(--dn,#ff6b57);border-radius:16px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.55);animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
.lvfr-toast .lvt-tx{flex:1;min-width:0}
.lvfr-toast .lvt-tx small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvt-fr{box-shadow:inset 0 0 0 2px var(--dn,#ff6b57)}
.lvt-live{font-style:normal;font-size:.7em;font-weight:800;background:var(--dn,#ff6b57);color:#fff;border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:middle}
.sth-tabs button.lv-has{position:relative}
.sth-tabs button.lv-has::after{content:"";position:absolute;top:5px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--dn,#ff6b57);animation:lvbl 1.2s infinite}

/* 通話バーの整理: ふだん出すボタンには名前を付け、ほかは「もっと」のメニューにまとめる */
#vcb .vcib{flex-direction:column;gap:2px;min-width:56px}
#vcb .vcib .vcl{font-size:11px;line-height:1.1;white-space:nowrap}
#vcb .vcib ms-i{font-size:24px}
.vcmw{position:relative;display:inline-flex}
.vcmore{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:30;width:min(88vw,340px);max-height:min(60vh,460px);overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--bg);color:var(--tx);border-radius:16px;padding:8px;box-shadow:0 0 0 1px rgba(128,128,128,.4),0 8px 28px rgba(0,0,0,.55)}
.vcmore.dn{bottom:auto;top:calc(100% + 12px)}
.vcmore[hidden]{display:none}
.vcmg{font-size:12px;font-weight:700;opacity:.65;margin:8px 6px 2px}
.vcmg:first-child{margin-top:2px}
.vcmi{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;box-sizing:border-box;text-align:left;padding:11px 12px;border-radius:10px;font:inherit}
.vcmi ms-i{font-size:22px;flex:none}
.vcmi span{min-width:0;overflow-wrap:anywhere}
.vcmi.on{color:var(--up)}.vcmi.off{color:var(--dn)}

/* 一緒に配信(ゲスト参加)の申請の知らせ */
#lvgq{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:92;display:flex;flex-direction:column;gap:8px;width:min(94vw,460px)}
.lvg-c{display:flex;align-items:center;gap:10px;box-sizing:border-box;background:var(--panel,#262629);color:var(--tx);border:2px solid var(--up,#4fd1a5);border-radius:16px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.55);animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
.lvg-t{flex:1;min-width:0;font-size:calc(14px*var(--fz,1));line-height:1.35;overflow-wrap:anywhere}
.lvg-c .b{flex:none;white-space:nowrap}