:root{
  --bg: radial-gradient(1200px 800px at 15% 0%, #1e2a4f 0%, #0e1424 50%, #090d15 100%);
  --panel: rgba(22,28,46,.66);
  --panel-solid: #12182b;
  --accent: #23d9ff;
  --accent-2: #7af1ff;
  --text: #eaf4ff;
  --muted: #9fb0c9;
  --border: #2b3a55;
  --ok: #36d399;
  --warn: #ffb86b;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text); background: var(--bg) no-repeat fixed;
  font: 15px/1.6 system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* Top bar */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(10,14,26,.7), rgba(10,14,26,.35));
  backdrop-filter: blur(8px); position: sticky; top:0; z-index:10;
}
.brand{ font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.brand .dot{ width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent);
}
.top-actions{ display:flex; gap:8px; align-items:center; }
.ghost{
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); padding:8px 12px; border-radius:14px; font-weight:700; cursor:pointer;
}

/* Pill */
.pill{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--border); background: rgba(255,255,255,.06);
}
.pill-ok{ color:#072; border-color:#0b5; background: rgba(54,211,153,.12); }
.pill-warn{ color:#6b3b00; border-color:#ffb86b; background: rgba(255,184,107,.15); }

/* Layout */
.container{ max-width:1180px; margin: 18px auto; padding: 0 16px; }

.player-wrap{
  position:relative; border:1px solid var(--border); border-radius:20px;
  overflow:hidden; background:#090e18;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.player-wrap video{ width:100%; display:block; background:#000; }

.hidden-video{ background: transparent; border:none; box-shadow:none; }
.hidden-video video{ display:none; }

.overlay{ position:absolute; inset:0; pointer-events:none; overflow:hidden; --lanes:10; z-index:2; }
.stat{
  position:absolute; left:10px; bottom:10px; padding:6px 10px;
  background: rgba(9,13,24,.6); border:1px solid var(--border); border-radius:10px;
  font-size:12px; color: var(--muted); z-index:3;
}

/* Control panel */
.panel{
  margin-top:16px; padding:18px; background:var(--panel);
  border:1px solid var(--border); border-radius:16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.row{ display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.lbl{ width:90px; color:var(--muted); font-size:13px; }
.input{
  min-width:260px; flex:1 1 240px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#0d1324; color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.btn{
  padding:12px 16px; border-radius:12px; border:1px solid var(--accent);
  color:#001018; background:linear-gradient(180deg, var(--accent), var(--accent-2));
  font-weight:800; cursor:pointer; letter-spacing:.2px;
}
.btn-secondary{ background:transparent; color:var(--accent); border-color:var(--accent); }
.chk{ display:flex; align-items:center; gap:6px; color:var(--muted); }

.fine{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.fine-item{ display:flex; flex-direction:column; gap:6px; min-width:160px; color:var(--muted); }
.fine input[type=range]{ width:220px; }

.help{
  margin-top:14px; padding:16px; border:1px dashed var(--border); border-radius:14px;
  color:var(--muted); background: rgba(12,16,26,.45);
}
.help summary{ cursor:pointer; font-weight:800; color:var(--text); }

/* 弾幕（速度・見やすさチューニング済み） */
.bullet{
  position:absolute; right:-20px; top:0; white-space:nowrap; font-weight:900; letter-spacing:.2px;
  text-shadow:none; opacity:var(--alpha,0.95); font-size:var(--size,28px);
  animation: fly var(--dur,8s) linear both; will-change:transform;
  background: linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.00) 100%);
  padding:0 .25em; border-radius:10px; color:#fff;
}
.bullet.outline{
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 2px 2px 6px rgba(0,0,0,.6);
}
@keyframes fly{ from{ transform:translateX(100%);} to{ transform:translateX(-120%);} }

/* OBS向け：弾幕のみ */
body.overlay-only{ background:transparent !important; }
body.overlay-only .topbar, body.overlay-only .panel, body.overlay-only .player-wrap video{ display:none !important; }
body.overlay-only .player-wrap{ background:transparent !important; height:100vh; }
body.overlay-only .overlay{ position:absolute; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }

/* 視聴者ページの簡易UI */
.viewer-bar{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
}
.viewer-bar .status{ margin-right:auto; }

/* viewer bar */
.viewer-bar{
  display:flex; gap:10px; align-items:center;
  margin-top:12px; padding:12px;
  background: rgba(22,28,46,.66);
  border:1px solid var(--border); border-radius:14px;
}
.viewer-bar .status{ margin-right:6px; }
.viewer-bar .speedbox{ display:flex; align-items:center; gap:8px; }
.viewer-bar .lbl{ width:auto; color:var(--muted); font-size:13px; }

/* =========================
   スマホ最適化
   ========================= */
@media (max-width: 768px) {

  /* 画面いっぱい使う */
  body {
    margin: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }

  .player-wrap {
    margin: 0 auto 8px;
    width: 100%;
  }

  /* 動画は横幅いっぱい・縦は比率維持 */
  #player {
    width: 100%;
    height: auto;
    max-height: 45vh; /* 画面の上半分くらい */
    border-radius: 12px;
  }

  .overlay {
    pointer-events: none;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* 下のコントロールバーを縦積みに */
  .viewer-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    font-size: 15px;          /* ここでまとめて文字サイズUP */
  }

  .viewer-bar .status {
    align-self: flex-start;
    margin-bottom: 4px;
  }

  .viewer-bar .input {
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
  }

  .viewer-bar .btn {
    width: 100%;
    text-align: center;
    font-size: 15px;
  }

  .speedbox {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .speedbox .lbl {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }

  .speedbox input[type="range"] {
    flex: 1 1 auto;
  }

  .stat {
    font-size: 12px;
  }
}

.pill-viewers{
  color:#0b72b5;
  border-color:#23d9ff;
  background:rgba(35,217,255,.16);
}