* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Глобальные утилиты */
:root {
    --bg-color: #0D0E12;
    --text-color: #EAEAEA;
    --accent-color: #EAEAEA;
    --secondary-bg: #0D0E12;
    --border-color: #EAEAEA;
    --base-width: 391px;
    --base-height: 850px;
    --player-aspect-ratio: 393 / 636;
    --vh: 1vh;
}

/* Общие стили для предотвращения выделения */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Greta Mono Font */
@font-face {
    font-family: 'Greta Mono';
    src: local('Greta Mono'),
         local('GretaMonoxsTRIAL-Semibold'),
         url('/fonts/GretaMonoxsTRIAL-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Общие стили для user-select */
html,
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* Базовые стили HTML */
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
}

/* Базовые стили Body */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
    color: var(--text-color);
    padding: 0;
    margin: 0;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100dvh;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100vw;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

/* Telegram WebView и Mobile - общие стили */
body.telegram-webview,
html.telegram-webview,
html.telegram-mobile,
body.telegram-mobile {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
}

/* Telegram Desktop */
html.telegram-desktop,
body.telegram-desktop {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

html.telegram-desktop .player {
    max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
    max-width: min(391px, calc(100vh * 0.46));
}

/* Player Container */
.player {
    width: 100%;
    max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
    max-width: min(391px, calc(100dvh * 0.46));
    max-width: min(391px, calc(100vh * 0.46));
    aspect-ratio: var(--player-aspect-ratio);
    background: var(--bg-color);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
    margin-top: env(safe-area-inset-top, 0);
    margin-bottom: env(safe-area-inset-bottom, 0);
    margin-left: auto;
    margin-right: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* BodyShape Container */
.body-shape-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 4vh);
    z-index: 10;
    pointer-events: none;
}

.body-shape-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    pointer-events: none;
}

/* Main Content Container */
.player-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* Header Section */
.player-header {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    padding-top: 3vh;
    padding-right: 14%;
    flex-shrink: 0;
    z-index: 0;
    min-width: 0;
    max-width: 100%;
}

.light-indicator {
    width: 24.04%;
    aspect-ratio: 94 / 34;
    flex-shrink: 0;
    transition: filter 0.3s ease-in;
}

.light-indicator.active {
    filter: drop-shadow(0 -3px 5px rgba(255, 133, 150, 1));
}

.light-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Logo Section */
.player-logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5%;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}

.logo {
    width: 70.59%;
    aspect-ratio: 276 / 167;
    flex-shrink: 0;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Screen Container Section */
.player-screen-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 2% 4%;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}

.screen-container {
    width: 73.15%;
    aspect-ratio: 286 / 58;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
}

.screen-container-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}

.episode-text {
    position: relative;
    z-index: 1;
    font-family: 'Greta Mono', 'Roboto Mono', 'Roboto', monospace;
    font-size: var(--episode-text-size, clamp(20px, 7.93%, 31px));
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: var(--episode-letter-spacing, 0.09em);
    white-space: nowrap;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* Navigation Buttons Section */
.player-nav-section {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding: 2% 6%;
    flex-shrink: 0;
    gap: 3.12%;
    min-width: 0;
    max-width: 100%;
}

.nav-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-btn:active {
    opacity: 0.8;
}

.nav-btn .btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.nav-btn .btn-active {
    display: none;
}

.nav-btn.active .btn-normal {
    display: none;
}

.nav-btn.active .btn-active {
    display: block !important;
}

.back-btn {
    width: 32.48%;
    aspect-ratio: 127 / 57;
}

.forward-btn {
    width: 32.48%;
    aspect-ratio: 127 / 54;
}

/* Slider Sections */
.player-slider-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    max-width: 100%;
    padding: 5% 16%;
}

/* Slider Components */
.slider-container {
    width: 100%;
    aspect-ratio: 305.715 / 25.475;
    position: relative;
    touch-action: pan-x;
}

.slider-range {
    position: absolute;
    left: 0;
    top: 45.48%;
    width: 100%;
    height: 28.04%;
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
}

.range-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.slider-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    background: transparent;
    color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-x;
}

.slider-input::-webkit-slider-runnable-track,
.slider-input::-moz-range-track {
    background: transparent;
    border: none;
}

.slider-input::-webkit-slider-thumb,
.slider-input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8.15%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 11;
    touch-action: pan-x;
}

.slider-handle {
    position: absolute;
    left: 3.80%;
    top: 0;
    width: 8.15%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
}

.slider-handle-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.slider-container .slider-active {
    display: none;
}

.slider-container.active .slider-normal {
    display: none;
}

.slider-container.active .slider-active {
    display: block !important;
}

/* Play Button Section */
.player-play-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 4%;
    flex-shrink: 0;
    flex-grow: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}

.play-btn {
    width: 84.65%;
    aspect-ratio: 331 / 93.111;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.play-btn:active {
    opacity: 0.8;
}

.play-btn-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.play-btn:not(.playing) .play-btn-normal {
    display: block;
}

.play-btn:not(.playing) .play-btn-active,
.play-btn:not(.playing) .pause-btn-normal,
.play-btn:not(.playing) .pause-btn-active {
    display: none !important;
}

.play-btn.playing .pause-btn-normal {
    display: block !important;
}

.play-btn.playing .pause-btn-active,
.play-btn.playing .play-btn-normal,
.play-btn.playing .play-btn-active {
    display: none !important;
}

.play-btn.active:not(.playing) .play-btn-normal {
    display: none !important;
}

.play-btn.active:not(.playing) .play-btn-active {
    display: block !important;
}

.play-btn.active.playing .pause-btn-normal {
    display: none !important;
}

.play-btn.active.playing .pause-btn-active {
    display: block !important;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    .player {
        aspect-ratio: var(--player-aspect-ratio);
        min-width: 0;
        overflow: hidden;
    }
    
    .player-content,
    .player-header,
    .player-logo-section,
    .player-screen-section,
    .player-nav-section,
    .player-slider-section,
    .player-play-section {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    .light-indicator {
        width: 24.04%;
        flex-shrink: 0;
    }
    
    .logo {
        width: 70.59%;
        flex-shrink: 0;
    }
    
    .screen-container {
        flex-shrink: 0;
    }
    
    .episode-text {
        font-size: var(--episode-text-size, clamp(18px, 7.93%, 31px));
        letter-spacing: var(--episode-letter-spacing, 0.09em);
    }
    
    .player-nav-section {
        gap: clamp(1%, 3.12%, 5%);
        flex-wrap: nowrap;
    }
    
    .nav-btn {
        max-width: 50%;
        flex-shrink: 0;
    }
    
    .back-btn,
    .forward-btn {
        max-width: 48%;
        flex-shrink: 0;
    }
    
    .slider-container {
        flex-shrink: 0;
    }
    
    .play-btn {
        flex-shrink: 0;
    }
    
    .player > *,
    .body-shape-container {
        max-width: 100%;
    }
}

@media (max-width: 300px) {
    .player {
        min-width: 280px;
    }
    
    .episode-text {
        font-size: var(--episode-text-size, clamp(12px, 7.93%, 20px));
        letter-spacing: var(--episode-letter-spacing, 0.09em);
    }
    
    .player-nav-section {
        gap: 2%;
    }
    
    .back-btn,
    .forward-btn {
        max-width: 45%;
    }
}

/* Общие стили для body height в media queries */
@media (min-height: 2000px) {
    .player {
        max-width: min(391px, calc(100vh * 0.46));
        max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
        max-width: min(391px, calc(100dvh * 0.46));
    }
}

@media (max-height: 900px) and (orientation: portrait) {
    body {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: 100svh;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100svh;
    }
    
    .player {
        max-width: min(391px, calc(100vh * 0.46));
        max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
        max-width: min(391px, calc(100svh * 0.46));
        max-width: min(391px, calc(100dvh * 0.46));
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    body {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: 100dvh;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
    }
    
    .player {
        max-width: min(391px, calc(100vh * 0.46));
        max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
        max-width: min(391px, calc(100dvh * 0.46));
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    body {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: 100dvh;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
    }
    
    .player {
        max-width: min(391px, calc(100vh * 0.46));
        max-width: min(391px, calc(var(--vh, 1vh) * 100 * 0.46));
        max-width: min(391px, calc(100dvh * 0.46));
    }
}