body { margin: 0; overflow: hidden; }
    canvas { display: block; }
    /*#status { position: absolute; top: 10px; right: 10px; 
        background: rgba(0,0,0,0.7); color: #fff; padding: .5em 1em;
        border-radius: 4px; font-family: sans-serif; }*/


    #subtitle-container {
    position: absolute;
    bottom: 10%;
    left: 5%; /* Changed from 50% to 5% to start closer to left edge */
    right: 5%; /* Added right property to extend closer to right edge */
    /* width: 100%; */
    max-width: 95%; /* Increased to 95% to get closer to screen edges */

    /* left: 50%; */
    transform: translateY(5%); /* Removed translateX(-50%) since we're using left/right positioning */

    text-align: center;
    font-size: 48px;
    color: whitesmoke;
    /* background: rgba(0, 0, 0, 0.6); */
    background: rgba(0, 0, 0, 0.0);
    -webkit-text-stroke: 2px rgba(197, 40, 34, 0.651); /* width and color */

    /* text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; red text outline; */
    pointer-events: none;
    font-family: 'Coiny Regular', sans-serif;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* transform: translateY(10px); */
  }

  #subtitle-container.visible {
    opacity: 1;
    /* transform: translateY(0); */
  }