/* =========================================================
   動画ページ
   --cyan などの変数は style.css 側で定義される
   ========================================================= */
:root{ --hdr-h:60px; }

.movie-body{ padding-top:var(--hdr-h); }
.hidden{ display:none !important; }

.hdr-actions{ display:flex; align-items:center; gap:9px; }
.login-btn.accent{ border-color:var(--cyan); color:var(--cyan); }
.login-btn.accent:hover{ background:var(--cyan); color:var(--void); }

.warnbar{
  background:rgba(224,98,95,.12); border-bottom:1px solid rgba(224,98,95,.4);
  color:#E0625F; font-size:11px; padding:9px 20px; text-align:center;
}

.btn-primary{
  background:var(--cyan); color:var(--void); border:none;
  font-size:13px; padding:9px 22px; border-radius:2px; cursor:pointer; text-decoration:none;
  display:inline-block;
}
.btn-primary:hover{ opacity:.85; }
.btn-primary:disabled{ opacity:.4; cursor:default; }
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  font-size:13px; padding:9px 22px; border-radius:2px; cursor:pointer; text-decoration:none;
  display:inline-block;
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

.videos-empty{ color:var(--text-faint); font-size:13px; padding:36px 0; }

/* 共通：サムネ上のメタ */
.meta-duration{
  position:absolute; right:7px; bottom:7px; z-index:3;
  background:rgba(10,12,16,.85); font-size:10px; padding:3px 7px; border-radius:2px;
}
.meta-engage{
  position:absolute; left:7px; bottom:7px; z-index:3;
  background:rgba(10,12,16,.85); color:var(--text-dim);
  font-size:10px; padding:3px 7px; border-radius:2px;
}
.play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,12,16,.55); border:1px solid var(--cyan-60); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  transition:all .25s ease;
}

/* =========================================================
   一覧
   ========================================================= */
.movie-layout{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:30px;
  max-width:1240px; margin:0 auto; padding:24px 24px 70px; align-items:start;
}
.rank-panel{
  position:sticky; top:calc(var(--hdr-h) + 16px);
  border:1px solid var(--line); background:var(--panel); padding:16px 14px;
  max-height:calc(100vh - var(--hdr-h) - 40px); overflow-y:auto;
}
.rank-title{
  font-size:10px; letter-spacing:.14em; color:var(--cyan);
  padding-bottom:11px; margin-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.rank-empty{ font-size:11px; color:var(--text-faint); }
.rank-list{ list-style:none; margin:0; padding:0; }
.rank-item{ border-bottom:1px solid var(--line-soft); }
.rank-item:last-child{ border-bottom:none; }
.rank-link{
  display:flex; align-items:center; gap:9px; padding:9px 2px;
  text-decoration:none; color:var(--text); transition:opacity .2s;
}
.rank-link:hover{ opacity:.65; }
.rank-num{ font-size:11px; color:var(--text-faint); min-width:18px; }
.rank-thumb{ display:block; width:54px; height:31px; flex-shrink:0; overflow:hidden; background:#000; }
.rank-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rank-body{ display:block; min-width:0; flex:1; }
.rank-name{ display:block; font-size:11px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-count{ display:block; font-size:9px; color:var(--text-faint); margin-top:1px; }

.movie-main{ min-width:0; }

.featured-card{
  display:block; border:1px solid var(--line); background:var(--panel);
  margin-bottom:22px; text-decoration:none; color:var(--text); transition:border-color .25s;
}
.featured-card:hover{ border-color:var(--cyan); }
.featured-card:hover .play-icon{ background:var(--cyan); color:var(--void); transform:translate(-50%,-50%) scale(1.08); }
.featured-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.featured-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-badge{
  position:absolute; top:0; left:0; z-index:3;
  background:var(--cyan); color:var(--void); font-size:10px; letter-spacing:.12em; padding:6px 14px;
}
.featured-info{ padding:16px 19px; }
.featured-name{ font-size:18px; margin-bottom:7px; line-height:1.4; }
.featured-desc{ font-size:12.5px; color:var(--text-dim); }

.list-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.lt-label{ font-size:9px; letter-spacing:.14em; color:var(--text-faint); }
.lt-btn{
  font-size:11px; padding:5px 14px; border:1px solid var(--line); border-radius:999px;
  color:var(--text-dim); text-decoration:none; transition:all .2s;
}
.lt-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.lt-btn.on{ background:var(--cyan); color:var(--void); border-color:var(--cyan); }
.lt-reshuffle{ font-size:10px; color:var(--text-faint); text-decoration:none; margin-left:4px; }
.lt-reshuffle:hover{ color:var(--cyan); }

.tile-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.tile-card{ background:var(--panel); text-decoration:none; color:var(--text); display:flex; flex-direction:column; transition:background .2s; }
.tile-card:hover{ background:#171C23; }
.tile-card:hover .play-icon{ background:var(--cyan); color:var(--void); transform:translate(-50%,-50%) scale(1.08); }
.tile-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.tile-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-info{ padding:12px 14px; }
.tile-name{ font-family:'DotGothic16',sans-serif; font-size:13px; line-height:1.45; margin-bottom:4px; }
.tile-cat{ font-size:9px; color:var(--text-faint); letter-spacing:.08em; }

@media(max-width:900px){
  .movie-layout{ grid-template-columns:1fr; gap:20px; }
  .rank-panel{ position:static; max-height:none; order:2; }
  .movie-main{ order:1; }
}
/* =========================================================
   再生ページ（シアター構成）
   左：固定プレイヤー ／ 右：独立スクロールの情報パネル
   ========================================================= */
.watch-body{ padding-top:0; overflow:hidden; }
.site-header.slim{ height:var(--hdr-h); padding:0 18px; }
.logo-mark{ text-decoration:none; }
.logo-txt{ font-size:11px; letter-spacing:.2em; }
@media(max-width:720px){ .logo-txt{ display:none; } }

.hbtn{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:8px 15px; border-radius:3px; text-decoration:none; font-size:12.5px;
  font-family:'DotGothic16',sans-serif; transition:all .18s ease;
}
.hbtn:hover{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-16); }
.hbtn-ic{ font-size:13px; }

/* ---- 全体を画面高にぴったり収める ---- */
.theater{
  position:fixed; top:var(--hdr-h); left:0; right:0; bottom:0;
  display:grid; grid-template-columns:minmax(0,1fr) 380px;
  background:var(--void);
}
.tmain{
  min-width:0; display:flex; align-items:center; justify-content:center;
  padding:14px 16px; overflow:hidden;
}
.stage{ width:100%; max-width:1080px; display:flex; flex-direction:column; gap:0; }

/* ---- 流れるコメントの帯 ---- */
.danmaku{
  position:relative; height:36px; overflow:hidden;
  border:1px solid var(--line); border-bottom:none;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, #12161C, #0d1116);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dm-idle{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:9px; color:var(--text-faint); letter-spacing:.12em;
}
.dm{
  position:absolute; left:100%; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:13px; line-height:1; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  will-change:transform;
}
.dm.lane0{ margin-top:0; }
.dm.lane1{ margin-top:0; }

/* ---- 画面 ---- */
.screen{
  position:relative; background:#000;
  border:1px solid var(--line); border-bottom:none;
}
.pframe{
  position:relative; width:100%;
  /* 16:9 に加えて、YouTube が描くタイトル・共有ボタンの帯を逃がす余白を確保する */
  aspect-ratio:16/9.42;
}
.pframe iframe, .pframe > div#ytPlayer{ position:absolute; inset:0; width:100%; height:100%; }

.pcover{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(10,12,16,.25), rgba(10,12,16,.6));
  cursor:pointer; transition:opacity .3s ease;
}
.pcover.gone{ opacity:0; pointer-events:none; }
.pcover-btn{
  width:74px; height:74px; border-radius:50%;
  background:linear-gradient(145deg, rgba(28,34,42,.95), rgba(12,16,20,.95));
  border:1px solid var(--cyan-60); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:5px;
  box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12),
             0 0 0 8px rgba(111,227,196,.06);
  transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease;
}
.pcover:hover .pcover-btn{
  transform:scale(1.08);
  box-shadow:0 14px 34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18),
             0 0 0 12px rgba(111,227,196,.1);
}

/* 操作したときに画面中央へ短く出る表示 */
.ptoast{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  z-index:7; padding:12px 20px; border-radius:6px; font-size:13px; letter-spacing:.04em;
  background:rgba(10,12,16,.86); border:1px solid var(--line); color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.6);
}
.ptoast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* 終了後の候補 */
.endcard{
  position:absolute; inset:0; z-index:8; display:none;
  background:rgba(8,10,13,.95); backdrop-filter:blur(3px);
  flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:18px;
}
.endcard.show{ display:flex; }
.ec-h{ font-size:10px; letter-spacing:.2em; color:var(--cyan); }
.ec-list{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.ec-i{ width:168px; text-decoration:none; color:var(--text); transition:transform .2s ease; }
.ec-i:hover{ transform:translateY(-3px); }
.ec-th{ position:relative; display:block; width:168px; aspect-ratio:16/9; background:#000;
  overflow:hidden; border-radius:4px; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.ec-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.ec-i:hover .ec-th{ box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 1px var(--cyan); }
.ec-d{ position:absolute; right:5px; bottom:5px; background:rgba(10,12,16,.9);
  font-size:9px; padding:2px 6px; border-radius:2px; }
.ec-t{ display:block; font-size:11.5px; line-height:1.45; margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ec-replay{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:9px 22px; border-radius:3px; cursor:pointer; font-size:12.5px;
  font-family:'DotGothic16',sans-serif; transition:all .18s ease;
}
.ec-replay:hover{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-16); }

/* =========================================================
   操作パネル
   ========================================================= */
.deck{
  background:linear-gradient(180deg, #12161C, #0f1319);
  border:1px solid var(--line); border-top:none;
  padding:10px 14px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* シークバー */
.seekrow{ display:flex; align-items:center; gap:12px; }
.tnow, .tend{ font-size:11px; color:var(--text-dim); min-width:42px; letter-spacing:.02em; }
.tend{ text-align:right; color:var(--text-faint); }
.seek{
  position:relative; flex:1; height:22px; cursor:pointer;
  display:flex; align-items:center; touch-action:none;
}
.seek-track{
  position:absolute; left:0; right:0; height:5px; border-radius:3px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.seek-fill{
  position:absolute; left:0; height:5px; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--cyan), #9af0d9);
  box-shadow:0 0 10px var(--cyan-30);
}
.seek-marks{ position:absolute; left:0; right:0; height:5px; pointer-events:none; }
.seek-marks i{
  position:absolute; top:0; width:2px; height:5px; border-radius:1px;
  background:rgba(255,255,255,.6);
}
.seek-knob{
  position:absolute; left:0; width:13px; height:13px; border-radius:50%;
  background:#fff; transform:translateX(-50%);
  box-shadow:0 0 0 3px rgba(111,227,196,.35), 0 2px 6px rgba(0,0,0,.6);
  transition:transform .12s ease;
}
.seek:hover .seek-knob, .seek.dragging .seek-knob{ transform:translateX(-50%) scale(1.25); }
.seek-tip{
  position:absolute; bottom:26px; transform:translateX(-50%);
  background:rgba(8,10,13,.95); border:1px solid var(--line); color:var(--text);
  font-size:10px; padding:3px 8px; border-radius:3px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.seek:hover .seek-tip, .seek.dragging .seek-tip{ opacity:1; }

/* ボタン列 */
.ctrlrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.cgroup{ display:flex; align-items:center; gap:4px; }
.cgroup-r{ gap:2px; }

.ic{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 9px;
  background:transparent; border:1px solid transparent; border-radius:4px;
  color:var(--text-dim); cursor:pointer; font-size:15px; line-height:1;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.ic:hover:not(:disabled){
  background:rgba(255,255,255,.06); color:var(--text); border-color:var(--line);
}
.ic:active:not(:disabled){ transform:translateY(1px); }
.ic:disabled{ opacity:.28; cursor:not-allowed; }
.ic.on{ color:var(--cyan); background:var(--cyan-16); border-color:var(--cyan-30); }
.ic-lg{ min-width:44px; height:42px; font-size:17px; color:var(--text); }
.ic-lg:hover{ color:var(--cyan); }
.ic-tx{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em; }
.ic-num{
  position:absolute; bottom:5px; right:6px; font-style:normal;
  font-family:'IBM Plex Mono',monospace; font-size:8px; color:inherit; opacity:.85;
}

/* 音量 */
.volwrap{ display:flex; align-items:center; }
.vol{
  width:0; opacity:0; margin:0; height:4px; cursor:pointer;
  transition:width .22s cubic-bezier(.2,.9,.3,1), opacity .18s ease, margin .22s ease;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.volwrap:hover .vol, .vol:focus, .vol.open{ width:82px; opacity:1; margin:0 10px 0 4px; }
.vol::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan) var(--vp,100%), rgba(255,255,255,.16) var(--vp,100%));
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff;
  margin-top:-4px; box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.vol::-moz-range-track{ height:4px; border-radius:2px; background:rgba(255,255,255,.16); }
.vol::-moz-range-progress{ height:4px; border-radius:2px; background:var(--cyan); }
.vol::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:#fff; }

/* =========================================================
   コメント投稿欄
   ========================================================= */
.poster{
  display:flex; align-items:stretch; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-top:none;
  padding:9px 12px;
}
.pemoji{
  flex-shrink:0; width:42px; background:transparent; border:1px solid var(--line);
  border-radius:4px; color:var(--text-dim); font-size:16px; cursor:pointer;
  transition:all .16s ease;
}
.pemoji:hover, .pemoji.on{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-16); }
.pinput{ position:relative; flex:1; min-width:0; }
.pinput input{
  width:100%; height:42px; background:var(--void);
  border:1px solid var(--line); border-radius:4px; color:var(--text);
  padding:0 62px 0 13px; font-size:13.5px; font-family:inherit;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.pinput input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-16); }
.pat{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--text-faint); pointer-events:none;
}
.psend{
  flex-shrink:0; padding:0 22px; background:var(--cyan); color:var(--void);
  border:none; border-radius:4px; cursor:pointer; font-size:13px;
  transition:opacity .16s ease, transform .12s ease;
}
.psend:hover{ opacity:.88; }
.psend:active{ transform:translateY(1px); }
.psend:disabled{ opacity:.4; cursor:default; }

.emobar{
  display:none; gap:5px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-top:none;
  border-radius:0 0 4px 4px; padding:9px 12px;
}
.emobar.open{ display:flex; }
.emo{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font-size:15px; line-height:1; cursor:pointer; transition:all .16s ease;
}
.emo:hover{ border-color:var(--cyan); transform:translateY(-1px); }
.emo.on{ border-color:var(--cyan); background:var(--cyan-16); }
.emo-add{ font-size:13px; color:var(--text-faint); border-style:dashed; }

/* =========================================================
   右パネル
   ========================================================= */
.tside{
  min-width:0; display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line);
}
.sidehead{ padding:16px 18px 13px; border-bottom:1px solid var(--line-soft); }
.stitle{ font-size:15.5px; line-height:1.5; margin-bottom:9px; }
.smeta{ display:flex; align-items:center; gap:10px; font-size:10px; color:var(--text-faint); flex-wrap:wrap; }
.chip{
  background:var(--cyan-16); color:var(--cyan); border:1px solid var(--cyan-30);
  padding:2px 9px; border-radius:999px; font-size:9px;
}
.sposter{ font-size:10px; color:var(--text-faint); margin-top:7px; }

.tabs{ display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
.tab{
  flex:1; background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text-faint); padding:12px 6px; cursor:pointer;
  font-family:'DotGothic16',sans-serif; font-size:12.5px; white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
.tab:hover{ color:var(--text-dim); background:rgba(255,255,255,.03); }
.tab.on{ color:var(--cyan); border-bottom-color:var(--cyan); background:rgba(111,227,196,.05); }
.tnum{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--text-faint); margin-left:4px; }
.tab.on .tnum{ color:var(--cyan); }

.panes{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.panes::-webkit-scrollbar{ width:9px; }
.panes::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; border:2px solid var(--panel); }
.panes::-webkit-scrollbar-thumb:hover{ background:#3a4552; }
.pane{ display:none; padding:14px 18px 28px; }
.pane.on{ display:block; }
.empty{ font-size:11px; color:var(--text-faint); padding:22px 0; line-height:1.9; text-align:center; }

/* コメント */
.cm{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.cm:last-child{ border-bottom:none; }
.cm.is-new{ animation:cmin .4s ease; }
@keyframes cmin{ from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
.cmt{
  flex-shrink:0; height:fit-content;
  background:transparent; border:1px solid var(--line); color:var(--cyan);
  font-size:10px; padding:3px 7px; border-radius:3px; cursor:pointer; transition:all .16s ease;
}
.cmt:hover{ background:var(--cyan-16); border-color:var(--cyan); }
.cmb{ min-width:0; flex:1; }
.cmtx{ font-size:13px; line-height:1.75; word-break:break-word; }
.cme{ font-size:17px; margin-right:5px; vertical-align:-2px; }
.cmr{ display:flex; gap:4px; flex-wrap:wrap; margin-top:7px; position:relative; }
.rct, .rct-add{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  border-radius:999px; padding:2px 9px; font-size:11.5px; cursor:pointer;
  transition:all .16s ease; line-height:1.5;
}
.rct:hover, .rct-add:hover{ border-color:var(--cyan); transform:translateY(-1px); }
.rct.on{ border-color:var(--cyan); background:var(--cyan-16); color:var(--cyan); }
.rct span{ font-family:'IBM Plex Mono',monospace; font-size:9px; margin-left:4px; }
.rct-add{ color:var(--text-faint); padding:2px 8px; border-style:dashed; }

.empicker{
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:30;
  display:flex; gap:3px; flex-wrap:wrap; max-width:250px;
  background:#171C23; border:1px solid var(--line); padding:7px; border-radius:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.65);
}
.empicker button{
  background:transparent; border:none; font-size:17px; cursor:pointer;
  padding:4px 6px; border-radius:4px; transition:background .14s ease;
}
.empicker button:hover{ background:var(--cyan-16); }

/* 概要 */
.desc{ font-size:13px; color:var(--text-dim); line-height:1.9; white-space:pre-wrap; }
.phead{ font-size:10px; letter-spacing:.18em; color:var(--cyan); margin:22px 0 9px; }
.chlist{ list-style:none; border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; }
.chlist li{ border-bottom:1px solid var(--line-soft); }
.chlist li:last-child{ border-bottom:none; }
.ch{
  display:flex; align-items:baseline; gap:12px; width:100%;
  background:transparent; border:none; color:var(--text); padding:10px 12px;
  cursor:pointer; text-align:left; transition:background .16s ease, color .16s ease;
}
.ch:hover{ background:rgba(255,255,255,.04); color:var(--cyan); }
.ch.cur{ background:var(--cyan-16); color:var(--cyan); }
.cht{ font-size:11px; color:var(--text-faint); min-width:46px; }
.ch:hover .cht, .ch.cur .cht{ color:var(--cyan); }
.chn{ font-size:12.5px; }

/* 他の動画 */
.oth{ display:flex; gap:11px; padding:10px 0; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--line-soft); transition:opacity .18s ease; }
.oth:last-child{ border-bottom:none; }
.oth:hover{ opacity:.72; }
.oth-th{ position:relative; display:block; width:112px; aspect-ratio:16/9; flex-shrink:0;
  background:#000; overflow:hidden; border-radius:3px; }
.oth-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.oth-d{ position:absolute; right:4px; bottom:4px; background:rgba(10,12,16,.9);
  font-size:9px; padding:2px 5px; border-radius:2px; }
.oth-b{ display:block; min-width:0; flex:1; }
.oth-t{ display:block; font-size:12px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.oth-c{ display:block; font-size:9px; color:var(--text-faint); margin-top:5px; }
.oth:hover .oth-t{ color:var(--cyan); }

/* アンケート */
.sv-t{ font-family:'DotGothic16',sans-serif; font-size:15px; margin-bottom:5px; }
.sv-i{ font-size:10px; color:var(--text-faint); margin-bottom:18px; }
.sv-q{ margin-bottom:20px; }
.sv-qt{ font-size:13px; margin-bottom:10px; }
.sv-o{ display:flex; flex-direction:column; gap:8px; }
.sv-op{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px;
  color:var(--text-dim); padding:7px 10px; border:1px solid var(--line-soft);
  border-radius:4px; transition:all .16s ease; }
.sv-op:hover{ color:var(--text); border-color:var(--line); background:rgba(255,255,255,.03); }
.sv-op input{ accent-color:var(--cyan); width:15px; height:15px; cursor:pointer; }
.sv-op:has(input:checked){ border-color:var(--cyan); background:var(--cyan-16); color:var(--cyan); }
.sv-text{ width:100%; background:var(--void); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; font-size:13px; font-family:inherit; border-radius:4px; resize:vertical; }
.sv-text:focus{ outline:none; border-color:var(--cyan); }
.sv-f{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:6px; }
.sv-thx{ font-size:13px; color:var(--cyan); padding:14px 0; }

/* =========================================================
   ツールチップ
   ========================================================= */
.tip{
  position:fixed; z-index:400; pointer-events:none;
  background:rgba(8,10,13,.96); border:1px solid var(--line); color:var(--text);
  font-size:11px; padding:6px 11px; border-radius:4px; white-space:nowrap;
  opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
.tip.show{ opacity:1; transform:translateY(0); }

/* =========================================================
   再生ページ：狭い画面（縦積み）
   ========================================================= */
@media(max-width:1000px){
  .watch-body{ overflow:auto; padding-top:var(--hdr-h); }
  .theater{
    position:static; display:block; height:auto;
  }
  .tmain{
    position:sticky; top:var(--hdr-h); z-index:30;
    padding:0; background:var(--void); display:block;
  }
  .stage{ max-width:none; }
  .danmaku{ border-radius:0; border-left:none; border-right:none; }
  .screen{ border-left:none; border-right:none; }
  .pframe{ aspect-ratio:16/9.42; }
  .deck{ border-left:none; border-right:none; }
  .poster{ border-left:none; border-right:none; }
  .emobar{ border-left:none; border-right:none; border-radius:0; }
  .tside{ border-left:none; border-top:1px solid var(--line); }
  .panes{ overflow:visible; }
  .tab{ font-size:12px; padding:13px 4px; }
}
@media(max-width:560px){
  .deck{ padding:8px 10px 6px; }
  .ic{ min-width:36px; height:36px; padding:0 7px; }
  .ic-lg{ min-width:42px; height:40px; }
  .tnow, .tend{ min-width:38px; font-size:10px; }
  /* 狭い画面では音量スライダーを常に出さず、ミュート切替のみにする */
  .volwrap:hover .vol{ width:0; opacity:0; margin:0; }
  .vol.open{ width:70px; opacity:1; margin:0 8px 0 4px; }
  /* 狭い画面でも1行に収める（折り返すと順序が入れ替わって分かりづらくなる） */
  .poster{ flex-wrap:nowrap; gap:6px; padding:8px 10px; }
  .pemoji{ flex:0 0 38px; width:38px; font-size:15px; }
  .pinput input{ height:38px; padding:0 50px 0 11px; font-size:13px; }
  .pat{ right:8px; font-size:9px; }
  .psend{ flex:0 0 auto; padding:0 15px; font-size:12.5px; }
}

/* =========================================================
   モーダル
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); padding:20px;
}
.modal-box{ width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line); padding:24px 22px; }
.modal-h{ font-size:16px; margin-bottom:9px; }
.modal-p{ font-size:11.5px; color:var(--text-dim); margin-bottom:16px; line-height:1.7; }
.modal-l{ display:block; font-size:11px; color:var(--text-dim); margin-bottom:12px; }
.modal-l input{
  display:block; width:100%; margin-top:6px;
  background:var(--void); border:1px solid var(--line); color:var(--text);
  padding:9px 11px; font-size:14px; font-family:inherit; border-radius:2px;
}
.modal-l input:focus{ outline:none; border-color:var(--cyan); }
.modal-f{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
.modal-f .mono{ font-size:10px; margin-right:auto; }
.modal-cancel{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:8px 16px; border-radius:2px; cursor:pointer; font-size:12px;
}

/* =========================================================
   投稿ページ
   ========================================================= */
.post-wrap{ max-width:680px; margin:0 auto; padding:30px 24px 80px; }
.post-note{ font-size:10px; color:var(--text-faint); margin-bottom:20px; }
.post-err{
  border:1px solid rgba(224,98,95,.5); background:rgba(224,98,95,.08);
  color:#E0625F; font-size:12px; padding:13px 16px; margin-bottom:20px; line-height:1.8;
}
.post-form .pf{ display:block; margin-bottom:20px; }
.pf-l{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:7px; }
.pf-l em{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9px;
  color:var(--cyan); border:1px solid var(--cyan-30); padding:1px 6px; margin-left:7px; border-radius:2px;
}
.post-form input[type=text], .post-form textarea, .post-form select{
  display:block; width:100%; background:var(--void); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; font-size:13.5px; font-family:inherit; border-radius:2px; line-height:1.7;
}
.post-form textarea{ resize:vertical; }
.post-form select{ cursor:pointer; }
.post-form input:focus, .post-form textarea:focus, .post-form select:focus{ outline:none; border-color:var(--cyan); }
.pf-h{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--text-faint); margin-top:5px; }

/* URL欄と「情報を取得」ボタン */
.pf-url{ display:flex; gap:8px; align-items:stretch; }
.pf-url input[type=text]{ flex:1; min-width:0; }
.pf-fetch{
  flex-shrink:0; background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  padding:0 16px; border-radius:2px; cursor:pointer; font-size:12px; white-space:nowrap;
  font-family:'DotGothic16',sans-serif;
}
.pf-fetch:hover{ background:var(--cyan); color:var(--void); }
.pf-status{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  margin-top:7px; min-height:14px; color:var(--text-faint); line-height:1.6;
}
.pf-status.is-ok{ color:var(--cyan); }
.pf-status.is-ng{ color:#E0625F; }
@media(max-width:520px){
  .pf-url{ flex-direction:column; }
  .pf-fetch{ padding:10px 16px; }
}
.pf-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media(max-width:560px){ .pf-row{ grid-template-columns:1fr; } }
.pf-check{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); margin-bottom:9px; cursor:pointer; }
.pf-check input{ accent-color:var(--cyan); width:15px; height:15px; cursor:pointer; }
.pf-submit{ margin-top:28px; text-align:right; }

.post-done{ border:1px solid var(--cyan-30); background:var(--cyan-16); padding:26px 24px; }
.pd-h{ font-size:17px; color:var(--cyan); margin-bottom:7px; }
.pd-p{ font-size:12.5px; color:var(--text-dim); margin-bottom:18px; }
.pd-btns{ display:flex; gap:10px; flex-wrap:wrap; }