/* Soclya's own video player (see player.js). Same look on soclya.com and Soclya Social. */
.sp { position: relative; display: block; width: 100%; background: #000; color: #fff; overflow: hidden; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; font-family: "Space Grotesk", system-ui, sans-serif; }
.sp:focus-visible { box-shadow: 0 0 0 3px #c6ff00; }
.sp video { display: block; width: 100%; max-height: 75vh; aspect-ratio: 16 / 9; object-fit: contain; background: #000; cursor: pointer; }
.sp.is-full { display: flex; flex-direction: column; justify-content: center; }
.sp.is-full video { max-height: none; height: 100%; aspect-ratio: auto; }
.sp button { font: inherit; color: inherit; }
.sp .sp-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border: 3px solid #0a0a0b; border-radius: 50%; background: #c6ff00; color: #0a0a0b; box-shadow: 5px 5px 0 #ff2e88; cursor: pointer; transition: transform .15s; }
.sp-big svg { width: 34px; height: 34px; margin-left: 4px; }
.sp .sp-big:hover, .sp .sp-big:focus-visible { transform: scale(1.08); }
.sp .sp-big[hidden] { display: none; }
.sp-spin { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #c6ff00; border-radius: 50%; animation: sp-spin .8s linear infinite; display: none; pointer-events: none; }
.sp.is-loading.is-playing .sp-spin { display: block; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-flash { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 6px 14px; background: rgba(10, 10, 11, .82); border: 2px solid #c6ff00; font: 700 16px/1.2 "Space Grotesk", system-ui, sans-serif; opacity: 0; pointer-events: none; }
.sp-flash.on { animation: sp-flash .7s ease-out; }
@keyframes sp-flash { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.sp .sp-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); transition: opacity .25s; }
.sp.is-playing:not(.show-ui) .sp-bar { opacity: 0; pointer-events: none; }
.sp.is-playing:not(.show-ui) video { cursor: none; }
.sp .sp-seek { position: relative; width: 100%; height: 16px; display: flex; align-items: center; }
.sp-seek::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: rgba(255, 255, 255, .25); }
.sp-buf, .sp-fill { position: absolute; left: 0; height: 5px; pointer-events: none; }
.sp-buf { background: rgba(255, 255, 255, .45); }
.sp-fill { background: #c6ff00; }
.sp-seek:hover::before, .sp-seek:hover .sp-buf, .sp-seek:hover .sp-fill { height: 8px; }
.sp input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer; }
.sp-seek input { position: relative; width: 100%; height: 16px; }
.sp input[type="range"]::-webkit-slider-runnable-track { height: 16px; background: transparent; }
.sp input[type="range"]::-moz-range-track { height: 16px; background: transparent; }
.sp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: .5px; border-radius: 50%; background: #c6ff00; border: 2px solid #0a0a0b; box-shadow: 2px 2px 0 #ff2e88; }
.sp input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #c6ff00; border: 2px solid #0a0a0b; }
.sp .sp-row { width: 100%; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.sp-b { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.sp-b:hover, .sp-b:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.sp .sp-speed { font: 700 14px/1 "Space Grotesk", system-ui, sans-serif; }
.sp-vol { width: 80px; height: 16px; --p: 100%; }
.sp-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--p), rgba(255, 255, 255, .3) var(--p)) center / 100% 4px no-repeat !important; }
.sp-vol::-moz-range-track { height: 4px !important; background: rgba(255, 255, 255, .3) !important; }
.sp-vol::-moz-range-progress { height: 4px; background: #fff; }
.sp-time { margin-left: 6px; font: 600 13px/1 "Space Grotesk", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(255, 255, 255, .8); }
.sp-time b { color: #fff; }
.sp-gap { flex: 1; }
@media (hover: none), (max-width: 560px) {
  .sp-vol { display: none; }
  .sp .sp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media (max-width: 380px) { .sp-pip { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp-flash.on { animation: none; } .sp-spin { animation-duration: 2s; } }