/* 3.3.8: Info tiles, Timeline episode dates, Continue watching, Day mode, tap-sound switch. Loaded last. */

/* Info: three library tiles in one row */
.about-stats.about-stats3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important}
.about-stat{position:relative;overflow:hidden;display:grid;justify-items:start;gap:2px;min-height:118px;padding:14px 12px 12px;border-radius:22px;text-align:left;color:#fff;border:1.5px solid var(--st-line);background:radial-gradient(120% 90% at 100% 0%,var(--st-glow),transparent 62%),linear-gradient(160deg,var(--st-a),#111830 78%);box-shadow:inset 0 1px 0 #ffffff14,0 10px 24px #0005}
.about-stat::after{content:"";position:absolute;right:-18px;bottom:-18px;width:70px;height:70px;border-radius:50%;border:1.5px solid var(--st-line);opacity:.5}
.about-stat svg{width:22px;height:22px;color:var(--st-ink);margin-bottom:10px}
.about-stat b{font-family:Zen,system-ui,sans-serif;font-weight:400;font-size:clamp(26px,8.4vw,34px);line-height:1;color:#fff;text-shadow:0 0 18px var(--st-glow)}
.about-stat span{font-size:12px;letter-spacing:.4px;color:var(--st-ink)}
.about-stat-episodes{--st-a:#1f4a46;--st-line:#a7f3d077;--st-glow:#34d39955;--st-ink:#a7f3d0}
.about-stat-clips{--st-a:#3b2a6b;--st-line:#c4b5fd77;--st-glow:#a78bfa55;--st-ink:#c4b5fd}
.about-stat-gaming{--st-a:#5a2346;--st-line:#f9a8d477;--st-glow:#f472b655;--st-ink:#f9a8d4}
.about-stat:active{transform:scale(.97)}

/* Timeline: compact "Episode N uploaded" rows */
.orbit-facts-compact{display:grid;margin:6px 0 4px}
.orbit-fact.ep-fact{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0}
.orbit-fact.ep-fact .orbit-dot{margin-top:0;width:8px;height:8px}
.orbit-fact.ep-fact small{font-size:12px;color:#d6deeb}
.orbit-fact.ep-fact b{font-size:13px;color:#a7f3d0;white-space:nowrap;font-variant-numeric:tabular-nums}
.orbit-fact.ep-fact b i{font-style:normal;color:#8fa0b8;font-size:11px}

/* Sound panel: on/off switch for tap sounds */
.sound-switch-row .sound-row-head{margin:0}
.sound-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;background:none;border:0;color:#b4afce;font:inherit;font-size:12px}
.sound-switch span{position:relative;width:46px;height:26px;border-radius:99px;background:#ffffff26;transition:background .2s}
.sound-switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.sound-switch.on span{background:#a7f3d0}.sound-switch.on span::after{transform:translateX(20px);background:#0b1020}
.sound-switch b{font-weight:400;min-width:24px}.sound-switch.on b{color:#a7f3d0}

/* Watch: Continue watching */
.continue{margin:4px 0 16px}
.continue-head .eyebrow{font-size:11px;letter-spacing:1.2px;color:#a7f3d0}
.continue-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,290px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 4px;scrollbar-width:none}
.continue-rail::-webkit-scrollbar{display:none}
.continue-card{position:relative;scroll-snap-align:start}
.continue-play{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;width:100%;min-height:84px;padding:8px 40px 14px 8px;border-radius:18px;border:1.5px solid #a7f3d055;background:linear-gradient(135deg,#1a2a44,#121a30);color:#fff;text-align:left;position:relative;overflow:hidden}
.continue-play img{width:72px;height:72px;border-radius:12px;object-fit:cover;object-position:left center}
.continue-copy{display:grid;gap:2px;min-width:0}
.continue-copy small{font-size:11px;color:#c4b5fd}
.continue-copy b{font-weight:400;font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.continue-copy span{font-size:11px;color:#a7f3d0}
.continue-bar{position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:9px;background:#ffffff1f;overflow:hidden}
.continue-bar i{display:block;height:100%;background:#a7f3d0;border-radius:9px}
.continue-drop{position:absolute;top:4px;right:4px;width:36px;height:36px;border-radius:12px;border:0;background:transparent;color:#b4afce;font-size:20px;line-height:1}

/* Home: Day mode switch under the next-recording card */
.ph-daymode-row{margin:-12px 0 22px}
.ph-daymode{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;border-radius:18px;border:1px solid #ffffff1f;background:#141c33;color:#dfe5f1;text-align:left;font:inherit}
.ph-daymode>span:not(.ph-daymode-sun){display:grid;flex:1;min-width:0}
.ph-daymode b{font-weight:400;font-size:14px}.ph-daymode small{font-size:11px;color:#8fa0b8}
.ph-daymode-sun{color:#8fa0b8;font-size:12px}
.ph-daymode.is-ready{border-color:#fcd34d66}.ph-daymode.is-ready .ph-daymode-sun{color:#fcd34d;text-shadow:0 0 10px #fcd34d}
.ph-daymode i{position:relative;width:46px;height:26px;border-radius:99px;background:#ffffff26;flex:none}
.ph-daymode i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.ph-daymode.on{border:0;background:none;padding:0;width:auto;min-height:44px}
.ph-daymode.on i{background:#fcd34d}.ph-daymode.on i::after{transform:translateX(20px);background:#0b1020}

/* Home: the recording-day card */
.ph-day{position:relative;overflow:hidden;margin:6px 0 22px;padding:20px 18px 18px;border-radius:28px;border:1.5px solid #fcd34d66;background:radial-gradient(110% 70% at 100% 0%,#fcd34d33,transparent 60%),radial-gradient(90% 80% at 0% 100%,#a78bfa33,transparent 60%),linear-gradient(160deg,#2a2148,#121a30 70%);box-shadow:0 18px 40px #0007,inset 0 1px 0 #ffffff1a}
.ph-day-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ph-day-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.4px;color:#fcd34d}
.ph-day-badge i{width:9px;height:9px;border-radius:50%;background:#fcd34d;box-shadow:0 0 0 0 #fcd34d88;animation:phPulse 1.8s infinite}
.ph-day.is-live .ph-day-badge{color:#fb7185}.ph-day.is-live .ph-day-badge i{background:#fb7185}
.ph-day h1{margin:12px 0 8px;font-size:clamp(22px,7vw,30px);line-height:1.15;font-weight:400}
.ph-day-meta{display:flex;flex-wrap:wrap;gap:8px}
.ph-day-meta span{font-size:12px;padding:5px 10px;border-radius:99px;background:#ffffff14;color:#dfe5f1}
.ph-day-clock{display:grid;justify-items:start;margin:18px 0 14px}
.ph-day-clock b{font-family:Zen,system-ui,sans-serif;font-weight:400;font-size:clamp(40px,14vw,58px);line-height:1;color:#fcd34d;text-shadow:0 0 24px #fcd34d55;font-variant-numeric:tabular-nums}
.ph-day.is-live .ph-day-clock b{color:#fb7185;text-shadow:0 0 24px #fb718566}
.ph-day.is-done .ph-day-clock b{color:#a7f3d0;text-shadow:none}
.ph-day-clock small{font-size:12px;color:#cfd6e6;margin-top:6px}
.ph-day-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
@keyframes phPulse{0%{box-shadow:0 0 0 0 #fcd34d88}70%{box-shadow:0 0 0 10px #fcd34d00}100%{box-shadow:0 0 0 0 #fcd34d00}}
@media (prefers-reduced-motion:reduce){.ph-day-badge i{animation:none}}

/* Manage plans: the row count sits at the bottom */
.mp-rows{opacity:.75;margin-top:6px}

/* Crew corner: six tiles; long names ("Participation") stay on one line at 360 px */
.crew-tile b{white-space:nowrap;font-size:clamp(13px,4.1vw,17px);letter-spacing:-.2px;position:relative}
.crew-tile small{position:relative;max-width:72%}
/* 3.4.1: "today" stays inside the NEXT EPISODE pill (v337's size rule was beating the is-today rule). */
.ph-count.is-today b{font-size:clamp(18px,5.6vw,23px)!important;letter-spacing:0}