* {
      -webkit-tap-highlight-color: transparent;
    }

		@font-face {
		    font-family: 'WDXL Lubrifont TC';
		    src: url('FONT/WDXL_Lubrifont.ttf') format('truetype');
		    font-weight: normal;
		    font-style: normal;
		}
		
		@font-face {
		    font-family: 'CourierBold';
		    src: url('FONT/Courier New Bold.ttf') format('truetype');
		    font-weight: normal;
		    font-style: normal;
		}
		
		@font-face {
		    font-family: 'Bahnschrift';
		    src: url('FONT/BAHNSCHRIFT.TTF') format('truetype');
		    font-weight: normal;
		    font-style: normal;
		}

		@font-face {
		    font-family: 'Cuprum';
		    src: url('FONT/CUPRUM-VARIABLEFONT_WGHT.TTF') format('truetype');
		    font-weight: normal;
		    font-style: normal;
		}
		/* @import url('https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+TC&display=swap'); */
/* 		@font-face {
	font-family: 'CourierBold'; 
	src:  url('/Courier New Bold.ttf') format('truetype');
	unicode-range: U+2588, U+2591;
} */

		@font-face {
			font-family: 'Courier New'; 
			/* src:  url('/Courier New Bold.ttf') format('truetype'); */
			unicode-range: U+2588, U+2591;
		}
		
		
		* {
		/* font-family: "WDXL Lubrifont TC", "CourierBold", monospace; */
		/* font-family: 'WDXL Lubrifont TC', 'Courier New', 'Bahnschrift', 'Cuprum', monospace; */
		font-family: 'WDXL Lubrifont TC', 'Bahnschrift', 'Cuprum', 'Courier New', monospace;
		/* font-family: 'WDXL_Lubrifont.ttf', "CourierBold", 'Courier New', monospace; */
		user-select: none;
		}

        body {
            /* font-family: 'WDXL Lubrifont TC', 'CourierBold', 'Courier New', monospace; */
            padding-left: 0px;
            padding-right: 0px;
          
            background-color: #2d2425;
            /* background-image: url('/bg pattern4.svg'), radial-gradient(transparent, #00000030); */
            
/*             background-repeat: repeat, no-repeat;
background-size: 10%, 100vw 100vh; */
            margin: 0;
            padding: 0;
            position: relative;
            max-height: 1vh;
            cursor: default;
            
            /*MIN-WIDTH 580! (На самом деле 570, но лучше оставить место на всякий случай)*/
        }
        
        .crt_overlay {
          /*background-image: url("/crt_texture.png");*/
          mix-blend-mode: multiply;
          opacity: 0.3;
          position: fixed;
          top: 0;
          z-index: 99999;
          pointer-events: none
        }
        
        @media (max-width: 900px) {
          .decor {
            display: none;
          }
          .decor_mobile {
            display: visible;
          }
          
          .sidebar {
            display: none;
          }

          .fullscreen-button {
              position: fixed;
              top: 10px;
              left: 5px;
              width: 58px;
              height: 58px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 24px;
              z-index: 1000;
              transition: transform 0.2s;
          }
          
          .settings-button {
              position: fixed;
              top: 10px;
              right: 0px;
              width: 58px;
              height: 58px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 24px;
              z-index: 1000;
              transition: transform 0.2s;
          }
              
            .nav-buttons {
                  position: fixed;
                  z-index: -1;
                  gap: 5px;
                  top: 26px;
                  left: 50%;
                  transform: translateX(-50%);
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                  width: auto;
                  max-width: 90vw;
                  margin: 0;
            }

            .char-modal, .loc-modal {
                /*min-width: 90vw;*/
                max-width: 90%;
            }          
          
    		  #textbox {
    			font-size: 21px;
    			white-space: pre-wrap;
    			word-wrap: break-word;
    			border: 2px solid #2d2425;
    			padding: 15px;
    			background-color: #827a6e;
    			margin-top: 15vh;
    			color: #2d2425;
    			
    			/*min-width: 580px;*/
    			/*max-width: 700px;*/
    			/*min-width: 591px;*/
    			max-width: 591px;
    			
    			/*min-height: 600px;*/
    			/*height: calc(100vh - 50vh);*/
    			/*max-height: calc(100vh - 50vh);*/
    			min-height: calc(100vh - 50vh);
    			height: calc(100vh - 45vh);
          max-height: calc(100vh - 45vh);
    			
    			resize: vertical;
    			scrollbar-width: thin;
    			scrollbar-color: #4E4A42 #827a6e;
    			
    			overflow-y: scroll;
    			overflow-x: hidden;
    			
    			margin-left: auto;
    			margin-right: auto;
    			
    			
    			border-radius: 18px;
    			border-color: black;
    			border: double 16px;
    		  }
          body {
          	background-image: url('/bg pattern4.svg');
          	background-repeat: repeat;
            background-size: 10%;
          }
        }
        
        @media (max-width: 1140px) {
          .wires {
            display: none;
          }
        }
        
        .decor, .sidebar, .wires {
          pointer-events: none;
        }
        
        
        @media (min-width: 901px) {
        
          #textbox {
            font-size: 21px;
            white-space: pre-wrap;
            word-wrap: break-word;
            border: 2px solid #2d2425;
            padding: 15px;
            background-color: #827a6e;
            margin-top: 10vh;
            color: #2d2425;
            
            /*min-width: 580px;*/
            min-width: 591px;
            max-width: 591px;
            
            min-height: 350px;
            height: 365px;
            max-height: calc(100vh - 40vh);
            
            resize: vertical;
            scrollbar-width: thin;
            scrollbar-color: #4E4A42 #827a6e;
            
            overflow-y: scroll;
            overflow-x: hidden;
            
            margin-left: auto;
            margin-right: auto;


            border-radius: 18px;
            border-color: black;
            border: double 16px;
          }
          
          body {
          	background-image: url('/bg pattern4.svg'), radial-gradient(transparent, #00000030);
          	background-repeat: repeat, no-repeat;
            background-size: 10%, 100vw 100vh;
          }
          
          .nav-buttons {
          	 position: fixed;
          	 top: 0px;
          	 margin-top: 100px;
          	 margin-left: 33px;
          	 height: 400px;
          	 display: grid;
          	 place-items: center;
          }
          
          .decor_mobile {
            display: none;
          }
          
        .fullscreen-button {
          position: fixed;
          top: 20px;
          left: 20px;
          width: 58px;
          height: 58px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          z-index: 1000;
          transition: transform 0.2s;
        }

        .settings-button {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 58px;
          height: 58px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          z-index: 1000;
          transition: transform 0.2s;
        }
        }
        
        #textbox::-webkit-resizer {
            background-color: #4E4A42;
            border-radius: 4px;
            border: 2px solid #bababa;
        }
        
        hr {
          color: #2d2425;
          border-style: none;
          text-align: center;
          position: relative;
          /* margin-top: -3px; */
          margin-bottom: -15px;
          animation: bounce 0.5s ease-in-out infinite alternate;
        }
      
        @keyframes bounce {
            0% {
                transform: translateY(-3px);
            }
            90% {
                transform: translateY(3px);
            }
            100% {
                transform: translateY(3px);
            }
        }
      
        hr:before {
          content: "_▼_▼_▼_";
          font-size: 12px;
          font-weight: bolder;
          margin-left: auto;
          margin-right: auto;
        }
      
        hr.stop-animation {
            animation: none;
            transform: translateY(0);
        }
        
        #debug, #debug h3, #debug pre, .skip-indicator {
        /*    position: fixed;*/
        /*    bottom: 10px;*/
        /*    right: 10px;*/
        /*    background-color: #333;*/
        /*    color: #fff;*/
        /*    padding: 10px;*/
        /*    border-radius: 5px;*/
        /*    font-size: 12px;*/
        /*    max-height: 200px;*/
        /*    overflow-y: auto;*/
        /*    border: 1px solid #666;*/
        /*    width: 500px;*/
            display: none;
        }
        
        /*#debug h3 {*/
        /*    margin: 0 0 10px 0;*/
        /*    color: #00ff00;*/
        /*    font-size: 14px;*/
        /*    display: none;*/
        /*}*/
        
        /*#debug pre {*/
        /*    margin: 0;*/
        /*    white-space: pre-wrap;*/
        /*    word-break: break-all;*/
        /*    font-size: 11px;*/
        /*    display: none;*/
        /*}*/
        
        /*.skip-indicator {*/
        /*    position: fixed;*/
        /*    top: 10px;*/
        /*    right: 10px;*/
        /*    color: #ffaa00;*/
        /*    font-size: 14px;*/
        /*}*/
        

        button {
    	    background: none;
		    border: none;
		    padding: 0;
/*             background-color: #555;
color: #fff;
border: 1px solid #777;
padding: 5px 10px;
margin: 2px;
cursor: pointer;
font-size: 12px; */
        }
        
        .nav-button:hover, .nav-button:active {
            transform: scale(1.1);
        }
        
        #dropZone {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 200px;
            /*border-color: #2d2425;*/
        	/*border: double 16px;*/
            /*background-color: #827a6e;*/
            background: #827a6e;
            border: double 8px #000;
            border-radius: 12px;
            padding: 20px;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            color: #2d2425;
            font-size: 18px;
        }
        
        #dropZone.dragover {
            border-color: #2d2425;
            background-color: rgba(0, 0, 0, 0.95);
        }
        
        .file-input {
            display: none;
        }
        
        .vars-display {
            position: fixed;
            top: 60px;
            right: 10px;
            background-color: #333;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            color: #ffaa00;
            border: 1px solid #666;
            max-width: 300px;
            max-height: 400px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
        }
        
        .vars-display h4 {
            margin: 0 0 10px 0;
            color: #00ff00;
            text-align: center;
        }
        
        .var-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #555;
        }
        
        .var-name {
            color: #ffaa00;
        }
        
        .var-value {
            color: #00ff00;
        }
        
        .measure-span {
          position: absolute;
          display: none;
          white-space: pre;
          font-size: 24px;
          font-family: "WDXL Lubrifont TC";
          padding: 0;
        }

        .confirm-button {
          background: transparent;
          border: 2px solid #4E4A42;
          cursor: pointer;
          color: inherit;
          flex-shrink: 0;
        }

        .confirm-button:hover, .confirm-button:active {
          background: #4E4A42;
          color: #827a6e;
        }

        /*.fullscreen-button {
          position: fixed;
          top: 20px;
          left: 20px;
          width: 58px;
          height: 58px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          z-index: 1000;
          transition: transform 0.2s;
        }*/

        .fullscreen-button:hover, .fullscreen-button:active {
          transform: scale(1.1);
        }

        /*.fullscreen-button:active {*/
        /*  transform: scale(0.95);*/
        /*}*/

        /*.settings-button {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 58px;
          height: 58px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          z-index: 1000;
          transition: transform 0.2s;
        }*/

        .settings-button:hover {
          transform: scale(1.1);
        }

        .settings-button:active {
          transform: scale(0.95);
        }

        .settings-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #827a6e;
            border: double 8px #000;
            border-radius: 12px;
            padding: 20px;
            z-index: 1002;
            min-width: 300px;
            display: none;
            color: #2d2425;
        }

        .settings-modal h3 {
            margin-top: 0;
            text-align: center;
            border-bottom: 1px solid #000;
            padding-bottom: 10px;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1001;
            display: none;
        }

        .speed-control, .volume-control {
            margin: 20px 0;
        }

        .speed-control label, .volume-control label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .speed-slider, .volume-slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: #4E4A42;
            border-radius: 4px;
            outline: none;
        }

        .speed-slider::-webkit-slider-thumb, .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2d2425;
            cursor: pointer;
            border: 2px solid #827a6e;
        }

        .speed-slider::-moz-range-thumb, .volume-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2d2425;
            cursor: pointer;
            border: 2px solid #827a6e;
        }

        .speed-value, .volume-value {
            margin-top: 10px;
            text-align: center;
            font-size: 14px;
            color: #2d2425;
        }

        .modal-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .modal-button {
            background: #4E4A42;
            color: #827a6e;
            border: 2px solid #2d2425;
            padding: 8px 16px;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            border-radius: 4px;
            flex: 1;
            margin: 0 5px;
        }

        .modal-button:hover, .modal-button:active {
            background: #2d2425;
            color: #827a6e;
        }
        .modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            color: #2d2425;
            font-size: 24px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }
        
        .modal-close:hover, .modal-close:active {
            background-color: #4E4A42;
            color: #827a6e;
        }
        
        /* Оверлей для модальных окон */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1002;
            display: none;
        }
        
		/* Стили для вкладок */
		.tabs {
		    display: flex;
		    /* gap: 10px; */
		    margin-bottom: 20px;
		    border-bottom: 2px solid #4E4A42;
		    /* padding-bottom: 10px; */
		    flex-wrap: wrap;
		}
		
		.tab-button {
		    background: #4E4A42;
		    border: 2px solid #4E4A42;
		    border-bottom: 0;
		    color: #2d2425;
		    padding: 4px 8px;
		    cursor: pointer;
		    font-family: inherit;
		    font-size: 16px;
		    border-radius: 6px 6px 0px 0px;
		    transition: all 0.2s;
		    min-width: 60px;
		    text-align: center;
		}
		
		.tab-button:hover, .tab-button:active {
		    background: #4E4A42;
		    color: #827a6e;
		}
		
		.tab-button.active {
		    background: #827a6e;
		    color: #2d2425;
		    border-color: #4E4A42;
		}
		
		.tab-content {
		    display: none;
		}
		
		.tab-content.active {
		    display: block;
		}

        
        /* Скрытые элементы */
        .hidden {
            display: none !important;
        }
        
        /* Статус и дебаг */
        /*.status {
            position: fixed;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #827a6e;
            color: #2d2425;
            padding: 10px 20px;
            border-radius: 0px 0px 8px 8px;
            border: double 4px #4E4A42;
            display: none;
            z-index: 1000;
        }*/

        .status {
            white-space: nowrap;
            position: fixed;
            top: 0px;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            background-color: #827a6e;
            color: #2d2425;
            padding: 10px 20px;
            border-radius: 0px 0px 8px 8px;
            border: double 4px #4E4A42;
            z-index: 1000;
            animation: slideDown 3s ease forwards;
            display: none;
        }
        
        @keyframes slideDown {
            0% {
                transform: translateX(-50%) translateY(-100%);
            }
            10% {
                transform: translateX(-50%) translateY(0);
            }
            90% {
                transform: translateX(-50%) translateY(0);
            }
            100% {
                transform: translateX(-50%) translateY(-100%);
            }
        }

        /* Кнопки выбора - обновленный стиль */
        .choice-buttons {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 591px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 15px;
        }
        
        .choice-button {
            background-color: #827a6e;
            color: #2d2425;
            border: 2px solid #4E4A42;
            padding: 12px 15px;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s;
            font-size: 18px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
        }
        
        .choice-button:hover, .choice-button:active {
            background-color: #4E4A42;
            color: #827a6e;
            border-color: #2d2425;
        }
        
        .choice-button::before {
            content: '';
            width: 18px;
            height: 18px;
            border: 2px solid #2d2425;
            border-radius: 4px;
            display: inline-block;
            flex-shrink: 0;
            background-color: transparent;
            transition: all 0.2s;
        }
        
        .choice-button:hover::before, .choice-button:active::before {
            background-color: #2d2425;
        }
        
        /* Модальные окна персонажей и локаций */
        .char-modal, .loc-modal {
            position: fixed;
            top: 40vh;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #827a6e;
            border: double 8px #000;
            border-radius: 18px;
            padding: 20px;
            z-index: 1003;
            min-width: 300px;
            max-width: 500px;
            display: none;
            color: #2d2425;
        }
        
        .char-header, .loc-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            border-bottom: 2px solid #4E4A42;
            padding-bottom: 15px;
        }
        
        .char-portrait, .loc-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            border: 2px solid #4E4A42;
            object-fit: cover;
        }
        
        .char-name, .loc-name {
            font-size: 46px;
            font-weight: bold;
        }
        
        .char-status {
            font-size: 14px;
            color: #4E4A42;
            margin-top: 5px;
        }
        
/*         .char-status.new {
    color: #ffaa00;
    animation: pulse 2s infinite;
} */
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .char-info, .loc-info {
            line-height: 1.5;
            /* margin-bottom: 20px; */
            font-size: 21px;
        }
        
        .char-met {
            background-color: #4E4A42;
            color: #827a6e;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            display: inline-block;
        }
        
        /* Индикатор новых записей */
        .new-entry-indicator {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 12px;
            height: 12px;
            background-color: #ac8a00;/*#5a4800; /*#d3ff00;/*#ffaa00;*/
            border-radius: 50%;
            animation: pulse 1s infinite;
        }