/* NightOwl Video cards: PLAYER styles only (for the app page and the card page /c/<id>; the builder uses video.css). From the Video Card Lab, §374. */
.lp-wrap { --acc: #ffb547; color: #eef0fa; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .lp-wrap * { box-sizing: border-box; }
.lp-wrap { position: relative; width: 100%; background: #000; border-radius: 14px; overflow: hidden; }
.lp-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; container-type: size; }
.lp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lp-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(40,20,0,.55) 100%); }
.lp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp-layers { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s; }
.lp-layers.lp-under { opacity: 0; }
.lp-layer { position: absolute; transform: translate(-50%, -50%); white-space: pre; text-align: center; line-height: 1.08; }
.lp-layer.lp-edit { pointer-events: auto; cursor: grab; touch-action: none; outline: 1px dashed rgba(255,255,255,.0); }
.lp-paused .lp-layer.lp-edit { outline-color: rgba(255,255,255,.35); }
/* selection box + resize handle: ONLY while paused in edit mode (never during playback, never on shared cards) */
.lp-paused .lp-layer.lp-edit.lp-sel { outline: 2px solid var(--acc); }
.lp-stage:not(.lp-paused) .lp-layer.lp-edit { pointer-events: none; outline: 0; }
.lp-in { display: inline-block; paint-order: stroke fill; }
.lp-sticker .lp-in { line-height: 1; }
.lp-handle { display: none; position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }
.lp-paused .lp-edit.lp-sel .lp-handle { display: block; }
.lp-caret::after { content: "|"; animation: lpblink .7s steps(1) infinite; margin-left: .05em; }
@keyframes lpblink { 50% { opacity: 0; } }
.lp-a-fade { animation: lpfade 1s ease-out both; }
.lp-a-slide { animation: lpslide .9s cubic-bezier(.2,.8,.2,1) both; }
.lp-a-zoom { animation: lpzoom .8s cubic-bezier(.2,.9,.3,1.2) both; }
.lp-a-bounce { animation: lpbounce 1.1s both; }
.lp-a-pop { animation: lppop .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes lpfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpslide { from { opacity: 0; transform: translateX(-60cqw); } to { opacity: 1; transform: none; } }
@keyframes lpzoom { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes lpbounce { 0% { opacity: 0; transform: translateY(-70cqh); } 45% { opacity: 1; transform: translateY(0); } 62% { transform: translateY(-12cqh); } 78% { transform: translateY(0); } 89% { transform: translateY(-4cqh); } 100% { transform: none; } }
@keyframes lppop { from { opacity: 0; transform: scale(0) rotate(-20deg); } to { opacity: 1; transform: none; } }
.lp-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6cqh 7cqw; background: rgba(8,10,24,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .9s; }
.lp-end.lp-show { opacity: 1; pointer-events: auto; }
.lp-end-in { text-align: center; max-width: 100%; max-height: 100%; overflow: auto; }
.lp-end-to { font-family: 'Dancing Script', cursive; font-size: 8cqh; color: var(--acc); margin-bottom: 2cqh; }
.lp-end-msg { font-size: max(13px, 4.6cqh); white-space: pre-wrap; line-height: 1.35; }
.lp-end-from { font-family: 'Dancing Script', cursive; font-size: 7cqh; margin-top: 2.5cqh; color: #ffd9a0; }
.lp-end-btns { margin-top: 4cqh; }
.lp-replay { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 99px; padding: .45em 1.1em; font-size: max(12px, 3.4cqh); cursor: pointer; }
.lp-nm { display: inline-block; margin-top: 3cqh; font-size: max(11px, 3cqh); color: #cfd5ff; text-decoration: none; border-bottom: 1px solid rgba(207,213,255,.4); }
.lp-big { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.45)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; }
.lp-big-tri { width: 17cqh; height: 17cqh; min-width: 56px; min-height: 56px; border-radius: 50%; background: rgba(255,181,71,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23161a2e'/%3E%3C/svg%3E") center / 55% no-repeat; box-shadow: 0 6px 30px rgba(0,0,0,.5); transition: transform .2s; }
.lp-big:hover .lp-big-tri { transform: scale(1.07); }
/* editor: only the round button starts playback; the rest of the video stays free for dragging layers and click-to-deselect */
.lp-editable .lp-big { pointer-events: none; background: none; }
.lp-editable .lp-big .lp-big-tri { pointer-events: auto; cursor: pointer; }
.lp-big-label { white-space: pre-line; color: #fff; font-size: max(14px, 5cqh); font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.8); padding: 0 6cqw; text-align: center; }
.lp-big-label:empty { display: none; }
.lp-geo { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #cfd5ff; background: #0b0e1c; font-size: 15px; }
.lp-geo-blocked .lp-geo { display: flex; }
.lp-geo-blocked .lp-big { display: none !important; }
.lp-fake-fs { position: fixed !important; inset: 0; z-index: 1000; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; background: #000; }
.lp-fake-fs .lp-stage { width: min(100vw, calc(100dvh * 16 / 9)); }
:fullscreen .lp-stage, .lp-wrap:fullscreen .lp-stage { width: min(100vw, calc(100vh * 16 / 9)); }
.lp-wrap:fullscreen { display: flex; align-items: center; justify-content: center; border-radius: 0; }
.lp-wrap:-webkit-full-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lp-fsbtn { position: absolute; right: 10px; top: 10px; z-index: 5; width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 60% no-repeat; cursor: pointer; }