/* SNSと部屋制チャット */
/* ---- ひろば(SNS) ---- */
#snstabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--line)}
#snstabs button{flex:1;background:none;border:0;color:var(--dim);font-weight:800;font-size:13px;padding:11px 4px;cursor:pointer;position:relative;white-space:nowrap}
#snstabs button[aria-pressed="true"]{color:var(--tx)}
#snstabs button[aria-pressed="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:var(--irm);border-radius:2px}
.badge{background:var(--bad);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 6px;margin-left:4px}
.navbadge{display:inline-block;background:var(--bad);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px;margin-left:4px;vertical-align:top}
.av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;color:#0d0f14;font-size:16px;overflow:hidden}
.av img{width:100%;height:100%;image-rendering:pixelated}
.pst{display:flex;gap:11px;padding:14px 4px;border-bottom:1px solid var(--line)}
.pst .body{flex:1;min-width:0}
.pst .ph{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px}
.pst .ph b{font-weight:800}
.pst .ph .hd{color:var(--dim);font-weight:400}
.pst .ph .tm{color:var(--dim);font-size:12px;margin-left:auto}
.pst .txt{font-size:16px;line-height:1.7;margin:5px 0 2px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pst .txt img{width:22px;height:22px;image-rendering:pixelated}
.pst .rpx{color:var(--dim);font-size:11.5px;margin-bottom:4px}
.reacts{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.reacts .rc{background:var(--sur2);border:1px solid var(--line2);border-radius:999px;font-size:12.5px;padding:2px 9px;color:var(--tx);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.reacts .rc img{width:16px;height:16px;image-rendering:pixelated}
.acts{display:flex;gap:4px;margin-top:6px}
.acts button{background:none;border:0;color:var(--dim);font-size:12.5px;font-weight:700;cursor:pointer;padding:5px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.acts button:hover{background:var(--sur2);color:var(--tx)}
.acts button.on[data-act="like"]{color:var(--bad)}
.acts button.on[data-act="repost"]{color:var(--good)}
.follow-btn{margin-left:6px;background:var(--tx);color:var(--bg);border:0;border-radius:999px;font-size:11.5px;font-weight:800;padding:3px 12px;cursor:pointer}
.follow-btn.on{background:none;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line2)}
#trends{padding:14px 16px}
#trends .th{font-weight:800;font-size:13px;margin-bottom:8px}
#trends .tags{display:flex;flex-wrap:wrap;gap:6px}
.trend{background:var(--sur2);border:0;border-radius:999px;color:var(--ok);font-size:12.5px;font-weight:700;padding:5px 12px;cursor:pointer}
.trend:hover{color:var(--tx)}
.trend s{text-decoration:none;color:var(--dim);font-size:11px;margin-left:5px}
#thread .back{color:var(--dim);font-size:12.5px;font-weight:700;background:none;border:0;cursor:pointer;padding:6px 2px}
.reactbar{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;background:var(--sur2);border:1px solid var(--line2);border-radius:10px;padding:6px}
.reactbar button{background:var(--sur);border:1px solid var(--line2);border-radius:8px;font-size:16px;padding:3px 9px;cursor:pointer;line-height:1}
.reactbar button img{width:18px;height:18px;image-rendering:pixelated;display:block}
.avpick{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.avpick button{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid transparent;background:var(--sur2);cursor:pointer;padding:0;display:grid;place-items:center;font-weight:800;color:#0d0f14}
.avpick button[aria-pressed="true"]{border-color:var(--irm)}
.avpick img{width:100%;height:100%;image-rendering:pixelated}
/* ---- 部屋制チャット ---- */
#roombar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:12px}
#roombar::-webkit-scrollbar{display:none}
.room{flex:0 0 auto;background:var(--sur);border:1px solid transparent;border-radius:10px;padding:8px 13px;cursor:pointer;text-align:left;position:relative;white-space:nowrap}
.room[aria-pressed="true"]{border-color:var(--irm)}
.room .rn{display:block;color:var(--tx);font-weight:800;font-size:13px}
.room .rd{display:block;font-size:11px;color:var(--dim)}
.room .ub{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px}
.rhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.rhead .rt{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 細い画面では、名前を1行に独占させてボタンを下へ落とす。
   そうしないと「濃さの部屋」のような名前が単語の途中で折れる。 */
@media (max-width:560px){
 .rhead .rt{flex:1 0 100%}
 .rhead>button{margin-left:0!important}
 .roomadmin{margin-left:0}
}
#msgs{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px}
#sugg{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;min-height:32px}
.empty2{color:var(--faint);font-size:12.5px;padding:5px 2px}
.modetoggle{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.modetoggle button{background:none;border:0;color:var(--dim);font-weight:700;font-size:12px;padding:6px 13px;cursor:pointer}
.modetoggle button[aria-pressed="true"]{background:var(--sur2);color:var(--tx)}
/* ---- ダッシュボード / ループ要素 ---- */
#dash{display:grid;gap:12px;margin-bottom:24px}
.dcard{background:var(--sur);border-radius:14px;padding:16px}
.dhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dhead .dt{font-weight:800;font-size:14px}
.dhead .more{margin-left:auto;color:var(--dim);font-size:12px;font-weight:700;background:none;border:0;cursor:pointer}
.lvrow{display:flex;align-items:center;gap:12px}
.lvbadge{width:48px;height:48px;flex:0 0 auto;border-radius:12px;background:var(--irm);color:#181203;font-weight:800;display:grid;place-items:center;font-size:11px;line-height:1;text-align:center}
.lvbadge b{font-size:18px;display:block;margin-top:1px}
.xpwrap{flex:1;min-width:0}
.xpbar{height:8px;background:var(--sur2);border-radius:4px;overflow:hidden;margin-top:5px}
.xpbar>div{height:100%;background:linear-gradient(90deg,var(--irm),var(--good))}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--sur2);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--tx)}
.chip b{color:var(--irm)}
.on-dot{color:var(--good)}
.evt{background:linear-gradient(90deg,rgba(255,194,71,.14),transparent);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.evt b{color:var(--irm)}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .mi{flex:1;min-width:0}
.mrow .mi b{display:block;font-size:13.5px}
.mbar{height:5px;background:var(--sur2);border-radius:3px;overflow:hidden;margin-top:5px}
.mbar>div{height:100%;background:var(--ok)}
.mrow .mc{font-size:11.5px;color:var(--dim);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.lbrow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.lbrow .rk{width:24px;color:var(--dim);font-weight:800;text-align:right}
.lbrow.me{color:var(--irm);font-weight:800}
.lbrow .sc{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}
.mreact{background:none;border:0;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 6px;align-self:center;flex:0 0 auto}
.mreact:hover{color:var(--tx)}
.msg .rr{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.msg .rr .rc{background:var(--sur);border:1px solid var(--line2);border-radius:999px;font-size:12px;padding:1px 8px;cursor:pointer;display:inline-flex;gap:3px;align-items:center}
.msg .rr .rc img{width:14px;height:14px;image-rendering:pixelated}