Phones: list grids size their columns with minmax(0, 1fr), so one long line can never widen a page past the screen (#359)

ddiff --git a/public/css/features/channel.css b/public/css/features/channel.css
iindex 804ea1dc..d9b974bf 100644
---- a/public/css/features/channel.css
++++ b/public/css/features/channel.css
@@@ -1367,7 +1367,7 @@
  .ch-social-livethumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ch-social-livethumb span { position: absolute; right: 8px; bottom: 8px; font-size: 0.7rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.72); color: #fff; }
  .ch-social-livetitle { margin: 0; font-size: 0.82rem; font-weight: 700; }
--.ch-social-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
++.ch-social-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ch-social-items a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 9px; background: var(--bg-secondary); color: var(--text-secondary); text-decoration: none; font-size: 0.8rem; line-height: 1.4; }
  .ch-social-items a:hover { color: var(--text-primary); }
  .ch-social-items img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex fa718361..c3a5bedf 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -45,7 +45,7 @@
  .egg-slot.is-next { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
  .hero-egg-slots.is-wrong .egg-slot { border-color: #ff5a5f; background: color-mix(in srgb, #ff5a5f 18%, var(--bg-tertiary)); animation: eggShakeSlot .45s; }
  .hero-egg-slots.is-right .egg-slot, .hero-egg-slots.is-solved .egg-slot { border-color: #06d6a0; background: color-mix(in srgb, #06d6a0 20%, var(--bg-tertiary)); }
--.hero-egg-clues { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: clue; }
++.hero-egg-clues { margin: 0 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; counter-reset: clue; }
  .hero-egg-clues li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-primary); padding: 6px 8px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border); }
  .egg-clue-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent, #3472d8)); }
  .egg-clue-text { font-style: italic; line-height: 1.35; }
ddiff --git a/public/css/ov-guide.css b/public/css/ov-guide.css
iindex 41c250a2..0bd59b73 100644
---- a/public/css/ov-guide.css
++++ b/public/css/ov-guide.css
@@@ -55,7 +55,7 @@ body.ovg-lock { overflow: hidden; }
  .ovg-kv code { padding: 6px 9px; border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ovg-copy { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .ovg-copy:hover { border-color: var(--accent); }
--.ovg-obs { margin: 10px 0 6px; padding-left: 0; list-style: none; display: grid; gap: 6px; counter-reset: obs; }
++.ovg-obs { margin: 10px 0 6px; padding-left: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; counter-reset: obs; }
  .ovg-obs li { counter-increment: obs; display: flex; gap: 10px; align-items: center; font-size: 0.86rem; }
  .ovg-obs li::before { content: counter(obs); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent, #3472d8)); flex: none; }
  .ovg-tips { margin: 8px 0 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-muted); }
@@@ -132,7 +132,7 @@ body.ovg-lock { overflow: hidden; }
  .ovg-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-card); }
  .ovg-ring span { position: relative; font-size: 1.5rem; font-weight: 900; } .ovg-ring small { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
  .ovg-hub-group h4 { margin: 12px 0 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
--.ovg-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
++.ovg-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ovg-tasks li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border); }
  .ovg-tasks li.focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
  .ovg-tasks li.done { opacity: 0.8; } .ovg-tasks li.done .ovg-task-ico { background: color-mix(in srgb, #06d6a0 20%, transparent); color: #06d6a0; }
ddiff --git a/public/css/recap.css b/public/css/recap.css
iindex 7f1a6332..e2cb689b 100644
---- a/public/css/recap.css
++++ b/public/css/recap.css
@@@ -41,7 +41,7 @@
  .recap-mic { display: block; padding: 8px 10px; border-radius: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); font-size: 0.88rem; line-height: 1.4; color: var(--text-primary); text-decoration: none; font-style: italic; position: relative; }
  .recap-mic i.fa-play { color: var(--g); font-style: normal; margin-right: 4px; font-size: 0.75rem; }
  .recap-mic:hover { border-color: var(--g); }
--.recap-chatters { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
++.recap-chatters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .recap-chatters li { display: grid; grid-template-columns: 26px 26px minmax(70px, 1fr) minmax(60px, 2fr) 40px; align-items: center; gap: 8px; font-size: 0.9rem; }
  .recap-medal { text-align: center; font-weight: 800; color: var(--text-muted); }
  .recap-chatter-name { font-weight: 700; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }