/* ── 再生ブラウザ（シアター） ─────────────────────────────── */
.theater-layout {
  max-width: 1500px; margin: 0 auto; padding: var(--sp-5);
  display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5);
  position: relative; z-index: 1;
}

/* プレイヤー */
.player-area { position: relative; }
.player-frame {
  position: relative; z-index: 1; aspect-ratio: 16/9; width: 100%;
  background: #000; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.player-frame.is-switching { animation: crt-shake 0.16s steps(2) 3; }

/* 局アクセントのアンビエント光（プレイヤー背後ににじむ） */
.player-ambient {
  position: absolute; inset: -10% -3% 38% -3%; z-index: 0;
  border-radius: 44px; filter: blur(48px); opacity: 0;
  background: radial-gradient(circle at 50% 38%, var(--amb, #e0584b), transparent 70%);
  transition: opacity 0.6s var(--ease-out-expo), background 0.4s;
  pointer-events: none;
}
.player-ambient.is-on { opacity: 0.5; }

/* 放送ストリップ（ON AIR / チャンネル番号） */
.broadcast-strip {
  position: absolute; top: 14px; left: 16px; right: 16px; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none;
}
.broadcast-strip[hidden] { display: none; }
.onair {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(180, 35, 24, 0.92); color: #fff; font-weight: 800;
  font-size: 11px; letter-spacing: 0.14em; padding: 5px 11px; border-radius: 7px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px);
}
.onair i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: yv-glow-pulse 1.4s infinite; box-shadow: 0 0 8px #fff; }
.broadcast-strip.is-flash .onair { animation: onair-flash 0.16s steps(1) 4; }
.onair.is-hidden { visibility: hidden; }
.strip-ch { display: inline-flex; align-items: baseline; gap: 8px; color: #fff; font-family: var(--font-serif); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.strip-ch b { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.strip-ch span { font-size: 0.86rem; opacity: 0.92; }
.broadcast-strip.is-flash .strip-ch { animation: ch-slide-in 0.4s var(--ease-out-expo); }

/* チャンネルザップ（CRT） */
.zap { position: absolute; inset: 0; z-index: 8; overflow: hidden; background: #0b0907; }
.zap[hidden] { display: none; }
.zap.is-out { animation: zap-out 0.26s var(--ease) forwards; }
.zap__static {
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.45; animation: zap-static 0.22s steps(3) infinite, yv-flicker 0.3s infinite;
}
/* 第2のノイズ層（粗め・別方向）で単調さを消し、生きた砂嵐に */
.zap__static::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  animation: zap-static2 0.18s steps(2) infinite;
}
.zap__scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.zap__roll { position: absolute; left: 0; right: 0; height: 34%; top: 0; transform: translateY(-120%); background: linear-gradient(rgba(255,255,255,0.16), transparent); animation: zap-roll 0.5s linear; will-change: transform; }
.zap__card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; }
.zap__no { font-family: var(--font-serif); font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; text-shadow: 0 0 28px var(--amb, #e0584b); letter-spacing: 0.04em; }
.zap__name { font-size: 1.05rem; letter-spacing: 0.16em; opacity: 0.95; }

/* リモコン選局 OSD */
.channel-osd {
  position: absolute; top: 16px; right: 16px; z-index: 7;
  display: flex; align-items: baseline; gap: 10px; color: #fff;
  background: rgba(11, 9, 7, 0.78); padding: 10px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px);
  animation: osd-pop 0.2s var(--ease-spring);
}
.channel-osd[hidden] { display: none; }
.channel-osd b { font-family: var(--font-serif); font-size: 2rem; font-weight: 800; }
.channel-osd span { font-size: 0.9rem; opacity: 0.85; }
.player-frame #player, .player-frame iframe { width: 100%; height: 100%; border: 0; }
.player-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: #15110c center/cover no-repeat;
  background-image: url('/assets/brand/cm-bumper.jpg');
  display: flex; align-items: center; justify-content: center;
}
.player-overlay[hidden] { display: none; }
.player-overlay.is-shown { animation: overlay-zoom 0.4s var(--ease-spring); }
.unmute-btn[hidden] { display: none; }
.player-overlay__inner { text-align: center; color: var(--ink); background: rgba(255,253,248,.86); padding: 22px 34px; border-radius: var(--radius); backdrop-filter: blur(2px); }
/* CMカウントダウン（リング）: CM映像の右下に単独で重ねる（オーバーレイ外） */
.cm-countdown {
  position: absolute; right: 14px; bottom: 14px; z-index: 4;
  width: 56px; height: 56px;
  background: rgba(255, 253, 248, 0.82); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cm-countdown[hidden] { display: none; }
.cm-countdown .cm-ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.cm-ring circle { fill: none; stroke-width: 4; }
.cm-ring circle:first-child { stroke: var(--line); }
.cm-ring #cm-ring-fill { stroke: var(--crimson); stroke-linecap: round; stroke-dasharray: 119.4; transition: stroke-dashoffset 1s linear; }
.cm-countdown span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 800; color: var(--crimson); }
.player-overlay__inner .chip { background: var(--crimson); color: #fff; border-color: var(--crimson); margin-bottom: 10px; }
.player-overlay__inner p { margin: 0; font-family: var(--font-serif); font-size: var(--text-lg); }
.unmute-btn {
  position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--crimson); color: #fff; border: none; padding: 11px 22px;
  border-radius: 999px; font-weight: 800; box-shadow: var(--shadow); animation: bob 2s infinite;
}
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }

/* 現在番組バー */
.now-bar {
  margin-top: var(--sp-4); display: flex; gap: var(--sp-5); justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
}
.now-bar__station { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--text-sm); color: var(--crimson); margin-bottom: 4px; }
.now-bar__station img { width: 26px; height: 26px; background: rgba(255,255,255,.06); border-radius: 6px; }
.now-bar__title { font-size: var(--text-xl); margin: 2px 0; }
.now-bar__sub { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.now-bar__side { display: flex; flex-direction: column; gap: 8px; min-width: 220px; justify-content: center; }
.now-bar__progress { position: relative; height: 6px; background: var(--line); border-radius: 99px; }
.now-bar__progress span { position: relative; display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson-deep), var(--crimson)); border-radius: 99px; transition: width 1s linear; box-shadow: 0 0 10px rgba(224, 88, 75, 0.6); }
.now-bar__progress span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 0 10px var(--crimson), 0 0 4px #fff; }
.now-bar__time { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
#now-countdown { font-weight: 700; color: var(--ink-soft); }
#now-countdown.is-critical { color: var(--crimson); font-weight: 800; animation: crit-blink 1s steps(2) infinite; }

/* 次番組 */
.up-next { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); align-items: stretch; flex-wrap: wrap; }
.up-card { flex: 1; min-width: 200px; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.up-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.up-card:first-child { border-left: 4px solid var(--navy); }
.up-card__label { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--navy); }
.up-card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-base); margin: 2px 0 0; }
.up-card__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--crimson); font-weight: 700; }

/* チャンネルレール */
.channel-rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); align-self: start; position: sticky; top: 80px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.channel-rail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.channel-rail__head h2 { font-size: var(--text-lg); }
.channel-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; }
/* 空状態（局未登録時） */
.channel-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: var(--text-sm); display: flex; flex-direction: column; gap: 8px; }
.channel-empty__hint { font-size: var(--text-xs); opacity: 0.75; }
.channel-empty__hint code { font-family: var(--font-mono); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.channel-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
  cursor: pointer; text-align: left; width: 100%; transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.channel-item__no { position: absolute; top: 6px; right: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--muted); opacity: 0.7; }
.channel-item:hover { transform: translateX(3px); border-color: var(--st-accent, var(--crimson)); }
.channel-item.is-active {
  background: color-mix(in srgb, var(--st-accent, var(--crimson)) 12%, var(--surface-2));
  border-color: var(--st-accent, var(--crimson));
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--st-accent, var(--crimson)) 24%, transparent);
}
.channel-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--st-accent, var(--crimson)); transform-origin: bottom;
  animation: bar-grow 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.channel-item.is-active .channel-item__no { color: var(--st-accent, var(--crimson)); opacity: 1; }
.channel-item__icon { width: 38px; height: 38px; flex: 0 0 auto; background: rgba(255,255,255,.9); border-radius: 9px; padding: 4px; transition: box-shadow var(--dur); }
.channel-item.is-active .channel-item__icon { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-accent, var(--crimson)) 60%, transparent), 0 0 16px color-mix(in srgb, var(--st-accent, var(--crimson)) 50%, transparent); }
.channel-item__body { flex: 1; min-width: 0; }
.channel-item__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-base); display: flex; align-items: center; gap: 8px; }
.ch-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; color: var(--st-accent, var(--crimson)); }
.ch-eq i { width: 2.5px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: bottom; animation: yv-eq 0.9s var(--ease-in-out) infinite; }
.ch-eq i:nth-child(2) { animation-delay: 0.18s; }
.ch-eq i:nth-child(3) { animation-delay: 0.36s; }
.channel-item.is-active .ch-eq { display: inline-flex; }
.channel-item__now { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-item.is-active .channel-item__now { color: var(--st-accent, var(--crimson)); font-weight: 700; }
.channel-rail__hint { font-size: var(--text-xs); color: var(--muted); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); line-height: 1.7; }

/* ── watch 専用キーフレーム ───────────────────────────────── */
@keyframes crt-shake { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-1.5px, 1px); } 66% { transform: translate(1.5px, -1px); } }
@keyframes onair-flash { 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes ch-slide-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes zap-static { to { background-position: 16px 10px; } }
@keyframes zap-roll { from { transform: translateY(-120%); } to { transform: translateY(320%); } }
@keyframes zap-out { to { opacity: 0; } }
@keyframes osd-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes overlay-zoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes crit-blink { 50% { opacity: 0.4; } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .player-frame.is-switching { animation: none; }
  .zap__static, .zap__roll, .onair i, .ch-eq i, .broadcast-strip.is-flash .onair, .broadcast-strip.is-flash .strip-ch { animation: none !important; }
  .zap { background: #0b0907; }
  .player-overlay.is-shown, .channel-osd, .channel-item.is-active::before, .unmute-btn { animation: none !important; }
  #now-countdown.is-critical { animation: none; }
}

@media (max-width: 940px) {
  .theater-layout { grid-template-columns: 1fr; }
  .channel-rail { position: static; max-height: none; }
  .channel-list { max-height: 320px; max-height: 45dvh; }
}

/* ── スマートフォン ────────────────────────────────────────── */
@media (max-width: 640px) {
  .theater-layout {
    padding: var(--sp-3);
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    gap: var(--sp-3);
  }

  /* プレイヤー上のオーバーレイ類を縮小 */
  .broadcast-strip { top: 10px; left: 10px; right: 10px; }
  .strip-ch b { font-size: 1.25rem; }
  .strip-ch span { font-size: 0.78rem; }
  .onair { font-size: 10px; padding: 4px 9px; }
  .channel-osd { top: 10px; right: 10px; padding: 7px 12px; }
  .channel-osd b { font-size: 1.4rem; }
  .zap__no { font-size: clamp(2.2rem, 14vw, 3.4rem); }
  .player-overlay__inner { padding: 16px 20px; max-width: 86%; }
  .unmute-btn { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 10px 18px; white-space: nowrap; }

  /* 現在番組バー: 縦積み */
  .now-bar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .now-bar__title { font-size: var(--text-lg); }
  .now-bar__side { min-width: 100%; }
  .up-card { min-width: 100%; }

  /* チャンネル選局 */
  .channel-rail { padding: var(--sp-3); }
  .channel-item { padding: 9px 10px; gap: 10px; }
  .channel-item__icon { width: 34px; height: 34px; }

  .theater-footer {
    flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── シアター用フッター（法的リンク） ─────────────────────── */
.theater-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  font-size: var(--text-xs);
  color: var(--muted);
}
.theater-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.theater-footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.theater-footer a:hover { color: var(--ink); border-color: var(--line-strong); }

/* ── 「つづいて」次番組予告テロップ ─────────────────────────── */
.next-notice {
  position: absolute; left: 14px; bottom: 14px; z-index: 6;
  display: inline-flex; align-items: baseline; gap: 9px;
  max-width: min(72%, 540px);
  padding: 7px 14px 7px 11px;
  background: rgba(10, 8, 6, 0.82);
  border-left: 3px solid var(--crimson);
  backdrop-filter: blur(4px);
  font-family: var(--font-serif);
  color: #f4ede0;
  animation: notice-in 0.5s var(--ease) both;
}
.next-notice[hidden] { display: none; }
.next-notice__label { flex: none; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; color: var(--crimson); }
.next-notice__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 700; }
.next-notice__time { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
@keyframes notice-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .next-notice { left: 8px; bottom: 8px; max-width: 86%; padding: 5px 10px 5px 8px; }
}