/*
 * LITTLE STREAMING のスタイル。外部ライブラリは使わない(サイトの作法)。
 * 暗い地に映像だけが光っている見え方。映像の下に「いま映っているもの」と「このあと」。
 */

:root {
  --bg: #0b0e12;
  --bg-raised: #141920;
  --bg-sunken: #080a0d;
  --line: #232a34;
  --text: #e7eaf0;
  --text-dim: #9aa3b1;
  --text-faint: #6b7483;
  --accent: #8fd3ff;
  --live: #ff5a5a;
  --warn: #ffd479;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: #b9e4ff; }

.shell { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

.site-header { border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .06em; }
.site-header nav { display: flex; align-items: center; gap: 1rem; font-size: .92rem; }
.site-header nav a { white-space: nowrap; }
#fullscreen-btn { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--radius); padding: .1rem .5rem; cursor: pointer; }

main { padding: 1rem 0 2.5rem; }

.screen { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.screen video { display: block; width: 100%; height: 100%; background: #000; }
.pause-note {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  background: rgba(8, 10, 13, .86); color: var(--text-dim); z-index: 2;
}
.pause-note[hidden] { display: none; }
/*
 * 自動再生が止められた端末(iPhone の低電力モード等)で、映像の上端に出す「タップして再生」の文字だけ。
 * 再生ボタンは端末の標準のもの(video の controls)を使うので自前では描かず、下の標準の操作を邪魔しないよう操作は受けない
 */
.tap-play {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 1; max-width: calc(100% - 1.2rem);
  padding: .2rem .8rem; border-radius: 999px; background: rgba(8, 10, 13, .72); color: var(--text); font-size: .88rem; line-height: 1.5;
  text-align: center; pointer-events: none;
}
.tap-play[hidden] { display: none; }

/* 映像の下の段: 左に LIVE(押すと最新へ)・見ている人数・遅れ、右端に音のボタン */
.bar { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 1.2rem; color: var(--text-dim); font-size: .9rem; }
.status {
  display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .7rem; font: inherit; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim); background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.status:hover { border-color: var(--text-faint); color: var(--text); }
.status .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-faint); }
.status.live { color: var(--text); }
.status.live .dot { background: var(--live); box-shadow: 0 0 .5rem var(--live); }
.status.live.behind .dot { background: var(--text-faint); box-shadow: none; }
.viewers { font-variant-numeric: tabular-nums; }
.viewers[hidden] { display: none; }
.delay { color: var(--text-faint); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mute {
  margin-left: auto; flex: none; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; line-height: 1;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.mute:hover { border-color: var(--text-faint); }
.mute[aria-pressed="false"] { box-shadow: 0 0 0 2px rgba(143, 211, 255, .35); }

.panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .9rem; }
.panel h2 { margin: 0 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--text-dim); letter-spacing: .05em; }
.panel .main { font-size: 1.15rem; font-weight: 700; }
.panel .sub { color: var(--text-dim); font-size: .92rem; overflow-wrap: anywhere; }
.panel .links { margin-top: .3rem; font-size: .92rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.panel .empty { color: var(--text-faint); }

.upcoming { list-style: none; margin: 0; padding: 0; }
.upcoming li { display: flex; gap: .8rem; padding: .15rem 0; }
.upcoming .time { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 3.2em; }

.site-footer { border-top: 1px solid var(--line); color: var(--text-faint); font-size: .85rem; padding: 1.2rem 0 2rem; }

.prose h1 { font-size: 1.5rem; margin: 1.2rem 0 .6rem; }
.prose h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.prose p, .prose li { color: var(--text); }
.prose .dim { color: var(--text-dim); }
.prose pre { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; overflow-x: auto; font-size: .82rem; line-height: 1.5; }

@media (max-width: 560px) {
  .site-header nav { gap: .7rem; font-size: .85rem; }
  .brand { letter-spacing: .03em; }
  .panel .main { font-size: 1.02rem; }
}
@media (max-width: 360px) {
  .site-header .shell { gap: .6rem; }
  .site-header nav { gap: .5rem; font-size: .8rem; }
}