/* よなラジ 公開サイト。夜の番組なので、どの端末でも夜空の配色にする */
:root {
  --bg: #0f0e22; --bg2: #1b1940; --card: rgba(255, 255, 255, 0.05); --line: rgba(255, 255, 255, 0.12);
  --fg: #ecebf7; --muted: #a9a7c6; --moon: #f3d98b; --accent: #b9b3ff; --live: #ff7a8a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--fg);
  font: 16px/1.8 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg2) 0%, var(--bg) 60%);
}
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 32%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 90%, #fff 50%, transparent 51%);
}

.hero { max-width: 640px; margin: 0 auto; padding: 72px 16px 32px; text-align: center; }
.kicker { margin: 0; color: var(--moon); letter-spacing: 0.2em; font-size: 14px; }
h1 { margin: 4px 0 12px; font-size: clamp(32px, 8vw, 48px); letter-spacing: 0.06em; line-height: 1.3; }
.lead { margin: 0 0 32px; color: var(--muted); }

.player {
  padding: 24px 16px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); backdrop-filter: blur(6px);
}
.status { margin: 0 0 16px; color: var(--muted); font-size: 14px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status.live { color: var(--fg); font-weight: 600; }
.status.live .dot { background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 138, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(255, 122, 138, 0); } }

.play {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; min-width: 180px; justify-content: center;
  font: inherit; font-size: 18px; font-weight: 600; color: var(--bg); background: var(--moon);
  border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.1s, opacity 0.2s;
}
.play:hover:not(:disabled) { transform: translateY(-1px); }
.play:disabled { cursor: default; opacity: 0.35; }
.play .icon { width: 0; height: 0; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.play.playing .icon { width: 14px; height: 16px; border: 0; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.next { margin: 12px 0 0; color: var(--muted); font-size: 14px; min-height: 1.8em; }
.podcast { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.podcast p { margin: 0; }
.podcast .subscribe { justify-content: center; }
.podcast .note { margin-bottom: 12px; font-size: 13px; text-align: left; }

main { max-width: 640px; margin: 0 auto; padding: 0 16px; display: grid; gap: 16px; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
h2 { margin: 0 0 8px; font-size: 18px; color: var(--moon); }
h3 { margin: 0 0 4px; font-size: 16px; }
h3 small { color: var(--muted); font-weight: normal; font-size: 13px; margin-left: 4px; }
.sub { margin-top: 16px; }
p { margin: 0 0 8px; }
.schedule { font-size: 18px; font-weight: 600; }
.schedule small { display: inline-block; font-size: 14px; font-weight: normal; color: var(--muted); }
.note { color: var(--muted); font-size: 14px; }
.hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.host { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.host p { color: var(--muted); font-size: 14px; margin: 0; }
.corners { margin: 0 0 12px; padding-left: 1.2em; font-size: 15px; }
.corners li { margin-bottom: 4px; }

.other-player summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.other-player p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.subscribe { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.app-link { display: inline-block; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; }
.app-link:hover, .app-link:focus-visible { background: var(--accent); color: var(--bg); }
.url-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.url-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); color: var(--fg); font-size: 13px; }
.url-row button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }

.episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.episodes li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.episodes li:last-child { border-bottom: 0; padding-bottom: 0; }
.episodes time { color: var(--muted); font-size: 13px; }
.episodes .title { font-weight: 600; margin: 0; }
.episodes .summary { color: var(--muted); font-size: 14px; margin: 0; }
.episodes audio { width: 100%; margin-top: 6px; }

footer { max-width: 640px; margin: 32px auto 0; padding: 24px 16px 48px; color: var(--muted); font-size: 13px; }
footer strong { color: var(--fg); }
footer a { color: var(--accent); text-decoration-color: rgba(185, 179, 255, 0.4); text-underline-offset: 2px; }
footer a:hover { text-decoration-color: currentColor; }

.card a { color: var(--accent); text-underline-offset: 2px; }
.letter-form { display: grid; gap: 14px; margin-top: 12px; }
.kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kinds legend { padding: 0; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.kinds label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03);
}
.kinds label:has(input:checked) { border-color: var(--moon); background: rgba(243, 217, 139, 0.1); }
.kinds input { accent-color: var(--moon); margin: 0; }
.kinds small, .field small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.field { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.field[hidden], .terms[hidden], .app-link[hidden] { display: none; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--fg); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.25);
}
.field textarea { resize: vertical; min-height: 8em; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field .count { justify-self: end; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.terms { margin: 0; padding-left: 1.2em; }
.terms li { margin-bottom: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.form-actions button {
  font: inherit; font-weight: 600; padding: 10px 28px; border: 0; border-radius: 999px;
  color: var(--bg); background: var(--moon); cursor: pointer;
}
.form-actions button:disabled { opacity: 0.4; cursor: default; }
.form-result { font-size: 14px; }
.form-result.error { color: var(--live); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 回ごとのページと回の一覧（episodes/。yonara.podcast.pages が書き出す） */
.page-header { max-width: 640px; margin: 0 auto; padding: 32px 16px 16px; }
.page-header a { color: var(--moon); text-decoration: none; }
.page h1 { font-size: clamp(22px, 5.5vw, 28px); letter-spacing: 0.02em; margin: 0 0 12px; }
.page .date { margin: 0; color: var(--muted); font-size: 14px; }
.page .lead-text { margin: 0 0 8px; }
.page article section { margin-top: 20px; }
.page article > h2:not(:first-child) { margin-top: 24px; }
.page .episodes a { color: var(--fg); text-decoration-color: var(--line); }
.page .episodes a:hover { color: var(--accent); }
.pager { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-size: 14px; }
.pager a { color: var(--accent); text-underline-offset: 2px; }
.episodes .more { margin: 4px 0 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .status.live .dot { animation: none; } .play { transition: none; } }