@font-face {
  font-family: "SF Display";
  font-weight: 200;
  src: url("/fonts/SF-UI-Display-Light.otf");
}
@font-face {
  font-family: "SF Display";
  font-weight: 400;
  src: url("/fonts/SF-UI-Text-Regular.otf");
}
@font-face {
  font-family: "SF Display";
  font-weight: 500;
  src: url("/fonts/SF-UI-Display-Medium.otf");
}
@font-face {
  font-family: "SF Display";
  font-weight: 600;
  src: url("/fonts/SF-UI-Display-Bold.otf");
}
@font-face {
  font-family: "SF Display";
  font-weight: 800;
  src: url("/fonts/SF-UI-Display-Heavy.otf");
}

@font-face {
  font-family: "SF Display Rounded";
  font-weight: 200;
  src: url("/fonts/SF-Pro-Rounded-Light.otf");
}

@font-face {
  font-family: "SF Display Rounded";
  font-weight: 400;
  src: url("/fonts/SF-Pro-Rounded-Regular.otf");
}

@font-face {
  font-family: "SF Display Rounded";
  font-weight: 500;
  src: url("/fonts/SF-Pro-Rounded-Medium.otf");
}

@font-face {
  font-family: "SF Display Rounded";
  font-weight: 600;
  src: url("/fonts/SF-Pro-Rounded-Bold.otf");
}

@font-face {
  font-family: "SF Display Rounded";
  font-weight: 800;
  src: url("/fonts/SF-Pro-Rounded-Heavy.otf");
}


body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
  display: flex;
  flex-direction: column;
}

#videoContainer {
  position: relative;
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background: black;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  /* filter: saturate(0) contrast(1.25); */
}

video, canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}


#textOverlay, #subtitle {
  position: absolute;
  bottom: 40px;
  left: 0;
  text-align: center;
  color: white;
  font-family: "SF Display";
  font-size: 33px;
  z-index: 100;
  padding: 0 80px;
  right: 0;
}

#dateDisplay { 
  position: absolute;
  top: 160px;
  right: 20px;
  color: white;
  font-family: "SF Display";
  font-size: 48px;
  z-index: 100;
  left: 20px;
  text-align: center;
  letter-spacing: -2px;
  z-index: 2000;
}

#dateDisplay {
  position: absolute;
  top: 160px;
  right: 20px;
  color: white;
  font-family: "SF Display";
  font-size: 50px;
  z-index: 100;
  left: 20px;
  text-align: center;
  letter-spacing: -2.5px;
}


/* #timeDisplay { old mono
  top: 189px;
right: 20px;
color: white;
font-family: monospace;
font-size: 188px;
z-index: 100;
left: 20px;
text-align: center;
letter-spacing: -2px;
font-weight: bold;
z-index: 20000;
position: absolute;
} */

#timeDisplay {
  top: 25px;
  left: 30px;
  color: white;
  font-family: "SF Display";
  font-size: 38px;
  z-index: 20000;
  position: absolute;
  font-weight: 500;
}

#screensaver {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: none;
  z-index: 200;
}

#startOverlay {
z-index: 30000;
position: relative;
}

.tiktok-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-size: calc(1920px * 0.02); /* Base font size of 2% of height */
}

.right-sidebar {
    position: absolute;
    right: calc(1920px * 0.02); /* 2% of height */
    bottom: calc(1920px * 0.16); /* 25% of height - moved higher up */
    display: flex;
    flex-direction: column;
    gap: calc(1920px * 0.025); /* Increased gap between items */
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: "SF Display";
}

/* Updated icon styles to match TikTok UI */
.icon-profile {
    width: calc(1920px * 0.045);
    height: calc(1920px * 0.045);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23999999'/%3E%3Cpath d='M12 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 11c-4 0-6 2-6 2v1h12v-1s-2-2-6-2z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
}

.icon-profile::after {
    content: '';
    position: absolute;
    bottom: -25px;
    right: 25px;
    width: calc(1920px * 0.02);
    height: calc(1920px * 0.02);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23FF0050'/%3E%3Cpath d='M12 7v10M7 12h10' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}

.icon-heart {
  width: calc(1920px * 0.035);
  height: calc(1920px * 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-comment {
  width: calc(1920px * 0.035);
  height: calc(1920px * 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-bookmark {
  width: calc(1920px * 0.035);
  height: calc(1920px * 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-share {
  width: calc(1920px * 0.035);
  height: calc(1920px * 0.035);
  background-image: 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'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-music {
  width: calc(1920px * 0.02);
  height: calc(1920px * 0.02);
  background-image: 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'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-right: 5px;
}
.icon-heart,
.icon-comment,
.icon-bookmark,
.icon-share {
    width: calc(1920px * 0.035); /* Slightly smaller than profile */
    height: calc(1920px * 0.035);
    filter: brightness(1.2); /* Make icons more visible */
}

.action-item .count {
    font-size: calc(1920px * 0.016);
    margin-top: calc(1920px * 0.008);
    font-weight: 500;
}

.bottom-info {
    position: absolute;
    bottom: calc(1920px * 0.02); /* 5% of height */
    left: calc(1920px * 0.02); /* 2% of height */
    color: white;
    font-family: "SF Display";
    max-width: 80%;
}

.username {
    font-size: calc(1920px * 0.018); /* 2% of height */
    font-weight: 500;
    margin-bottom: calc(1920px * 0.01); /* 1% of height */
}

.description {
    font-size: calc(1920px * 0.018); /* 1.8% of height */
    margin-bottom: calc(1920px * 0.015); /* 1.5% of height */
}

.music-info {
    display: flex;
    align-items: center;
    gap: calc(1920px * 0.01); /* 1% of height */
    font-size: calc(1920px * 0.016); /* 1.6% of height */
}

#mainCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(0);
}

.composition-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; /* Double height to hold both canvases */
    transform: translateY(0);
    transition: transform 300ms ease-out;
}

.status-bar {
  position: absolute;
  top: 30px;
  right: 23px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 20000;
  filter: invert(1);
}

.wifi-icon {
  /* width: 40px;
  height: 32.5px;
  background-image: url('/images/ios-wifi.svg');
  background-size: contain;
  background-repeat: no-repeat; */

  width: 40px;
  height: 32.5px;
  background-image: url(/images/ios-wifi.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 80px;
}

.battery-icon {
  width: 55px;
  height: 87.5px;
  background-image: url(/images/ios-battery-full.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  margin-top: -6px;
}
/* 

.wifi-icon {
  width: 40px;
  height: 32.5px;
  background-image: url('/images/wifi.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.battery-icon {
  width: 55px;
  height: 27.5px;
  background-image: url('/images/battery.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
} */

.battery-level {
  color: white;
  font-family: "SF Display";
  font-size: 42px;
  margin-right: 4px;
  font-weight: 500;
}