/* =================================================================
   ぷれち鯖のおともだち（friends.html / friends-multi.html）
   style.css（意匠「青いデスクトップ」）の上に足す分だけ。色・枠・影は style.css の変数を使う。
   ================================================================= */

/* style.css は PC 幅で body をスクロール禁止にしている（二分割レイアウト用）。このページは縦に流す */
body.fr-body{ overflow: auto; }

.fr-page{
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) 20vh;
}
.fr-page .site-head-row{ gap: var(--s3); }

.fr-updated{
  margin: var(--s1) 0 0;
  font-family: var(--disp);
  font-size: 11px;
  color: var(--ink-soft);
}
.fr-updated.warn{ color: var(--danger); }

.fr-manners{
  display: inline-block;
  margin: var(--s2) 0 0;
  padding: 2px var(--s2);
  border: 1px solid var(--danger);
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}

.fr-muted{ margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ---------- ウィンドウ風の箱 ---------- */
.fr-win{
  border: var(--line) solid var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.fr-win .frame-titlebar .fr-badge{ margin-left: var(--s1); }

/* ---------- 今マイクラ中 ---------- */
.fr-now-body{ padding: var(--s3); }
.fr-now-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fr-now-item{
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.fr-now-thumb{
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: var(--line) solid var(--ink);
  background: var(--bg-2);
  overflow: hidden;
}
.fr-now-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-now-thumb .fr-badge{ position: absolute; left: 6px; top: 6px; }
.fr-now-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-now-name{
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--disp);
  font-size: 13px;
}
.fr-now-title, .fr-stream-title{
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fr-now-title:hover, .fr-stream-title:hover{ text-decoration: underline; }
.fr-now-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s2);
  font-size: 12px;
  color: var(--ink-soft);
}
.fr-multi-btn{
  display: block;
  margin-top: var(--s3);
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
}

/* ---------- バッジ ---------- */
.fr-badge{
  flex: none;
  font-family: var(--disp);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--ink);
  white-space: nowrap;
  background: var(--bg);
  color: var(--ink-soft);
}
.fr-badge.live{ background: #D8454A; color: #fff; border-color: #8E2227; }
.fr-badge.soon{ background: #FFE08A; color: var(--ink); }
.fr-badge.sched{ background: var(--accent); color: var(--ink); }
.fr-badge.off{ border-color: var(--rule); color: var(--ink-weak); }

/* ---------- カード一覧 ---------- */
.fr-skill-note{
  margin: 0 0 var(--s2);
  font-size: 11px;
  color: var(--ink-weak);
  text-align: right;
}
.fr-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fr-card{ display: flex; flex-direction: column; min-width: 0; }
.fr-card.is-live{ border-color: #8E2227; }
.fr-card-body{
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1 1 auto;
}
.fr-card-head{ display: flex; align-items: center; gap: var(--s3); }
.fr-card-id{ display: flex; flex-direction: column; min-width: 0; }
.fr-name{ font-family: var(--disp); font-size: 18px; line-height: 1.2; }
.fr-reading{ font-size: 11px; color: var(--ink-soft); }
.fr-playstyle{
  align-self: flex-start;
  margin-top: 3px;
  font-family: var(--disp);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--accent);
  border: 1px solid var(--blue);
}
.fr-bio{ margin: 0; font-size: 13px; line-height: 1.7; }

.fr-icon{
  flex: none;
  border: var(--line) solid var(--ink);
  background: var(--accent-weak);
  object-fit: cover;
}
.fr-icon.lg{ width: 64px; height: 64px; }
.fr-icon.sm{ width: 22px; height: 22px; border-width: 1px; }
.fr-icon-empty{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  color: var(--accent-deep);
}
.fr-icon-empty.lg{ font-size: 26px; }
.fr-icon-empty.sm{ font-size: 12px; }

/* ステータス：カードのボタン */
.fr-status-btn{
  align-self: flex-start;
  font-family: var(--disp);
  font-size: 12px;
  padding: 3px 8px;
  background: var(--bg);
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  box-shadow: 2px 2px 0 var(--accent-deep);
  cursor: pointer;
}
.fr-status-btn small{ margin-left: 4px; font-size: 10px; }
.fr-status-btn:hover:not(:disabled){ background: var(--accent-weak); }
.fr-status-btn:disabled{ color: var(--ink-soft); border-color: var(--rule); box-shadow: none; cursor: default; }
.fr-status-btn:active:not(:disabled){ transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--accent-deep); }

/* ステータス：ポップアップ */
.fr-status-dlg{
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
}
.fr-status-dlg::backdrop{ background: rgba(21, 34, 58, .45); }
.fr-status-close{
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.fr-status-body{ padding: var(--s3) var(--s4) var(--s4); }
.fr-status-body dl{
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--s3);
  font-size: 13px;
  line-height: 1.6;
}
.fr-status-body dt{ font-family: var(--disp); color: var(--accent-deep); }
.fr-status-body dd{ margin: 0; }
.fr-st-levels{ margin-top: var(--s3) !important; padding-top: var(--s3); border-top: 1px dashed var(--rule); align-items: center; }
.fr-picks{ letter-spacing: 1px; }
.fr-picks .off{ opacity: .2; filter: grayscale(1); }
.fr-st-unknown{ color: var(--ink-soft); }
.fr-st-note{ margin: var(--s3) 0 0; font-size: 11px; color: var(--ink-weak); }

.fr-stream{
  padding: var(--s2);
  background: #FDECEC;
  border: 1px solid #E3A7A9;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-stream.sched{ background: var(--accent-weak); border-color: var(--rule); }
.fr-sched-time{ font-family: var(--disp); font-size: 12px; color: var(--accent-deep); }
.fr-game{ color: var(--ink); }
.fr-viewers{ font-variant-numeric: tabular-nums; color: var(--ink); }
.fr-viewers small{ font-size: 11px; color: var(--ink-soft); }
.fr-pf{
  font-family: var(--disp);
  font-size: 11px;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.fr-pf.yt{ color: #B8262B; }
.fr-pf.tw{ color: #6441A5; }

.fr-links{
  margin: auto 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-family: var(--disp);
  font-size: 12px;
}
.fr-links a{ color: var(--accent-deep); text-decoration: none; border-bottom: 1px dashed var(--blue); }
.fr-links a:hover{ opacity: .75; }

/* =================================================================
   マルチ視点（friends-multi.html）
   ================================================================= */
.mv-page{ max-width: none; padding: var(--s3) var(--s3) var(--s5); }

.mv-pick{
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-size: 13px;
}
.mv-pick-lead{ font-family: var(--disp); font-size: 12px; color: var(--ink-soft); }
.mv-pick label{ display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mv-pick .mc{ font-size: 11px; }

.mv-grid{
  margin-top: var(--s3);
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .mv-grid.n2, .mv-grid.n3, .mv-grid.n4{ grid-template-columns: repeat(2, 1fr); }
  .mv-grid.n5plus{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  .mv-grid.n5plus{ grid-template-columns: repeat(3, 1fr); }
}
.mv-tile{ min-width: 0; }
.mv-tile.is-audio{ border-color: var(--accent-deep); box-shadow: 3px 3px 0 var(--accent-deep); }
.mv-screen{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E1726;
}
.mv-screen > div, .mv-screen iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-msg{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4);
  color: #E3F0FC;
  font-size: 13px;
  text-align: center;
}
.mv-msg a{ color: var(--accent); }
.mv-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  padding: 6px 8px;
  border-top: var(--line) solid var(--ink);
  font-size: 12px;
}
.mv-bar .mv-title{
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.mv-btn{
  font-size: 11px;
  padding: 5px 8px;
}
.mv-btn[aria-pressed="true"]{
  background: var(--accent-deep);
  color: #fff;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.25);
}
.mv-bar a{ font-family: var(--disp); font-size: 11px; color: var(--accent-deep); }
.mv-empty{ margin-top: var(--s4); }

/* ⛏ などの記号は DotGothic16 だと崩れるので絵文字フォントで出す */
.fr-emo{
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
}