/* 基本・入力 */
:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#10121b;color:#eef0fa;line-height:1.65}
*{box-sizing:border-box}html{height:100%;overflow:hidden}body{margin:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body>main{flex:1 1 0%;height:0;min-height:0;min-width:0;width:100%;margin:0;padding:36px 12px 12px;overflow:auto;overflow-anchor:none}
header,.panel{max-width:1440px;margin-inline:auto}header{margin-bottom:30px}h1{font-size:clamp(26px,4vw,42px);margin:4px 0}.home-link{color:inherit;text-decoration:none}.home-link:focus-visible{outline:2px solid #c2aaff;outline-offset:3px}.eyebrow{color:#b7a0ff;font-size:12px;letter-spacing:.18em}p{margin:10px 0}
.panel{background:#1b1e2b;border:1px solid #343849;border-radius:16px;padding:22px;margin-bottom:20px}label{display:block;font-size:14px}input{display:block;background:#10121b;color:#fff;border:1px solid #565d73;border-radius:7px;padding:10px;width:100%;font:inherit;margin-top:5px}.entry{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin:16px 0}
button{font:inherit;background:#30354a;color:#fff;border:1px solid #59617a;border-radius:8px;padding:10px 16px;cursor:pointer}button:hover{background:#434b65}button:disabled{opacity:.45;cursor:default}.primary{background:#7452c9;border-color:#a58ae9}.primary:hover{background:#8964df}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}#copy-link{margin-left:auto}.link-options{display:flex;flex-direction:column;gap:4px;align-self:center}.check{display:flex;align-items:center;gap:9px}.check input{width:auto;margin:0}#message{border-left:3px solid #b7a0ff;padding:8px 12px;background:#121521;white-space:pre-line}
input:focus-visible,button:focus-visible{outline:2px solid #c2aaff;outline-offset:3px}[hidden]{display:none!important}
/* 共通時刻と操作 */
.timeline{margin:18px 0;padding:16px;background:#121521;border-radius:10px}.timeline-controls{display:flex;align-items:start;gap:16px}.transport{flex:0 0 126px;display:flex;flex-direction:column;gap:6px}.transport>button{width:100%;white-space:nowrap}.seek-rail{flex:1;min-width:0;padding-top:12px}.seek-rail input{width:100%;margin:0}.current-jst{display:block;margin-top:8px;font-size:12px;color:#aeb5c9;font-variant-numeric:tabular-nums;line-height:1.65}
.skip-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%}.skip-controls button{width:100%;min-width:0;padding:4px 2px;font-size:12px;white-space:nowrap}#toggle-offsets{grid-column:1/-1}
.vod-range-controls{display:grid;grid-template-columns:126px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}#vod-ranges{min-width:0}.vod-range{margin-top:14px}.vod-range:first-child{margin-top:0}.vod-range-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--vod-color);font-size:13px;margin:0 0 5px;overflow-wrap:anywhere}
.vod-range-track{position:relative;height:12px;background:#30354a;border-radius:6px;cursor:default;touch-action:manipulation}.vod-range-segment{position:absolute;height:100%;background:var(--vod-color);border-radius:6px;min-width:2px;cursor:pointer}.vod-range-segment::before,.vod-range-segment::after{content:'';position:absolute;top:-3px;height:18px;width:2px;background:var(--vod-color)}.vod-range-segment::before{left:0}.vod-range-segment::after{right:0}.vod-range-segment:focus-visible{outline:2px solid #eef0fa;outline-offset:4px}.vod-range-dates{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--vod-color);margin-top:5px;font-variant-numeric:tabular-nums}
.offset-controls{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.offset-controls button{font-size:12px;padding:2px 6px}.offset-controls output{font-size:12px;min-width:52px;font-variant-numeric:tabular-nums}
/* シークバーとホバー日時 */
#timeline,#compact-timeline{appearance:none;-webkit-appearance:none;height:16px;background:transparent;border:0;padding:0;accent-color:#b7a0ff;cursor:pointer}
#timeline::-webkit-slider-runnable-track,#compact-timeline::-webkit-slider-runnable-track{height:4px;background:var(--seek-track,#56506e);border-radius:2px}
#timeline::-webkit-slider-thumb,#compact-timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:#b7a0ff;border-radius:50%;margin-top:-6px}
#timeline::-moz-range-track,#compact-timeline::-moz-range-track{height:4px;background:var(--seek-track,#56506e);border-radius:2px}
#timeline::-moz-range-thumb,#compact-timeline::-moz-range-thumb{width:16px;height:16px;border:0;background:#b7a0ff;border-radius:50%}#timeline:disabled,#compact-timeline:disabled{opacity:.45}
.time-tooltip{position:fixed;z-index:1000;pointer-events:none;background:#10121b;color:#eef0fa;border:1px solid #59617a;border-radius:6px;padding:4px 8px;font-size:12px;white-space:nowrap;line-height:20px;box-shadow:0 3px 12px #0008}
/* 上部簡略バー：動画領域と独立した行 */
#compact-sync{order:-1;flex:0 0 auto;align-self:center;display:flex;align-items:center;gap:11px;width:calc(80% - 38px);max-width:1152px;margin:8px 19px;padding:8px 12px;border:1px solid #343849;border-radius:16px;background:#1b1e2b}#compact-sync .transport{flex-basis:86px;gap:3px}#compact-play{padding:2px 10px;min-width:40px}#compact-sync .seek-rail{padding-top:0;align-self:center}#compact-timeline{min-width:0;margin:0}#compact-sync .current-jst{margin-top:4px}#compact-sync .skip-controls{gap:3px}#compact-sync .skip-controls button{padding:1px 2px;font-size:11px}
/* プレイヤー：最大2列 */
#players{display:grid;grid-template-columns:repeat(2,minmax(400px,1fr));gap:0;width:100%;max-width:min(100%,calc(75% + 44.445dvh));margin:0 auto;padding:0}#players>.player-card:only-child{grid-column:1/-1}.player-card{min-width:0;background:#1b1e2b;padding:0;margin:0;border:2px solid var(--vod-color);border-radius:16px;overflow:hidden}.player-card h3,.player-status{display:none}.embed{width:100%;height:auto;aspect-ratio:16/9;min-width:400px;min-height:300px;margin:0;padding:0}.embed>div{height:100%}.embed iframe{display:block;width:100%;height:100%;min-height:300px;border:0}#players.multi-row{max-width:min(100%,calc((100dvh - 150px)*16/9))}
/* チャット */
.youtube-player-card{align-self:start}
.vod-chat{border-top:1px solid var(--vod-color);background:#171923;color:#eef0fa;font-size:14px;line-height:1.6}.chat-heading{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid #343849;font-size:13px}.chat-note{font-size:12px;color:#aeb5c9;overflow-wrap:anywhere}.chat-messages{position:relative;height:260px;overflow:auto;overscroll-behavior:contain;padding:8px 12px;overflow-anchor:none}.chat-row{padding:3px 0;overflow-wrap:anywhere}.chat-name{font-weight:700;color:#b7a0ff}.chat-badge{width:18px;height:18px;vertical-align:middle;margin-right:4px}.chat-emote{height:28px;max-width:112px;object-fit:contain;vertical-align:middle}
#players>.standalone-chat{aspect-ratio:16/9;min-height:304px;display:flex;flex-direction:column}.standalone-chat .vod-chat{width:100%;min-width:0;height:0;min-height:0;flex:1;display:flex;flex-direction:column;border-top:0}.standalone-chat .chat-heading{flex:0 0 auto}.standalone-chat .chat-messages{height:0;min-height:0;flex:1}
.chat-heading-select{flex:1;min-width:0;background:transparent;color:inherit;border:0;border-radius:4px;padding:0 4px 0 0;font:inherit;cursor:pointer}.chat-heading-select option{background:#171923;color:#eef0fa}.chat-heading-select:focus-visible{outline:2px solid var(--vod-color);outline-offset:3px}
.youtube-chat{background:#0f0f0f;color:#f1f1f1;font-family:Roboto,Arial,"Noto Sans JP",sans-serif;font-size:13px;line-height:20px}.youtube-chat .chat-heading{background:#0f0f0f;border-bottom-color:#ffffff26;padding:12px 16px;color:#f1f1f1;font-size:14px}.youtube-chat .chat-heading-select option{background:#0f0f0f}.youtube-chat .chat-messages{padding:8px 16px;scrollbar-color:#606060 #0f0f0f}.youtube-chat .chat-row{padding:4px 0}.youtube-chat .chat-name{color:#aaa;font-weight:500;margin-right:6px}.youtube-chat .chat-name.yt-owner{background:#ffd600;color:#111!important;padding:1px 4px;border-radius:2px}.youtube-chat .chat-name.yt-moderator{color:#5e84f1!important}.youtube-chat .chat-name.yt-member{color:#2ba640!important}.youtube-chat .chat-badge{width:16px;height:16px;margin-right:4px}.youtube-chat .chat-emote{height:24px}.youtube-chat .chat-note{color:#aaa}
/* 小さい画面 */
@media(max-width:920px){#players{grid-template-columns:minmax(400px,1fr);overflow-x:auto}#players.multi-row{max-width:100%}}
@media(max-width:700px){body>main{padding:24px 6px 6px}.panel{padding:16px}.timeline-controls,.vod-range-controls{gap:8px}.vod-range-dates{display:block}.vod-range-dates span{display:block}#compact-sync{width:calc(100% - 24px);margin:8px 12px}}
@media(max-width:700px),(hover:none) and (pointer:coarse){.vod-chat,#players>.standalone-chat{display:none}.player-card{align-self:start}}
@media(max-height:400px){#compact-sync{margin-top:4px;margin-bottom:4px;padding-top:4px;padding-bottom:4px}}

/* 操作できない理由だけ、映像に重ならない場所へ表示。 */
.player-status:not([hidden]){display:block;margin:0;padding:8px 12px;background:#302334;color:#ffcfda;font-size:13px;line-height:1.5}