
/* Approved small-screen adjustments. Original desktop CSS is untouched. */
@media (max-width:640px) {
 .reader-meta {grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:54px}
 .reader-brand {height:44px;gap:6px}
 .reader-brand-name {font-size:16px!important}
 .reader-brand-dot {width:7px;height:7px;box-shadow:0 0 8px 2px rgba(248,187,90,.5),0 0 18px 4px rgba(248,169,61,.18)}
 .reader-head .reader-meta-actions {justify-self:end;justify-content:flex-end;width:auto;height:44px;gap:6px!important}
 .reader-meta-actions .tf-lang-trigger {min-height:44px;padding:0 6px;gap:3px;font-size:12px}
 .reader-meta-actions .tf-lang-trigger svg {width:20px;height:20px}
 .reader-meta-actions .tf-lang-trigger .tf-chevron {width:10px;height:10px}
 .reader-meta-actions .reader-fontsize {gap:0;padding:2px}
 .reader-meta-actions .reader-font-btn {width:44px;height:44px;font-size:.9rem}
 .reader-meta-actions .reader-mode-toggle {width:44px;height:44px}
 .reader-time {display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;padding-inline:10px}
 .reader-time > #current,.reader-time > #duration {white-space:nowrap}
 .reader-title-inline {position:relative;left:auto;top:auto;transform:none;display:block;width:100%;min-width:0;max-width:none;text-overflow:clip;text-align:center;line-height:1.4;pointer-events:none;border-radius:3px;padding-inline:4px;box-sizing:border-box;transition:opacity .4s ease}
 .reader-title-inline.show {pointer-events:auto}
 .tf-title-track {display:inline-flex;gap:40px;white-space:nowrap;vertical-align:top}
 .tf-title-copy {flex:none}
 .tf-title-copy[aria-hidden="true"] {display:none}
 .reader-title-inline.is-overflowing .tf-title-copy[aria-hidden="true"] {display:block}
 .reader-title-inline.is-overflowing {text-align:left;cursor:pointer}
 .reader-title-inline.is-overflowing.show .tf-title-track {animation:tf-title-loop var(--tf-title-duration,18s) linear infinite}
 .reader-title-inline.is-paused .tf-title-track {animation-play-state:paused!important}
 .reader-title-inline:focus-visible {outline:2px solid var(--glow-300);outline-offset:2px}
 @keyframes tf-title-loop {from{transform:translateX(0)}to{transform:translateX(var(--tf-title-shift))}}
 .reader-transport {display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;width:100%;max-width:438px;margin-inline:auto}
 .reader-transport > button {flex:0 0 auto;box-sizing:border-box}
 .reader-controls {padding:22px 16px calc(18px + env(safe-area-inset-bottom))}
 .reader-restart {width:clamp(44px,calc(20px + 6.4vw),52px);height:clamp(44px,calc(20px + 6.4vw),52px)}
 .reader-restart svg {width:19px;height:19px}
 .reader-skip {width:clamp(64px,calc(4px + 16vw),84px);height:clamp(44px,calc(20px + 6.4vw),52px);padding:0 clamp(8px,calc(-16px + 6.4vw),16px);gap:6px;font-size:clamp(.9rem,calc(.3rem + 2.56vw),1.1rem);border-radius:999px}
 .reader-skip svg {width:18px;height:18px}
 .reader-speed {width:clamp(70px,calc(10px + 16vw),90px);height:clamp(44px,calc(20px + 6.4vw),52px);padding:0 9px;font-size:clamp(.9rem,calc(.3rem + 2.56vw),1.1rem);border-radius:999px;white-space:nowrap;letter-spacing:.06em}
 .play-btn {width:clamp(64px,calc(40px + 6.4vw),72px);height:clamp(64px,calc(40px + 6.4vw),72px)}
 .play-btn svg {width:26px;height:26px}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) {
 .reader-title-inline {white-space:normal;overflow:visible}
 .tf-title-track {display:inline;white-space:normal;animation:none!important;transform:none!important}
 .tf-title-copy[aria-hidden="true"] {display:none!important}
}
@media (width < 415px) {
 .tag-row {gap:7px}
 .tag-row span {font-size:12px;letter-spacing:.045em;line-height:1.35;min-height:30px;padding:6px 10px;border-radius:8px}
}
@media (width < 375px) {
 .reader-controls {padding:18px 12px calc(14px + env(safe-area-inset-bottom))}
 .reader-restart {width:44px;height:44px}
 .reader-skip {width:clamp(52px,calc(-7.26px + 18.52vw),62px);height:44px;padding:0 5px;gap:4px;font-size:.8rem}
 .reader-skip svg {width:15px;height:15px}
 .reader-speed {width:clamp(58px,calc(-1.26px + 18.52vw),68px);height:44px;padding:0 5px;font-size:.85rem}
 .play-btn {width:clamp(58px,calc(22.44px + 11.112vw),64px);height:clamp(58px,calc(22.44px + 11.112vw),64px)}
 .play-btn svg {width:24px;height:24px}
}
@media (width < 360px) {
 .reader-head {padding-inline:12px}
 .reader-meta {gap:8px}
 .reader-brand {gap:4px}
 .reader-brand-name {font-size:13px!important}
 .reader-brand-dot {width:6px;height:6px}
}

