/* Pure terminal aesthetic - white on black */
        body {
            /* font-size: 14px; */
            font-size: clamp(10px, 2.8vw, 14px);
            background: #000;
            color: #fff;
            font-family: 'Courier New', monospace;
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
            cursor: text;

            height: 100vh;
            overflow: hidden;  /* This disables all page scrolling permanently */
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 98vh;
            padding: 20px;
            box-sizing: border-box;
        }

        .screen {
            background: #050505;
            border: 4px solid rgba(245, 245, 245, 0.7);
            padding: 30px;
            box-shadow:
                inset 0 0 50px #000000,
                0 0 40px rgb(255, 255, 255);
            position: relative;
            width: 90vw;            /* 90% of viewport width */
            max-width: 800px;       /* Cap for desktop */
            height: 80vh;           /* Maintain height proportion */
            max-height: 90vw;       /* Enforce near-square on wide screens */
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 10px;
            box-sizing: border-box;

            -ms-overflow-style: none;   /* Hide in IE/Edge */
            scrollbar-width: none;      /* Hide in Firefox */
        }

        .screen::-webkit-scrollbar {
            display: none;  /* Hide scrollbar in WebKit browsers (Chrome, Safari, Android) */
        }

        .screen::before,
        .screen::after {
            content: "";
            position: fixed;  /* Key change: fixed to viewport */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            border-radius: 0;  /* No radius needed for full-screen; removes clipping issues */
            /* z-index: 1; */
        }

        .screen::before {
            background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.05) 50%);
            background-size: 100% 4px;
        }

        .screen::after {
            box-shadow:
                inset 0 0 100px 20px #000,
                inset 0 0 60px 10px #050505;
        }

        .line {
            opacity: 0;
            animation: appear 0.2s forwards;
            margin-bottom: 3px;
            white-space: pre;
        }

        @keyframes appear { to { opacity: 1; } }

        .cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background: rgb(250, 250, 250);
            animation: blink 1s infinite;
            /* margin-left: 0px; */
            vertical-align: middle;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* тема текста */
        .main      { color: #fff; }   
        .highlight { color: #ff0; }   
        .secondary { color: #ccc; }   
        .accent    { color: rgb(119, 233, 52); }   /* greeny  */
        .echo-command { color: #000; } /* невидимость */
        .celebrative { color: #e097c7; 
            text-shadow: 0 0 8px rgba(255, 190, 232, 0.7);
            /* animation: pulse 3s infinite;  */
        }


        /* Retro ASCII flames */
        .flame {
            display: inline-block;
            animation: flicker 0.35s infinite alternate;
            color: #ffaa00;
            text-shadow: 0 0 15px #ff6600;
            font-size: 1.2em;
            line-height: 1;  
            will-change: transform, opacity;  /* я хз зачем это! оптимизаторы кода */
        }

        @keyframes flicker {
            0%   { transform: translateY(0) scale(1);   opacity: 1; }
            25%  { transform: translateY(-3px) scale(1.15); opacity: 0.9; }
            50%  { transform: translateY(0) scale(1);   opacity: 1; }
            75%  { transform: translateY(-2px) scale(1.05); opacity: 0.95; }
            100% { transform: translateY(0) scale(1);   opacity: 1; }
        }

        @keyframes smokeRise {
            0%   { transform: translateY(0) scale(1); opacity: 0.8; }
            70%  { transform: translateY(-40px) scale(1.9); opacity: 0.3; }
            80%  { transform: translateY(-40px) scale(1.9); opacity: 0.0; }
            90% { transform: translateY(0) scale(1); opacity: 0.0; }  
            100% { transform: translateY(0) scale(1); opacity: 0.6; }  
        }

        @keyframes slowWiggle {
            0%   { transform: rotate(0deg) translateX(0); }
            25%  { transform: rotate(5deg) translateX(2px); }
            50%  { transform: rotate(0deg) translateX(0); }
            75%  { transform: rotate(-5deg) translateX(-2px); }
            100% { transform: rotate(0deg) translateX(0); }
        }

        @keyframes pulseBorder {
            0%    { color: #fff; text-shadow: 0 0 5px #0ff; opacity: 1; }      
            25%   { color: #0ff; text-shadow: 0 0 10px #0ff; opacity: 0.8; }    
            50%   { color: #0f0; text-shadow: 0 0 8px #0f0; opacity: 1; }      
            75%   { color: #f0f; text-shadow: 0 0 10px #f0f; opacity: 0.8; }    
            100%  { color: #fff; text-shadow: 0 0 5px #0ff; opacity: 1; }     
        }

        /* тест. кнопку сделать бледной по нажатию */
        .blow-button-disabled {
            opacity: 0.4;                  
            color: #666;                   
            animation: none !important;    
            cursor: default;              
            pointer-events: none;      
        }

        .matrix {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: -1;
            opacity: 0.1;
        }

        .matrix-char {
            position: absolute;
            color: #fff;
            font-size: 14px;
            animation: fall linear infinite;
        }


        /*ФИКС НЕСТИЛИЗОВАННЫХ МЕДВЕДЕЙ*/
        .screen * {
            box-sizing: border-box;
        }

        .user-input {
            display: inline-block;
            min-width: 1ch;
            outline: none;
            caret-color: transparent;
        }

        @keyframes fall {
            to { transform: translateY(100vh); }
        }

/*MOBILE*/
/*MOBILE*/
/*MOBILE*/
/*MOBILE*/
/*MOBILE*/

        @media (max-width: 768px) {
            body {
                /* font-size: 10px !important; */
                padding: 5px !important;  
            }
            .container {
                max-width: 99% !important;
                margin: 1 !important;
                padding: 2 !important;
            }
            .screen {
                padding: 10px !important;
                border-radius: 7px !important;
                height: calc(70vh - 0px) !important; 
                width: 95vw;
                max-height: none; 
            }
            .container {
                padding: 10px;
            }
            .screen::after {
                box-shadow:
                    inset 0 0 40px 8px #000,
                    inset 0 0 30px 6px #050505 !important;
            }
        }

        /* @media (max-width: 600px) {
            body {
                font-size: 8px !important;  
                padding: 5px !important;
            }
            .screen {
                padding: 10px !important;
            }
        } */