/* 見る画面の見た目(CSP の style-src 'self' でも読めるよう別ファイル)
   色は Material 3 の考え方(面・面の上の文字・強調色・オンの塗り)。暗い画面が既定、明るい画面は data-theme="light" */
:root {
  --bg:#121316; --bar:#1d2024; --line:#2c3036; --text:#e3e2e6; --sub:#b4b8c0; --old:#7d828b;
  --primary:#a8c7fa; --on-primary:#062e6f; --tonal:#3a4458; --on-tonal:#d8e2ff;
  --ok:#6dd58c; --ng:#f2b84b; --menu:#272a2f; --shadow:0 4px 16px rgba(0,0,0,.45);
  --fs:20px;
}
:root[data-theme="light"] {
  --bg:#f8f9fc; --bar:#eceef3; --line:#d5d8de; --text:#1b1c1f; --sub:#44474e; --old:#8a8e96;
  --primary:#0b57d0; --on-primary:#ffffff; --tonal:#d3e3fd; --on-tonal:#041e49;
  --ok:#1e8e3e; --ng:#b06000; --menu:#ffffff; --shadow:0 4px 16px rgba(0,0,0,.18);
}
/* 国旗だけのフォント。国旗の文字(地域を表す記号)にだけ効き、ほかの文字には使われない。
   Windows のブラウザは国旗の絵文字を「US」のような文字で出すため(絵は Twemoji・CC-BY 4.0) */
@font-face {
  font-family:"Twemoji Country Flags";
  unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src:url("flags.woff2") format("woff2");
  font-display:swap;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family:-apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif; }
body { display:flex; flex-direction:column; }

/* 上のバー */
.bar { display:flex; align-items:center; gap:4px; min-height:56px; padding:4px 4px 4px 16px; background:var(--bar);
  padding-top:calc(4px + env(safe-area-inset-top)); }
.bar h1 { flex:1; min-width:0; display:flex; align-items:center; gap:8px; margin:0; font-size:17px; font-weight:600; }
.bar .title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.dot.ng { background:var(--ng); animation:blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.3; } }
.state { font-size:13px; color:var(--ng); white-space:nowrap; padding:0 8px; }
.state.ok { display:none; }   /* つながっている間は点だけ。困ったときだけ文字で知らせる */
.tools { display:flex; align-items:center; gap:2px; }

button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.icon { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--sub); }
.icon:hover { background:color-mix(in srgb, var(--text) 8%, transparent); }
.icon:active { background:color-mix(in srgb, var(--text) 14%, transparent); }
.icon:disabled { opacity:.35; cursor:default; background:none; }
.icon svg { width:24px; height:24px; fill:currentColor; }
.icon.txt { font-size:18px; font-weight:700; letter-spacing:-1px; }
.icon.txt small { font-size:13px; font-weight:700; }
/* 明暗・全画面のアイコンは、押すと切り替わる先を出す */
#theme .i-light { display:none; }
:root[data-theme="light"] #theme .i-light { display:block; }
:root[data-theme="light"] #theme .i-dark { display:none; }
#full .i-exit { display:none; }
#full.on .i-exit { display:block; }
#full.on .i-full { display:none; }

/* メニュー(⋮) */
.menu { position:fixed; z-index:10; top:calc(56px + env(safe-area-inset-top)); right:8px; min-width:200px; padding:8px 0;
  background:var(--menu); border-radius:4px; box-shadow:var(--shadow); }
.menu button { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; font-size:15px; text-align:left; color:var(--text); }
.menu button:hover { background:color-mix(in srgb, var(--text) 8%, transparent); }
.menu svg { width:20px; height:20px; fill:var(--sub); }
.menu .check { width:20px; height:20px; border:2px solid var(--sub); border-radius:2px; display:inline-flex; align-items:center; justify-content:center; }
.menu .on .check { background:var(--primary); border-color:var(--primary); }
.menu .on .check::after { content:""; width:5px; height:10px; border:solid var(--on-primary); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }

.menu .credit { margin:4px 0 0; padding:8px 16px 4px; border-top:1px solid var(--line); font-size:11px; color:var(--old); }
.menu .credit a { color:var(--old); }

/* 字幕 */
#list { flex:1; overflow-y:auto; padding:16px 16px 32px; -webkit-overflow-scrolling:touch; }
.row { margin:0 0 0.7em; font-size:var(--fs); line-height:1.6; color:var(--old); }
.row.recent { color:var(--sub); }
.row.latest { color:var(--text); font-size:calc(var(--fs) * 1.25); font-weight:600; }
.row .flag { margin-right:0.35em; font-family:"Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.empty { color:var(--sub); font-size:15px; line-height:1.7; }

/* 最新へ(Material 3 の拡張 FAB) */
.fab { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); height:48px; padding:0 20px; border-radius:16px;
  background:var(--tonal); color:var(--on-tonal); font-size:15px; font-weight:600; box-shadow:var(--shadow); display:none; }

/* 一言の知らせ */
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px);
  padding:12px 16px; border-radius:4px; background:var(--text); color:var(--bg); font-size:14px; box-shadow:var(--shadow); }

#login { flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px; gap:12px; max-width:420px; margin:0 auto; width:100%; }
#msg { margin:0; color:var(--sub); font-size:17px; line-height:1.7; }

/* 狭い画面: 題名に場所を残すため、ボタンを少し詰める */
@media (max-width:380px) {
  .bar { padding-left:12px; }
  .icon { width:40px; height:40px; }
  .bar h1 { font-size:15px; }
}