/* v1.3 | 2026-10-28 | Big play circle and progress bar are blue; yellow is kept only for the selected language chip. The picture shows a pointer (a click plays / pauses). v1.2 | 2026-10-15 | Page turn (web) and swipe up (phone) screen changes. v1.1 | 2026-10-15 | One progress bar for the whole video (.vp-prog). v1.0 | 2026-10-14 | Topic video player: the screens of one topic play one after another with a transition; English / Tamil / Hindi chips; web or phone by screen size. */
.vp-page { margin: 0; min-height: 100vh; background: #0f0d2e; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; font-family: "Nirmala UI", "Segoe UI", system-ui, sans-serif; }
.vp { width: 100%; max-width: 1100px; color: #fff; }
.vp * { box-sizing: border-box; }
.vp-frame { background: #1e1b4b; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); margin: 0 auto; }
.vp-frame.vp-mobile { max-width: 420px; }
.vp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.vp-title { font-weight: 800; font-size: 15px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-count { font-size: 12px; font-weight: 700; color: #c7d2fe; white-space: nowrap; }
.vp-langs { display: flex; gap: 6px; }
.vp-chip { border: 1.5px solid #6366f1; background: transparent; color: #e0e7ff; border-radius: 999px; padding: 4px 11px; font: 700 12px/1.2 inherit; font-family: inherit; cursor: pointer; }
.vp-chip.on { background: #F5B700; border-color: #F5B700; color: #1e1b4b; }
.vp-chip:disabled { opacity: .35; cursor: default; }
.vp-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; }
.vp-mobile .vp-stage { aspect-ratio: 9 / 19.5; max-height: 78vh; margin: 0 auto; }
.vp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0;
        transition: opacity var(--vp-ms, 700ms) ease, transform var(--vp-ms, 700ms) cubic-bezier(.4, 0, .2, 1); }
.vp-v.vp-show { opacity: 1; transform: none; z-index: 2; }
.vp-stage[data-tr="slide"] .vp-v:not(.vp-show) { transform: translateX(14%); }
.vp-stage[data-tr="slide"] .vp-v.vp-out { transform: translateX(-14%); }
.vp-stage[data-tr="zoom"] .vp-v:not(.vp-show) { transform: scale(1.07); }
.vp-stage[data-tr="zoom"] .vp-v.vp-out { transform: scale(.95); }
.vp-stage[data-tr="none"] .vp-v { transition: none; animation: none !important; }
/* page turn: the old screen lifts from its right edge and turns over its left edge, the new one is underneath */
.vp-stage[data-tr="pageturn"] { perspective: 1800px; }
.vp-stage[data-tr="pageturn"] .vp-v { transition: none; }
.vp-stage[data-tr="pageturn"] .vp-v.vp-show { opacity: 1; z-index: 1; }
.vp-stage[data-tr="pageturn"] .vp-v.vp-out { opacity: 1; z-index: 3; transform-origin: left center; backface-visibility: hidden;
  animation: vpTurn var(--vp-ms, 900ms) cubic-bezier(.45, .05, .3, 1) forwards; box-shadow: 18px 0 40px rgba(0,0,0,.45); }
@keyframes vpTurn { 0% { transform: rotateY(0); filter: brightness(1); } 60% { filter: brightness(.75); } 100% { transform: rotateY(-100deg); filter: brightness(.45); } }
/* swipe up: the new screen comes up from the bottom over the old one */
.vp-stage[data-tr="swipeup"] .vp-v { transition: none; }
.vp-stage[data-tr="swipeup"] .vp-v.vp-show { opacity: 1; z-index: 2; animation: vpUpIn var(--vp-ms, 900ms) cubic-bezier(.22, .8, .25, 1) both; }
.vp-stage[data-tr="swipeup"] .vp-v.vp-out { opacity: 1; z-index: 1; animation: vpUpOut var(--vp-ms, 900ms) cubic-bezier(.22, .8, .25, 1) both; }
@keyframes vpUpIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes vpUpOut { from { transform: none; filter: brightness(1); } to { transform: translateY(-28%); filter: brightness(.55); } }

.vp-big { position: absolute; z-index: 5; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0;
          background: rgba(37,99,235,.95); color: #fff; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 0 4px; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.vp-big[hidden] { display: none; }
.vp-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #c7d2fe; font-weight: 700; z-index: 4; }
.vp-prog { height: 6px; margin: 12px 14px 4px; background: rgba(255,255,255,.22); border-radius: 3px; overflow: hidden; cursor: pointer; }
.vp-prog:hover { height: 8px; margin-top: 11px; }
.vp-fill { height: 100%; width: 0; background: #3b82f6; }
.vp-ctrl { display: flex; align-items: center; gap: 4px; padding: 4px 10px 10px; }
.vp-btn { background: transparent; border: 0; color: #fff; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.vp-btn:hover { background: rgba(255,255,255,.12); }
.vp-time { font-size: 12px; font-weight: 700; color: #c7d2fe; margin-left: 6px; white-space: nowrap; }
.vp-sp { flex: 1; }
.vp-frame:fullscreen { max-width: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.vp-frame:fullscreen .vp-stage { aspect-ratio: auto; flex: 1; max-height: none; }