min-height: 22px; font-size: 0.8em; padding: 0; } #seek { min-width: 18px; max-width: 94vw; flex: 2 1 40px; margin: 0 1px; height: 3px; } #volume { min-width: 60px; max-width: 120px; width: 90px; } #currentTime, #duration { min-width: 16px; font-size: 0.78em; } #fullscreen { display: inline-flex !important; margin-right: 4px; } @media (max-width: 600px) { #fullscreen { margin-right: 3vw; } } } .error { color: #fff; background: rgba(220, 38, 38, 0.95); border-radius: 12px; padding: 24px 32px; margin-top: 32px; font-size: 1.3em; box-shadow: 0 2px 8px rgba(220,38,38,0.2); max-width: 80vw; text-align: center; font-family: 'Segoe UI', Arial, sans-serif; } @media (max-width: 600px) { .player-container { padding: 6px; min-width: unset; } video { width: 98vw; height: 56vw; min-width: 160px; min-height: 90px; } .error { font-size: 1em; padding: 14px 12px; } } .audio-overlay { position: absolute; top: 14px; left: 14px; background: transparent; border-radius: 8px; box-shadow: none; display: flex; align-items: flex-start; justify-content: flex-start; z-index: 100; flex-direction: column; pointer-events: auto; padding: 0; transition: opacity 0.4s; max-width: none; min-width: 0; opacity: 1; } .audio-overlay button { font-size: 1em; padding: 6px 14px; background: #3fa9f5; color: #fff; border: none; border-radius: 16px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px #0004; transition: background 0.2s; outline: none; min-width: 0; min-height: 0; } .audio-overlay button:active, .audio-overlay button:focus { background: #1e88e5; } @media (max-width: 600px) { .audio-overlay { padding: 18px 8vw; min-width: 0; max-width: 98vw; border-radius: 16px; } .audio-overlay button { font-size: 1em; padding: 14px 8vw; border-radius: 12px; } }