/* マルチプレイヤーの YouTube の部屋 */
/* 動画を、画面に収まる範囲で、できるだけ大きく出す。
   動画の高さは「画面の高さ − 上下の見出しや点数の分(--ytr-reserve)」まで。幅は、その高さと動画の縦横比(--ytr-aspect。ページが入れる)から決まる。
   ページの幅も動画に合わせて広げる(左上のロゴなどが、動画の端とそろうように。狭い動画でも 960px より狭くはしない) */
.list-page.ytr-page {
  --ytr-aspect: 1.7778;
  --ytr-reserve: 190px;
  width: min(100%, max(960px, calc(max(240px, 100dvh - var(--ytr-reserve)) * var(--ytr-aspect) + 36px)));
}
.ytr { position: relative; display: flex; flex-direction: column; gap: 12px; }
/* 周りの光: 動画の周り(横はウインドウの幅いっぱい、縦はページの上の端から、少なくともウインドウの高さいっぱい)に、映像の縁の色を広げて、ぼかす。
   ページに付いているので、スクロールしても付いてこない。置き場所と大きさは frameview.js が決める。
   いちばん奥(文字や再生画面より後ろ)に描くので、再生画面の上にも、見出しや点数の文字の上にも重ならない */
.ytr-glow { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s; image-rendering: auto; }   /* (下の端に向かって消す形は、frameview.js が決める) */
.ytr-glow.is-on { opacity: 1; }
/* (上のメニューの文字が読めるように、光の上側だけを、下へ薄くなるように暗くする。置き場所は frameview.js が決める) */
.ytr-glow-shade { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s; background: linear-gradient(rgba(11, 11, 13, 0.75), rgba(11, 11, 13, 0)); }
.ytr-glow-shade.is-on { opacity: 1; }
/* 光っている間は、文字とアイコンに影を付ける(白っぽい光の上でも読めるように)。
   youtube-ambilight の初期値(影の大きさ 15・濃さ 30%: 黒の 6px のぼかしを 2 重)と同じ */
html.is-glowing .ytr-page { text-shadow: rgba(0, 0, 0, 0.3) 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 6px; }
/* (入力欄とボタンは、ブラウザが影を消しているので、ページの影を引き継がせる。名前の欄など) */
html.is-glowing .ytr-page :is(input, button, textarea, select) { text-shadow: inherit; }
html.is-glowing .ytr-page .site-nav svg, html.is-glowing .ytr-page .site-volume input { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); }
.ytr > .ytr-stage { z-index: 1; }
/* (光がページの端からはみ出しても、横にスクロールさせない) */
html:has(.ytr-glow), html:has(.ytr-glow) body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .ytr-glow { transition: none; } }
/* マルチプレイヤーは、点数の行の下に何もないので、その分も動画に使う */
.list-page.ytr-page:has(#ytr-stage) { --ytr-reserve: 150px; }
.ytr-page .ytr-stage { width: min(100%, calc(max(240px, 100dvh - var(--ytr-reserve)) * var(--ytr-aspect))); }
.ytr-head { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.ytr-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; }

/* 動画の枠。動画が流れている間は、再生画面の上に何も重ねない(YouTube の埋め込みの決まり。自機は拡張機能が再生画面の中に描く)。
   投票・ランキング・待合の画面を出す間(is-covered)だけ、再生画面を隠して、その場所にページが描く */
.ytr-stage { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; }
.ytr-stage iframe, #ytr-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 再生画面を隠している間だけ、ページが自機・ほかの人の自機を描く */
.ytr-stage.is-covered iframe { visibility: hidden; }
/* (参加している間は、隠している間の枠の上にカーソルを出さない。ページが描く自機が、カーソルの代わり) */
.ytr-page.is-joined .ytr-stage.is-covered { cursor: none; }
.ytr-stage:not(.is-covered) .ytr-others, .ytr-stage:not(.is-covered) .ytr-me { display: none !important; }
.ytr-stage.is-noext .ytr-others { display: none !important; }
.ytr-others { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ytr-others .ghost { opacity: 0.75; }
/* 相手の自機: 位置は、毎コマ ytroom.js が、届いた動きを再生して決める(transition は使わない) */
.ytr-others .other[hidden] { display: none; }
/* 自分の自機: 下の映像の色を反転した色で描く。接触している間は、赤い輪 */
.ytr-me { position: absolute; left: 0; top: 0; z-index: 4; border-radius: 50%; background: #ffffff; mix-blend-mode: difference; pointer-events: none; will-change: transform; }
.ytr-me.is-hit { background: transparent; mix-blend-mode: normal; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85), inset 0 0 0 3px #ff3b30; }
.ytr-me[hidden] { display: none; }

/* 投票: 4 つの区域に、次の動画の候補 */
.ytr-vote { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: #0b0b0d; }
.ytr-vote[hidden] { display: none; }
.ytr-choice { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; border: 1px solid rgba(236, 234, 228, 0.18); background-size: cover; background-position: center; background-clip: padding-box; overflow: hidden; }
/* (サムネイルは枠線の内側だけに敷く。枠線の下に、暗くしていないサムネイルが透けないように) */
.ytr-choice::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0.25), rgba(11, 11, 13, 0.85)); }
.ytr-choice > * { position: relative; }
.ytr-choice-title { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.ytr-choice-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.ytr-choice.is-leading { border-color: var(--accent); }
/* 候補の右下の、動画の長さ(見た目は hub.css の .maps-length。.ytr-choice > * の position を上書きする) */
.ytr-choice > .maps-length { position: absolute; }

/* 再生画面を隠している間は、枠の後ろに動画のサムネイル(ページが --ytr-thumb に入れる)を、暗くして敷く */
.ytr-stage.is-covered { background: linear-gradient(rgba(11, 11, 13, 0.55), rgba(11, 11, 13, 0.55)), var(--ytr-thumb, none) center / cover no-repeat, #000; }
/* 案内と操作(始める前・終わったあと・参加する前・接続中・動画がないとき)。
   1 人用は、再生画面を隠している間、動画の場所の真ん中に出す。マルチプレイヤーは、いつも動画の下の行に出す */
.ytr-stage > .ytr-screen { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(11, 11, 13, 0.6); text-align: center; }
.ytr-screen[hidden] { display: none !important; }
.ytr-screen .mp-check { margin: 0; }
.ytr-bar > .ytr-screen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; flex: 0 1 auto; }
.ytr-bar > .ytr-screen .ytr-screen-text:empty, .ytr-bar > .ytr-screen .ytr-note:empty { display: none; }
.ytr-bar > .ytr-screen .name-input { width: 12em; }
.ytr-screen-text { margin: 0; font-size: 14px; letter-spacing: 0.08em; }
.ytr-howto { margin: 0; font-size: 12px; color: var(--muted); }
.ytr-howto .swatch { display: inline-block; width: 12px; height: 12px; margin: 0 4px; vertical-align: -1px; border: 1px solid rgba(236, 234, 228, 0.4); }
.ytr-note { margin: 0; font-size: 11px; color: var(--muted); }
.ytr-note a { color: inherit; }
.ytr-screen .name-input { margin: 0; }
.ytr-timer { flex: none; margin-left: -8px; font-size: 14px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ytr-timer[hidden] { display: none; }

/* 下の行: スコア・順位・人数 */
.ytr-bar { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.ytr-score { display: flex; align-items: baseline; gap: 10px; }
.ytr-score[hidden] { display: none; }
.ytr-score-value { font-size: 28px; font-weight: 200; font-variant-numeric: tabular-nums; }
.ytr-rank { font-size: 28px; font-weight: 200; font-variant-numeric: tabular-nums; }
.ytr-rank.is-top { color: var(--accent); }
.ytr-players { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 上のタイトル: 押すと YouTube の元の動画へ */
a.ytr-title { color: inherit; text-decoration: none; }
a.ytr-title[href]:hover { text-decoration: underline; }

/* 動画が終わったあとのランキング(投票の前の数秒) */
.ytr-result { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(11, 11, 13, 0.62); overflow: hidden; animation: ytr-fade 0.35s ease-out both; }
.ytr-result[hidden] { display: none; }
.ytr-result-title { margin: 0; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.ytr-result-list { display: flex; flex-direction: column; gap: 6px; width: min(100%, 420px); margin: 0; padding: 0; list-style: none; }
.ytr-result-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto 6.5em; align-items: baseline; gap: 12px; padding: 6px 12px; border-bottom: 1px solid rgba(236, 234, 228, 0.12); font-variant-numeric: tabular-nums; opacity: 0; animation: ytr-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ytr-result-list li.is-first { font-size: 18px; }
.ytr-result-list li.is-me { color: var(--accent); }
.ytr-result-rank { color: var(--muted); }
.ytr-result-hits { font-size: 12px; color: var(--muted); text-align: right; }
.ytr-result-list li.is-me .ytr-result-hits { color: inherit; }
.ytr-result-score { text-align: right; }
.ytr-result-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ytr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ytr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ytr-result, .ytr-result-list li { animation: none; opacity: 1; }
}
.mp-check { display: flex; justify-content: center; margin: 12px 0; }
.mp-check[hidden] { display: none; }

/* 1 人で遊ぶページ: 結果と、ランキング */
.ytp-result { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.ytp-result[hidden] { display: none; }
.ytp-result-score { font-size: 40px; font-weight: 200; font-variant-numeric: tabular-nums; }
.ytp-result-score.is-best { color: var(--accent); }
.ytp-result-detail { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ytr-screen [hidden] { display: none !important; }
.ytr-screen .ytr-screen-text:empty, .ytr-screen .ytr-note:empty { display: none; }
.ytp-ranking { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ytp-ranking h2 { margin: 0; }
.ytp-list { width: 100%; max-width: 520px; }
.ytp-list li { opacity: 1; animation: none; }
.ytp-list li.is-me { color: var(--accent); }
.ytp-empty { display: block !important; color: var(--muted); font-size: 12px; border: 0 !important; padding: 0 !important; }

/* プライベートの部屋: 待合の画面(前の動画のランキングと、次の動画)と、下の行の操作 */
.ytr-lobby { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background-color: #0b0b0d; background-size: cover; background-position: center; overflow: auto; text-align: center; }
.ytr-lobby[hidden] { display: none; }
.ytr-lobby-next { margin: 0; font-size: 15px; letter-spacing: 0.04em; }
.ytr-private { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.ytr-private[hidden], .ytr-private [hidden] { display: none; }
/* ホストが次の動画を選ぶ一覧(マップリストと同じ形)。選ばれている動画に、枠の印 */
.ytr-picker { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ytr-picker[hidden] { display: none; }
.ytr-pick-main { padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ytr-pick-main:hover .maps-thumb { box-shadow: 0 0 0 1px var(--accent); }
.ytr-pick-card.is-picked .maps-thumb { box-shadow: 0 0 0 2px var(--accent); }
.ytr-pick-card.is-picked .list-name { color: var(--accent); }
.ytr-private .btn { padding: 6px 18px; min-height: 0; }

/* 楽曲の情報(上の、動画のタイトル・投稿者の右) */
.ytr-song { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.ytr-song[hidden] { display: none; }

/* 遊び終えて戻った直後は、ページの上でマウスが動くまで、ボタンをマウスに反応させない(乗っていないのに、乗っている色で出ないように) */
.ytr-screen.is-resting .btn { pointer-events: none; }

/* 指で遊ぶ端末(スマホ・タブレット。frameview.js が html に is-touch を付ける)。
   動画が小さいときも、案内と操作がはみ出さないように詰める(それでも入らない分は、真ん中の画面の中でスクロールできる) */
html.is-touch .ytr-stage > .ytr-screen { gap: 8px; padding: 10px; justify-content: safe center; overflow-y: auto; }
html.is-touch .ytr-screen .btn { min-height: 36px; padding: 6px 16px; }
html.is-touch .ytp-result-score { font-size: 28px; }
/* 横向き: 動画だけを出して、画面いっぱいまで大きくする(is-full のとき。1 人用はいつも、マルチプレイヤーは参加して遊んでいる・投票している間)。
   見出し・点数・ランキングなどは、縦向きにすると見える */
@media (orientation: landscape) {
  html.is-touch .ytr-page.is-full > header.top, html.is-touch .ytr-page.is-full .ytr-head, html.is-touch .ytr-page.is-full .ytr-bar, html.is-touch .ytr-page.is-full .ytp-ranking, html.is-touch .ytr-page.is-full .ytr-picker { display: none !important; }
  html.is-touch .list-page.ytr-page.is-full { width: 100%; min-height: 100dvh; padding: 0; gap: 0; justify-content: center; }
  html.is-touch .ytr-page.is-full .ytr { gap: 0; }
  html.is-touch .ytr-page.is-full .ytr-stage { width: min(100vw, calc(100dvh * var(--ytr-aspect))); max-height: 100dvh; }
  html.is-touch:has(.ytr-page.is-full), html.is-touch:has(.ytr-page.is-full) body { overflow: hidden; background: #000; }
}

/* 1 人用の「みんなで遊ぶ」(音が出ます/一時停止はできませんの下) */
.ytp-together { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ytp-together:hover { color: var(--accent); }