/*!
 * Copyright (C) 2026 Юрий Морозов (yurafrozen@gmail.com)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License 
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 */

body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   background:
      radial-gradient(circle at 15% 15%, rgba(180, 205, 255, 0.22), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(255, 220, 170, 0.18), transparent 40%),
      #4f5763;
}

.main {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

.sim-scroll {
   width: 100vw;
   height: calc(100vh - 60px);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
   display: flex;
   align-items: center;
}

.sim {
   display: block;
   margin: 0 auto;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}

/* Индикатор положения камеры */
.camera-indicator-container {
   width: 100vw;
   height: 4px;
   background: rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   overflow: hidden;
}

.camera-indicator {
   width: 100%;
   height: 100%;
   position: relative;
   background: rgba(255, 255, 255, 0.08);
}

.camera-thumb {
   position: absolute;
   height: 100%;
   background: linear-gradient(90deg, rgba(100, 180, 255, 0.6), rgba(150, 200, 255, 0.8));
   border-radius: 2px;
   min-width: 20px;
   pointer-events: none;
   box-shadow: 0 0 8px rgba(100, 180, 255, 0.5);
   transition: left 0.05s ease-out;
}

.controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   width: 100vw;
   height: 56px;
   padding: 0 16px;
   color: #e8edf3;
   font-size: 13px;
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: 0.01em;
   box-sizing: border-box;
}

.controls>* {
   flex-shrink: 0;
}

/* Круглая кнопка паузы */
.pause-btn {
   width: 44px;
   height: 44px;
   border: none;
   border-radius: 50%;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
   color: #f6f8fb;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: all 0.2s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
}

.pause-btn:hover {
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pause-btn:active {
   transform: scale(0.98);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pause-btn .icon {
   width: 20px;
   height: 20px;
   fill: currentColor;
   position: absolute;
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.pause-btn .icon-play {
   opacity: 1;
   transform: scale(1);
}

.pause-btn .icon-pause {
   opacity: 0;
   transform: scale(0.8);
}

.pause-btn.paused .icon-play {
   opacity: 0;
   transform: scale(0.8);
}

.pause-btn.paused .icon-pause {
   opacity: 1;
   transform: scale(1);
}

/* Контейнер скорости */
.speed-control {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
}

.speed-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   gap: 8px;
}

.speed-control label {
   color: #b8c9d8;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: 0.05em;
}

.slider-wrapper {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
}

/* Стилизованный слайдер скорости */
.speed-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 160px;
   height: 10px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 5px;
   outline: none;
   cursor: pointer;
   position: relative;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
}

.speed-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: linear-gradient(145deg, #e8edf3, #b8c9d8);
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.5);
   transition: box-shadow 0.15s ease;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   margin-top: 0;
}

.speed-slider::-webkit-slider-thumb:active {
   transform: scale(1.05);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.speed-slider::-moz-range-thumb {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: linear-gradient(145deg, #e8edf3, #b8c9d8);
   cursor: pointer;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
   transition: box-shadow 0.15s ease;
   box-sizing: border-box;
}

/* Заливка прогресса слайдера */
.speed-slider::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   background: transparent;
   border-radius: 5px;
}

.speed-slider::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   background: transparent;
   border-radius: 5px;
}

.speed-value {
   color: #e8edf3;
   font-weight: 600;
   font-size: 13px;
   text-align: right;
   font-variant-numeric: tabular-nums;
}

/* Статистика */
.stats {
   display: flex;
   gap: 16px;
}

.stat {
   width: auto;
   min-width: 70px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: right;
}

.stat-label {
   font-size: 11px;
   color: #b8c9d8;
   line-height: 1.3;
   text-transform: uppercase;
   white-space: nowrap;
}

.stat>span:not(.stat-label) {
   color: #ffffff;
   font-weight: 600;
   font-size: 14px;
   line-height: 1.2;
   font-variant-numeric: tabular-nums;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}