@font-face {
  font-family: 'OriginalYTFont';
  src: url('assets/fonts/27_Arial_10pt_st.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #ffffff;
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-container {
  position: relative; /* Ensure positioning context */
  z-index: 0; /* baseline */
}

/* In fullscreen, the bottom-bar should also stretch full width */
.player-container:fullscreen {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column; /* video-area on top, bottom-bar at bottom */
}

.player-container:fullscreen .bottom-bar {
/* Bottom bar stays at bottom in normal flow */
flex-shrink: 0; /* has a fixed height of 31px */
}

/* In fullscreen, let bottom-bar span entire width */
.player-container:fullscreen .bottom-bar {
width: 100%;
}

/* Fullscreen mode fills screen */
.player-container:fullscreen,
.player-container:-webkit-full-screen,
.player-container:-moz-full-screen,
.player-container:-ms-fullscreen {
width: 100vw;
height: 100vh;
position: fixed;
top: 0; left: 0;
display: flex;
flex-direction: column;
}
.player-container:fullscreen .controls-bar {
  width: 100%; /* Stretch controls across full monitor width in fullscreen */
}

.player-container:fullscreen .controls-bar,
.player-container:-webkit-full-screen .controls-bar,
.player-container:-moz-full-screen .controls-bar,
.player-container:-ms-fullscreen .controls-bar {
width: 100%;
}

.video-area {
width: 100%;
height: 100%;
min-width: 480px;
min-height: 360px;
flex: 1;
position: relative;
display:flex;
justify-content: center;
align-items: center;
z-index: 1;
background: #000; 
}

.video-area video {
  background-color: #000;
  min-width: 100%;
  min-height: auto;
}

.video-area:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-area:fullscreen video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


#loadingIndicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px; /* match your frame width */
height: 30px; /* match your frame height */
background: url('assets/loading_frames/1.png') no-repeat center center;
background-size: 30px 30px; /* exact frame size */
display: none; /* hidden by default */
z-index: 100000000000;
}

.ended-buttons {
  display: block;
  position: absolute;
  top: 20%;
  left: 55%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 999999; 
  pointer-events: auto;
  white-space: nowrap; /* ensures buttons stay on one line */
}

.ended-buttons button {
  display: inline-block;
  border: none;
  background-color: transparent; 
  cursor: pointer;
  vertical-align: middle;
  margin: 0 -35px;
  width: 188px;
  height: 53px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



video {
  position: relative;
  z-index: 1; 
}

.ended-buttons {
  z-index: 999999; /* higher than video's z-index */
}


/* Share Button (3 frames: 1.png normal, 2.png hover, 3.png active) */
.share-btn {
  background-image: url('assets/share_controls/1.png');
}

.share-btn:hover {
  background-image: url('assets/share_controls/2.png');
}

.share-btn:active {
  background-image: url('assets/share_controls/3.png');
}

/* Watch Again Button (2 frames: 1.png normal, 2.png hover/active) */
.watch-again-btn {
  background-image: url('assets/play_again_controls/1.png');
}

.watch-again-btn:hover,
.watch-again-btn:active {
  background-image: url('assets/play_again_controls/2.png');
}


/* Bottom bar setup */
.bottom-bar {
position: relative;
display: flex;
align-items: flex-end;
height: 31px;
}

.player-container:fullscreen .bottom-bar,
.player-container:-webkit-full-screen .bottom-bar,
.player-container:-moz-full-screen .bottom-bar,
.player-container:-ms-fullscreen .bottom-bar {
position: absolute;
bottom: 0; left: 0;
width: 100%;
}

.bar-left,
.bar-right,
.progress-handle {
image-rendering: smooth; /* or smooth if supported */
}

.bar-left {
width: 5px; /* exact width of bg_left.png */
height: 31px;
background: url('assets/background/bg_left.png') no-repeat left bottom;
flex-shrink: 0;
margin: 0; padding: 0;
}

.bar-center {
height: 31px;
margin: 0; padding: 0;
background: url('assets/background/bg_center.png') repeat-x left bottom;
width: 100%; /* In fullscreen, let it span entire width */
}

.bar-right {
width: 5px; /* exact width of bg_right.png */
height: 31px;
background: url('assets/background/bg_right.png') no-repeat right bottom;
flex-shrink: 0;
margin: 0; padding: 0;
}

.bar-left { width: 5px; height: 31px; background: url('assets/background/bg_left.png') no-repeat left bottom; flex-shrink:0; }
.bar-center { height:31px; background:url('assets/background/bg_center.png') repeat-x left bottom; flex:1; }
.bar-right { width:5px; height:31px; background:url('assets/background/bg_right.png') no-repeat right bottom; flex-shrink:0; }

/* Controls bar sits above the backgrounds */
.controls-bar {
position: absolute;
width:100%;
top:0; left:0; right:0; bottom:0;
display: flex;
align-items: center;
box-sizing: border-box;
z-index:9999;
padding:0 4px;
}

.player-container:fullscreen .controls-bar,
.player-container:-webkit-full-screen .controls-bar,
.player-container:-moz-full-screen .controls-bar,
.player-container:-ms-fullscreen .controls-bar {
width: 100%;
}

.left-controls {
display: flex;
align-items: center;
}
.right-controls {
display: flex;
align-items: center;
margin-left: auto; /* pushes this group to the far right */
}
.control-button {
display: inline-block;
vertical-align: middle;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
background: none;
}

/* Play/Pause Button (not playing) */
.pause-btn {
width: 30px; 
height: 25px;
background:
  url('assets/playpausebuttons/play_icon.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg.png') no-repeat 50% 50%;
margin-right: 1px;
}
.pause-btn:hover {
background:
  url('assets/playpausebuttons/play_icon_hover.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg.png') no-repeat 50% 50%;
}
.pause-btn:active {
background:
  url('assets/playpausebuttons/play_icon_hover.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg_clicked.png') no-repeat 50% 50%;
}

/* Play/Pause Button (playing) */
.pause-btn.playing {
background:
  url('assets/playpausebuttons/pause_icon.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg.png') no-repeat 50% 50%;
}
.pause-btn.playing:hover {
background:
  url('assets/playpausebuttons/pause_icon_hover.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg.png') no-repeat 50% 50%;
}
.pause-btn.playing:active {
background:
  url('assets/playpausebuttons/pause_icon_hover.png') no-repeat 60% center,
  url('assets/playpausebuttons/play_pause_bg_clicked.png') no-repeat 50% 50%;
}

/* Rewind Button */
.rewind-btn {
width: 23px;
height: 25px;
background:
  url('assets/rewind/rewind.png') no-repeat center center,
  url('assets/rewind/rewind_bg.png') no-repeat center center;
}
.rewind-btn:hover {
background:
  url('assets/rewind/rewind_icon_hover.png') no-repeat center center,
  url('assets/rewind/rewind_bg.png') no-repeat center center;
}
.rewind-btn:active {
background:
  url('assets/rewind/rewind_icon_hover.png') no-repeat center center,
  url('assets/rewind/rewind_bg_clicked.png') no-repeat center center;
}

/* Timeline */
.progress-section {
position: relative;
height: 8px;
background: none;
flex: 1;
min-width: 0;
margin: 0 12px;
z-index: 9999;
display: block;
}

.progress-background {
width:auto;
height: 8px;
background: url('assets/timeline/timeline.png') repeat-x left center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.progress-loaded {
left: 0; /* Will be set in JS as a % */
background: url('assets/timeline/played_bar_connected.png') repeat-x left center;
opacity: 0.6;
z-index: 1;
}

.progress-red {
position: absolute;
top: 0;
left: 0; /* Dynamically set by JS */
height: 8px;
background: url('assets/timeline/played_bar_connected.png') repeat-x left center;
z-index: 2;
}

.progress-loaded,
.progress-red {
position: absolute;
top: 0;
height: 8px;
}

.progress-handle {
  position: absolute;
  top: 50%;  /* center vertically */
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  background: url('assets/timeline/cursor/timeline_cursor.png') no-repeat center center;
  cursor: pointer;
  z-index: 9999;
}
.progress-handle.active {
  background: url('assets/timeline/cursor/timeline_cursor_red.png') no-repeat center center !important;
}

.progress-loaded,
.progress-red {
  position: absolute;
  top: 0;
  height: 8px;
}


.player-container:fullscreen .progress-section,
.player-container:-webkit-full-screen .progress-section,
.player-container:-moz-full-screen .progress-section,
.player-container:-ms-fullscreen .progress-section {
flex: 1;
min-width: 0;
width: auto;
}

/* Time Section */
.time-section {
display: inline-block;
vertical-align: middle;
margin-left:8px;
margin-right: 0px;
font-family: 'OriginalYTFont', Arial, sans-serif;
}

.time-box {
width: 70px;
height: 18px;
background: url('assets/timeline/time_bg.png') no-repeat center center;
text-align: center;
line-height: 18px;
font-size: 10px;
color: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
}

.time-current { color: #fff; }
.time-total { color: #C00; }
.time-sep { color: #fff; margin: 0 2px; }

/* Divider */
.divider {
width: 2px;
height: 31px;
background: url('assets/background/divider.png') no-repeat center center;
display: inline-block;
vertical-align: middle;
}

/* Volume Section */
.volume-section {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 8px;
}

.volume-track {
position: relative;
width: 45px;
height: 4px;
background: url('assets/volume/volume_slider_bg.png') repeat-x center center;
margin-right: 4px;
}

.volume-level {
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 100%;
background: url('assets/volume/volume_level.png') repeat-x center center;
pointer-events: none;
}

.volume-handle {
position: absolute;
width: 7px;
height: 20px;
background: url('assets/volume/volume_slider.png') no-repeat center center;
top: 50%;
transform: translateY(-50%);
left: 100%; 
cursor: pointer;
z-index: 9999;
}

/* Default volume icon (volume_icon_4.png) */
.volume-btn {
display: inline-block;
vertical-align: middle;
width: 20px; 
height: 20px;
margin-left: 4px;
background: url('assets/volume/volume_icon_4.png') no-repeat center center;
background-size: contain;
}

/* Muted class to grey out at 0% volume */
.volume-btn.muted {
filter: grayscale(100%);
opacity: 0.7;
}

/* Fullscreen Button */
.fullscreen-btn {
display: inline-block;
vertical-align: middle;
margin-left: 3px;
margin-right: 3px;
width: 25px; /* Ensure exact size matches your frames (e.g., 20px) */
height: 18px;
background: url('assets/fullscreen_button/1.png') no-repeat center center;
background-size: 25px 18px; /* Match frame size exactly to avoid scaling */
image-rendering: auto; /* Let browser smooth it out */
transition:  0.3s ease; /* For fade effect on frame 24 -> 1 */
}

.fullscreen-btn:fullscreen {
display: inline-block;
vertical-align: middle;
margin-left: 3px;
margin-right: 6px;
width: 25px; /* Ensure exact size matches your frames (e.g., 20px) */
height: 18px;
background: url('assets/fullscreen_button/1.png') no-repeat center center;
background-size: 25px 18px; /* Match frame size exactly to avoid scaling */
image-rendering: auto; /* Let browser smooth it out */
transition:  0.3s ease; /* For fade effect on frame 24 -> 1 */
}

.exit-icon {
background-image: url('assets/fullscreen_button/exit_fullscreen.png');
background-size: 45px 15px;
width: 45px;
height: 15;
}

@media (max-width: 400px) {
.time-box {
  display: none;
}
}