body { overflow:hidden; background: #111; color: white; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
#player-container { position: relative; aspect-ratio: 16/9; background: #000; }
#player { width: 100%; height: 100%; }
#overlay { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; pointer-events: none; display: none; }
#start-btn { padding: 15px 30px; font-size: 1.2rem; cursor: pointer; background: #f00; color: #fff; border: none; border-radius: 5px; }
.hidden { display: none; }


#player-container {
/* Or absolute */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

#player {
    width: 100%;
    height: 100%;
    border: none;
}

/* 3. The Toast (now inside the player) */
#custom-toast {
    position: absolute; /* Changed from fixed to absolute */
    top: 20px;       /* Lifted slightly to stay above YT progress bar */
    left: 20px;
    width: 250px;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(5px); /* Adds a modern frosted look */
    color: white;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #f00;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    z-index: 10; /* Ensure it stays above the video */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Animation */
    transform: translateX(300px); /* Slides in from the right */
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

#custom-toast.show {
    transform: translateX(0);
    opacity: 1;
}