/* もちのロンのラジオ（発注者指示 2026-10-03、2026-10-04 に小窓を足した）
   ------------------------------------------------------------------
   ・ポッドキャストの頁（/podcast）の昔懐かしのラジオ（.radio）
   ・ほかの頁で続きを流す小窓（.radio.radio--mini）……発注者指示 2026-10-04
     「同じサイト内の別ページに移動しても、再生は続けて。小窓（コントロール）を
     出して、掴んで場所を移動できるとなお良い」。中身は 局名・回の題・再生/停止・
     −10秒/＋10秒・速度・選局（発注者了承）
   ・Chrome の「ピクチャー イン ピクチャー」の窓に移したとき（.radio.is-pip）……
     別のタブへ移ると、Chrome が許す人にはラジオが小さな窓で追いかける
   動きは js/radio.js。もとは css/podcast.css の中にあったが、小窓がすべての頁に
   出るようになったので、ここへ分けた（ポッドキャストの頁は両方を読む。ほかの頁は
   小窓を出すときだけ効かせる。描画を待たせないよう media="print" で読んでおき、
   js/radio.js が小窓を出す直前に all へ切り替える）。

   ラジオは昭和 30 年代の真空管ラジオ（いわゆる 5 球スーパー）の面影を、
   CSS と文字だけで描いている（写真・他社の意匠は使わない）。
     木のキャビネット／帯の名前「ST放送」と ON AIR の灯り／
     クリーム色の目盛りガラスと赤い指針、赤く灯る局名「高島宗一郎のもちのロン」／
     緑に光るマジックアイ／ベークライトのつまみ／象牙色のピアノキー
   頁に来たときから電源が入った姿（目盛りが真空管のように橙に灯り、ON AIR と
   局名が赤く、マジックアイが緑）。発注者指示 2026-10-03。
   状態は .radio の data-state：
     loading（一覧を受信中）・standby（流す用意ができ、画面に触れるのを待つ）・
     tuning（音を受信中）・on（流れている）・error（一覧が届かず、受信し直し待ち）
       ……ここまでは電源が入った姿
     paused（電源を切った）・ready（聴き終えた）・fail（この回が流せない） */

/* ── ラジオ ───────────────────────────────────────────────────────── */

.radio {
  margin-top: 12px;
  --wood-1: #5b3116;
  --wood-2: #8a5226;
  --brass-1: #f6e0a0;
  --brass-2: #b8892e;
  --ink: #2a170a;
  --needle: #c8281b;
}

.radio__set {
  position: relative;
  border-radius: 26px 26px 16px 16px;
  padding: 10px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .16), rgba(255, 236, 200, 0) 18%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .22)),
    repeating-linear-gradient(91deg, rgba(40, 18, 4, .10) 0 2px, rgba(255, 220, 170, .04) 2px 5px, rgba(40, 18, 4, .06) 5px 11px, rgba(255, 220, 170, .03) 11px 17px),
    linear-gradient(90deg, #5b3116 0%, #7d4920 22%, #8f5628 46%, #7a461f 70%, #5e3317 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 228, 180, .28),
    inset 0 -5px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 20px 44px rgba(0, 0, 0, .5);
}

/* 上の縁：ON AIR の灯り・帯の名前「ST放送」・再生速度・消音・マジックアイ。
   サランネット（「もちのロン」の札）は外し、速度と消音はこの列へ（発注者指示 2026-10-03） */
.radio__crown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-bottom: 8px;
}
/* 音を流す器（<video>。絵は無い）。消音の自動再生は「見えている video」にしか許されない
   ので、マジックアイの真下に同じ大きさで置き、目で覆う */
.radio__audio {
  position: absolute;
  right: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0d140d;
  object-fit: cover;
  pointer-events: none;
}
.radio__onair {
  flex: none;
  font: 900 9.5px/1 'Noto Sans JP', sans-serif;
  letter-spacing: .1em;
  padding: 5px 6px 4px;
  border-radius: 5px;
  color: #8e4a3a;
  background: #3a160f;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 228, 180, .18);
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
.radio__band {
  flex: none;
  font: 800 12.5px/1 'Shippori Mincho', 'Noto Sans JP', serif;
  letter-spacing: .06em;
  color: var(--brass-1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
/* 再生速度（1.0・1.5・2.0 倍）。象牙色の小さなキーで、選んだ 1 つが沈む */
.radio__speeds { flex: none; display: flex; gap: 3px; margin-left: auto; }
.radio__speed {
  height: 26px;
  min-width: 36px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px 5px 6px 6px;
  font: 900 11px/1 'Noto Sans JP', sans-serif;
  color: #3a2408;
  background: linear-gradient(180deg, #fffaf0, #efe2c2 70%, #dac79b);
  box-shadow: 0 3px 0 #a88b55, 0 4px 7px rgba(0, 0, 0, .35), inset 0 1px 0 #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio__speed[aria-pressed="true"] {
  transform: translateY(2px);
  color: #8a1c10;
  background: linear-gradient(180deg, #efdcae, #e2c98d);
  box-shadow: 0 1px 0 #a88b55, inset 0 2px 4px rgba(80, 40, 0, .3);
}
/* 消音：スピーカーの印。押すと音が消え、印に × が付く */
.radio__mute {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3a2408;
  background: radial-gradient(circle at 38% 32%, #fff6dc, #e6d2a0 60%, #b99d62);
  box-shadow: 0 2px 0 #7a5a2a, 0 3px 6px rgba(0, 0, 0, .4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio__mute svg { display: block; }
.radio__mute .radio__x { display: none; }
/* 押すたびにミュート ⇄ 音あり（発注者指示 2026-10-04）。丸は小さいので、押せる広さだけ上下に
   広げる（左右は隣の鍵とマジックアイに届かない幅）。押した手応えに少し沈む */
.radio__mute { position: relative; }
.radio__mute::after { content: ''; position: absolute; inset: -6px -2px; border-radius: 12px; }
.radio__mute:active { transform: translateY(1px); }
/* ミュート中：スピーカーに赤いバッテンを重ね、赤い輪が呼吸する（発注者指示 2026-10-03：
   「ミュートになっているのが分かりやすく。赤色で、バッテンを重ねるなど」） */
.radio__mute[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #e0261a, 0 0 10px rgba(224, 38, 26, .6), 0 2px 0 #7a5a2a;
  animation: radio-mute 1.6s ease-in-out infinite;
}
.radio__mute[aria-pressed="true"] .radio__waves { display: none; }
.radio__mute[aria-pressed="true"] .radio__x { display: inline; stroke: #e0261a; }
@keyframes radio-mute {
  0%, 100% { box-shadow: 0 0 0 2px #e0261a, 0 0 5px rgba(224, 38, 26, .35), 0 2px 0 #7a5a2a; }
  50% { box-shadow: 0 0 0 2px #e0261a, 0 0 14px rgba(224, 38, 26, .85), 0 2px 0 #7a5a2a; }
}
/* マジックアイ：緑の蛍光の円に、暗い扇の影。電源が入ると光り、
   合っているほど影が細くなる（受信中は広く開いて揺れる） */
.radio__eye {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  --open: 70deg;
  background:
    radial-gradient(circle at 50% 50%, #0d140d 0 18%, transparent 19%),
    conic-gradient(from calc(var(--open) / -2), #0d140d 0 var(--open), #233a24 var(--open) 360deg);
  box-shadow: inset 0 0 0 3px #1a1007, inset 0 0 0 4px rgba(255, 228, 180, .25), 0 1px 0 rgba(255, 228, 180, .2);
  transition: --open .5s ease;
}

/* 目盛りのガラス。電源が入ると、真空管のように橙に灯る */
.radio__dial {
  margin-top: 0;
  border-radius: 10px;
  padding: 5px 10px 6px;
  color: var(--ink);
  background: linear-gradient(180deg, #c9bb92, #ae9d70);
  box-shadow: inset 0 0 0 2px #2b1a0b, inset 0 0 0 4px rgba(184, 137, 46, .9), inset 0 6px 14px rgba(0, 0, 0, .34);
  transition: background .6s ease, box-shadow .6s ease;
}
.radio__scale {
  position: relative;
  height: 31px;
  margin: 0 4px;
  background:
    repeating-linear-gradient(90deg, rgba(42, 23, 10, .55) 0 1px, transparent 1px 7px) left 16px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(42, 23, 10, .75) 0 1.5px, transparent 1.5px 35px) left 14px / 100% 10px no-repeat,
    linear-gradient(rgba(42, 23, 10, .6), rgba(42, 23, 10, .6)) left 24px / 100% 1px no-repeat;
}
.radio__nums {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  font: 700 10px/1 'Shippori Mincho', 'Noto Sans JP', serif;
  letter-spacing: .02em;
  color: rgba(42, 23, 10, .85);
  font-variant-numeric: tabular-nums;
}
/* 各回の「局」の印。左が古い回、右端が最新 */
.radio__marks { position: absolute; left: 0; right: 0; top: 26px; height: 5px; }
.radio__mark {
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(42, 23, 10, .55);
}
.radio__mark.is-on { background: var(--needle); box-shadow: 0 0 0 2px rgba(200, 40, 27, .25); }
.radio__needle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--pos, 92%);
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9e150b, #e0261a 50%, #9e150b);
  box-shadow: 0 0 6px rgba(200, 40, 27, .6);
  transition: left .7s cubic-bezier(.3, 1.3, .5, 1);
}
/* 指針のつまみ：目盛りの線に乗る赤い札に ‹ ›。左右になぞれることを形で伝える
   （発注者指示 2026-10-03：「赤色をちょっと太くして、左右にスライドできそうな UI に」） */
.radio__needle::after {
  content: '‹ ›';
  position: absolute;
  left: 50%;
  top: 12px;
  width: 28px;
  height: 18px;
  margin-left: -14px;
  border-radius: 9px;
  color: #ffffff;
  font: 900 12px/17px 'Noto Sans JP', sans-serif;
  text-align: center;
  background: radial-gradient(circle at 40% 30%, #ff7563, #d42a1c 55%, #92160c);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: radio-nudge 1.4s ease-in-out 1s 2;
}
@keyframes radio-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* なぞっているあいだは、指針が指について動く（ばねの動きを止める） */
.radio.is-sweeping .radio__needle { transition: none; }
.radio__scale { cursor: grab; }
.radio.is-sweeping .radio__scale { cursor: grabbing; }
/* ON AIR・局名などラジオの体に触れても流れる（部品はそれぞれの動き） */
.radio__crown, .radio__dial { cursor: pointer; }

/* 局名（赤く灯る「高島宗一郎のもちのロン」）と、いま合わせている回の日付と題 */
.radio__station {
  margin: 4px 0 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.radio__name {
  font: 900 15px/1.35 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  color: #8f2a1c;
  transition: color .5s ease, text-shadow .5s ease;
}
.radio__when {
  font: 700 11px/1.3 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  color: rgba(42, 23, 10, .75);
}
.radio__title:empty { display: none; }
.radio__title {
  font: 800 13px/1.4 'Noto Sans JP', sans-serif;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* 聴いているところ（つまみ代わりの細い溝）と時間 */
.radio__track { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.radio__seek {
  flex: 1;
  min-width: 0;
  /* 押せる高さは 28px（WCAG 2.5.8 の 24px 以上。見た目の溝は 4px のまま）。上下を -4px ずつ
     詰めて、組み方は前の 20px のまま（2026-10-05 の見た目の全数テストで見つけた） */
  height: 28px;
  margin: -4px 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  --p: 0%;
}
.radio__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a3d12 var(--p), rgba(42, 23, 10, .25) var(--p));
}
.radio__seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a3d12 var(--p), rgba(42, 23, 10, .25) var(--p));
}
.radio__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c79a3c 60%, #7a5718);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.radio__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c79a3c 60%, #7a5718);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.radio__seek:disabled { opacity: .45; }
.radio__time {
  flex: none;
  font: 700 11px/1 'Noto Sans JP', sans-serif;
  font-variant-numeric: tabular-nums;
  color: rgba(42, 23, 10, .8);
}

/* つまみとピアノキー */
.radio__panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.radio__ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.radio__label {
  font: 800 11px/1 'Noto Sans JP', sans-serif;
  letter-spacing: .12em;
  color: var(--brass-1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.radio__knob {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  /* ベークライトのギザギザ（縁の刻み）と丸い頭 */
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0, 0, 0, .35) 63% 64%, transparent 65%),
    repeating-conic-gradient(from 0deg, #2b190d 0 7deg, #4a2e1a 7deg 15deg),
    #33200f;
  box-shadow:
    0 6px 0 #1b0f06,
    0 10px 18px rgba(0, 0, 0, .55),
    inset 0 2px 2px rgba(255, 220, 170, .25);
  -webkit-tap-highlight-color: transparent;
}
.radio__knob--power {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  transform: rotate(var(--turn, 0deg));
}
.radio__knob--power:active:not(:disabled) {
  box-shadow: 0 2px 0 #1b0f06, 0 4px 10px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 220, 170, .2);
  transform: translateY(4px) rotate(var(--turn, 0deg));
}
.radio__knob--power:disabled { cursor: default; filter: saturate(.6) brightness(.85); }
.radio__cap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 32%, #fff6dc, #e6d2a0 55%, #b99d62);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .5);
  transform: rotate(calc(var(--turn, 0deg) * -1));
}
/* 頭の印：止まっているときは ▶、流れているときは ❚❚ */
.radio__cap::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #4a2a10;
}
.radio[data-state="on"] .radio__cap::before,
.radio[data-state="tuning"] .radio__cap::before {
  width: 14px;
  height: 17px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, #4a2a10 0 5px, transparent 5px 9px, #4a2a10 9px 14px);
}
/* 押してほしいときは、つまみのまわりに淡い金の輪が呼吸する */
.radio[data-state="ready"] .radio__knob--power::after,
.radio[data-state="paused"] .radio__knob--power::after,
.radio[data-state="standby"] .radio__knob--power::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(246, 224, 160, .75);
  animation: radio-call 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes radio-call {
  0%, 100% { opacity: .15; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1); }
}

/* 選局のつまみ：押すたびに 1 つ前の回へ（いちばん古い回の次は最新回）。
   真ん中の白い刻みが、合わせた回のぶんだけ回る */
.radio__knob--tune {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.radio__knob--tune:active:not(:disabled) {
  box-shadow: 0 2px 0 #1b0f06, 0 4px 10px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 220, 170, .2);
  transform: translateY(4px);
}
.radio__knob--tune:disabled { cursor: default; filter: saturate(.6) brightness(.85); }
.radio__grip {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a3a22, #2a180b 70%);
  box-shadow: inset 0 1px 2px rgba(255, 220, 170, .25), 0 1px 2px rgba(0, 0, 0, .6);
  transform: rotate(var(--dial, 0deg));
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
  pointer-events: none;
}
.radio__grip::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #f3e3b8;
}

/* まんなかの柱：−10秒・＋10秒を 1 行に、その下に高島TV への入口 */
.radio__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding-top: 3px; }
.radio__keys { display: flex; gap: 6px; }
.radio__keys .radio__key { flex: 1; min-width: 0; padding: 0; }
/* 高島TV への入口。はじめは木に彫った溝のような札で、押せると分かりにくかった（発注者指示
   2026-10-04「ボタン感があまりない。ボタンとしてテレビに飛べると分かる UI に」）。真鍮の
   金色の押しボタンにして、ピアノキーと同じく下の縁で浮かせ、押すと沈む。テレビの印（画面に
   再生の三角）・「高島TVを見る」・行き先の「›」で、押すと高島TV へ移ると分かるように */
.radio__tv {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  font: 900 13.5px/1 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  color: #2c1704;
  text-decoration: none;
  background: linear-gradient(180deg, #fff0b8 0%, #f0cf76 42%, #d3a443 100%);
  box-shadow:
    0 4px 0 #7c5617,
    0 6px 12px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 3px rgba(124, 86, 23, .3);
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.radio__tv:hover { filter: brightness(1.06); }
.radio__tv:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #7c5617,
    0 2px 5px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 2px rgba(124, 86, 23, .3);
}
.radio__tv svg { display: block; flex: none; }
.radio__tv-play { fill: #f6d77e; }
.radio__tv-label { white-space: nowrap; }
.radio__tv-go { margin-left: 1px; opacity: .85; }
.radio__tv:focus-visible { outline: 3px solid #f6e0a0; outline-offset: 3px; }
.radio__key {
  height: 32px;
  border: 0;
  border-radius: 6px 6px 8px 8px;
  font: 900 13px/1 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  color: #3a2408;
  background: linear-gradient(180deg, #fffaf0, #efe2c2 70%, #dac79b);
  box-shadow: 0 4px 0 #a88b55, 0 6px 10px rgba(0, 0, 0, .35), inset 0 1px 0 #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio__key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #a88b55, 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 #ffffff; }
.radio__key:disabled { opacity: .55; cursor: default; }

.radio__feet { display: flex; justify-content: space-between; padding: 0 34px; height: 9px; }
.radio__feet i { width: 34px; height: 9px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #2a160a, #120a04); }

.radio button:focus-visible { outline: 3px solid #f6e0a0; outline-offset: 3px; }
/* ラジオの上では、二度押しの拡大やつまんでの拡大縮小をしない（縦のスクロールだけ通す）。
   発注者報告 2026-10-03「再生するのあたりを触ったら画面が拡大縮小してしまう」 */
.radio { touch-action: pan-y; }
.radio button, .radio a { touch-action: manipulation; }
.radio__seek { touch-action: none; }
/* 狭い画面（360px 未満）では、上の縁の部品を一回り小さくして 1 列に収める
   （マジックアイは外さない。音を流す器がその真下にあるため） */
@media (max-width: 359px) {
  .radio__crown { gap: 4px; }
  .radio__onair { font-size: 8.5px; padding: 4px 5px 3px; letter-spacing: .06em; }
  .radio__band { font-size: 11px; letter-spacing: 0; }
  .radio__speeds { gap: 2px; }
  .radio__speed { min-width: 28px; padding: 0 2px; font-size: 10px; }
  .radio__mute { width: 26px; height: 26px; }
  .radio__eye, .radio__audio { width: 22px; height: 22px; }
  .radio__audio { top: 4px; }
}
/* 高島TV のボタンは、幅が足りない画面（375px 未満）では「高島TV ›」に縮める
   （テレビの印と「›」は残す。「を見る」まで入れると、360px で文字が縁に届く） */
@media (max-width: 374px) {
  .radio__tv { gap: 4px; padding: 0 5px; font-size: 13px; letter-spacing: .02em; }
  .radio__tv-more { display: none; }
  .radio__tv-set { width: 18px; height: 18px; }
  .radio__tv-go { width: 12px; height: 12px; }
}
.radio__seek:focus-visible { outline: 2px solid #7a3d12; outline-offset: 2px; border-radius: 4px; }

/* 電源が入ったとき：目盛りが灯り、ON AIR が赤く、マジックアイが緑に */
.radio[data-state="standby"] .radio__dial,
.radio[data-state="tuning"] .radio__dial,
.radio[data-state="on"] .radio__dial,
.radio[data-state="error"] .radio__dial {
  background: radial-gradient(130% 120% at 50% 40%, #fff6d8, #ffdc8a 50%, #f3ad45);
  box-shadow: inset 0 0 0 2px #2b1a0b, inset 0 0 0 4px rgba(184, 137, 46, .9), inset 0 6px 14px rgba(120, 60, 0, .22), 0 0 30px rgba(255, 186, 72, .55);
}
.radio[data-state="standby"] .radio__onair,
.radio[data-state="tuning"] .radio__onair,
.radio[data-state="on"] .radio__onair,
.radio[data-state="error"] .radio__onair {
  color: #ffffff;
  background: #d9302a;   /* 白い字との濃さの比 4.77（WCAG AA の 4.5 以上。#e2362a は 4.38 だった。2026-10-05） */
  box-shadow: 0 0 0 1px #7a140c, 0 0 14px rgba(255, 70, 50, .75);
}
.radio[data-state="standby"] .radio__eye,
.radio[data-state="tuning"] .radio__eye,
.radio[data-state="on"] .radio__eye,
.radio[data-state="error"] .radio__eye {
  background:
    radial-gradient(circle at 50% 50%, #0d140d 0 18%, transparent 19%),
    conic-gradient(from calc(var(--open) / -2), #0d140d 0 var(--open), #49f08a var(--open) 360deg);
  box-shadow: inset 0 0 0 3px #1a1007, inset 0 0 0 4px rgba(255, 228, 180, .25), 0 0 12px rgba(73, 240, 138, .6);
}
.radio[data-state="on"] .radio__eye { --open: 14deg; animation: radio-eye 3.2s ease-in-out infinite; }
.radio[data-state="tuning"] .radio__eye,
.radio[data-state="error"] .radio__eye { --open: 80deg; animation: radio-eye-search .5s steps(2) infinite; }
.radio[data-state="standby"] .radio__eye { --open: 40deg; animation: radio-eye 1.6s ease-in-out infinite; }
.radio[data-state="standby"] .radio__name,
.radio[data-state="tuning"] .radio__name,
.radio[data-state="on"] .radio__name,
.radio[data-state="error"] .radio__name {
  color: #e0261a;
  text-shadow: 0 0 6px rgba(255, 80, 40, .55), 0 0 1px rgba(160, 20, 0, .6);
}
@property --open { syntax: '<angle>'; inherits: false; initial-value: 70deg; }
@keyframes radio-eye { 0%, 100% { --open: 14deg; } 40% { --open: 22deg; } 60% { --open: 10deg; } }
@keyframes radio-eye-search { 0% { --open: 90deg; } 100% { --open: 60deg; } }

/* この回が流せない。電波が届かないときの電源は ▶ のまま（押すと受信し直す） */
.radio[data-state="loading"] .radio__cap::before { border-left-color: rgba(74, 42, 16, .4); }
.radio[data-state="fail"] .radio__when { color: #7a1d12; }

@media (prefers-reduced-motion: reduce) {
  .radio__needle, .radio__grip { transition: none; }
  .radio .radio__knob--power::after { animation: none; opacity: .8; }
  .radio__needle::after { animation: none; }
  .radio__mute[aria-pressed="true"] { animation: none; }
  .radio .radio__eye { animation: none !important; }
}

/* ── 小窓（ほかの頁で続きを流すラジオ）────────────────────────────────
   ポッドキャストの頁で聴いていたら、ほかの頁へ移っても同じ回の続きが流れ、
   この小窓が出る（このタブで聴いていたときだけ。× で止めて閉じる）。
   木の小箱に、灯る目盛りのガラス。掴むと好きな場所へ動かせ、置いた場所は
   この端末に覚える（はじめはタブバーのすぐ上、本文の柱の右寄せ）。
   タブバー(130)より上、ブースターの幕(140〜)より下に置く */
.radio--mini {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 135;
  width: min(300px, calc(100vw - 16px));
  margin: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
.radio--mini.is-dragging { cursor: grabbing; }
.radio--mini .radio__set {
  border-radius: 16px;
  padding: 10px 8px 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.radio--mini.is-dragging .radio__set {
  transform: scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255, 228, 180, .28),
    inset 0 -5px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 28px 56px rgba(0, 0, 0, .6);
}
/* 掴むところの印（木の縁の上に細い棒） */
.radio__handle { display: none; }
.radio--mini .radio__handle {
  display: block;
  position: absolute;
  left: 50%;
  top: 3px;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: rgba(255, 228, 180, .38);
  pointer-events: none;
}
.radio--mini .radio__crown { height: 26px; margin-bottom: 6px; gap: 4px; }
.radio--mini .radio__onair { font-size: 8.5px; padding: 4px 5px 3px; letter-spacing: .08em; }
.radio--mini .radio__speeds { gap: 2px; }
.radio--mini .radio__speed { height: 24px; min-width: 33px; padding: 0 3px; font-size: 10px; box-shadow: 0 2px 0 #a88b55, 0 3px 6px rgba(0, 0, 0, .35), inset 0 1px 0 #ffffff; }
.radio--mini .radio__speed[aria-pressed="true"] { transform: translateY(1px); box-shadow: 0 1px 0 #a88b55, inset 0 2px 4px rgba(80, 40, 0, .3); }
.radio--mini .radio__mute { width: 24px; height: 24px; }
.radio--mini .radio__mute svg { width: 14px; height: 14px; }
.radio--mini .radio__eye,
.radio--mini .radio__audio { width: 22px; height: 22px; }
/* 音を流す器はマジックアイの真下（目の右に × があるので、そのぶん左） */
.radio--mini .radio__audio { right: 28px; top: 2px; }
/* × ：止めて閉じる */
.radio__close {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass-1);
  background: rgba(20, 8, 0, .38);
  box-shadow: inset 0 0 0 1px rgba(246, 224, 160, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio__close svg { display: block; }
.radio__close:hover { color: #fff3cf; }
.radio--mini .radio__dial { position: relative; padding: 5px 9px 8px; border-radius: 8px; }
.radio--mini .radio__station { margin: 0; min-height: 0; gap: 0; }
/* 局名を押すと、ポッドキャストの頁（本体のラジオ）へ。続きはそこでも流れる */
.radio--mini .radio__name {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.radio--mini .radio__name::after { content: '›'; font-size: 15px; line-height: 1; }
.radio--mini .radio__name:focus-visible { outline: 2px solid #7a3d12; outline-offset: 1px; border-radius: 3px; }
.radio--mini .radio__when,
.radio--mini .radio__title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 中身が入る前から同じ高さ（はじめの置き場所を、タブバーに掛からないよう測るため） */
.radio--mini .radio__when { font-size: 10px; line-height: 1.4; min-height: 1.4em; }
.radio--mini .radio__title { font-size: 12px; line-height: 1.35; min-height: 1.35em; -webkit-line-clamp: none; }
/* 聴いているところ（細い線。押して飛ぶのは本体のラジオで） */
.radio__prog { display: none; }
.radio--mini .radio__prog {
  display: block;
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #7a3d12 var(--p, 0%), rgba(42, 23, 10, .2) var(--p, 0%));
}
.radio--mini .radio__panel { margin-top: 7px; gap: 5px; align-items: center; }
.radio--mini .radio__knob--power {
  width: 38px;
  height: 38px;
  box-shadow: 0 3px 0 #1b0f06, 0 5px 10px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 220, 170, .25);
}
.radio--mini .radio__knob--power:active:not(:disabled) {
  box-shadow: 0 1px 0 #1b0f06, 0 2px 5px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 220, 170, .2);
  transform: translateY(2px) rotate(var(--turn, 0deg));
}
.radio--mini .radio__cap { width: 24px; height: 24px; }
.radio--mini .radio__cap::before { margin-left: 3px; border-width: 6px 0 6px 10px; }
.radio--mini[data-state="on"] .radio__cap::before,
.radio--mini[data-state="tuning"] .radio__cap::before {
  width: 10px;
  height: 11px;
  margin-left: 0;
  background: linear-gradient(90deg, #4a2a10 0 4px, transparent 4px 6px, #4a2a10 6px 10px);
}
.radio--mini[data-state] .radio__knob--power::after { inset: -5px; }
.radio--mini .radio__key {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0;
  font-size: 12px;
  box-shadow: 0 3px 0 #a88b55, 0 4px 8px rgba(0, 0, 0, .35), inset 0 1px 0 #ffffff;
}
.radio--mini .radio__key:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #a88b55, 0 2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 #ffffff; }
.radio__key--tune { color: #8a1c10; }
/* 電源の札は、目には出さず読み上げにだけ（「再生する」「停止する」） */
.radio--mini .radio__label--power {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.radio--mini button:focus-visible { outline: 3px solid #f6e0a0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .radio--mini .radio__set { transition: none; }
  .radio--mini.is-dragging .radio__set { transform: none; }
}

/* ── ピクチャー イン ピクチャー（Chrome の小さな窓）─────────────────────
   別のタブへ移ると、Chrome が許す人には（パソコンの Chrome・Edge など）ラジオが
   小さな窓に移って追いかける（発注者指示 2026-10-04：「Chrome が許す人には自動で
   開く」）。窓の中では、ラジオを窓いっぱいに。本体のラジオは目盛りと高島TV の
   入口を外し、つまみを小さくして、小窓と同じ中身（局名・題・再生/停止・
   −10秒/＋10秒・速度・選局）に詰める */
body.tb-pip {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #4a2812;
  font-family: 'Noto Sans JP', sans-serif;
}
.radio.is-pip {
  position: static;
  width: auto;
  margin: 0;
  cursor: default;
  touch-action: manipulation;
}
.radio.is-pip .radio__set {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0;
  transform: none;
}
.radio.is-pip .radio__handle,
.radio.is-pip .radio__feet,
.radio.is-pip .radio__scale,
.radio.is-pip .radio__tv { display: none; }
.radio.is-pip:not(.radio--mini) .radio__station { min-height: 0; }
.radio.is-pip:not(.radio--mini) .radio__ctl { gap: 3px; }
.radio.is-pip:not(.radio--mini) .radio__label { font-size: 10px; letter-spacing: .08em; }
.radio.is-pip:not(.radio--mini) .radio__panel { align-items: center; margin-top: 8px; }
.radio.is-pip:not(.radio--mini) .radio__mid { padding-top: 0; }
.radio.is-pip:not(.radio--mini) .radio__knob {
  width: 46px;
  height: 46px;
  box-shadow: 0 4px 0 #1b0f06, 0 6px 12px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 220, 170, .25);
}
.radio.is-pip:not(.radio--mini) .radio__cap { width: 28px; height: 28px; }
.radio.is-pip:not(.radio--mini) .radio__cap::before { margin-left: 3px; border-width: 7px 0 7px 11px; }
.radio.is-pip:not(.radio--mini)[data-state="on"] .radio__cap::before,
.radio.is-pip:not(.radio--mini)[data-state="tuning"] .radio__cap::before {
  width: 11px;
  height: 13px;
  margin-left: 0;
  background: linear-gradient(90deg, #4a2a10 0 4px, transparent 4px 7px, #4a2a10 7px 11px);
}
.radio.is-pip:not(.radio--mini) .radio__grip { inset: 10px; }
.radio.is-pip:not(.radio--mini) .radio__grip::before { top: 3px; height: 8px; }
.radio.is-pip[data-state] .radio__knob--power::after { inset: -5px; }

/* 本体のラジオが小さな窓へ移っているあいだ、頁のラジオの場所に置く札 */
.radio-away {
  margin-top: 12px;
  padding: 16px 16px 18px;
  border-radius: 20px;
  text-align: center;
  color: #f6e0a0;
  background:
    repeating-linear-gradient(91deg, rgba(40, 18, 4, .10) 0 2px, rgba(255, 220, 170, .04) 2px 5px, rgba(40, 18, 4, .06) 5px 11px),
    linear-gradient(90deg, #5b3116 0%, #8f5628 46%, #5e3317 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 14px 30px rgba(0, 0, 0, .4);
}
.radio-away__msg { margin: 0 0 10px; font: 800 14px/1.5 'Noto Sans JP', sans-serif; letter-spacing: .04em; }
.radio-away__msg b { color: #ff6b5c; }
.radio-away__btn {
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px 6px 8px 8px;
  font: 900 13px/1 'Noto Sans JP', sans-serif;
  color: #3a2408;
  background: linear-gradient(180deg, #fffaf0, #efe2c2 70%, #dac79b);
  box-shadow: 0 4px 0 #a88b55, 0 6px 10px rgba(0, 0, 0, .35), inset 0 1px 0 #ffffff;
  cursor: pointer;
}
.radio-away__btn:focus-visible { outline: 3px solid #f6e0a0; outline-offset: 3px; }

/* ── 端にしまう（発注者指示 2026-10-04）──────────────────────────────
   「右にぐっと押し込んだら、端っこに格納できて、矢印で広げられるように」。iPhone の
   ピクチャー イン ピクチャーと同じ作法：小窓を左右の端の外へ払うと隠れ、矢印の札だけが
   端に残る。札を押すか、内側へ引くと戻る。札は上下に動かせる。しまっているあいだも音は
   流れたまま（音の器は札の目の下へ移る。iPhone は見えている器にしか消音の再生を許さない） */
.radio__tab { display: none; }
.radio--mini.is-stashed { width: auto; }
.radio--mini.is-stashed .radio__set { display: none; }
.radio--mini.is-stashed .radio__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 34px;
  height: 84px;
  padding: 12px 0 10px;
  margin: 0;
  border: 0;
  border-radius: 16px 0 0 16px;
  color: var(--brass-1);
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .16), rgba(255, 236, 200, 0) 30%, rgba(0, 0, 0, .2)),
    linear-gradient(90deg, #5b3116 0%, #8f5628 55%, #7a461f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 228, 180, .28), inset 0 0 0 1px rgba(0, 0, 0, .35), -6px 8px 18px rgba(0, 0, 0, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: radio-tab-in .22s ease-out;
}
.radio--mini.is-stashed[data-side="left"] .radio__tab {
  border-radius: 0 16px 16px 0;
  box-shadow: inset 0 2px 0 rgba(255, 228, 180, .28), inset 0 0 0 1px rgba(0, 0, 0, .35), 6px 8px 18px rgba(0, 0, 0, .45);
}
.radio__tab-arrow { font: 900 24px/1 'Noto Sans JP', sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.radio__tab-arrow::before { content: '‹'; }
.radio--mini[data-side="left"] .radio__tab-arrow::before { content: '›'; }
.radio__tab .radio__eye { width: 18px; height: 18px; }
.radio__tab .radio__audio { top: auto; right: auto; left: 8px; bottom: 10px; width: 18px; height: 18px; }
.radio--mini.is-muted .radio__tab .radio__eye { box-shadow: 0 0 0 2px #e0261a, 0 0 8px rgba(224, 38, 26, .6); }
.radio__tab:focus-visible { outline: 3px solid #f6e0a0; outline-offset: 2px; }
@keyframes radio-tab-in { from { opacity: 0; } to { opacity: 1; } }
/* 札から出てくるとき：しまっていた側から滑り込む */
.radio--mini.is-arriving .radio__set { animation: radio-arrive-r .24s ease-out; }
.radio--mini.is-arriving[data-from="left"] .radio__set { animation-name: radio-arrive-l; }
@keyframes radio-arrive-r { from { transform: translateX(45%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes radio-arrive-l { from { transform: translateX(-45%); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .radio--mini.is-stashed .radio__tab,
  .radio--mini.is-arriving .radio__set { animation: none; }
}

/* ── 外枠の窓（発注者指示 2026-10-04「ミュートにしたり止めたりしないで」）────────
   聴いているあいだにサイトの中のリンクを押すと、頁そのものは移らず、画面いっぱいの窓に
   行き先の頁を出す（js/radio.js の「殻」）。音の器はこの頁に残るので、頁を何度移っても
   音は途切れず、ミュートにも戻らない。もとの頁の中身は隠し、ラジオの小窓だけを窓の上に */
html.tb-shell-on,
html.tb-shell-on body { overflow: hidden !important; }
html.tb-shell-on body > *:not(.tb-shell):not(.radio--mini):not(.radio-holder) { display: none !important; }
.tb-shell {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  z-index: 125;
  background: #050f21;
}
/* 操作盤が窓の中の頁（ポッドキャストの頁の大きなラジオ）にあるあいだ、音の器を置く小さな控え場
   （器はこの頁から出さない。見えている扱いになるよう、画面の隅にごく小さく） */
.radio-holder {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: .01;
  pointer-events: none;
  z-index: 136;
}
.radio-holder .radio__audio { position: static; display: block; width: 2px; height: 2px; }
/* 窓の中の頁に幕（ブースターのシートなど）が出ているあいだは、小窓を退ける（幕のボタンを
   隠さないように）。音の器は小窓の中のまま（見えない扱いにならないよう、透かすだけ） */
.radio--mini.is-yielding { opacity: 0; pointer-events: none; transition: opacity .18s ease; }