html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
        .speech-bubble 
        {
            position: absolute;
            padding: 6px 10px;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            border-radius: 6px;
            font-family: sans-serif;
            font-size: 14px;
            pointer-events: none;
            transform: translate(-50%, -100%);
            white-space: nowrap;
        }
        .speech-bubble-text
        {
            font-size: 10px;
        }

        .bottomButton {
            position: fixed;
            bottom: env(safe-area-inset-bottom, 0);
            /* left: 10pt; */
            /* right: 10pt; */
            border-radius: 6pt;
            transform: translate(+50%, -50%);
            margin: 0 auto;
            width: 50%;          /* full viewport width */
            height: 60px;     
            bottom: 5pt;     /* choose your height */
            border-color: #4f4f4f81;

            line-height: 50px;

            /* border: thin; */
            background: #0000007f;
            font-family: sans-serif;
            color: white;
            font-size: 18px;
            cursor: pointer;

            transition:
                background-color 0.15s ease,
                transform 0.05s ease;

            z-index: 1000;         /* keep it above other content */
            padding-bottom: env(safe-area-inset-bottom, 100);
        }

        /* Hover (mouse) */
        .bottomButton:hover {
        background-color: #3b3b3b;
        }

        /* Press / tap */
        .bottomButton:active {
        background-color: #131313;
        }

        /* Optional: remove ugly focus outline and replace it */
        .bottomButton:focus {
        outline: none;
        }

        .bottomButton:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: -4px;
        }

        .bottomButton:disabled {
            background-color: #999;
            cursor: not-allowed;
            transform: none;
        }

        .container {
        position: relative;
        }

        .corner-image {
        position: absolute;
        top: 15pt;
        left: 25pt;
        /* width:5vw; */
        height:10vh;
        }
        
        .corner-image-right {
        position: absolute;
        top: 15pt;
        right: 25pt;
        /* width:5vw; */
        height:10vh;
        }

        .centerContainer {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        height: 100vh; /* Full viewport height */
        }

        .no-select {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* Internet Explorer/Edge */
            user-select: none;         /* Non-prefixed version, currently supported by Chrome and Opera */
        }